Use the components and pages you already own
Register complete components as fixed Sections, turn existing pages into PageConfig, and expose editable props only where they help. You keep the source and the design system.
Start from the layer you already have
If you have a component, register it as a fixed Section first. It becomes available to the editor immediately: users can insert it, move it, duplicate it, and remove it while its internal design stays locked.
If you have a complete page, identify its reusable Sections and represent their order as PageConfig. Each Section keeps rendering the React component from your application; the page definition stores only component IDs and serializable props.
When a value should be editable, lift that value into a prop and describe it with a field definition. You can expose content gradually instead of redesigning the whole component around a builder.
Three practical conversion paths
Existing component
Register it as a fixed Section
Keep every detail inside the component and add it to your catalog with no authorable fields. It remains visually locked but becomes composable inside pages.
- No prop conversion required
- Movable, duplicable, and removable
- Useful for complex or tightly branded UI
Existing page
Represent the layout as PageConfig
Break the page at meaningful Section boundaries, register each component, and store the page as an ordered list of Section IDs and props.
- Reuse the page structure you already designed
- Render with the same React components
- Save variations without duplicating JSX pages
Authorable component
Expose only the content that should change
Move selected values into serializable props, give them useful defaults, and define fields for the editor and Copilot. Layout remains in code.
- Typed controls for structured content
- Complete zero-prop defaults
- The same contract guides people and AI
Start with the components you already own
You do not need to rewrite a component before it becomes useful. Register it as a fixed Section first, then expose structured props only where your editor users or Copilot need control.
- 01
Install the source
Add a block from shadcn, a community registry, or your own component library. The React source stays in your application and remains yours to change.
- 02
Register it as a Section
Give the component a stable Catalog id. A component with no editable props can ship immediately as a fixed Section.
- 03
Compose it visually
Fixed Sections can still be inserted, reordered, duplicated, and removed. Your component keeps complete control of its content and design.
- 04
Expose the useful props
When you want content editing, lift deliberate choices into serializable props. Keep layout, spacing, and visual constraints inside the component.
- 05
Generate the Fields
Dollie Editor SDK turns supported TypeScript props into inspector Fields and registry metadata, with targeted overrides for the details types cannot express.
- 06
Add Copilot guidance
Authorable Sections become structured vocabulary for your Copilot. Fixed Sections remain available as insert-only building blocks.
- 07
Verify the contract
Check the zero-props preview, edit every exposed Field, validate the resulting PageConfig, and render it through the same Catalog.
Fixed does not mean unusable. It means the Section accepts no content props: the component remains a movable, reusable composition unit while its internals stay locked.
Try the model before converting your own UI
Use the Core catalog in the playground to see how fixed layout, structured fields, and PageConfig work together.