HTML reference

The canonical HTML form of every document model type: tag, how Format identifies it, fields, and placement.

How elements are classified

When Format parses your HTML, every model type is identified by its data-type attribute. A <template data-type="layout"> is a Layout, a <template data-type="flow"> is a Flow, a <template data-type="stream"> is a Stream, a <div data-type="frame"> is a Frame, and the shared <template> markers carry the data-type that names them.

Placement does not change classification: a <template data-type="layout"> is a Layout wherever it sits in your document, and a generic <template> with no matching data-type stays plain markup.

A hand-authored document must also set data-engine on its root <template data-type="document">, naming the engine version Format renders it on. See Document versions.

When the SDK and the schema disagree

The React and Vue SDKs sometimes narrow the accepted types. Two examples:

• The React <Layout width={...} /> prop takes a number; the underlying data-width is a CSS px-length string, and the SDK adds the px suffix.
• A React <Flow splitGranularity="sentence"> prop takes a string literal type; the underlying data-split-granularity is the same string with the same value.

The TypeScript definitions for @format.dev/react and @format.dev/vue are authoritative for the component props. The schema here is authoritative for the underlying HTML form. When your tool emits the HTML directly (LLM document generators, server-side template engines), match the schema; when you work through the SDK, write against the TypeScript definitions.

Validating against the schema

The full schema lives at model.schema.json in the @format/engine package. It uses JSON Schema draft 2020-12. You can validate rendered HTML against it programmatically, which catches malformed documents in CI before they reach Format.

Related

Document model · Errors · Pagination

Types