CMS
A WYSIWYG page editor in React on a Laravel content backend: the Stages page document, the two renderers that must agree, where edits are validated, and how agents edit pages.
0/4 lessons
0%
Stages: the page as data
~8 min
A fancy-cms page is one JSON document in the Stages model: a vertical stack of full-bleed sections, with positioned layers inside each. Every node lives in a flat map keyed by id, so an edit targets a stable identity rather than a path that shifts when something above it moves.
A PageDoc carries id, seq (an operation counter), meta (title, slug, scroll mode, SEO), theme, breakpoints (mobile-first, by convention base, md and lg) and nodes. A node has a type, an optional layout, and a style per breakpoint. Lengths are objects such as {"value":24,"unit":"px"}, never bare numbers.
Every edit is one operation from a closed vocabulary of 13, the same in PHP and JavaScript: insert_node, remove_node, move_node, set_node_props, set_layout, set_style, set_constraints, set_animation, remove_animation, set_action, set_meta, set_theme and reorder_roots. set_style and set_constraints name the breakpoint they change.
That one vocabulary is the spine that undo, revisions, collaboration and agent edits all run through. An agent gets no looser way to change a page than a person does.