Content
Long-form rich text (articles, legal pages, docs) with an optional title and sticky sidebar layout.
Guide
Modeling content with templates
6 min read · Updated March 4, 2026
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.
Why we built Root.js
Most content platforms force a choice: a friendly editor with a rigid front end, or a flexible framework that leaves editors filing tickets. We wanted both, so we built the CMS directly into the framework. Schemas live next to components, previews render the real site, and publishing is instant.
“The best CMS is the one your editors forget they are using.”
Today, teams use it to run marketing sites, documentation and multi-language campaigns from a single codebase.