Section Blocks
Developer Integration

Deterministic JSON delivery across static, SSR, and edge preview targets

Consume allowlisted Dual-JSON payloads and compiled CSS variables from cms.sectionblocks.com with zero proprietary SDK lock-in.

Open CMS ConsoleAllowlist & JSON Spec
1. Pull Project Bundle

Query /api/public/projects/:projectRef with ?mode=snapshot for production or ?mode=live in authenticated staging.

2. Inject Theme CSS

Load /api/public/projects/:projectRef/css cleanly inside root Links/style or inline into SSG HTML builds.

3. Render Recursive DOM

Traverse Dual-JSON sections via allowlisted React elements and mount typed List Views + custom component overrides.

Public Delivery API

Simple HTTP contracts for any JS runtime

Built cleanly over standard REST JSON responses hosted at https://cms.sectionblocks.com/api/public. Cache indefinitely against immutable snapshots or serve real-time drafts to authenticated editors.

GET/api/public/projects

Discover public projects, or pass ?scope=user with auth cookies/token for member-scoped previews.

GET/api/public/projects/:projectRef?mode=live|snapshot

Return full sitemap, pages, Dual-JSON section payloads, schemas, records, and List Views.

GET/api/public/projects/:projectRef/css

Compiled Tailwind v4 stylesheet & OKLCH custom property theme variables for the project.

POST/api/revalidate

Purge in-memory SWR cache + Netlify durable cache tags upon publish events from the CMS.

Fetch Project Bundle — Snapshot Delivery
// Fetch deterministic published content or live draftsconst res = await fetch(  "https://cms.sectionblocks.com/api/public/projects/marketing-site?mode=snapshot",  {    headers: {      Accept: "application/json",      // Optional bearer/cookie when listing private workspaces via ?scope=user    },  });
const payload = await res.json();// -> { project, themeCssUrl, sitemap, pages, sectionsByKey, listViews, records }
Instant Webhook Revalidation Payload
// Instant cache invalidation for Mode 4 (Live SWR SSR on Netlify)POST https://your-site.netlify.app/api/revalidatex-sb-webhook-secret: $SB_REVALIDATE_SECRETContent-Type: application/json
{  "projectRef": "marketing-site",  "mode": "snapshot",  "paths": ["/", "/pricing"]}
Vite & React Router Starter

4 Deploy Modes & Netlify Configuration

Pick the exact tradeoff between build-time determinism and editorial immediacy using a single environment flag.

Client Preview + X-Ray
Internal editorial staging and live theme inspection
Static SPA + client proxy/CORS to cms.sectionblocks.com

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
Build Invocation
VITE_DEPLOY_MODE=preview npm run build
Origin Calls

Authenticated client requests

Freshness

Real-time draft preview

netlify.toml — Live SWR SSR + Durable Edge Cache Headers
[build]  command = "VITE_DEPLOY_MODE=ssr-live npm run build"  publish = "build/client"
[build.environment]  VITE_CMS_BASE_URL = "https://cms.sectionblocks.com"  VITE_CMS_PROJECT_REF = "marketing-site"
# Edge CDN durable caching for Live SWR SSR responses[[headers]]  for = "/*"  [headers.values]    Netlify-CDN-Cache-Control = "public, durable, max-age=60, stale-while-revalidate=600"
Progressive Enhancement

Custom React & shadcn Component Overrides

Need an interactive calculator, custom motion carousel, or bespoke chart backed by a CMS Record List? Assign a componentName on any List View in the CMS and register your implementation on the frontend.

If a component name isn't matched in your app registry, the renderer gracefully falls back to the built-in shadcn Component Mode preset or Template JSON.

Frontend Component Override Registry
import { TeamMemberCardGrid } from "~/components/overrides/team-grid";import { FaqAccordion } from "~/components/overrides/faq-accordion";
export const LIST_VIEW_REGISTRY = {  // Exact match to CMS "Custom frontend component name"  TeamMemberCardGrid,  "faq-accordion": FaqAccordion,};
// Renderer falls back automatically to built-in shadcn presets// or Template JSON if an override component name isn't registered.

cms.sectionblocks.com

Ready to wire your React Router or Vite frontend?

Provision your project token at cms.sectionblocks.com and inspect the live JSON payload right in your browser.

Create Free WorkspaceCompare PlansSign in →