Section Blocks
Hosted CMS at cms.sectionblocks.comDual-JSON Section Architecture

Structure belongs to engineers. Content belongs to everyone else.

Section Blocks bridges visual page building and pure headless CMS. Lock down semantic DOM, Tailwind utility tokens, and HTML allowlists in template JSON—while marketing teams edit bound copy, repeatable lists, and OKLCH themes in a collaborative workspace.

Start Free WorkspaceExplore Architecturecms.sectionblocks.com →
How a Section Ships
ALLOWLIST VERIFIED
Clean separation between build-time structure and runtime copy
1. template JSONDeveloper / Admin

Strict tree of section, h1–h6, p, a, and img nodes with Tailwind classes and contentId pointers.

2. content JSONEditor / Publisher

Keyed dictionary of validated strings, URLs, and Record Lists saved independently with optimistic updatedAt conflict protection.

3. Immutable SnapshotCDN / CI Release

Frozen JSON + compiled Tailwind v4 theme CSS served via ?mode=snapshot across SSG, SSR, or Edge SWR.

Dual-JSON
Isolated template & content persistence
15 Tags
Strict server-enforced HTML allowlist
5 Roles
Viewer to Admin RBAC save boundaries
4 Modes
Auth SPA, SSR Static, SSG & Live SWR
Interactive Proof

See why templates never break during content sprints

Try editing copy in the form below or swapping the developer layout preset. Your copy automatically re-binds by ID across completely different responsive layouts.

Live Dual-JSON Sandboxsection: "hero-overview"
Edit copy on the left. Switch templates on the right. Neither overwrites the other.
Notice how the structural template JSON stays read-only for editors while content JSON updates live by stable contentId.
CONTENT LAYER (EDITABLE)role: Editor
TEMPLATE LAYOUT PRESET (DEVELOPER)
Allowlist sanitized · ESCAPED TEXT
Enterprise Governance v2.6#badge

Publish weekly campaigns without touching layout code.#headline

Marketing updates bound copy across every landing page while the engineering-owned Tailwind template stays mathematically intact.#lead

Explore Live Workspace#ctaText
0#metricValueUnapproved HTML tags possible
Save endpoint: PUT /sections/hero-overview/contentTemplate unchanged
Category Fit

The governance of headless without losing page context

Built for engineering teams tired of fixing broken drag-and-drop pages—and marketing teams tired of filing engineering tickets for copy changes.

CapabilityDrag & Drop BuildersTraditional Headless CMSSection Blocks
Layout & Design IntegrityFragile; editors drag spacing & break gridsSafe, but requires custom code per page variationLocked to allowlisted template JSON & Tailwind classes
Visual Page ContextLive canvas preview in browserOpaque form silos detached from page layoutVisual sitemap & live Dual-JSON page workspace
XSS / DOM Injection SurfaceHigh; inline styles, iframes, and raw HTML blobsLow if markdown parsed, high with rich-HTML fieldsZero raw HTML; server-enforced 15-tag structural allowlist
Concurrent Editing SafetyLast-write-wins overwrites entire page JSONField-level drafts, often complex webhook glueStrict content vs. template save boundaries + updatedAt guards
Design System IntegrationProprietary widget CSS hard to overrideNo theme layer includedNative OKLCH Theme Studio compiling Tailwind v4 CSS variables
Delivery ArchitectureLocked runtime monolithDIY SDK boilerplate per route4 drop-in modes: Auth SPA Preview, SSR Static, SSG, Live SWR SSR
Core Capabilities

Everything required from sitemap to edge deployment

Inspect All Features
Security Model
15-Tag Structural Allowlist

Every rendered node is validated against section, div, h1–h6, p, span, a, ul, ol, li, and img with escaped text nodes. Zero raw HTML, scripts, inline styles, or event handlers.

Page Hierarchy
Visual Sitemap & Page Editor

Manage multi-page URL trees, route ordering, slugs, and stacked section blocks with side-by-side live rendering and X-Ray content slot highlights.

Typed Data
Schemas, Lists & shadcn List Views

Define reusable record types and mount repeatable collections via Template JSON or zero-code shadcn Component presets (Grid, Directory, Table, Spotlight, Accordion).

Reuse Across Sites
Library Sections & Shared Collections

Choose Template-linked sections for unified layout updates across pages with unique local copy, or Content-linked sections for canonical headers, footers, and disclosures.

Design Tokens
OKLCH Theme Studio & Tailwind v4

Configure accessible OKLCH color palettes, font families, and radius tokens once per project. Serve compiled CSS directly to any Vite or React Router frontend.

Safe Collaboration
Save Boundaries & Snapshot Releases

Enforce distinct Editor content saves vs. Developer structure saves with optimistic updatedAt concurrency guards and immutable published snapshots.

React Router & Vite Starter

Four delivery topologies from one CMS payload

Stage internally with authenticated user-scoped previews, then deploy publicly as static SSG, build-frozen SSR, or instant webhook-revalidated SSR.

Netlify & API Setup
Client Preview + X-Ray
Editor Staging
Internal editorial staging and live theme inspection
VITE_DEPLOY_MODE=preview npm run build

Runs the Vite frontend as an authenticated workspace client so logged-in team members only see projects they have permission to access, complete with the bottom X-Ray inspector.

  • Filters project switcher cleanly by authenticated member roles via ?scope=user
  • Supports toggling ?mode=live vs ?mode=snapshot side by side in browser preview
  • Exposes section bounds, template keys, and contentId bindings in the X-Ray bar
Mode Telemetry
Origin CMS CallsAuthenticated client requests
Content FreshnessReal-time draft preview
Access ModelUser-scoped CMS session (/api/public/auth + ?scope=user)
Netlify TargetStatic SPA + client proxy/CORS to cms.sectionblocks.com
Common Questions

Answers for CTOs, design systems & content teams

Unlike freeform WYSIWYG tools, every section is split into two artifacts: a developer-owned template JSON tree (defining semantic tags and Tailwind utility classes) and an editor-owned content JSON dictionary keyed by stable contentId strings. Editors update copy, links, and media without ever mutating layout markup or CSS classes.

cms.sectionblocks.com

Ship layout-safe pages on cms.sectionblocks.com

Separate structural templates from editable copy, publish immutable snapshots, and deploy anywhere with React Router or Vite.

Create Free WorkspaceRead API & Deploy DocsSign in →