Pages, edited in place
A WYSIWYG page editor in React, on one JSON page document that the PHP renderer in fancy-cms turns into the same HTML and CSS.
Select a node in the layers panel or on the canvas, drag it, or change its text and colour in the inspector. Then open Published to see the same document rendered by CmsPage. Nothing is saved.
What it does
What ships today in fancy-cms-ui 0.13 and fancy-cms 0.8.
One Stages document
A page is a single JSON document: a flat map of nodes, each with per-breakpoint style props. Every edit is one PageOp through a pure reduce(), the same spine undo, revisions and agent edits go through.
PHP and React, byte for byte
The CSS emitter is deterministic, and the PHP renderer in particle-academy/fancy-cms is its twin: same CSS, same HTML. A parity harness in the repo renders canonical documents through both and compares the bytes.
Images and fonts the host resolves
An image names an asset handle and your imageResolver supplies the URL, size and variants. Fonts work the same way through a fontResolver to same-origin WOFF2. The renderer never fetches a font itself, and Inter 4.1 ships as an opt-in bundle.
No inline styles on published pages
The renderer emits no style attributes: page CSS comes from one emitter, keyed by data-cms handles. Under a strict style-src, render with includeStyles={false} and serve that CSS in a nonce'd tag or a same-origin file.
The full Lucide set, opt in per glyph
Icon nodes draw from the Lucide 0.511.0 catalogue: 1,803 names and aliases, 1,594 glyphs, with the same SVG from PHP and React. You import only the glyphs a page uses, and searchIcons() pages through names 20 at a time for an agent.
Webmaster guides in the package
Both packages ship an agent-guide/ folder: a webmaster guide (what the inspectors can edit, resolvers, CSP, accessibility and pre-publish checks), a professional-pages bar and the font contract.
Read the webmaster guides
Written for whoever builds and publishes pages, human or agent. They ship inside each package, so the copy you install matches the code you run.
How it fits
Author in React, render anywhere: the editor and the React renderer live in fancy-cms-ui, and fancy-cms renders and validates the same document in Laravel.
Human+ bridge
An agent drives this surface over MCP, through the same state a person sees, never the DOM.
import { registerCmsBridge } from "@particle-academy/agent-integrations/bridges/cms";tools: set_style / set_layout / …
Install
composer require particle-academy/fancy-cmsnpm install @particle-academy/fancy-cms-uicomposer require particle-academy/charlotte
The packages
Laravel host + PHP page renderer for the Stages doc model: node tree → HTML with island hydration; backend pair of the fancy-cms-ui editor. Pre-1.0 — the API may still move between minors; issues at github.com/Particle-Academy/fancy-cms/issues.
WYSIWYG CMS editor (React) for the Stages doc model: three-pane layers / canvas / inspector editing where every mutation is one PageOp through a pure reducer, plus the CmsPage / CmsRegion renderers with $bind data fields that name their live source. Pairs with the particle-academy/fancy-cms PHP renderer. Pre-1.0 — the API may still move between minors; issues at github.com/Particle-Academy/fancy-cms-ui/issues.
Charlotte: a headless website-builder agent kit for Laravel on prism-harness and fancy-cms. Agents edit DRAFTS (nothing publishes on a change), autonomy is your setting (full, or approve on save), invented and missing facts are caught in code, and an ordered event log long-polls behind any proxy, so you can build your own chat. Any Prism provider; cost telemetry optional. Pre-1.0.
Put a page editor in your Laravel app
Start with the React editor and renderer, then add fancy-cms when the server should render and validate the pages.