Pages and Sections

A Page is data. A Section is a React component the Page may use.

This separation lets the same Page move through the editor, storage, validation, Copilot, and published renderer without becoming generated application code.

PageConfig

PageConfig is the stored wire format:

type PageConfig = {
    _version?: number;
    sections: PageSection[];
};

A minimal Page contains one Section:

{
  "sections": [
    {
      "component": "free-hero-split"
    }
  ]
}

The current wire-format version is 1. A missing _version also means version 1.

PageSection

Each Section reference contains:

• component — the Catalog-prefixed Section id;
• props — optional JSON-serializable values;
• theme — optional dark theme framing;
• border — optional border around the Section;
• divider — optional divider below the Section;
• className — optional host-provided classes on the Section frame.

{
  "component": "academy-course-hero",
  "props": {
    "headline": "Build a repeatable coaching practice",
    "cta": {
      "label": "Join the course",
      "href": "/checkout"
    }
  }
}

The stored component is not a file path. It is the stable id registered by the Catalog.

Sections are host-owned React components

A Section can be as simple or sophisticated as your application needs:

• a marketing hero;
• a pricing table;
• a course curriculum;
• a product comparison;
• a server-status summary;
• a customer-specific call to action.

Dollie Editor does not require a universal component API. When you want props to be authorable, they must be JSON-serializable and described by Fields.

Fixed Sections are still composable

A component does not need editable props before it can join a Catalog.

Register a Section with authorable: false when its content and design should remain fixed. The Section still appears in the library, renders on a Page, and can be inserted, reordered, duplicated, or removed when the active editor capabilities allow those actions. The inspector labels it as fixed and does not expose content controls.

Fixed Sections are also visible to a Copilot as insert-only building blocks that accept no props.

This creates a useful adoption path for existing shadcn-style components and internal design systems: register the component first, then expose serializable props and Fields later when Editor users or a Copilot need to customize its content.

Defaults complete the design

Optional props should have real defaults in the component.

An empty Section reference:

{ "component": "free-feature-grid" }

should render a complete, designed preview. Editor users can insert it without filling a form before seeing the result.

This zero-props contract also helps Catalog galleries, templates, and Copilot proposals stay concise.

Props replace defaults shallowly

React receives component defaults followed by stored props. Object and array props are replaced as complete values, not deep-merged.

If the component default is:

{ label: 'Start free', href: '/signup' }

this stored value is incomplete:

{ "label": "Book a demo" }

It replaces the whole object and loses href. Store the complete object whenever you change one of its keys.

Pages are not bespoke JSX

If a Page needs a layout the Catalog cannot express, create a reusable Section. Do not hide one-off JSX behind a special route.

Keeping Pages as PageConfig data is what makes them:

• visually editable;
• validatable;
• Copilot-authorable;
• portable;
• safe to store.

Related

• Fields, Slots, and Elements
• Guardrails and Validation