@particular/cms
Visual Editor
Page Builder
Visual page builder for composing full page layouts from draggable blocks. 14 built-in components, 5 layout presets, TipTap rich-text editing, and RSC-compatible rendering.
Architecture
The page builder is an internal implementation detail of @particular/cms. The public API uses CMS-native naming so the underlying engine can be swapped without breaking consumers.
Data Layer
Content stored as structured JSONB in the existing
cmsEntries.content column. No new tables or API endpoints needed.Editor
<PageEditor> is a client component that wraps the visual builder. Drag blocks, edit props, save.Renderer
<PageRenderer> is RSC-compatible. Pass saved data + config, get rendered HTML. No client JS.14 Built-in Components
Every CMS block type is available as a draggable page builder component.
Paragraph
Typography
Heading
Typography
Rich Text
Typography
List
Typography
Quote
Typography
Code
Content
Callout
Content
Table
Content
Image
Media
Video
Media
Embed
Media
Columns
Layout
Divider
Layout
Button
Interactive
Layout Presets
Starter templates that pre-populate the editor with a common page structure.
Blog Post
Hero image, intro, body, and CTA
FAQ Page
Question-answer pairs with contact callout
Knowledge Base
Prerequisites, steps, code examples
Generic Page
Flexible layout with columns and CTA
Blank
Empty canvas to start from scratch
Usage
import { createPageConfig } from "@particular/cms/page-builder/config";
const config = createPageConfig({
builtIn: true, // include all 14 components
exclude: ["embed"], // remove specific ones
components: { // add custom blocks
CustomHero: {
config: {
label: "Custom Hero",
fields: {
title: { type: "text" },
subtitle: { type: "textarea" },
},
defaultProps: { title: "Hero Title", subtitle: "" },
render: MyHeroComponent,
},
category: "Layout",
},
},
});Subpath Exports
Each export is a separate entry point to enforce RSC boundaries.
| Import Path | Description |
|---|---|
@particular/cms/page-builder | Types-only barrel |
@particular/cms/page-builder/config | createPageConfig() |
@particular/cms/page-builder/editor | <PageEditor> (client) |
@particular/cms/page-builder/render | <PageRenderer> (RSC) |
@particular/cms/page-builder/components | 14 built-in components |
@particular/cms/page-builder/presets | Layout presets |
@particular/cms/page-builder/presets/blog | Blog layout |
@particular/cms/page-builder/presets/faq | FAQ layout |
@particular/cms/page-builder/presets/knowledge-base | KB layout |
@particular/cms/page-builder/presets/pages | Generic page layout |
@particular/cms/page-builder/plugin | Media picker plugin |
@particular/cms/page-builder/overrides | Editor UI overrides |