Fancy UI KitFancy UI Kitv0.5
DocsLearnPackagesTUIFlowUse CasesInspirationShowcaseLeaderboard
Sign in
All use cases
Platform

Let non-developers edit pages

A CMS whose output is your components, not arbitrary HTML.

The problem

Marketing wants to change the headline without a deploy. Bolting on a general CMS gets you a second rendering path, a second design system, and pages that stop looking like your product the moment someone uses the WYSIWYG.

The requirement is narrower than "a CMS": editable content that still renders through the components you already ship.

What you are building

Live surfaces, not screenshots — every one composed from the same components you would install.

Page editor

fancy-cms-ui over a real page document, so marketing edits copy without a deploy.

The code

Edit the page where it sitstsx
import { EditablePage } from "@particle-academy/fancy-cms-ui/editor";

// Inline edit mode over the LIVE page -- hold Ctrl+Shift to reveal the toggle,
// then copy is edited in place with a floating toolbar. No IDE for marketing to
// learn, and no second rendering path: what they edit is the page.
//
// The full three-pane `Editor` (tree | canvas | inspector) is the authoring IDE
// for building layouts, and wants real width.
<EditablePage doc={doc} registry={registry} />
Render it with your own componentstsx
import { CmsPage } from "@particle-academy/fancy-cms-ui/react";

// The registry maps node kinds to YOUR components, so there is no second
// rendering path and no second design system to keep in step.
const registry = { hero: Hero, features: FeatureGrid, cta: CallToAction };

<CmsPage doc={doc} registry={registry} />

How to solve it

  1. Install the backend

    A document model for pages, stored in your database.

    Run thisbash
    composer require particle-academy/fancy-cms

  2. Add the editor

    A WYSIWYG surface over that document model — editing structured content rather than producing free-form markup.

    Run thisbash
    npm install @particle-academy/fancy-cms-ui

  3. Render through your own components

    Because the stored document is structured, rendering maps nodes to the components you already have. An edited page inherits your design system instead of escaping it.

  4. Let an agent draft, and a human publish

    The CMS bridge exposes style and layout tools, so an assistant can prepare a page — with the publish decision still belonging to a person.