A page that is stored as data
No markup is saved anywhere. This page is a tree of typed nodes in one JSON record — the two switches above re-render it from data already in the page.
Why a node tree
Semantic props
A record stores tone, size and alignment — never a class name. Restyle the whole platform by editing one renderer.
Per-field locales
Structure exists once; only the text is translated. Switching language cannot break the layout, because the layout is not duplicated.
Widgets on demand
One interactive node opts the page into a single shared runtime. A document of pure content still ships no JavaScript at all.
Interactive nodes
Tabs, galleries, theme and language switches are nodes like any other — validated by the same registry that renders them.
section · container · grid · stack
Four nodes arrange every page in this vocabulary. Each takes tokens, not measurements, so nothing can be off-grid.
heading · text · image · link · badge
The content vocabulary. Every text field is localised, and every URL is checked before it is stored.
tabs · gallery · toggles · contact
You are using one now. There is also responsiveVideo, which swaps its source at a breakpoint.
Gallery
Images are referenced by URL, never imported — an author with no repository access can still point at their own CDN.
The feature grid above, as stored
Abridged. The rawHtml node below is the escape hatch, and the only content that is not produced by a component — so it is sanitised on every load.
{
"type": "grid",
"props": { "cols": 3, "gap": "lg" },
"children": [
{ "type": "stack", "children": [
{ "type": "badge", "props": { "label": { "en": "01", "ar": "٠١" } } },
{ "type": "heading", "props": { "level": 3, "text": { … } } },
{ "type": "text", "props": { "tone": "muted", "text": { … } } }
] }
]
}