Dollie Editor SDK guide

Generate Editable Fields

Derive editor fields from component props and JSDoc.

Field definitions should describe the same contract as your React props. The dollie-editor fields command derives them from TypeScript instead of asking you to maintain a second copy by hand.

Inspect one component

npx dollie-editor fields src/components/hero.tsx --export Hero

The command prints the generated description and BuilderField[] as JSON.

Generate a catalog module

npx dollie-editor fields \
  --dir src/components \
  --out src/catalog/fields.generated.ts

Catalog mode scans the registered sections under the directory and writes a deterministic TypeScript module.

Commit the generated file so builds and coding agents see the same contract. Regenerate it whenever the component props change.

Do not edit generated output

Some authoring details are not fully expressible in a TypeScript type, including:

  • whether text should be multiline;
  • whether a string is a URL;
  • runtime options for a select field;
  • conditional field visibility.

Keep those choices in a hand-written overrides module and merge them with mergeFieldOverrides. The generated file should remain replaceable.

Use JSDoc as agent context

Write a short component-level description that explains when the section should be used. Document props in terms an editor user or Copilot can act on.

Good guidance states:

  • the section's purpose;
  • the kind of content it expects;
  • important limits;
  • when another section is a better choice.

Avoid internal implementation history. The same description may appear in generated metadata and AI context.

Review skipped props

The generator warns when a prop cannot safely become an editable field. Treat that as a boundary decision:

  • keep the prop host-controlled;
  • reshape it into structured serializable data; or
  • provide a deliberate override.

Do not expose functions, arbitrary JSX, secrets, or unrestricted objects as page content.