Editorial & Design Capabilities

Built for structured authoring, reuse, and pixel fidelity

Explore how Section Blocks organizes multi-page sitemaps, typed record lists, dual-mode List Views, cross-project libraries, and live Tailwind v4 design tokens.

Try Visual Workspace Inspect Security Model

01 · Visual Sitemap & Page Editor

From site tree to individual content slots

Every workspace maintains an explicit hierarchy so editors always understand where copy lives on screen before publishing.

Level 1

Project & Sitemap

Visual URL route tree (/pricing, /docs/api) with parent-child navigation paths and publish state.

Level 2

Ordered Pages

Compose pages from stacked section references without duplicating layout markup across routes.

Level 3

Dual-JSON Sections

Side-by-side rendered canvas with X-Ray overlays paired cleanly to structured template and content panels.

Level 4

Slot & List Controls

Edit text, links, booleans, and JSON via typed field editors with inline schema validation.

02 · Record Schemas, Lists & List Views

Typed collections rendered via Template JSON or shadcn presets

Define typed schemas supporting string, text, number, boolean, url, date, select, and json, then map any Record List to two rendering engines.

Record Schema: "faq-item"

{  "fields": [    { "key": "question", "type": "string", "label": "Question", "required": true },    { "key": "answer", "type": "text", "label": "Answer", "required": false },    { "key": "defaultOpen", "type": "boolean", "label": "Default Open", "required": true }  ]}

Mount Anywhere with listView

Reference a List View inside any section template JSON via { "listView": "faq-accordion-list" }.

5 Built-In shadcn Component Presets

ZERO-CODE SLOT MAPPING

Pick a visual preset, map schema fields to UI slots, or attach a custom frontend component override name.

Card Gridcard-grid

Responsive multi-column cards with badge, media, and copy

Directory Listdirectory-list

Stacked directory rows with avatar/media and structured meta

Structured Tabletable

Column-aligned data table for scanning records quickly

Spotlight Showcasespotlight-row

Editorial spotlight blocks with prominent title and callout

FAQ Accordionaccordion

Standard collapsible shadcn Accordion with boolean defaultOpen triggers

Live Output · FAQ Accordion Preset (defaultOpen boolean)Item #1 defaultOpen: true

Yes! Mapping the boolean defaultOpen field drives which FAQ items expand initially, rendered with standard shadcn chevron icons.

03 · Cross-Project Reusability

Library Sections & Shared Collections

Eliminate copy-paste drift between landing pages and regional microsites using two deliberate linking semantics plus workspace Collections.

TEMPLATE-LINKED

Shared Layout, Local Copy

One structural blueprint synced to dozens of unique landing pages.

Update Tailwind padding, heading classes, or grid columns once in the Library—every linked page inherits the structural upgrade while keeping its own bound copy.

CONTENT-LINKED

Canonical Structure + Copy

Single source of truth for headers, footers, legal notices & CTAs.

Edit a pricing disclaimer or global navigation bar once and propagate both markup and copy everywhere instantaneously.

COLLECTIONS

Cross-Project Sync

Distribute schemas, record lists, and sections across workspace boundaries.

Publish verified team directories, changelogs, or product FAQs into multiple downstream sites managed inside your organization.

04 · OKLCH Theme Studio

Dynamic Tailwind v4 CSS compiled per project

Designers configure perceptual OKLCH surface, ink, and accent variables plus Google Font pairings visually in the CMS. Frontends consume a single cached CSS endpoint with zero hard-coded overrides.

Architectural VellumGET /api/public/projects/:ref/css

Token-driven components stay consistent across every section

All heading fonts, button surfaces, border rings, and OKLCH palette tokens propagate live without rebuilding app templates.

Primary Token Actionoklch(0.24 0.032 252)

Compiled CSS Variables Output

:root {
  --background: oklch(0.985 0.004 80);
  --primary: oklch(0.24 0.032 252);
  --accent: oklch(0.47 0.13 158);
  --font-heading: "Geist Variable", sans-serif;
  --font-sans: "Figtree Variable", sans-serif;
}

cms.sectionblocks.com

Model your first sitemap & typed schema in minutes

Create Free Workspace Developer Integration Guide Sign in →