Architecture v1.2
The Sovereign Shell.
Zero Runtime Overhead.

The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface, leaving your Tenant code pure and framework-agnostic.

Read the Docs View on GitHub
3KB
Core Overhead
100%
Type Safety
MIT
License
localhost:5173 · Studio
HERO | LOCAL
Architecture v1.2
The Sovereign Shell.
Zero Runtime Overhead.

The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface.

Read the Docs
View on GitHub
3KB
Core Overhead
100%
Type Safety
MIT
License
Inspector
■ HERO|LOCAL
+ Add section
Page Layers (8)
HERO
The Sovereign Shell.
SOC
Separation of...
DEVEX
App.tsx is thin.
Title
The Sovereign Shell.
Subtitle
Zero Runtime Overhead.
Badge
Architecture v1.2
All Changes Saved
⬡ HTML
{ } JSON
@jsonpages/core · Headless Schema-Driven Runtime · React + Vite · Zod Validation · TypeScript Strict · 3KB Core Overhead · MIT License · Source-Available · Git-Native Versioning · Zero Runtime Overhead · 100% Type Safety · @jsonpages/core · Headless Schema-Driven Runtime · React + Vite · Zod Validation · TypeScript Strict · 3KB Core Overhead · MIT License · Source-Available · Git-Native Versioning · Zero Runtime Overhead · 100% Type Safety ·
Architecture
Separation of Concerns

We enforce a strict boundary between the Engine (us) and the Tenant (you). This prevents vendor lock-in.

3
The Form Factory

The Admin UI is not hardcoded. It is generated at runtime by analyzing your Zod schemas. Change the schema, change the UI.

2
The Tenant Protocol (TBP)

Your components live here. They receive pure JSON data. They do not know they are being edited. They just render.

1
The Core Engine (@jsonpages/core)

Handles the React rendering loop, routing, and the 'Studio' iframe injection. It is completely agnostic of your design system.

In-Context Editing
The Inspector that only shows what you need.

Traditional CMS sidebars dump every field at once. ICE binds to the section you click in the live canvas and shows only the fields for that block. Zero cognitive overhead. The Form Factory generates every input widget automatically from your Zod schema — change the schema, change the UI.

localhost:5173/admin — JsonPages Studio
ArchitectureCMSVersioningDeveloper
HERO | LOCAL
The Sovereign Shell.
Zero Runtime Overhead.

The @jsonpages/core package is a headless, schema-driven runtime. It handles routing, hydration, and the admin interface, leaving your Tenant code pure and framework-agnostic.

Read the Docs
View on NPM
The Form Factory
The Tenant Protocol
The Core Engine
Inspector
■ HERO|LOCAL
+ Add section
Page Layers (8)▾
⠿HEROThe Sovereign Shell.
⠿SOCSeparation of Concerns
⠿DEVEXApp.tsx is incredibly thin.
⠿GITYour content is code.
Title
The Sovereign Shell.
Subtitle
Zero Runtime Overhead.
Badge
Architecture v1.2
CTAs (2) + Add Item
▸Read the Docsprimary
▸View on NPMsecondary
Metrics (3)
▸Core Overhead3KB
▸Type Safety100%
▸LicenseMIT
All Changes Saved
Autosave
⬡ HTML
{ } JSON
🎯
Context-bound Inspector

Click any section in the canvas. The Inspector shows exactly — and only — the fields for that block. No sidebar overload.

⚡
Schema → UI, automatically

The Admin UI is not hardcoded. It is generated at runtime by analyzing your Zod schemas. Change the schema, change the UI.

📤
Bake to Zero-Runtime HTML

Hit Bake. The engine exports pure HTML/CSS with no JavaScript runtime — CDN-ready, infinitely cacheable, fully portable.

Versioning
Your content is code.
Branch it. Diff it.
Roll it back.

Because every page is a plain JSON file, your content workflow is identical to your code workflow. No database exports, no CMS snapshots, no proprietary backups. Just git.

  • →Content changes appear in pull requests like any code change
  • →Branch a page, preview it, merge when approved
  • →Full diff history on every field of every section
  • →Roll back any page to any commit in seconds
  • →CI/CD pipelines trigger on content changes, not just code
src/data/pages/home.json
Changes
History
Blame
12 "type": "hero",
13 "data": {
14- "title": "Local Authoring.hh",
14+ "title": "The Sovereign Shell.",
15- "titleHighlight": "Global Governance.",
15+ "titleHighlight": "Zero Runtime Overhead.",
16 "badge": "Architecture v1.2",
17 }
a3f9c12
feat(home): update hero headline copy
2m ago
8b21e04
content(home): add 3 metrics to hero section
1h ago
cc70a91
feat(home): initial page structure
2d ago
Developer Experience
Your App.tsx is incredibly thin.

You don't write routing logic. You don't write admin panels. You just import the Engine and pass your configuration.

  • ✓ Automatic Routing based on JSON files
  • ✓ Hot Module Replacement (HMR)
  • ✓ Full TypeScript support
src/App.tsx
// Your App.tsx is incredibly thin. import { JsonPagesEngine } from '@jsonpages/core'; import { config } from './my-config'; export default function App() { // The Engine takes over from here return <JsonPagesEngine config={config} />; }
CLI Tool
A new tenant in
under 5 minutes.

Install the CLI once. From there, scaffolding a fully-typed, production-ready tenant — with all capsules, registry, schemas, and config wired up — is a single command.

1
Install the CLI globally

One-time install. The CLI lives alongside your other dev tools.

2
Scaffold a new tenant

Generates the full TBP structure: capsules, registry, schemas, config, and data files — all typed and ready.

3
Start building

Run npm run dev and your tenant is live with Studio, HMR, and full CMS editing.

Terminal
# Step 1 — install CLI globally $ npm install -g @jsonpages/cli@latest added 1 package in 2.3s ✓ @jsonpages/cli@1.2.0 installed # Step 2 — scaffold a new tenant $ npx @jsonpages/cli@latest new my-tenant Creating tenant: my-tenant ✓ src/components/hero/ ✓ src/lib/schemas.ts ✓ src/lib/ComponentRegistry.tsx ✓ src/data/config/site.json ✓ src/data/pages/home.json ✓ src/App.tsx ✓ Done in 1.8s # Step 3 — start Studio $ cd my-tenant && npm run dev ➜ Studio ready at http://localhost:5173
Trust the Architecture.

Stop building page builders. Start building Systems.

$ npx @jsonpages/cli@latest new tenant
Read the Docs → View on NPM