Layout Components

Define the structure and editable properties for your content types

Layout components define the overall structure of a content type. They determine what properties content teams can fill in (title, subtitle, hero image) and how those properties are arranged on screen.

Every content type has exactly one layout component. When content teams create content, they’re filling in the properties you define in the layout.

How layouts work

A layout component does two things:

1. Defines properties — the editable fields that appear in the content builder (title, author, publish date, etc.)
2. Renders the structure — how those properties are displayed, along with slots where view components can be added

When you create a content type, you select a layout component. That layout determines what the content editing experience looks like.

Create a layout component

Create a new component and structure it as a layout. The key difference from a view component is that layouts typically:

• Accept properties that become content fields
• Include a slot for child components (the blocks content teams add)
• Render a full-page structure rather than a single UI element

const metadata = {
  title: "ArticleLayout"
}

const properties = {
  title: {
    type: "string",
    title: "Title",
    default: ""
  },
  subtitle: {
    type: "string",
    title: "Subtitle"
  },
  heroImage: {
    type: "image",
    title: "Hero Image"
  },
  author: {
    type: "string",
    title: "Author"
  },
  publishDate: {
    type: "date",
    title: "Publish Date"
  }
} satisfies ComponentProperties;

const body = (props: InferProps<typeof properties>, children: Component[]): Component => {
  return ScrollView([
    VStack({ spacing: 24 }, [
      // Hero section
      Image(props.heroImage)
        .frame({ height: 300 })
        .clipped(),

      // Header
      VStack({ spacing: 8, alignment: "leading" }, [
        Text(props.title)
          .font("largeTitle")
          .bold(),
        Text(props.subtitle)
          .font("title3")
          .foregroundStyle(Color("secondary")),
        Text(`By ${props.author}`)
          .font("caption")
      ])
      .padding("horizontal", 16),

      // Content blocks (added by content teams)
      VStack({ spacing: 16 }, children)
        .padding("horizontal", 16)
    ])
  ])
}

export default defineComponent({
  metadata,
  properties,
  body
});

Properties become content fields

Every property you define in the layout appears as a field in the content builder. Content teams fill in these values when creating content.

Property type	Content builder field
string	Text input
text	Multi-line text area
image	Image picker
date	Date picker
boolean	Toggle switch
number	Number input
enum	Dropdown selector

The children parameter

The children parameter contains the component blocks that content teams add. Your layout decides where these appear:

const body = (props, children: Component[]): Component => {
  return VStack([
    // Fixed header content
    Text(props.title).font("title"),

    // Dynamic blocks from content teams
    VStack({ spacing: 16 }, children),

    // Fixed footer content
    Text("© 2024")
  ])
}

Content teams can add any view component that’s allowed by the content type. They see these as blocks they can add, reorder, and configure.

Multiple content sections

Some layouts need multiple distinct areas for components. For example, a quiz might have separate sections for questions and answers.

Component groups are configured in the Types tab when setting up your content type — not in the layout code. When creating or editing a content type, you can organize allowed components into named groups. Each group appears as a separate section in the content builder where content teams can add blocks.

Connect layout to content type

Once you’ve created a layout component, connect it to a content type:

1. Navigate to Types in your project
2. Create a new content type or edit an existing one
3. Select your layout component from the Layout dropdown
4. Add view components to the Allowed Components list

Content teams can then create content using this type, filling in the properties you defined and adding components you allowed.

Layout design tips

Keep layouts focused. Each layout should serve a specific content purpose — articles, product pages, FAQs. Don’t try to make one layout work for everything.

Name properties clearly. Content teams see these names in the builder. “Hero Image” is clearer than “img1”.

Consider mobile first. Your layout renders on phones, tablets, and desktop. Use flexible sizing and test across screen sizes.

Use sensible defaults. Set default values for optional properties so content looks reasonable even when fields are left empty.

What’s next

Content Types

Learn how to create content types that use your layout.

Components

Build the view components that content teams add to layouts.