Every page on a Root.js site is a stack of templates: small, self-contained modules that pair a Preact component with a CMS schema. Developers decide what a module can do. Editors decide where it goes and what it says.

Start with the component

Write the component the way you would anywhere else, then describe its props as fields. The CMS generates the editing UI, validation and TypeScript types from that single schema file.

• One folder per template: schema, presets and component side by side

• Types are generated with pnpm types, so props never drift

• Presets give editors a head start with realistic content

Ship it to editors

New folders in templates/ are picked up automatically. There is no registry to update and no deploy step between a developer merging a module and an editor using it.

export default schema.define({  name: 'TemplateQuote',  fields: [    schema.string({id: 'quote', translate: true}),    schema.string({id: 'author'}),  ],});

That is the whole workflow. Read on for tips on naming fields, choosing defaults and writing presets that sell the module.