react-three-fiber

* feat: add strict mode to jsonSchema() for LLM structured outputs

This PR adds support for generating strict JSON schemas compatible with LLM structured output APIs (OpenAI, Google Gemini, Anthropic, etc.).

## Problem
`catalog.jsonSchema()` was generating schemas that OpenAI's strict mode rejected due to:
- Use of `propertyNames` keyword (not permitted)
- Missing `additionalProperties: false` on nested objects
- Optional properties not being handled correctly for strict validation

## Changes
- Added `JsonSchemaOptions` interface with `strict` boolean flag
- Updated `catalog.jsonSchema()` to accept optional `JsonSchemaOptions` parameter
- When `strict: true`, the schema generator:
  - Sets `additionalProperties: false` on all object types
  - Removes `propertyNames` constraints
  - Lists all properties (including optional ones) in `required` arrays, using nullable types for optionals
  - Converts record types to fixed-key objects without additional property schemas
- Fixed Zod 4 compatibility issue in type name resolution
- Added comprehensive test suite covering all strict mode requirements
- Exported `JsonSchemaOptions` type from core package

## Usage
```typescript
// Default behavior (unchanged)
const schema = catalog.jsonSchema();

// Strict mode for LLM APIs
const strictSchema = catalog.jsonSchema({ strict: true });
```

The default behavior remains unchanged to maintain backward compatibility.

Fixes #180

* fix: document record type limitation and add anyOf nullable test

- Add clear JSDoc documenting that record/map types become opaque objects
  in strict mode (LLM strict schemas require additionalProperties: false)
- Improve inline comment on the record case in zodToJsonSchema
- Add test exercising the anyOf nullable wrapping for optional properties
  using a non-record schema so the path is directly verified

---------

Co-authored-by: ctate <366502+ctate@users.noreply.github.com>

.changeset/config.json

@@ -6,6 +6,7 @@
     [
       "@json-render/core",
       "@json-render/react",
+      "@json-render/react-email",
       "@json-render/react-pdf",
       "@json-render/shadcn",
       "@json-render/react-native",
@@ -13,7 +14,14 @@
       "@json-render/codegen",
       "@json-render/zustand",
       "@json-render/redux",
-      "@json-render/jotai"
+      "@json-render/jotai",
+      "@json-render/vue",
+      "@json-render/xstate",
+      "@json-render/image",
+      "@json-render/mcp",
+      "@json-render/svelte",
+      "@json-render/solid",
+      "@json-render/react-three-fiber"
     ]
   ],
   "linked": [],

.cursor/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "json-render": {
+      "command": "npx",
+      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
+    }
+  }
+}

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 .pnp
 .pnp.js
+.pnpm-store/
 
 # Local env files
 .env*
@@ -27,6 +28,7 @@ out/
 build
 dist
 *.tsbuildinfo
+.svelte-kit/
 
 
 # Debug

.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  "servers": {
+    "json-render": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
+    }
+  }
+}

AGENTS.md

@@ -26,6 +26,7 @@ This ensures we don't install outdated versions that may have incompatible types
 
 - Do not use emojis in code or UI
 - Use shadcn CLI to add shadcn/ui components: `pnpm dlx shadcn@latest add <component>`
+- **Web app docs (`apps/web/`):** Never use Markdown table syntax (`| col | col |`). Always use HTML `<table>` with `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`. Markdown tables do not render correctly in the web app. Inside HTML table cells, curly braces must be escaped as JSX expressions (e.g. `<code>{'{ "$state": "/path" }'}</code>`) because MDX parses `{` as a JSX expression boundary.
 
 ## AI SDK / AI Gateway
 
@@ -72,6 +73,41 @@ Do **not** add `--port` flags -- portless handles port assignment automatically.
   - Skills in `skills/*/SKILL.md` (if the package has a corresponding skill)
   - `AGENTS.md` (if workflow or conventions change)
 
+## Releases
+
+This monorepo uses [Changesets](https://github.com/changesets/changesets) for versioning and publishing.
+
+### Fixed version group
+
+All public `@json-render/*` packages are in a **fixed** group (see `.changeset/config.json`). A changeset that bumps any one of them bumps all of them to the same version. You only need to list the packages that actually changed in the changeset front matter — the fixed group handles the rest.
+
+### Preparing a release
+
+When asked to prepare a release (e.g. "prepare v0.12.0"):
+
+1. **Create a changeset file** at `.changeset/v0-<N>-release.md` following the existing pattern:
+   - YAML front matter listing changed packages with bump type (`minor` for feature releases, `patch` for bug-fix-only releases)
+   - A one-line summary, then `### New:` / `### Improved:` / `### Fixed:` sections describing each change
+   - Always list `@json-render/core` plus any packages with actual code changes
+2. **Do NOT bump versions** in `package.json` files — CI runs `pnpm ci:version` (which calls `changeset version`) to do that automatically
+3. **Do NOT manually write `CHANGELOG.md`** entries — `changeset version` generates them from the changeset file
+4. **Add new packages to the fixed group** in `.changeset/config.json` if they should be versioned together with the rest
+5. **Fill documentation gaps** — every public package should have:
+   - A row in the root `README.md` packages table
+   - A renderer section in the root `README.md` (if it's a renderer)
+   - An API reference page at `apps/web/app/(main)/docs/api/<name>/page.mdx`
+   - An entry in `apps/web/lib/page-titles.ts` and `apps/web/lib/docs-navigation.ts`
+   - An entry in the docs-chat system prompt (`apps/web/app/api/docs-chat/route.ts`)
+   - A skill at `skills/<name>/SKILL.md`
+   - A `packages/<name>/README.md`
+6. **Run `pnpm type-check`** after all changes to verify nothing is broken
+
+### CI scripts
+
+- `pnpm changeset` — interactively create a new changeset
+- `pnpm ci:version` — run `changeset version` + lockfile update (CI only)
+- `pnpm ci:publish` — build all packages and publish to npm (CI only)
+
 <!-- opensrc:start -->
 
 ## Source Code Reference

README.md

@@ -5,15 +5,24 @@
 Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.
 
 ```bash
+# for React
 npm install @json-render/core @json-render/react
-# pre-built shadcn/ui components
+# for React with pre-built shadcn/ui components
 npm install @json-render/shadcn
-# or for mobile
+# or for React Native
 npm install @json-render/core @json-render/react-native
 # or for video
 npm install @json-render/core @json-render/remotion
 # or for PDF documents
 npm install @json-render/core @json-render/react-pdf
+# or for HTML email
+npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
+# or for Vue
+npm install @json-render/core @json-render/vue
+# or for Svelte
+npm install @json-render/core @json-render/svelte
+# or for SolidJS
+npm install @json-render/core @json-render/solid
 ```
 
 ## Why json-render?
@@ -23,7 +32,7 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
 - **Guardrailed** - AI can only use components in your catalog
 - **Predictable** - JSON output matches your schema, every time
 - **Fast** - Stream and render progressively as the model responds
-- **Cross-Platform** - React (web) and React Native (mobile) from the same catalog
+- **Cross-Platform** - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog
 - **Batteries Included** - 36 pre-built shadcn/ui components ready to use
 
 ## Quick Start
@@ -84,9 +93,7 @@ const { registry } = defineRegistry(catalog, {
       </div>
     ),
     Button: ({ props, emit }) => (
-      <button onClick={() => emit("press")}>
-        {props.label}
-      </button>
+      <button onClick={() => emit("press")}>{props.label}</button>
     ),
   },
 });
@@ -106,17 +113,26 @@ function Dashboard({ spec }) {
 
 ## Packages
 
-| Package | Description |
-|---------|-------------|
-| `@json-render/core` | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities |
-| `@json-render/react` | React renderer, contexts, hooks |
-| `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
-| `@json-render/react-native` | React Native renderer with standard mobile components |
-| `@json-render/remotion` | Remotion video renderer, timeline schema |
-| `@json-render/react-pdf` | React PDF renderer for generating PDF documents from specs |
-| `@json-render/redux` | Redux / Redux Toolkit adapter for `StateStore` |
-| `@json-render/zustand` | Zustand adapter for `StateStore` |
-| `@json-render/jotai` | Jotai adapter for `StateStore` |
+| Package                     | Description                                                            |
+| --------------------------- | ---------------------------------------------------------------------- |
+| `@json-render/core`         | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities     |
+| `@json-render/react`        | React renderer, contexts, hooks                                        |
+| `@json-render/vue`          | Vue 3 renderer, composables, providers                                 |
+| `@json-render/svelte`       | Svelte 5 renderer with runes-based reactivity                          |
+| `@json-render/solid`        | SolidJS renderer with fine-grained reactive contexts                   |
+| `@json-render/shadcn`       | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS)            |
+| `@json-render/react-three-fiber` | React Three Fiber renderer for 3D scenes (19 built-in components)  |
+| `@json-render/react-native` | React Native renderer with standard mobile components                  |
+| `@json-render/remotion`     | Remotion video renderer, timeline schema                               |
+| `@json-render/react-pdf`    | React PDF renderer for generating PDF documents from specs             |
+| `@json-render/react-email`  | React Email renderer for HTML/plain-text emails from specs             |
+| `@json-render/image`        | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
+| `@json-render/codegen`      | Utilities for generating code from json-render UI trees                |
+| `@json-render/redux`        | Redux / Redux Toolkit adapter for `StateStore`                         |
+| `@json-render/zustand`      | Zustand adapter for `StateStore`                                       |
+| `@json-render/jotai`        | Jotai adapter for `StateStore`                                         |
+| `@json-render/xstate`       | XState Store (atom) adapter for `StateStore`                           |
+| `@json-render/mcp`          | MCP Apps integration for Claude, ChatGPT, Cursor, VS Code              |
 
 ## Renderers
 
@@ -145,7 +161,64 @@ const spec = {
 
 // defineRegistry creates a type-safe component registry
 const { registry } = defineRegistry(catalog, { components });
-<Renderer spec={spec} registry={registry} />
+<Renderer spec={spec} registry={registry} />;
+```
+
+### Vue (UI)
+
+```typescript
+import { h } from "vue";
+import { defineRegistry, Renderer } from "@json-render/vue";
+import { schema } from "@json-render/vue/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) =>
+      h("div", { class: "card" }, [h("h3", null, props.title), children]),
+    Button: ({ props, emit }) =>
+      h("button", { onClick: () => emit("press") }, props.label),
+  },
+});
+
+// In your Vue component template:
+// <Renderer :spec="spec" :registry="registry" />
+```
+
+### Svelte (UI)
+
+```typescript
+import { defineRegistry, Renderer } from "@json-render/svelte";
+import { schema } from "@json-render/svelte/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) => /* Svelte 5 snippet */,
+    Button: ({ props, emit }) => /* Svelte 5 snippet */,
+  },
+});
+
+// In your Svelte component:
+// <Renderer spec={spec} registry={registry} />
+```
+
+### Solid (UI)
+
+```tsx
+import { defineRegistry, Renderer } from "@json-render/solid";
+import { schema } from "@json-render/solid/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: (renderProps) => <div>{renderProps.children}</div>,
+    Button: (renderProps) => (
+      <button onClick={() => renderProps.emit("press")}>
+        {renderProps.element.props.label as string}
+      </button>
+    ),
+  },
+});
+
+<Renderer spec={spec} registry={registry} />;
 ```
 
 ### shadcn/ui (Web)
@@ -178,7 +251,7 @@ const { registry } = defineRegistry(catalog, {
   },
 });
 
-<Renderer spec={spec} registry={registry} />
+<Renderer spec={spec} registry={registry} />;
 ```
 
 ### React Native (Mobile)
@@ -199,23 +272,40 @@ const catalog = defineCatalog(schema, {
 });
 
 const { registry } = defineRegistry(catalog, { components: {} });
-<Renderer spec={spec} registry={registry} />
+<Renderer spec={spec} registry={registry} />;
 ```
 
 ### Remotion (Video)
 
 ```tsx
 import { Player } from "@remotion/player";
-import { Renderer, schema, standardComponentDefinitions } from "@json-render/remotion";
+import {
+  Renderer,
+  schema,
+  standardComponentDefinitions,
+} from "@json-render/remotion";
 
 // Timeline spec format
 const spec = {
-  composition: { id: "video", fps: 30, width: 1920, height: 1080, durationInFrames: 300 },
+  composition: {
+    id: "video",
+    fps: 30,
+    width: 1920,
+    height: 1080,
+    durationInFrames: 300,
+  },
   tracks: [{ id: "main", name: "Main", type: "video", enabled: true }],
   clips: [
-    { id: "clip-1", trackId: "main", component: "TitleCard", props: { title: "Hello" }, from: 0, durationInFrames: 90 }
+    {
+      id: "clip-1",
+      trackId: "main",
+      component: "TitleCard",
+      props: { title: "Hello" },
+      from: 0,
+      durationInFrames: 90,
+    },
   ],
-  audio: { tracks: [] }
+  audio: { tracks: [] },
 };
 
 <Player
@@ -225,7 +315,7 @@ const spec = {
   fps={spec.composition.fps}
   compositionWidth={spec.composition.width}
   compositionHeight={spec.composition.height}
-/>
+/>;
 ```
 
 ### React PDF (Documents)
@@ -236,7 +326,11 @@ import { renderToBuffer } from "@json-render/react-pdf";
 const spec = {
   root: "doc",
   elements: {
-    doc: { type: "Document", props: { title: "Invoice" }, children: ["page-1"] },
+    doc: {
+      type: "Document",
+      props: { title: "Invoice" },
+      children: ["page-1"],
+    },
     "page-1": {
       type: "Page",
       props: { size: "A4" },
@@ -250,8 +344,14 @@ const spec = {
     "table-1": {
       type: "Table",
       props: {
-        columns: [{ header: "Item", width: "60%" }, { header: "Price", width: "40%", align: "right" }],
-        rows: [["Widget A", "$10.00"], ["Widget B", "$25.00"]],
+        columns: [
+          { header: "Item", width: "60%" },
+          { header: "Price", width: "40%", align: "right" },
+        ],
+        rows: [
+          ["Widget A", "$10.00"],
+          ["Widget B", "$25.00"],
+        ],
       },
       children: [],
     },
@@ -262,6 +362,120 @@ const spec = {
 const buffer = await renderToBuffer(spec);
 ```
 
+### React Email (Email)
+
+```typescript
+import { renderToHtml } from "@json-render/react-email";
+import { schema, standardComponentDefinitions } from "@json-render/react-email";
+import { defineCatalog } from "@json-render/core";
+
+const catalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+});
+
+const spec = {
+  root: "html-1",
+  elements: {
+    "html-1": {
+      type: "Html",
+      props: { lang: "en", dir: "ltr" },
+      children: ["head-1", "body-1"],
+    },
+    "head-1": { type: "Head", props: {}, children: [] },
+    "body-1": {
+      type: "Body",
+      props: { style: { backgroundColor: "#f6f9fc" } },
+      children: ["container-1"],
+    },
+    "container-1": {
+      type: "Container",
+      props: {
+        style: { maxWidth: "600px", margin: "0 auto", padding: "20px" },
+      },
+      children: ["heading-1", "text-1"],
+    },
+    "heading-1": { type: "Heading", props: { text: "Welcome" }, children: [] },
+    "text-1": {
+      type: "Text",
+      props: { text: "Thanks for signing up." },
+      children: [],
+    },
+  },
+};
+
+const html = await renderToHtml(spec);
+```
+
+### Image (SVG/PNG)
+
+```typescript
+import { renderToPng } from "@json-render/image/render";
+
+const spec = {
+  root: "frame",
+  elements: {
+    frame: {
+      type: "Frame",
+      props: { width: 1200, height: 630, backgroundColor: "#1a1a2e" },
+      children: ["heading"],
+    },
+    heading: {
+      type: "Heading",
+      props: { text: "Hello World", level: "h1", color: "#ffffff" },
+      children: [],
+    },
+  },
+};
+
+// Render to PNG (requires @resvg/resvg-js)
+const png = await renderToPng(spec, { fonts });
+
+// Or render to SVG string
+import { renderToSvg } from "@json-render/image/render";
+const svg = await renderToSvg(spec, { fonts });
+```
+
+### Three.js (3D)
+
+```tsx
+import { defineCatalog } from "@json-render/core";
+import { schema, defineRegistry } from "@json-render/react";
+import {
+  threeComponentDefinitions,
+  threeComponents,
+  ThreeCanvas,
+} from "@json-render/react-three-fiber";
+
+const catalog = defineCatalog(schema, {
+  components: {
+    Box: threeComponentDefinitions.Box,
+    Sphere: threeComponentDefinitions.Sphere,
+    AmbientLight: threeComponentDefinitions.AmbientLight,
+    DirectionalLight: threeComponentDefinitions.DirectionalLight,
+    OrbitControls: threeComponentDefinitions.OrbitControls,
+  },
+  actions: {},
+});
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Box: threeComponents.Box,
+    Sphere: threeComponents.Sphere,
+    AmbientLight: threeComponents.AmbientLight,
+    DirectionalLight: threeComponents.DirectionalLight,
+    OrbitControls: threeComponents.OrbitControls,
+  },
+});
+
+<ThreeCanvas
+  spec={spec}
+  registry={registry}
+  shadows
+  camera={{ position: [5, 5, 5], fov: 50 }}
+  style={{ width: "100%", height: "100vh" }}
+/>;
+```
+
 ## Features
 
 ### Streaming (SpecStream)
@@ -311,16 +525,26 @@ Any prop value can be data-driven using expressions:
 {
   "type": "Icon",
   "props": {
-    "name": { "$cond": { "$state": "/activeTab", "eq": "home" }, "$then": "home", "$else": "home-outline" },
-    "color": { "$cond": { "$state": "/activeTab", "eq": "home" }, "$then": "#007AFF", "$else": "#8E8E93" }
+    "name": {
+      "$cond": { "$state": "/activeTab", "eq": "home" },
+      "$then": "home",
+      "$else": "home-outline"
+    },
+    "color": {
+      "$cond": { "$state": "/activeTab", "eq": "home" },
+      "$then": "#007AFF",
+      "$else": "#8E8E93"
+    }
   }
 }
 ```
 
-Two expression forms:
+Expression forms:
 
 - **`{ "$state": "/state/key" }`** - reads a value from the state model
-- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition (same syntax as visibility conditions) and picks a branch
+- **`{ "$cond": <condition>, "$then": <value>, "$else": <value> }`** - evaluates a condition and picks a branch
+- **`{ "$template": "Hello, ${/user/name}!" }`** - interpolates state values into strings
+- **`{ "$computed": "fn", "args": { ... } }`** - calls a registered function with resolved args
 
 ### Actions
 
@@ -329,13 +553,38 @@ Components can trigger actions, including the built-in `setState` action:
 ```json
 {
   "type": "Pressable",
-  "props": { "action": "setState", "actionParams": { "statePath": "/activeTab", "value": "home" } },
+  "props": {
+    "action": "setState",
+    "actionParams": { "statePath": "/activeTab", "value": "home" }
+  },
   "children": ["home-icon"]
 }
 ```
 
 The `setState` action updates the state model directly, which re-evaluates visibility conditions and dynamic prop expressions.
 
+### State Watchers
+
+React to state changes by triggering actions:
+
+```json
+{
+  "type": "Select",
+  "props": {
+    "value": { "$bindState": "/form/country" },
+    "options": ["US", "Canada", "UK"]
+  },
+  "watch": {
+    "/form/country": {
+      "action": "loadCities",
+      "params": { "country": { "$state": "/form/country" } }
+    }
+  }
+}
+```
+
+`watch` is a top-level field on elements (sibling of `type`/`props`/`children`). Watchers fire when the watched value changes, not on initial render.
+
 ---
 
 ## Demo
@@ -349,8 +598,12 @@ pnpm dev
 
 - http://json-render.localhost:1355 - Docs & Playground
 - http://dashboard-demo.json-render.localhost:1355 - Example Dashboard
+- http://react-email-demo.json-render.localhost:1355 - React Email Example
 - http://remotion-demo.json-render.localhost:1355 - Remotion Video Example
 - Chat Example: run `pnpm dev` in `examples/chat`
+- Svelte Example: run `pnpm dev` in `examples/svelte` or `examples/svelte-chat`
+- Vue Example: run `pnpm dev` in `examples/vue`
+- Vite Renderers (React + Vue + Svelte + Solid): run `pnpm dev` in `examples/vite-renderers`
 - React Native example: run `npx expo start` in `examples/react-native`
 
 ## How It Works
@@ -360,7 +613,7 @@ flowchart LR
     A[User Prompt] --> B[AI + Catalog]
     B --> C[JSON Spec]
     C --> D[Renderer]
-    
+
     B -.- E([guardrailed])
     C -.- F([predictable])
     D -.- G([streamed])

apps/web/CHANGELOG.md

@@ -1,5 +1,50 @@
 # web
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/codegen@0.12.1
+  - @json-render/react@0.12.1
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/codegen@0.12.0
+  - @json-render/react@0.12.0
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [3f1e71e]
+  - @json-render/core@0.11.0
+  - @json-render/codegen@0.11.0
+  - @json-render/react@0.11.0
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [9cef4e9]
+  - @json-render/core@0.10.0
+  - @json-render/react@0.10.0
+  - @json-render/codegen@0.10.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [b103676]
+  - @json-render/react@0.9.1
+  - @json-render/core@0.9.1
+  - @json-render/codegen@0.9.1
+
 ## 0.1.1
 
 ### Patch Changes

apps/web/app/(main)/docs/ai-sdk/page.mdx

@@ -3,7 +3,7 @@ export const metadata = pageMetadata("docs/ai-sdk")
 
 # AI SDK Integration
 
-Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Generate** (standalone UI) and **Chat** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
+Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless streaming. json-render supports two modes: **Standalone** (standalone UI) and **Inline** (UI embedded in conversation). See [Generation Modes](/docs/generation-modes) for a detailed comparison.
 
 ## Installation
 
@@ -11,9 +11,9 @@ Use json-render with the [Vercel AI SDK](https://sdk.vercel.ai) for seamless str
 npm install ai @ai-sdk/react
 ```
 
-## Generate Mode
+## Standalone Mode
 
-In generate mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
+In standalone mode, the AI outputs only JSONL patches. The entire response is a UI spec with no prose. This is the default mode and is ideal for playgrounds, builders, and dashboard generators.
 
 ### API Route
 
@@ -73,9 +73,9 @@ function GenerativeUI() {
 }
 ```
 
-## Chat Mode
+## Inline Mode
 
-In chat mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
+In inline mode, the AI responds conversationally and includes JSONL patches inline. Text-only replies are allowed when no UI is needed. This is ideal for chatbots, copilots, and educational assistants.
 
 ### API Route
 
@@ -96,7 +96,7 @@ export async function POST(req: Request) {
 
   const result = streamText({
     model: yourModel,
-    system: catalog.prompt({ mode: "chat" }),
+    system: catalog.prompt({ mode: "inline" }),
     messages,
   });
 
@@ -182,13 +182,13 @@ const systemPrompt = catalog.prompt({
 });
 ```
 
-### Chat Mode Prompt
+### Inline Mode Prompt
 
 ```typescript
-const chatPrompt = catalog.prompt({ mode: "chat" });
+const inlinePrompt = catalog.prompt({ mode: "inline" });
 ```
 
-In chat mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
+In inline mode, the prompt instructs the AI to respond conversationally first, then include JSONL patches on their own lines when UI is needed. Text-only replies are allowed.
 
 ## Which Mode?
 
@@ -197,8 +197,8 @@ In chat mode, the prompt instructs the AI to respond conversationally first, the
     <thead>
       <tr>
         <th></th>
-        <th>Generate</th>
-        <th>Chat</th>
+        <th>Standalone</th>
+        <th>Inline</th>
       </tr>
     </thead>
     <tbody>
@@ -215,7 +215,7 @@ In chat mode, the prompt instructs the AI to respond conversationally first, the
       <tr>
         <td>System prompt</td>
         <td><code>catalog.prompt()</code></td>
-        <td><code>{"catalog.prompt({ mode: \"chat\" })"}</code></td>
+        <td><code>{"catalog.prompt({ mode: \"inline\" })"}</code></td>
       </tr>
       <tr>
         <td>Stream utility</td>

apps/web/app/(main)/docs/api/core/page.mdx

@@ -75,7 +75,7 @@ interface Catalog {
 interface PromptOptions {
   system?: string;           // Custom system message intro
   customRules?: string[];    // Additional rules to append
-  mode?: "generate" | "chat"; // Output mode (default: "generate")
+  mode?: "standalone" | "inline" | "generate" | "chat"; // Output mode (default: "standalone")
 }
 
 interface SpecValidationResult<T> {
@@ -370,7 +370,7 @@ Most users should use `pipeJsonRender()` instead, which wraps this transform for
 
 ### createMixedStreamParser
 
-Parse a mixed stream of text and JSONL patches (used for Chat + GenUI mode):
+Parse a mixed stream of text and JSONL patches (used for Inline mode):
 
 ```typescript
 import { createMixedStreamParser } from '@json-render/core';
@@ -389,7 +389,7 @@ parser.flush();
 
 ### pipeJsonRender
 
-Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Chat mode API routes.
+Pipe an AI SDK `UIMessageStream` through the json-render transform. Lines that parse as JSONL patches are emitted as `data-spec` parts; everything else passes through as text. Used in Inline mode API routes.
 
 ```typescript
 import { pipeJsonRender } from '@json-render/core';
@@ -403,7 +403,7 @@ const stream = createUIMessageStream({
 return createUIMessageStreamResponse({ stream });
 ```
 
-See [Generation Modes](/docs/generation-modes) for full Chat mode setup.
+See [Generation Modes](/docs/generation-modes) for full Inline mode setup.
 
 ### SpecStream Types
 

apps/web/app/(main)/docs/api/image/page.mdx

@@ -0,0 +1,364 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/image")
+
+# @json-render/image
+
+Image renderer. Turn JSON specs into SVG and PNG images using [Satori](https://github.com/vercel/satori).
+
+## Install
+
+```bash
+npm install @json-render/core @json-render/image
+```
+
+For PNG output, also install the optional peer dependency:
+
+```bash
+npm install @resvg/resvg-js
+```
+
+See the [Image example](https://github.com/vercel-labs/json-render/tree/main/examples/image) for a full working example.
+
+## schema
+
+The image element schema for image specs. Use with `defineCatalog` from core.
+
+```typescript
+import { defineCatalog } from '@json-render/core';
+import { schema, standardComponentDefinitions } from '@json-render/image';
+
+const catalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+});
+```
+
+## Render Functions
+
+Server-side functions for producing image output. Both accept a spec and optional `RenderOptions`.
+
+```typescript
+import { renderToSvg, renderToPng } from '@json-render/image/render';
+
+const svg = await renderToSvg(spec, { fonts });
+
+const png = await renderToPng(spec, { fonts });
+await writeFile('output.png', png);
+```
+
+### RenderOptions
+
+```typescript
+interface RenderOptions {
+  registry?: ComponentRegistry;
+  includeStandard?: boolean;  // default: true
+  state?: Record<string, unknown>;
+  fonts?: SatoriOptions['fonts'];
+  width?: number;
+  height?: number;
+}
+```
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>fonts</code></td>
+      <td><code>{"SatoriOptions['fonts']"}</code></td>
+      <td><code>[]</code></td>
+      <td>Font data for text rendering (required for meaningful output)</td>
+    </tr>
+    <tr>
+      <td><code>width</code></td>
+      <td><code>number</code></td>
+      <td>Frame prop</td>
+      <td>Override the output image width</td>
+    </tr>
+    <tr>
+      <td><code>height</code></td>
+      <td><code>number</code></td>
+      <td>Frame prop</td>
+      <td>Override the output image height</td>
+    </tr>
+    <tr>
+      <td><code>registry</code></td>
+      <td><code>{"Record<string, ComponentRenderer>"}</code></td>
+      <td><code>{"{}"}</code></td>
+      <td>Custom component map (merged with standard components)</td>
+    </tr>
+    <tr>
+      <td><code>includeStandard</code></td>
+      <td><code>boolean</code></td>
+      <td><code>true</code></td>
+      <td>Include built-in standard components</td>
+    </tr>
+    <tr>
+      <td><code>state</code></td>
+      <td><code>{"Record<string, unknown>"}</code></td>
+      <td><code>{"{}"}</code></td>
+      <td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
+    </tr>
+  </tbody>
+</table>
+
+## Standard Components
+
+### Root
+
+#### Frame
+
+Root image container. Defines the output image dimensions and background. Must be the root element.
+
+```typescript
+{
+  width: number;
+  height: number;
+  backgroundColor: string | null;
+  padding: number | null;
+  display: "flex" | "none" | null;
+  flexDirection: "row" | "column" | null;
+  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
+  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
+}
+```
+
+### Layout
+
+#### Box
+
+Generic container with padding, margin, background, border, and flex alignment. Supports absolute positioning.
+
+```typescript
+{
+  padding: number | null;
+  paddingTop: number | null;
+  paddingBottom: number | null;
+  paddingLeft: number | null;
+  paddingRight: number | null;
+  margin: number | null;
+  backgroundColor: string | null;
+  borderWidth: number | null;
+  borderColor: string | null;
+  borderRadius: number | null;
+  flex: number | null;
+  width: number | string | null;
+  height: number | string | null;
+  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
+  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
+  flexDirection: "row" | "column" | null;
+  position: "relative" | "absolute" | null;
+  top: number | null;
+  left: number | null;
+  right: number | null;
+  bottom: number | null;
+  overflow: "visible" | "hidden" | null;
+}
+```
+
+#### Row
+
+Horizontal flex layout with optional wrapping.
+
+```typescript
+{
+  gap: number | null;
+  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
+  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
+  padding: number | null;
+  flex: number | null;
+  wrap: boolean | null;
+}
+```
+
+#### Column
+
+Vertical flex layout.
+
+```typescript
+{
+  gap: number | null;
+  alignItems: "flex-start" | "center" | "flex-end" | "stretch" | null;
+  justifyContent: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | null;
+  padding: number | null;
+  flex: number | null;
+}
+```
+
+### Content
+
+#### Heading
+
+Heading text at various levels. h1 is largest, h4 is smallest.
+
+```typescript
+{
+  text: string;
+  level: "h1" | "h2" | "h3" | "h4" | null;
+  color: string | null;
+  align: "left" | "center" | "right" | null;
+  letterSpacing: number | string | null;
+  lineHeight: number | null;
+}
+```
+
+#### Text
+
+Body text with configurable size, color, weight, and alignment.
+
+```typescript
+{
+  text: string;
+  fontSize: number | null;
+  color: string | null;
+  align: "left" | "center" | "right" | null;
+  fontWeight: "normal" | "bold" | null;
+  fontStyle: "normal" | "italic" | null;
+  lineHeight: number | null;
+  letterSpacing: number | string | null;
+  textDecoration: "none" | "underline" | "line-through" | null;
+}
+```
+
+#### Image
+
+Image from a URL with optional dimensions and fit.
+
+```typescript
+{
+  src: string;
+  width: number | null;
+  height: number | null;
+  borderRadius: number | null;
+  objectFit: "contain" | "cover" | "fill" | "none" | null;
+}
+```
+
+### Decorative
+
+#### Divider
+
+Horizontal line separator.
+
+```typescript
+{
+  color: string | null;
+  thickness: number | null;
+  marginTop: number | null;
+  marginBottom: number | null;
+}
+```
+
+#### Spacer
+
+Empty vertical space.
+
+```typescript
+{
+  height: number | null;
+}
+```
+
+## Catalog Definitions
+
+Pre-built definitions for creating image catalogs:
+
+```typescript
+import { standardComponentDefinitions } from '@json-render/image/catalog';
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/image';
+
+const catalog = defineCatalog(schema, {
+  components: {
+    ...standardComponentDefinitions,
+    // Add custom components
+  },
+});
+```
+
+## Server-Safe Import
+
+Import schema and catalog definitions without pulling in React or Satori:
+
+```typescript
+import { schema, standardComponentDefinitions } from '@json-render/image/server';
+```
+
+## Sub-path Exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>@json-render/image</code></td>
+      <td>Full package: schema, renderer, components, render functions</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/image/server</code></td>
+      <td>Schema and catalog definitions only (no React or Satori)</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/image/catalog</code></td>
+      <td>Standard component definitions and types</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/image/render</code></td>
+      <td>Server-side render functions only</td>
+    </tr>
+  </tbody>
+</table>
+
+## Types
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ImageSchema</code></td>
+      <td>Schema type for image specs</td>
+    </tr>
+    <tr>
+      <td><code>ImageSpec</code></td>
+      <td>Spec type for image output</td>
+    </tr>
+    <tr>
+      <td><code>RenderOptions</code></td>
+      <td>Options for render functions</td>
+    </tr>
+    <tr>
+      <td><code>ComponentRenderProps</code></td>
+      <td>Props passed to component render functions</td>
+    </tr>
+    <tr>
+      <td><code>ComponentRenderer</code></td>
+      <td>Component render function type</td>
+    </tr>
+    <tr>
+      <td><code>ComponentRegistry</code></td>
+      <td>Map of component names to render functions</td>
+    </tr>
+    <tr>
+      <td><code>StandardComponentDefinitions</code></td>
+      <td>Type of the standard component definitions object</td>
+    </tr>
+    <tr>
+      <td><code>StandardComponentProps{'<K>'}</code></td>
+      <td>Inferred props type for a standard component by name</td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/jotai/page.mdx

@@ -0,0 +1,104 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/jotai")
+
+# @json-render/jotai
+
+Jotai adapter for json-render's `StateStore` interface.
+
+## Installation
+
+```bash
+npm install @json-render/jotai @json-render/core @json-render/react jotai
+```
+
+## jotaiStateStore
+
+Create a `StateStore` backed by a Jotai atom.
+
+```typescript
+import { jotaiStateStore } from "@json-render/jotai";
+```
+
+### Options
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>atom</code></td>
+      <td><code>{'WritableAtom<StateModel, [StateModel], void>'}</code></td>
+      <td>Yes</td>
+      <td>A writable atom holding the state model.</td>
+    </tr>
+    <tr>
+      <td><code>store</code></td>
+      <td>Jotai <code>Store</code></td>
+      <td>No</td>
+      <td>The Jotai store instance. Defaults to a new store created internally. Pass your own to share state with <code>{'<Provider>'}</code>.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Example
+
+```typescript
+import { atom } from "jotai";
+import { jotaiStateStore } from "@json-render/jotai";
+import { StateProvider } from "@json-render/react";
+
+const uiAtom = atom<Record<string, unknown>>({ count: 0 });
+const store = jotaiStateStore({ atom: uiAtom });
+```
+
+```tsx
+<StateProvider store={store}>
+  {/* json-render reads/writes go through Jotai */}
+</StateProvider>
+```
+
+### Shared Jotai Store
+
+If your app already uses a Jotai `<Provider>` with a custom store, pass it so both json-render and your components share the same state:
+
+```typescript
+import { atom, createStore } from "jotai";
+import { Provider as JotaiProvider } from "jotai/react";
+import { jotaiStateStore } from "@json-render/jotai";
+import { StateProvider } from "@json-render/react";
+
+const jStore = createStore();
+const uiAtom = atom<Record<string, unknown>>({ count: 0 });
+const store = jotaiStateStore({ atom: uiAtom, store: jStore });
+```
+
+```tsx
+<JotaiProvider store={jStore}>
+  <StateProvider store={store}>
+    {/* Both json-render and useAtom() see the same state */}
+  </StateProvider>
+</JotaiProvider>
+```
+
+## Re-exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Source</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>StateStore</code></td>
+      <td><code>@json-render/core</code></td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/mcp/page.mdx

@@ -0,0 +1,247 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/mcp")
+
+# @json-render/mcp
+
+MCP Apps integration for json-render. Serve json-render UIs as interactive [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
+
+## Install
+
+```bash
+npm install @json-render/mcp @json-render/core @modelcontextprotocol/sdk
+```
+
+For the iframe-side React UI, also install:
+
+```bash
+npm install @json-render/react react react-dom
+```
+
+See the [MCP example](https://github.com/vercel-labs/json-render/tree/main/examples/mcp) for a full working example.
+
+## Overview
+
+MCP Apps let MCP servers return interactive HTML UIs that render directly inside chat conversations. `@json-render/mcp` bridges json-render catalogs with the MCP Apps protocol:
+
+1. Your **catalog** defines which components and actions the AI can use
+2. The **MCP server** exposes the catalog as a tool with the spec schema
+3. The **bundled HTML** renders json-render specs inside the host's sandboxed iframe
+4. The AI generates a spec, the host renders it, and users interact with the live UI
+
+## Server API
+
+### createMcpApp
+
+Create a fully-configured MCP server. This is the main entry point.
+
+```typescript
+import { createMcpApp } from "@json-render/mcp";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import fs from "node:fs";
+
+const server = createMcpApp({
+  name: "My Dashboard",
+  version: "1.0.0",
+  catalog: myCatalog,
+  html: fs.readFileSync("dist/index.html", "utf-8"),
+});
+
+await server.connect(new StdioServerTransport());
+```
+
+#### CreateMcpAppOptions
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>name</code></td>
+      <td><code>string</code></td>
+      <td>Server name shown in client UIs</td>
+    </tr>
+    <tr>
+      <td><code>version</code></td>
+      <td><code>string</code></td>
+      <td>Server version</td>
+    </tr>
+    <tr>
+      <td><code>catalog</code></td>
+      <td><code>Catalog</code></td>
+      <td>json-render catalog defining available components</td>
+    </tr>
+    <tr>
+      <td><code>html</code></td>
+      <td><code>string</code></td>
+      <td>Self-contained HTML for the iframe UI</td>
+    </tr>
+    <tr>
+      <td><code>tool</code></td>
+      <td><code>McpToolOptions</code></td>
+      <td>Optional tool name/title/description overrides</td>
+    </tr>
+  </tbody>
+</table>
+
+### registerJsonRenderTool
+
+Register a json-render tool on an existing `McpServer`. Use this when you need to add json-render to a server that has other tools.
+
+```typescript
+import { registerJsonRenderTool } from "@json-render/mcp";
+
+registerJsonRenderTool(server, {
+  catalog,
+  name: "render-ui",
+  title: "Render UI",
+  description: "Render an interactive UI",
+  resourceUri: "ui://render-ui/view.html",
+});
+```
+
+### registerJsonRenderResource
+
+Register the UI resource that serves the bundled HTML.
+
+```typescript
+import { registerJsonRenderResource } from "@json-render/mcp";
+
+registerJsonRenderResource(server, {
+  resourceUri: "ui://render-ui/view.html",
+  html: bundledHtml,
+});
+```
+
+## Client API (`@json-render/mcp/app`)
+
+These exports run inside the sandboxed iframe rendered by the MCP host.
+
+### useJsonRenderApp
+
+React hook that connects to the MCP host, listens for tool results, and maintains the current json-render spec.
+
+```tsx
+import { useJsonRenderApp } from "@json-render/mcp/app";
+import { JSONUIProvider, Renderer } from "@json-render/react";
+
+function McpAppView({ registry }) {
+  const { spec, loading, connected, error } = useJsonRenderApp({
+    name: "my-app",
+    version: "1.0.0",
+  });
+
+  if (error) return <div>Error: {error.message}</div>;
+  if (!spec) return <div>Waiting...</div>;
+
+  return (
+    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
+      <Renderer spec={spec} registry={registry} loading={loading} />
+    </JSONUIProvider>
+  );
+}
+```
+
+#### UseJsonRenderAppReturn
+
+<table>
+  <thead>
+    <tr>
+      <th>Field</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>spec</code></td>
+      <td><code>{'Spec | null'}</code></td>
+      <td>Current json-render spec</td>
+    </tr>
+    <tr>
+      <td><code>loading</code></td>
+      <td><code>boolean</code></td>
+      <td>Whether the spec is still being received</td>
+    </tr>
+    <tr>
+      <td><code>connected</code></td>
+      <td><code>boolean</code></td>
+      <td>Whether connected to the host</td>
+    </tr>
+    <tr>
+      <td><code>connecting</code></td>
+      <td><code>boolean</code></td>
+      <td>Whether currently connecting</td>
+    </tr>
+    <tr>
+      <td><code>error</code></td>
+      <td><code>{'Error | null'}</code></td>
+      <td>Connection error, if any</td>
+    </tr>
+    <tr>
+      <td><code>app</code></td>
+      <td><code>{'App | null'}</code></td>
+      <td>The underlying MCP App instance</td>
+    </tr>
+    <tr>
+      <td><code>callServerTool</code></td>
+      <td><code>{'(name, args?) => Promise<void>'}</code></td>
+      <td>Call an MCP server tool and update spec from result</td>
+    </tr>
+  </tbody>
+</table>
+
+### buildAppHtml
+
+Generate a self-contained HTML page from bundled JavaScript and CSS.
+
+```typescript
+import { buildAppHtml } from "@json-render/mcp/app";
+import fs from "node:fs";
+
+const html = buildAppHtml({
+  title: "Dashboard",
+  js: fs.readFileSync("dist/app.js", "utf-8"),
+  css: fs.readFileSync("dist/app.css", "utf-8"),
+});
+```
+
+## Client Configuration
+
+### Cursor
+
+Add to `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "json-render": {
+      "command": "npx",
+      "args": ["tsx", "path/to/server.ts", "--stdio"]
+    }
+  }
+}
+```
+
+### Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "json-render": {
+      "command": "npx",
+      "args": ["tsx", "/absolute/path/to/server.ts", "--stdio"]
+    }
+  }
+}
+```
+
+## Supported Clients
+
+MCP Apps are supported by Claude (web and desktop), ChatGPT, VS Code (GitHub Copilot), Cursor, Goose, and Postman.

apps/web/app/(main)/docs/api/react-email/page.mdx

@@ -0,0 +1,310 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/react-email")
+
+# @json-render/react-email
+
+React Email renderer. Turn JSON specs into HTML or plain-text emails using `@react-email/components` and `@react-email/render`.
+
+## Install
+
+```bash
+npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
+```
+
+See the [React Email example](https://github.com/vercel-labs/json-render/tree/main/examples/react-email) for a full working example.
+
+## schema
+
+The email element schema for specs. Use with `defineCatalog` from core.
+
+```typescript
+import { defineCatalog } from '@json-render/core';
+import { schema, standardComponentDefinitions } from '@json-render/react-email';
+
+const catalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+});
+```
+
+## Render Functions
+
+Server-side functions for producing email output. All accept a spec and optional `RenderOptions`.
+
+```typescript
+import { renderToHtml, renderToPlainText } from '@json-render/react-email';
+
+const html = await renderToHtml(spec);
+
+const plainText = await renderToPlainText(spec);
+```
+
+### RenderOptions
+
+```typescript
+interface RenderOptions {
+  registry?: ComponentRegistry;
+  includeStandard?: boolean;  // default: true
+  state?: Record<string, unknown>;
+}
+```
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>registry</code></td>
+      <td>Custom component map (merged with standard components)</td>
+    </tr>
+    <tr>
+      <td><code>includeStandard</code></td>
+      <td>Include built-in standard components (default: <code>true</code>)</td>
+    </tr>
+    <tr>
+      <td><code>state</code></td>
+      <td>Initial state for <code>$state</code> / <code>$cond</code> dynamic prop resolution</td>
+    </tr>
+  </tbody>
+</table>
+
+## defineRegistry
+
+Create a type-safe component registry from a catalog. Components receive `{ props, children, emit, bindings, loading }`.
+
+```tsx
+import { defineRegistry } from '@json-render/react-email';
+import { Container, Heading, Text } from '@react-email/components';
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) => (
+      <Container style={{ padding: 16, backgroundColor: '#fff' }}>
+        <Heading>{props.title}</Heading>
+        {children}
+      </Container>
+    ),
+  },
+});
+
+const html = await renderToHtml(spec, { registry });
+```
+
+## createRenderer
+
+Create a standalone renderer component wired to state, actions, and validation (for interactive previews in the browser).
+
+```typescript
+import { createRenderer } from '@json-render/react-email';
+
+const EmailRenderer = createRenderer(catalog, components);
+```
+
+## Renderer
+
+The main component that renders a spec to React Email elements. Use inside `JSONUIProvider` when you need state, actions, or visibility.
+
+```typescript
+interface RendererProps {
+  spec: Spec | null;
+  registry?: ComponentRegistry;
+  includeStandard?: boolean;  // default: true
+  loading?: boolean;
+  fallback?: ComponentRenderer;
+}
+```
+
+## Standard Components
+
+### Document structure
+
+<table>
+  <thead>
+    <tr>
+      <th>Component</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>Html</code></td>
+      <td>Top-level email wrapper. Must be the root element.</td>
+    </tr>
+    <tr>
+      <td><code>Head</code></td>
+      <td>Email head section. Place inside Html.</td>
+    </tr>
+    <tr>
+      <td><code>Body</code></td>
+      <td>Email body wrapper. Place inside Html.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Layout
+
+<table>
+  <thead>
+    <tr>
+      <th>Component</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>Container</code></td>
+      <td>Constrains content width (e.g. max-width 600px).</td>
+    </tr>
+    <tr>
+      <td><code>Section</code></td>
+      <td>Groups related content.</td>
+    </tr>
+    <tr>
+      <td><code>Row</code></td>
+      <td>Horizontal layout row.</td>
+    </tr>
+    <tr>
+      <td><code>Column</code></td>
+      <td>Column within a Row.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Content
+
+<table>
+  <thead>
+    <tr>
+      <th>Component</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>Heading</code></td>
+      <td>Heading text (h1-h6).</td>
+    </tr>
+    <tr>
+      <td><code>Text</code></td>
+      <td>Body text paragraph.</td>
+    </tr>
+    <tr>
+      <td><code>Link</code></td>
+      <td>Hyperlink with text and href.</td>
+    </tr>
+    <tr>
+      <td><code>Button</code></td>
+      <td>Call-to-action button (link styled as button).</td>
+    </tr>
+    <tr>
+      <td><code>Image</code></td>
+      <td>Image from URL.</td>
+    </tr>
+    <tr>
+      <td><code>Hr</code></td>
+      <td>Horizontal rule separator.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Utility
+
+<table>
+  <thead>
+    <tr>
+      <th>Component</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>Preview</code></td>
+      <td>Preview text for inbox (inside Html).</td>
+    </tr>
+    <tr>
+      <td><code>Markdown</code></td>
+      <td>Renders markdown content as email-safe HTML.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Server-Safe Import
+
+Import schema and catalog definitions without pulling in React or `@react-email/components`:
+
+```typescript
+import { schema, standardComponentDefinitions } from '@json-render/react-email/server';
+```
+
+## Sub-path Exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>@json-render/react-email</code></td>
+      <td>Full package: schema, renderer, components, render functions</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/react-email/server</code></td>
+      <td>Schema and catalog definitions only (no React)</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/react-email/catalog</code></td>
+      <td>Standard component definitions and types</td>
+    </tr>
+    <tr>
+      <td><code>@json-render/react-email/render</code></td>
+      <td>Server-side render functions only</td>
+    </tr>
+  </tbody>
+</table>
+
+## Types
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ReactEmailSchema</code></td>
+      <td>Schema type for email specs</td>
+    </tr>
+    <tr>
+      <td><code>ReactEmailSpec</code></td>
+      <td>Spec type for email documents</td>
+    </tr>
+    <tr>
+      <td><code>RenderOptions</code></td>
+      <td>Options for render functions</td>
+    </tr>
+    <tr>
+      <td><code>ComponentContext</code></td>
+      <td>Typed component render function context</td>
+    </tr>
+    <tr>
+      <td><code>ComponentFn</code></td>
+      <td>Component render function type</td>
+    </tr>
+    <tr>
+      <td><code>StandardComponentDefinitions</code></td>
+      <td>Type of the standard component definitions object</td>
+    </tr>
+    <tr>
+      <td><code>StandardComponentProps&lt;K&gt;</code></td>
+      <td>Inferred props type for a standard component by name</td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/react-native/page.mdx

@@ -9,54 +9,79 @@ React Native renderer with standard components, providers, and hooks.
 
 ### Layout
 
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `Container` | `padding`, `background`, `borderRadius`, `borderColor`, `flex` | Basic wrapper with styling |
-| `Row` | `gap`, `align`, `justify`, `flex`, `wrap` | Horizontal flex layout |
-| `Column` | `gap`, `align`, `justify`, `flex` | Vertical flex layout |
-| `ScrollContainer` | `direction` | Scrollable area (vertical or horizontal) |
-| `SafeArea` | `edges` | Safe area insets for notch/home indicator |
-| `Pressable` | `action`, `actionParams` | Touchable wrapper that triggers actions |
-| `Spacer` | `size`, `flex` | Fixed or flexible spacing |
-| `Divider` | `color`, `thickness` | Thin line separator |
+<table>
+<thead>
+<tr><th>Component</th><th>Props</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>Container</code></td><td><code>padding</code>, <code>background</code>, <code>borderRadius</code>, <code>borderColor</code>, <code>flex</code></td><td>Basic wrapper with styling</td></tr>
+<tr><td><code>Row</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code>, <code>wrap</code></td><td>Horizontal flex layout</td></tr>
+<tr><td><code>Column</code></td><td><code>gap</code>, <code>align</code>, <code>justify</code>, <code>flex</code></td><td>Vertical flex layout</td></tr>
+<tr><td><code>ScrollContainer</code></td><td><code>direction</code></td><td>Scrollable area (vertical or horizontal)</td></tr>
+<tr><td><code>SafeArea</code></td><td><code>edges</code></td><td>Safe area insets for notch/home indicator</td></tr>
+<tr><td><code>Pressable</code></td><td><code>action</code>, <code>actionParams</code></td><td>Touchable wrapper that triggers actions</td></tr>
+<tr><td><code>Spacer</code></td><td><code>size</code>, <code>flex</code></td><td>Fixed or flexible spacing</td></tr>
+<tr><td><code>Divider</code></td><td><code>color</code>, <code>thickness</code></td><td>Thin line separator</td></tr>
+</tbody>
+</table>
 
 ### Content
 
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `Heading` | `text`, `level`, `align`, `color` | Heading text (levels 1-6) |
-| `Paragraph` | `text`, `align`, `color` | Body text |
-| `Label` | `text`, `color`, `bold` | Small label text |
-| `Image` | `uri`, `width`, `height`, `resizeMode`, `borderRadius` | Image display |
-| `Avatar` | `uri`, `size`, `fallback` | Circular avatar |
-| `Badge` | `label`, `color`, `textColor` | Status badge |
-| `Chip` | `label`, `selected`, `color` | Tag/chip |
+<table>
+<thead>
+<tr><th>Component</th><th>Props</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>Heading</code></td><td><code>text</code>, <code>level</code>, <code>align</code>, <code>color</code></td><td>Heading text (levels 1-6)</td></tr>
+<tr><td><code>Paragraph</code></td><td><code>text</code>, <code>align</code>, <code>color</code></td><td>Body text</td></tr>
+<tr><td><code>Label</code></td><td><code>text</code>, <code>color</code>, <code>bold</code></td><td>Small label text</td></tr>
+<tr><td><code>Image</code></td><td><code>uri</code>, <code>width</code>, <code>height</code>, <code>resizeMode</code>, <code>borderRadius</code></td><td>Image display</td></tr>
+<tr><td><code>Avatar</code></td><td><code>uri</code>, <code>size</code>, <code>fallback</code></td><td>Circular avatar</td></tr>
+<tr><td><code>Badge</code></td><td><code>label</code>, <code>color</code>, <code>textColor</code></td><td>Status badge</td></tr>
+<tr><td><code>Chip</code></td><td><code>label</code>, <code>selected</code>, <code>color</code></td><td>Tag/chip</td></tr>
+</tbody>
+</table>
 
 ### Input
 
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `Button` | `label`, `variant`, `size`, `disabled`, `action`, `actionParams` | Pressable button |
-| `TextInput` | `placeholder`, `value` (use `$bindState`), `secure`, `keyboardType`, `multiline` | Text input field |
-| `Switch` | `checked` (use `$bindState`), `label` | Toggle switch |
-| `Checkbox` | `checked` (use `$bindState`), `label` | Checkbox with label |
-| `Slider` | `value` (use `$bindState`), `min`, `max`, `step` | Range slider |
-| `SearchBar` | `placeholder`, `value` (use `$bindState`) | Search input |
+<table>
+<thead>
+<tr><th>Component</th><th>Props</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>Button</code></td><td><code>label</code>, <code>variant</code>, <code>size</code>, <code>disabled</code>, <code>action</code>, <code>actionParams</code></td><td>Pressable button</td></tr>
+<tr><td><code>TextInput</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>), <code>secure</code>, <code>keyboardType</code>, <code>multiline</code></td><td>Text input field</td></tr>
+<tr><td><code>Switch</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Toggle switch</td></tr>
+<tr><td><code>Checkbox</code></td><td><code>checked</code> (use <code>$bindState</code>), <code>label</code></td><td>Checkbox with label</td></tr>
+<tr><td><code>Slider</code></td><td><code>value</code> (use <code>$bindState</code>), <code>min</code>, <code>max</code>, <code>step</code></td><td>Range slider</td></tr>
+<tr><td><code>SearchBar</code></td><td><code>placeholder</code>, <code>value</code> (use <code>$bindState</code>)</td><td>Search input</td></tr>
+</tbody>
+</table>
 
 ### Feedback
 
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `Spinner` | `size`, `color` | Loading indicator |
-| `ProgressBar` | `progress`, `color`, `trackColor` | Progress indicator |
+<table>
+<thead>
+<tr><th>Component</th><th>Props</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>Spinner</code></td><td><code>size</code>, <code>color</code></td><td>Loading indicator</td></tr>
+<tr><td><code>ProgressBar</code></td><td><code>progress</code>, <code>color</code>, <code>trackColor</code></td><td>Progress indicator</td></tr>
+</tbody>
+</table>
 
 ### Composite
 
-| Component | Props | Description |
-|-----------|-------|-------------|
-| `Card` | `title`, `subtitle`, `padding` | Card container |
-| `ListItem` | `title`, `subtitle`, `leading`, `trailing`, `action`, `actionParams` | List row |
-| `Modal` | `visible`, `title` | Bottom sheet modal |
+<table>
+<thead>
+<tr><th>Component</th><th>Props</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>Card</code></td><td><code>title</code>, <code>subtitle</code>, <code>padding</code></td><td>Card container</td></tr>
+<tr><td><code>ListItem</code></td><td><code>title</code>, <code>subtitle</code>, <code>leading</code>, <code>trailing</code>, <code>action</code>, <code>actionParams</code></td><td>List row</td></tr>
+<tr><td><code>Modal</code></td><td><code>visible</code>, <code>title</code></td><td>Bottom sheet modal</td></tr>
+</tbody>
+</table>
 
 ## Providers
 
@@ -68,11 +93,16 @@ React Native renderer with standard components, providers, and hooks.
 </StateProvider>
 ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `store` | `StateStore` | External store (controlled mode). When provided, `initialState` and `onStateChange` are ignored. |
-| `initialState` | `Record<string, unknown>` | Initial state model (uncontrolled mode). |
-| `onStateChange` | `(changes: Array<{ path: string; value: unknown }>) => void` | Callback when state changes (uncontrolled mode). Called once per `set` or `update` with all changed entries. |
+<table>
+<thead>
+<tr><th>Prop</th><th>Type</th><th>Description</th></tr>
+</thead>
+<tbody>
+<tr><td><code>store</code></td><td><code>StateStore</code></td><td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td></tr>
+<tr><td><code>initialState</code></td><td><code>Record&lt;string, unknown&gt;</code></td><td>Initial state model (uncontrolled mode).</td></tr>
+<tr><td><code>onStateChange</code></td><td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td><td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td></tr>
+</tbody>
+</table>
 
 #### External Store (Controlled Mode)
 
@@ -190,8 +220,13 @@ import { standardComponentDefinitions, standardActionDefinitions } from "@json-r
 import { schema } from "@json-render/react-native/schema";
 ```
 
-| Export | Purpose |
-|--------|---------|
-| `standardComponentDefinitions` | Catalog definitions for all 25+ standard components |
-| `standardActionDefinitions` | Catalog definitions for standard actions (setState, navigate) |
-| `schema` | React Native element tree schema |
+<table>
+<thead>
+<tr><th>Export</th><th>Purpose</th></tr>
+</thead>
+<tbody>
+<tr><td><code>standardComponentDefinitions</code></td><td>Catalog definitions for all 25+ standard components</td></tr>
+<tr><td><code>standardActionDefinitions</code></td><td>Catalog definitions for standard actions (setState, navigate)</td></tr>
+<tr><td><code>schema</code></td><td>React Native element tree schema</td></tr>
+</tbody>
+</table>

apps/web/app/(main)/docs/api/react-three-fiber/page.mdx

@@ -0,0 +1,416 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/react-three-fiber")
+
+# @json-render/react-three-fiber
+
+React Three Fiber renderer for json-render. 19 built-in 3D components for meshes, lights, models, environments, text, cameras, and controls.
+
+## Installation
+
+```bash
+npm install @json-render/react-three-fiber @json-render/core @json-render/react @react-three/fiber @react-three/drei three zod
+```
+
+## Entry Points
+
+<table>
+<thead>
+<tr>
+<th>Entry Point</th>
+<th>Exports</th>
+<th>Use For</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>@json-render/react-three-fiber</code></td>
+<td><code>threeComponents</code>, <code>ThreeRenderer</code>, <code>ThreeCanvas</code>, schemas</td>
+<td>React Three Fiber implementations and renderer</td>
+</tr>
+<tr>
+<td><code>@json-render/react-three-fiber/catalog</code></td>
+<td><code>threeComponentDefinitions</code></td>
+<td>Catalog schemas (no R3F dependency, safe for server)</td>
+</tr>
+</tbody>
+</table>
+
+## Usage
+
+```tsx
+import {'{ defineCatalog }'} from "@json-render/core";
+import {'{ schema, defineRegistry }'} from "@json-render/react";
+import {'{'}
+  threeComponentDefinitions,
+  threeComponents,
+  ThreeCanvas,
+{'}'} from "@json-render/react-three-fiber";
+
+const catalog = defineCatalog(schema, {'{'}
+  components: {'{'}
+    Box: threeComponentDefinitions.Box,
+    Sphere: threeComponentDefinitions.Sphere,
+    AmbientLight: threeComponentDefinitions.AmbientLight,
+    DirectionalLight: threeComponentDefinitions.DirectionalLight,
+    OrbitControls: threeComponentDefinitions.OrbitControls,
+  {'}'},
+  actions: {'{}'},
+{'}'});
+
+const {'{ registry }'} = defineRegistry(catalog, {'{'}
+  components: {'{'}
+    Box: threeComponents.Box,
+    Sphere: threeComponents.Sphere,
+    AmbientLight: threeComponents.AmbientLight,
+    DirectionalLight: threeComponents.DirectionalLight,
+    OrbitControls: threeComponents.OrbitControls,
+  {'}'},
+{'}'});
+```
+
+### ThreeCanvas (convenience)
+
+```tsx
+<ThreeCanvas
+  spec={'{spec}'}
+  registry={'{registry}'}
+  shadows
+  camera={'{'}{'{ position: [5, 5, 5], fov: 50 }'}{'}'} 
+  style={'{'}{'{ width: "100%", height: "100vh" }'}{'}'} 
+/>
+```
+
+### Manual Canvas Setup
+
+```tsx
+import {'{ Canvas }'} from "@react-three/fiber";
+import {'{ ThreeRenderer }'} from "@json-render/react-three-fiber";
+
+<Canvas shadows>
+  <ThreeRenderer spec={'{spec}'} registry={'{registry}'} />
+</Canvas>
+```
+
+## Components
+
+### Primitives
+
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+<th>Key Props</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Box</code></td>
+<td>Box mesh (default 1x1x1)</td>
+<td><code>width</code>, <code>height</code>, <code>depth</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Sphere</code></td>
+<td>Sphere mesh</td>
+<td><code>radius</code>, <code>widthSegments</code>, <code>heightSegments</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Cylinder</code></td>
+<td>Cylinder mesh</td>
+<td><code>radiusTop</code>, <code>radiusBottom</code>, <code>height</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Cone</code></td>
+<td>Cone mesh</td>
+<td><code>radius</code>, <code>height</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Torus</code></td>
+<td>Torus (donut) mesh</td>
+<td><code>radius</code>, <code>tube</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Plane</code></td>
+<td>Flat plane mesh</td>
+<td><code>width</code>, <code>height</code>, <code>material</code></td>
+</tr>
+<tr>
+<td><code>Capsule</code></td>
+<td>Capsule mesh</td>
+<td><code>radius</code>, <code>length</code>, <code>material</code></td>
+</tr>
+</tbody>
+</table>
+
+All primitives share: <code>position</code>, <code>rotation</code>, <code>scale</code>, <code>castShadow</code>, <code>receiveShadow</code>, <code>material</code>.
+
+### Material Schema
+
+<table>
+<thead>
+<tr>
+<th>Property</th>
+<th>Type</th>
+<th>Default</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>color</code></td>
+<td><code>string</code></td>
+<td><code>"#ffffff"</code></td>
+</tr>
+<tr>
+<td><code>metalness</code></td>
+<td><code>number</code></td>
+<td><code>0</code></td>
+</tr>
+<tr>
+<td><code>roughness</code></td>
+<td><code>number</code></td>
+<td><code>1</code></td>
+</tr>
+<tr>
+<td><code>emissive</code></td>
+<td><code>string</code></td>
+<td><code>"#000000"</code></td>
+</tr>
+<tr>
+<td><code>emissiveIntensity</code></td>
+<td><code>number</code></td>
+<td><code>1</code></td>
+</tr>
+<tr>
+<td><code>opacity</code></td>
+<td><code>number</code></td>
+<td><code>1</code></td>
+</tr>
+<tr>
+<td><code>transparent</code></td>
+<td><code>boolean</code></td>
+<td><code>false</code></td>
+</tr>
+<tr>
+<td><code>wireframe</code></td>
+<td><code>boolean</code></td>
+<td><code>false</code></td>
+</tr>
+</tbody>
+</table>
+
+### Lights
+
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+<th>Key Props</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>AmbientLight</code></td>
+<td>Uniform illumination</td>
+<td><code>color</code>, <code>intensity</code></td>
+</tr>
+<tr>
+<td><code>DirectionalLight</code></td>
+<td>Sunlight-style</td>
+<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>castShadow</code></td>
+</tr>
+<tr>
+<td><code>PointLight</code></td>
+<td>Radiates from a point</td>
+<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>distance</code>, <code>decay</code></td>
+</tr>
+<tr>
+<td><code>SpotLight</code></td>
+<td>Cone of light</td>
+<td><code>position</code>, <code>color</code>, <code>intensity</code>, <code>angle</code>, <code>penumbra</code></td>
+</tr>
+</tbody>
+</table>
+
+### Other Components
+
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+<th>Key Props</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Group</code></td>
+<td>Container for children</td>
+<td><code>position</code>, <code>rotation</code>, <code>scale</code></td>
+</tr>
+<tr>
+<td><code>Model</code></td>
+<td>GLTF/GLB model loader</td>
+<td><code>url</code>, <code>position</code>, <code>rotation</code>, <code>scale</code></td>
+</tr>
+<tr>
+<td><code>Environment</code></td>
+<td>HDRI environment map</td>
+<td><code>preset</code>, <code>background</code>, <code>blur</code>, <code>intensity</code></td>
+</tr>
+<tr>
+<td><code>Fog</code></td>
+<td>Linear fog effect</td>
+<td><code>color</code>, <code>near</code>, <code>far</code></td>
+</tr>
+<tr>
+<td><code>GridHelper</code></td>
+<td>Reference grid</td>
+<td><code>size</code>, <code>divisions</code>, <code>color</code></td>
+</tr>
+<tr>
+<td><code>Text3D</code></td>
+<td>3D text (SDF)</td>
+<td><code>text</code>, <code>fontSize</code>, <code>color</code>, <code>anchorX</code>, <code>anchorY</code></td>
+</tr>
+<tr>
+<td><code>PerspectiveCamera</code></td>
+<td>Camera</td>
+<td><code>position</code>, <code>fov</code>, <code>near</code>, <code>far</code>, <code>makeDefault</code></td>
+</tr>
+<tr>
+<td><code>OrbitControls</code></td>
+<td>Camera controls</td>
+<td><code>enableDamping</code>, <code>enableZoom</code>, <code>autoRotate</code></td>
+</tr>
+</tbody>
+</table>
+
+## Shared Schemas
+
+Reusable Zod schemas for custom 3D components:
+
+```tsx
+import {'{ vector3Schema, materialSchema, transformProps, shadowProps }'} from "@json-render/react-three-fiber";
+```
+
+<table>
+<thead>
+<tr>
+<th>Export</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>vector3Schema</code></td>
+<td><code>z.tuple([z.number(), z.number(), z.number()])</code></td>
+</tr>
+<tr>
+<td><code>materialSchema</code></td>
+<td>Standard material props (color, metalness, roughness, etc.)</td>
+</tr>
+<tr>
+<td><code>transformProps</code></td>
+<td><code>{'{ position, rotation, scale }'}</code> schema fields</td>
+</tr>
+<tr>
+<td><code>shadowProps</code></td>
+<td><code>{'{ castShadow, receiveShadow }'}</code> schema fields</td>
+</tr>
+</tbody>
+</table>
+
+## ThreeRenderer
+
+<table>
+<thead>
+<tr>
+<th>Prop</th>
+<th>Type</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>spec</code></td>
+<td><code>Spec | null</code></td>
+<td>The spec to render as a 3D scene</td>
+</tr>
+<tr>
+<td><code>registry</code></td>
+<td><code>ComponentRegistry</code></td>
+<td>Component registry from <code>defineRegistry</code></td>
+</tr>
+<tr>
+<td><code>store</code></td>
+<td><code>StateStore</code></td>
+<td>External state store (controlled mode)</td>
+</tr>
+<tr>
+<td><code>initialState</code></td>
+<td><code>Record&lt;string, unknown&gt;</code></td>
+<td>Initial state (uncontrolled mode)</td>
+</tr>
+<tr>
+<td><code>handlers</code></td>
+<td><code>Record&lt;string, Function&gt;</code></td>
+<td>Action handlers</td>
+</tr>
+<tr>
+<td><code>loading</code></td>
+<td><code>boolean</code></td>
+<td>Whether the spec is streaming</td>
+</tr>
+<tr>
+<td><code>children</code></td>
+<td><code>ReactNode</code></td>
+<td>Additional R3F elements alongside the spec</td>
+</tr>
+</tbody>
+</table>
+
+## ThreeCanvas
+
+Extends <code>ThreeRendererProps</code> with Canvas options:
+
+<table>
+<thead>
+<tr>
+<th>Prop</th>
+<th>Type</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>shadows</code></td>
+<td><code>boolean</code></td>
+<td>Enable shadow maps</td>
+</tr>
+<tr>
+<td><code>camera</code></td>
+<td><code>object</code></td>
+<td>Default camera config (position, fov, etc.)</td>
+</tr>
+<tr>
+<td><code>className</code></td>
+<td><code>string</code></td>
+<td>CSS class for the canvas container</td>
+</tr>
+<tr>
+<td><code>style</code></td>
+<td><code>CSSProperties</code></td>
+<td>Inline styles for the canvas container</td>
+</tr>
+</tbody>
+</table>
+
+## Type Helpers
+
+```tsx
+import type {'{ ThreeProps }'} from "@json-render/react-three-fiber";
+
+type BoxProps = ThreeProps<"Box">;
+type SphereProps = ThreeProps<"Sphere">;
+```

apps/web/app/(main)/docs/api/react/page.mdx

@@ -15,11 +15,32 @@ React components, providers, and hooks.
 </StateProvider>
 ```
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `store` | `StateStore` | External store (controlled mode). When provided, `initialState` and `onStateChange` are ignored. |
-| `initialState` | `Record<string, unknown>` | Initial state model (uncontrolled mode). |
-| `onStateChange` | `(changes: Array<{ path: string; value: unknown }>) => void` | Callback when state changes (uncontrolled mode). Called once per `set` or `update` with all changed entries. |
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>store</code></td>
+      <td><code>StateStore</code></td>
+      <td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
+    </tr>
+    <tr>
+      <td><code>initialState</code></td>
+      <td><code>Record&lt;string, unknown&gt;</code></td>
+      <td>Initial state model (uncontrolled mode).</td>
+    </tr>
+    <tr>
+      <td><code>onStateChange</code></td>
+      <td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
+      <td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
+    </tr>
+  </tbody>
+</table>
 
 #### External Store (Controlled Mode)
 
@@ -109,6 +130,40 @@ const { registry } = defineRegistry(catalog, {
 type Registry = Record<string, React.ComponentType<ComponentRenderProps>>;
 ```
 
+### JSONUIProvider
+
+Convenience wrapper that combines `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`. Accepts all their props plus:
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>functions</code></td>
+      <td><code>Record&lt;string, ComputedFunction&gt;</code></td>
+      <td>Named functions for <code>$computed</code> expressions in props</td>
+    </tr>
+  </tbody>
+</table>
+
+```tsx
+<JSONUIProvider
+  spec={spec}
+  catalog={catalog}
+  handlers={{ submit: async () => { /* ... */ } }}
+  functions={{ fullName: (args) => `${args.first} ${args.last}` }}
+>
+  <Renderer spec={spec} registry={registry} />
+</JSONUIProvider>
+```
+
+The `functions` prop is also available on `createRenderer`.
+
 ### Component Props (via defineRegistry)
 
 ```tsx
@@ -237,6 +292,15 @@ const {
 
 `ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
 
+### useOptionalValidation
+
+Non-throwing variant of `useValidation()`. Returns `null` when no `ValidationProvider` is present, instead of throwing. Useful in components that may or may not be rendered inside a validation context.
+
+```typescript
+const validation = useOptionalValidation();
+// ValidationContextValue | null
+```
+
 ### useBoundProp
 
 Two-way binding helper for `$bindState` / `$bindItem` expressions. Returns `[value, setValue]` where `setValue` writes back to the bound state path.

apps/web/app/(main)/docs/api/redux/page.mdx

@@ -0,0 +1,104 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/redux")
+
+# @json-render/redux
+
+Redux / Redux Toolkit adapter for json-render's `StateStore` interface.
+
+## Installation
+
+```bash
+npm install @json-render/redux @json-render/core @json-render/react redux
+# or with Redux Toolkit (recommended):
+npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
+```
+
+## reduxStateStore
+
+Create a `StateStore` backed by a Redux store.
+
+```typescript
+import { reduxStateStore } from "@json-render/redux";
+```
+
+### Options
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>store</code></td>
+      <td><code>Store</code></td>
+      <td>Yes</td>
+      <td>The Redux store instance.</td>
+    </tr>
+    <tr>
+      <td><code>selector</code></td>
+      <td><code>{'(state: S) => StateModel'}</code></td>
+      <td>No</td>
+      <td>Select the json-render slice from the Redux state tree. Defaults to <code>{'(state) => state'}</code>.</td>
+    </tr>
+    <tr>
+      <td><code>dispatch</code></td>
+      <td><code>{'(nextState: StateModel, store: Store) => void'}</code></td>
+      <td>Yes</td>
+      <td>Dispatch an action that replaces the selected slice with the next state.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Example
+
+```typescript
+import { configureStore, createSlice } from "@reduxjs/toolkit";
+import { reduxStateStore } from "@json-render/redux";
+import { StateProvider } from "@json-render/react";
+
+const uiSlice = createSlice({
+  name: "ui",
+  initialState: { count: 0 } as Record<string, unknown>,
+  reducers: {
+    replaceUiState: (_state, action) => action.payload,
+  },
+});
+
+const reduxStore = configureStore({
+  reducer: { ui: uiSlice.reducer },
+});
+
+const store = reduxStateStore({
+  store: reduxStore,
+  selector: (state) => state.ui,
+  dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
+});
+```
+
+```tsx
+<StateProvider store={store}>
+  {/* json-render reads/writes go through Redux */}
+</StateProvider>
+```
+
+## Re-exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Source</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>StateStore</code></td>
+      <td><code>@json-render/core</code></td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/shadcn/page.mdx

@@ -15,10 +15,27 @@ Your app must have Tailwind CSS configured.
 
 ## Entry Points
 
-| Entry Point | Exports | Use For |
-|-------------|---------|---------|
-| `@json-render/shadcn` | `shadcnComponents` | React implementations |
-| `@json-render/shadcn/catalog` | `shadcnComponentDefinitions` | Catalog schemas (no React dependency, safe for server) |
+<table>
+<thead>
+<tr>
+<th>Entry Point</th>
+<th>Exports</th>
+<th>Use For</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>@json-render/shadcn</code></td>
+<td><code>shadcnComponents</code></td>
+<td>React implementations</td>
+</tr>
+<tr>
+<td><code>@json-render/shadcn/catalog</code></td>
+<td><code>shadcnComponentDefinitions</code></td>
+<td>Catalog schemas (no React dependency, safe for server)</td>
+</tr>
+</tbody>
+</table>
 
 ## Usage
 
@@ -103,69 +120,225 @@ const { registry } = defineRegistry(catalog, {
 
 ### Layout
 
-| Component | Description |
-|-----------|-------------|
-| `Card` | Container card with optional title, description, maxWidth, centered |
-| `Stack` | Flex container with direction, gap, align, justify |
-| `Grid` | Grid layout with columns (1-6) and gap |
-| `Separator` | Visual separator line with orientation |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Card</code></td>
+<td>Container card with optional title, description, maxWidth, centered</td>
+</tr>
+<tr>
+<td><code>Stack</code></td>
+<td>Flex container with direction, gap, align, justify</td>
+</tr>
+<tr>
+<td><code>Grid</code></td>
+<td>Grid layout with columns (1-6) and gap</td>
+</tr>
+<tr>
+<td><code>Separator</code></td>
+<td>Visual separator line with orientation</td>
+</tr>
+</tbody>
+</table>
 
 ### Navigation
 
-| Component | Description |
-|-----------|-------------|
-| `Tabs` | Tabbed navigation with tabs array, defaultValue, value |
-| `Accordion` | Collapsible sections with items array and type (single/multiple) |
-| `Collapsible` | Single collapsible section with title and defaultOpen |
-| `Pagination` | Page navigation with totalPages and page |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Tabs</code></td>
+<td>Tabbed navigation with tabs array, defaultValue, value</td>
+</tr>
+<tr>
+<td><code>Accordion</code></td>
+<td>Collapsible sections with items array and type (single/multiple)</td>
+</tr>
+<tr>
+<td><code>Collapsible</code></td>
+<td>Single collapsible section with title and defaultOpen</td>
+</tr>
+<tr>
+<td><code>Pagination</code></td>
+<td>Page navigation with totalPages and page</td>
+</tr>
+</tbody>
+</table>
 
 ### Overlay
 
-| Component | Description |
-|-----------|-------------|
-| `Dialog` | Modal dialog with title, description, openPath |
-| `Drawer` | Bottom drawer with title, description, openPath |
-| `Tooltip` | Hover tooltip with content and text |
-| `Popover` | Click-triggered popover with trigger and content |
-| `DropdownMenu` | Dropdown menu with label and items array |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Dialog</code></td>
+<td>Modal dialog with title, description, openPath</td>
+</tr>
+<tr>
+<td><code>Drawer</code></td>
+<td>Bottom drawer with title, description, openPath</td>
+</tr>
+<tr>
+<td><code>Tooltip</code></td>
+<td>Hover tooltip with content and text</td>
+</tr>
+<tr>
+<td><code>Popover</code></td>
+<td>Click-triggered popover with trigger and content</td>
+</tr>
+<tr>
+<td><code>DropdownMenu</code></td>
+<td>Dropdown menu with label and items array</td>
+</tr>
+</tbody>
+</table>
 
 ### Content
 
-| Component | Description |
-|-----------|-------------|
-| `Heading` | Heading text with level (h1-h4) |
-| `Text` | Paragraph with variant (body, caption, muted, lead, code) |
-| `Image` | Image with alt, width, height |
-| `Avatar` | User avatar with src, name, size |
-| `Badge` | Status badge with text and variant |
-| `Alert` | Alert banner with title, message, type |
-| `Carousel` | Horizontally scrollable carousel with items |
-| `Table` | Data table with columns and rows |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Heading</code></td>
+<td>Heading text with level (h1-h4)</td>
+</tr>
+<tr>
+<td><code>Text</code></td>
+<td>Paragraph with variant (body, caption, muted, lead, code)</td>
+</tr>
+<tr>
+<td><code>Image</code></td>
+<td>Image with alt, width, height</td>
+</tr>
+<tr>
+<td><code>Avatar</code></td>
+<td>User avatar with src, name, size</td>
+</tr>
+<tr>
+<td><code>Badge</code></td>
+<td>Status badge with text and variant</td>
+</tr>
+<tr>
+<td><code>Alert</code></td>
+<td>Alert banner with title, message, type</td>
+</tr>
+<tr>
+<td><code>Carousel</code></td>
+<td>Horizontally scrollable carousel with items</td>
+</tr>
+<tr>
+<td><code>Table</code></td>
+<td>Data table with columns and rows</td>
+</tr>
+</tbody>
+</table>
 
 ### Feedback
 
-| Component | Description |
-|-----------|-------------|
-| `Progress` | Progress bar with value, max, label |
-| `Skeleton` | Loading placeholder with width, height, rounded |
-| `Spinner` | Loading spinner with size and label |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Progress</code></td>
+<td>Progress bar with value, max, label</td>
+</tr>
+<tr>
+<td><code>Skeleton</code></td>
+<td>Loading placeholder with width, height, rounded</td>
+</tr>
+<tr>
+<td><code>Spinner</code></td>
+<td>Loading spinner with size and label</td>
+</tr>
+</tbody>
+</table>
 
 ### Input
 
-| Component | Description |
-|-----------|-------------|
-| `Button` | Clickable button with label, variant, disabled |
-| `Link` | Anchor link with label and href |
-| `Input` | Text input with label, name, type, placeholder, value, checks |
-| `Textarea` | Multi-line text input with label, name, placeholder, rows, value, checks |
-| `Select` | Dropdown select with label, name, options, value, checks |
-| `Checkbox` | Checkbox with label, name, checked |
-| `Radio` | Radio button group with label, name, options, value |
-| `Switch` | Toggle switch with label, name, checked |
-| `Slider` | Range slider with label, min, max, step, value |
-| `Toggle` | Toggle button with label, pressed, variant |
-| `ToggleGroup` | Group of toggle buttons with items, type, value |
-| `ButtonGroup` | Group of buttons with buttons array and selected |
+<table>
+<thead>
+<tr>
+<th>Component</th>
+<th>Description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>Button</code></td>
+<td>Clickable button with label, variant, disabled</td>
+</tr>
+<tr>
+<td><code>Link</code></td>
+<td>Anchor link with label and href</td>
+</tr>
+<tr>
+<td><code>Input</code></td>
+<td>Text input with label, name, type, placeholder, value, checks</td>
+</tr>
+<tr>
+<td><code>Textarea</code></td>
+<td>Multi-line text input with label, name, placeholder, rows, value, checks</td>
+</tr>
+<tr>
+<td><code>Select</code></td>
+<td>Dropdown select with label, name, options, value, checks</td>
+</tr>
+<tr>
+<td><code>Checkbox</code></td>
+<td>Checkbox with label, name, checked</td>
+</tr>
+<tr>
+<td><code>Radio</code></td>
+<td>Radio button group with label, name, options, value</td>
+</tr>
+<tr>
+<td><code>Switch</code></td>
+<td>Toggle switch with label, name, checked</td>
+</tr>
+<tr>
+<td><code>Slider</code></td>
+<td>Range slider with label, min, max, step, value</td>
+</tr>
+<tr>
+<td><code>Toggle</code></td>
+<td>Toggle button with label, pressed, variant</td>
+</tr>
+<tr>
+<td><code>ToggleGroup</code></td>
+<td>Group of toggle buttons with items, type, value</td>
+</tr>
+<tr>
+<td><code>ButtonGroup</code></td>
+<td>Group of buttons with buttons array and selected</td>
+</tr>
+</tbody>
+</table>
 
 ## Notes
 

apps/web/app/(main)/docs/api/solid/page.mdx

@@ -0,0 +1,201 @@
+import { pageMetadata } from "@/lib/page-metadata";
+export const metadata = pageMetadata("docs/api/solid");
+
+# @json-render/solid
+
+SolidJS components, providers, and hooks for rendering json-render specs.
+
+## Installation
+
+<PackageInstall packages="@json-render/core @json-render/solid" />
+
+Peer dependencies: `solid-js ^1.9.0` and `zod ^4.0.0`.
+
+<PackageInstall packages="solid-js zod" />
+
+## Providers
+
+### StateProvider
+
+```tsx
+<StateProvider
+  initialState={{}}
+  onStateChange={(changes) => console.log(changes)}
+>
+  {/* children */}
+</StateProvider>
+```
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>store</code>
+      </td>
+      <td>
+        <code>StateStore</code>
+      </td>
+      <td>
+        External store (controlled mode). When provided,{" "}
+        <code>initialState</code> and <code>onStateChange</code> are ignored.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>initialState</code>
+      </td>
+      <td>
+        <code>Record&lt;string, unknown&gt;</code>
+      </td>
+      <td>Initial state model for uncontrolled mode.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>onStateChange</code>
+      </td>
+      <td>
+        <code>
+          {"(changes: Array<{ path: string; value: unknown }>) => void"}
+        </code>
+      </td>
+      <td>Called for uncontrolled state updates.</td>
+    </tr>
+  </tbody>
+</table>
+
+### ActionProvider
+
+```tsx
+<ActionProvider
+  handlers={{ submit: async (params) => {} }}
+  navigate={(path) => {}}
+>
+  {/* children */}
+</ActionProvider>
+```
+
+### VisibilityProvider
+
+```tsx
+<VisibilityProvider>{/* children */}</VisibilityProvider>
+```
+
+### ValidationProvider
+
+```tsx
+<ValidationProvider customFunctions={{ custom: (value) => Boolean(value) }}>
+  {/* children */}
+</ValidationProvider>
+```
+
+### JSONUIProvider
+
+Combined provider wrapper for state, visibility, validation, and actions.
+
+```tsx
+<JSONUIProvider
+  registry={registry}
+  initialState={{}}
+  handlers={handlers}
+  validationFunctions={validationFunctions}
+>
+  <Renderer spec={spec} registry={registry} />
+</JSONUIProvider>
+```
+
+## defineRegistry
+
+Create a typed component registry and action helpers from a catalog.
+
+```tsx
+const { registry, handlers, executeAction } = defineRegistry(catalog, {
+  components: {
+    Card: (renderProps) => <div>{renderProps.children}</div>,
+    Button: (renderProps) => (
+      <button onClick={() => renderProps.emit("press")}>
+        {renderProps.element.props.label as string}
+      </button>
+    ),
+  },
+  actions: {
+    submit: async (params, setState, state) => {
+      // custom action logic
+    },
+  },
+});
+```
+
+## Components
+
+### Renderer
+
+```tsx
+<Renderer spec={spec} registry={registry} loading={false} />
+```
+
+Renders a `Spec` tree using your registry.
+
+### createRenderer
+
+Build an app-level renderer from catalog + components:
+
+```tsx
+const AppRenderer = createRenderer(catalog, {
+  Card: (renderProps) => <div>{renderProps.children}</div>,
+});
+
+<AppRenderer spec={spec} state={{}} onAction={(name, params) => {}} />;
+```
+
+## Hooks
+
+- `useStateStore()`
+- `useStateValue(path)` - returns an accessor
+- `useStateBinding(path)` - returns `[Accessor<T | undefined>, setValue]`
+- `useVisibility()` / `useIsVisible(condition)`
+- `useActions()` / `useAction(binding)`
+- `useValidation()` / `useOptionalValidation()`
+- `useFieldValidation(path, config)` - returns accessor-backed `state`, `errors`, and `isValid`
+- `useBoundProp(value, bindingPath)`
+- `useUIStream(options)`
+- `useChatUI(options)`
+
+## Built-in Actions
+
+`ActionProvider` handles these built-in actions:
+
+- `setState`
+- `pushState`
+- `removeState`
+- `validateForm`
+
+## Component Props
+
+Registry components receive:
+
+```ts
+interface ComponentRenderProps<P = Record<string, unknown>> {
+  element: UIElement<string, P>;
+  children?: JSX.Element;
+  emit: (event: string) => void;
+  on: (event: string) => EventHandle;
+  bindings?: Record<string, string>;
+  loading?: boolean;
+}
+```
+
+Use `emit("event")` to dispatch event bindings. Use `on("event")` to access `EventHandle` metadata (`bound`, `shouldPreventDefault`, `emit`).
+
+## Reactivity Notes
+
+- Keep changing reads in JSX expressions, `createMemo`, or `createEffect`.
+- Avoid props destructuring in component signatures when you need live updates.
+- `StateProvider` and other contexts expose getter-backed values so consumers read live signals.
+- `useStateValue`, `useStateBinding`, and `useFieldValidation` expose reactive accessors; call them as functions.

apps/web/app/(main)/docs/api/svelte/page.mdx

@@ -0,0 +1,126 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/svelte")
+
+# @json-render/svelte
+
+Svelte 5 components, providers, and helpers for rendering json-render specs.
+
+## Installation
+
+<PackageInstall packages="@json-render/core @json-render/svelte" />
+
+Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
+
+<PackageInstall packages="svelte zod" />
+
+## Components
+
+### Renderer
+
+```svelte
+<Renderer
+  spec={spec}       // Spec | null
+  registry={registry}
+  loading={false}
+/>
+```
+
+Renders a spec with your component registry. If `spec` is `null`, it renders nothing.
+
+### JsonUIProvider
+
+Convenience wrapper around `StateProvider`, `VisibilityProvider`, `ValidationProvider`, and `ActionProvider`.
+
+```svelte
+<JsonUIProvider
+  initialState={{}}
+  handlers={handlers}
+  validationFunctions={validationFunctions}
+>
+  <Renderer {spec} {registry} />
+</JsonUIProvider>
+```
+
+## defineRegistry
+
+Create a typed component registry and action handlers from a catalog.
+
+```typescript
+import { defineRegistry } from "@json-render/svelte";
+
+const { registry, handlers, executeAction } = defineRegistry(catalog, {
+  components: {
+    Card,
+    Button,
+  },
+  actions: {
+    submit: async (params, setState, state) => {
+      // custom action logic
+    },
+  },
+});
+```
+
+`handlers` is designed for `JsonUIProvider`/`ActionProvider`. `executeAction` is an imperative helper.
+
+## Component Props
+
+Registry components receive `BaseComponentProps<TProps>`:
+
+```typescript
+interface BaseComponentProps<TProps> {
+  props: TProps;
+  children?: Snippet;
+  emit: (event: string) => void;
+  bindings?: Record<string, string>;
+  loading?: boolean;
+}
+```
+
+Use `emit("eventName")` to trigger handlers declared in the spec `on` bindings.
+
+## Context Helpers
+
+Use these helpers inside Svelte components:
+
+- `getStateValue(path)` - read/write state via `.current`
+- `getBoundProp(() => value, () => bindingPath)` - write back resolved `$bindState` / `$bindItem` values
+- `isVisible(condition)` - evaluate visibility via `.current`
+- `getAction(name)` - read a registered action handler via `.current`
+- `getFieldValidation(ctx, path, config)` - get field validation state + actions
+
+For advanced usage, access full contexts:
+
+- `getStateContext()`
+- `getActionContext()`
+- `getVisibilityContext()`
+- `getValidationContext()`
+- `getOptionalValidationContext()`
+
+## Streaming
+
+### createUIStream
+
+```typescript
+const stream = createUIStream({
+  api: "/api/generate-ui",
+  onComplete: (spec) => console.log(spec),
+});
+
+await stream.send("Create a login form");
+
+console.log(stream.spec);
+console.log(stream.isStreaming);
+```
+
+### createChatUI
+
+```typescript
+const chat = createChatUI({ api: "/api/chat-ui" });
+await chat.send("Build a settings panel");
+console.log(chat.messages, chat.isStreaming);
+```
+
+## Schema Export
+
+Use `schema` from `@json-render/svelte` when defining catalogs for Svelte specs.

apps/web/app/(main)/docs/api/vue/page.mdx

@@ -0,0 +1,337 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/vue")
+
+# @json-render/vue
+
+Vue 3 components, providers, and composables.
+
+## Providers
+
+### StateProvider
+
+```vue
+<StateProvider :initial-state="object" :on-state-change="fn">
+  <!-- children -->
+</StateProvider>
+```
+
+<table>
+  <thead>
+    <tr>
+      <th>Prop</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>store</code></td>
+      <td><code>StateStore</code></td>
+      <td>External store (controlled mode). When provided, <code>initialState</code> and <code>onStateChange</code> are ignored.</td>
+    </tr>
+    <tr>
+      <td><code>initialState</code></td>
+      <td><code>Record&lt;string, unknown&gt;</code></td>
+      <td>Initial state model (uncontrolled mode).</td>
+    </tr>
+    <tr>
+      <td><code>onStateChange</code></td>
+      <td><code>{'(changes: Array<{ path: string; value: unknown }>) => void'}</code></td>
+      <td>Callback when state changes (uncontrolled mode). Called once per <code>set</code> or <code>update</code> with all changed entries.</td>
+    </tr>
+  </tbody>
+</table>
+
+#### External Store (Controlled Mode)
+
+Pass a `StateStore` to bypass the internal state and wire json-render to any state management library:
+
+```typescript
+import { createStateStore, type StateStore } from "@json-render/vue";
+
+const store = createStateStore({ count: 0 });
+```
+
+```vue
+<StateProvider :store="store">
+  <!-- children -->
+</StateProvider>
+```
+
+```typescript
+// Mutate from anywhere — Vue re-renders automatically:
+store.set("/count", 1);
+```
+
+### ActionProvider
+
+```vue
+<ActionProvider :handlers="Record<string, ActionHandler>" :navigate="fn">
+  <!-- children -->
+</ActionProvider>
+
+// type ActionHandler = (params: Record<string, unknown>) => void | Promise<void>;
+```
+
+### VisibilityProvider
+
+```vue
+<VisibilityProvider>
+  <!-- children -->
+</VisibilityProvider>
+```
+
+`VisibilityProvider` reads state from the parent `StateProvider` automatically. Conditions in specs use the `VisibilityCondition` format with `$state` paths (e.g. `{ "$state": "/path" }`, `{ "$state": "/path", "eq": value }`). See [visibility](/docs/visibility) for the full syntax.
+
+### ValidationProvider
+
+```vue
+<ValidationProvider :custom-functions="Record<string, ValidationFunction>">
+  <!-- children -->
+</ValidationProvider>
+
+// type ValidationFunction = (value: unknown, args?: object) => boolean | Promise<boolean>;
+```
+
+## defineRegistry
+
+Create a type-safe component registry from a catalog. Components receive `props`, `children`, `emit`, `on`, and `loading` with catalog-inferred types.
+
+When the catalog declares actions, the `actions` field is required. When the catalog has no actions (e.g. `actions: {}`), the field is optional. When passing stubs, any `async () => {}` is sufficient.
+
+```typescript
+import { h } from "vue";
+import { defineRegistry } from "@json-render/vue";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) =>
+      h("div", { class: "card" }, [h("h3", null, props.title), children]),
+    Button: ({ props, emit }) =>
+      h("button", { onClick: () => emit("press") }, props.label),
+  },
+  // Required when catalog declares actions:
+  actions: {
+    submit: async (params) => { /* ... */ },
+  },
+});
+
+// Pass to <Renderer>
+// <Renderer :spec="spec" :registry="registry" />
+```
+
+## Components
+
+### Renderer
+
+```vue
+<Renderer
+  :spec="Spec"           // The UI spec to render
+  :registry="Registry"   // Component registry (from defineRegistry)
+  :loading="boolean"     // Optional loading state
+  :fallback="Component"  // Optional fallback for unknown types
+/>
+```
+
+### Component Props (via defineRegistry)
+
+```typescript
+import type { VNode } from "vue";
+
+interface ComponentContext<P> {
+  props: P;                          // Typed props from catalog
+  children?: VNode | VNode[];        // Rendered children (for container components)
+  emit: (event: string) => void;     // Emit a named event (always defined)
+  on: (event: string) => EventHandle; // Get event handle with metadata
+  loading?: boolean;
+  bindings?: Record<string, string>; // State paths from $bindState/$bindItem expressions
+}
+
+interface EventHandle {
+  emit: () => void;              // Fire the event
+  shouldPreventDefault: boolean; // Whether any binding requested preventDefault
+  bound: boolean;                // Whether any handler is bound
+}
+```
+
+Use `emit("press")` for simple event firing. Use `on("click")` when you need metadata like `shouldPreventDefault`:
+
+```typescript
+Link: ({ props, on }) => {
+  const click = on("click");
+  return h("a", {
+    href: props.href,
+    onClick: (e: MouseEvent) => {
+      if (click.shouldPreventDefault) e.preventDefault();
+      click.emit();
+    },
+  }, props.label);
+},
+```
+
+### BaseComponentProps
+
+Catalog-agnostic base type for building reusable component libraries that are not tied to a specific catalog:
+
+```typescript
+import type { BaseComponentProps } from "@json-render/vue";
+
+const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
+  h("div", null, [props.title, children]);
+```
+
+## Composables
+
+### useStateStore
+
+```typescript
+const {
+  state,   // ShallowRef<StateModel> — access with state.value
+  get,     // (path: string) => unknown
+  set,     // (path: string, value: unknown) => void
+  update,  // (updates: Record<string, unknown>) => void
+} = useStateStore();
+```
+
+> **Note:** `state` is a `ShallowRef<StateModel>`, not a plain object. Use `state.value` to read the current state. This differs from the React renderer.
+
+### useStateValue
+
+```typescript
+const value = useStateValue(path: string); // ComputedRef<T | undefined>
+```
+
+Returns a `ComputedRef` that automatically updates when the state at `path` changes. Use `.value` to access the current value.
+
+### useStateBinding (deprecated)
+
+> **Deprecated.** Use `$bindState` expressions with `bindings` prop instead.
+
+```typescript
+const [value, setValue] = useStateBinding(path: string);
+// value: ComputedRef<T | undefined>
+// setValue: (value: T) => void
+```
+
+### useActions
+
+```typescript
+const { execute } = useActions();
+// execute(binding: ActionBinding) => Promise<void>
+```
+
+### useAction
+
+```typescript
+const { execute, isLoading } = useAction(binding: ActionBinding);
+// execute: () => Promise<void>
+// isLoading: ComputedRef<boolean>
+```
+
+### useIsVisible
+
+```typescript
+const isVisible = useIsVisible(condition?: VisibilityCondition);
+```
+
+### useFieldValidation
+
+```typescript
+const {
+  state,     // ComputedRef<FieldValidationState>
+  validate,  // () => ValidationResult
+  touch,     // () => void
+  clear,     // () => void
+  errors,    // ComputedRef<string[]>
+  isValid,   // ComputedRef<boolean>
+} = useFieldValidation(path: string, config?: ValidationConfig);
+```
+
+`ValidationConfig` is `{ checks?: ValidationCheck[], validateOn?: 'change' | 'blur' | 'submit' }`.
+
+## Differences from `@json-render/react`
+
+<table>
+  <thead>
+    <tr>
+      <th>API</th>
+      <th>React</th>
+      <th>Vue</th>
+      <th>Note</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>useStateStore().state</code></td>
+      <td><code>StateModel</code> (plain object)</td>
+      <td><code>ShallowRef&lt;StateModel&gt;</code></td>
+      <td>Vue reactivity; use <code>state.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useStateValue()</code></td>
+      <td><code>T | undefined</code></td>
+      <td><code>ComputedRef&lt;T | undefined&gt;</code></td>
+      <td>Vue reactivity; use <code>.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useStateBinding()</code></td>
+      <td><code>[T | undefined, setter]</code></td>
+      <td><code>[ComputedRef&lt;T | undefined&gt;, setter]</code></td>
+      <td>Vue reactivity; use <code>value.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useAction().isLoading</code></td>
+      <td><code>boolean</code></td>
+      <td><code>ComputedRef&lt;boolean&gt;</code></td>
+      <td>Vue reactivity; use <code>.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useFieldValidation().state</code></td>
+      <td><code>FieldValidationState</code></td>
+      <td><code>ComputedRef&lt;FieldValidationState&gt;</code></td>
+      <td>Vue reactivity; use <code>.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useFieldValidation().errors</code></td>
+      <td><code>string[]</code></td>
+      <td><code>ComputedRef&lt;string[]&gt;</code></td>
+      <td>Vue reactivity; use <code>.value</code></td>
+    </tr>
+    <tr>
+      <td><code>useFieldValidation().isValid</code></td>
+      <td><code>boolean</code></td>
+      <td><code>ComputedRef&lt;boolean&gt;</code></td>
+      <td>Vue reactivity; use <code>.value</code></td>
+    </tr>
+    <tr>
+      <td><code>VisibilityContextValue.ctx</code></td>
+      <td><code>CoreVisibilityContext</code></td>
+      <td><code>ComputedRef&lt;CoreVisibilityContext&gt;</code></td>
+      <td>Vue reactivity; use <code>ctx.value</code></td>
+    </tr>
+    <tr>
+      <td><code>children</code> type</td>
+      <td><code>React.ReactNode</code></td>
+      <td><code>VNode | VNode[]</code></td>
+      <td>Platform-specific</td>
+    </tr>
+    <tr>
+      <td><code>useBoundProp</code></td>
+      <td>exported</td>
+      <td>exported</td>
+      <td>Same API; returns <code>[value, setValue]</code></td>
+    </tr>
+    <tr>
+      <td><code>VisibilityProviderProps</code></td>
+      <td>exported</td>
+      <td>not exported (no props)</td>
+      <td>Vue uses slot, no prop needed</td>
+    </tr>
+    <tr>
+      <td>Streaming hooks</td>
+      <td><code>useUIStream</code>, <code>useChatUI</code></td>
+      <td><code>useUIStream</code>, <code>useChatUI</code></td>
+      <td>Same API; returns Vue <code>Ref</code> values</td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/xstate/page.mdx

@@ -0,0 +1,77 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/xstate")
+
+# @json-render/xstate
+
+[XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface.
+
+Requires `@xstate/store` v3+.
+
+## Installation
+
+```bash
+npm install @json-render/xstate @json-render/core @json-render/react @xstate/store
+```
+
+## xstateStoreStateStore
+
+Create a `StateStore` backed by an `@xstate/store` atom.
+
+```typescript
+import { xstateStoreStateStore } from "@json-render/xstate";
+```
+
+### Options
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>atom</code></td>
+      <td><code>{'Atom<StateModel>'}</code></td>
+      <td>Yes</td>
+      <td>An <code>@xstate/store</code> atom (from <code>createAtom</code>) holding the json-render state model.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Example
+
+```typescript
+import { createAtom } from "@xstate/store";
+import { xstateStoreStateStore } from "@json-render/xstate";
+import { StateProvider } from "@json-render/react";
+
+const uiAtom = createAtom({ count: 0 });
+const store = xstateStoreStateStore({ atom: uiAtom });
+```
+
+```tsx
+<StateProvider store={store}>
+  {/* json-render reads/writes go through @xstate/store */}
+</StateProvider>
+```
+
+## Re-exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Source</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>StateStore</code></td>
+      <td><code>@json-render/core</code></td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/api/zustand/page.mdx

@@ -0,0 +1,108 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/api/zustand")
+
+# @json-render/zustand
+
+Zustand adapter for json-render's `StateStore` interface.
+
+Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface.
+
+## Installation
+
+```bash
+npm install @json-render/zustand @json-render/core @json-render/react zustand
+```
+
+## zustandStateStore
+
+Create a `StateStore` backed by a Zustand vanilla store.
+
+```typescript
+import { zustandStateStore } from "@json-render/zustand";
+```
+
+### Options
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th>Type</th>
+      <th>Required</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>store</code></td>
+      <td><code>{'StoreApi<S>'}</code></td>
+      <td>Yes</td>
+      <td>A Zustand vanilla store (from <code>createStore</code> in <code>zustand/vanilla</code>).</td>
+    </tr>
+    <tr>
+      <td><code>selector</code></td>
+      <td><code>{'(state: S) => StateModel'}</code></td>
+      <td>No</td>
+      <td>Select the json-render slice from the store state. Defaults to the entire state.</td>
+    </tr>
+    <tr>
+      <td><code>updater</code></td>
+      <td><code>{'(nextState: StateModel, store: StoreApi<S>) => void'}</code></td>
+      <td>No</td>
+      <td>Apply a state change back to the store. Defaults to a shallow merge.</td>
+    </tr>
+  </tbody>
+</table>
+
+### Example
+
+```typescript
+import { createStore } from "zustand/vanilla";
+import { zustandStateStore } from "@json-render/zustand";
+import { StateProvider } from "@json-render/react";
+
+const bearStore = createStore(() => ({
+  count: 0,
+  name: "Bear",
+}));
+
+const store = zustandStateStore({ store: bearStore });
+```
+
+```tsx
+<StateProvider store={store}>
+  {/* json-render reads/writes go through Zustand */}
+</StateProvider>
+```
+
+### Nested Slice
+
+```typescript
+const appStore = createStore(() => ({
+  ui: { count: 0 },
+  auth: { token: null },
+}));
+
+const store = zustandStateStore({
+  store: appStore,
+  selector: (s) => s.ui,
+  updater: (next, s) => s.setState({ ui: next }),
+});
+```
+
+## Re-exports
+
+<table>
+  <thead>
+    <tr>
+      <th>Export</th>
+      <th>Source</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>StateStore</code></td>
+      <td><code>@json-render/core</code></td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/changelog/page.mdx

@@ -5,6 +5,129 @@ export const metadata = pageMetadata("docs/changelog")
 
 Notable changes and updates to json-render.
 
+## v0.10.0
+
+February 2026
+
+### New: `@json-render/vue`
+
+Vue 3 renderer for json-render with full feature parity with `@json-render/react`. Data binding, visibility conditions, actions, validation, repeat scopes, streaming, and external store support.
+
+```bash
+npm install @json-render/core @json-render/vue
+```
+
+```typescript
+import { h } from "vue";
+import { defineRegistry, Renderer } from "@json-render/vue";
+import { schema } from "@json-render/vue/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) =>
+      h("div", { class: "card" }, [h("h3", null, props.title), children]),
+    Button: ({ props, emit }) =>
+      h("button", { onClick: () => emit("press") }, props.label),
+  },
+});
+```
+
+Providers: `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider`. Composables: `useStateStore`, `useStateValue`, `useActions`, `useAction`, `useIsVisible`, `useFieldValidation`, `useBoundProp`, `useUIStream`, `useChatUI`.
+
+See the [Vue API reference](/docs/api/vue) for details.
+
+### New: `@json-render/xstate`
+
+[XState Store](https://stately.ai/docs/xstate-store) (atom) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for any renderer.
+
+```bash
+npm install @json-render/xstate @xstate/store
+```
+
+```typescript
+import { createAtom } from "@xstate/store";
+import { xstateStoreStateStore } from "@json-render/xstate";
+
+const atom = createAtom({ count: 0 });
+const store = xstateStoreStateStore({ atom });
+```
+
+Requires `@xstate/store` v3+.
+
+### New: `$computed` and `$template` Expressions
+
+Two new prop expression types for dynamic values:
+
+- **`$template`** -- interpolate state values into strings: `{ "$template": "Hello, ${/user/name}!" }`
+- **`$computed`** -- call registered functions: `{ "$computed": "fullName", "args": { "first": { "$state": "/form/firstName" } } }`
+
+Register functions via the `functions` prop on `JSONUIProvider` or `createRenderer`. See [Computed Values](/docs/computed-values) for details.
+
+### New: State Watchers
+
+Elements can declare a `watch` field to trigger actions when state values change. Useful for cascading dependencies like country/city selects.
+
+```json
+{
+  "type": "Select",
+  "props": { "value": { "$bindState": "/form/country" }, "options": ["US", "Canada"] },
+  "watch": {
+    "/form/country": { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } }
+  }
+}
+```
+
+`watch` is a top-level field on elements (sibling of type/props/children), not inside props. Watchers only fire on value changes, not on initial render. See [Watchers](/docs/watchers) for details.
+
+### New: Cross-Field Validation
+
+New built-in validation functions for cross-field comparisons:
+
+- `equalTo` -- alias for `matches` with clearer semantics
+- `lessThan` -- value must be less than another field
+- `greaterThan` -- value must be greater than another field
+- `requiredIf` -- required only when a condition field is truthy
+
+Validation check args now resolve through `resolvePropValue`, so `$state` expressions work consistently.
+
+### New: `validateForm` Action
+
+Built-in action (React) that validates all registered form fields at once and writes `{ valid, errors }` to state:
+
+```json
+{
+  "on": {
+    "press": [
+      { "action": "validateForm", "params": { "statePath": "/formResult" } },
+      { "action": "submitForm" }
+    ]
+  }
+}
+```
+
+### Improved: shadcn/ui Validation
+
+All form components now support `checks` and `validateOn` props:
+- Checkbox, Radio, Switch added validation support
+- `validateOn` controls timing: `"change"` (default for Select, Checkbox, Radio, Switch), `"blur"` (default for Input, Textarea), or `"submit"`
+
+### New Examples
+
+- **Vue example** -- standalone Vue 3 app with custom components
+- **Vite Renderers** -- side-by-side React and Vue renderers with shared catalog
+
+---
+
+## v0.9.1
+
+February 2026
+
+### Fixed: Install failure due to private dependency
+
+`@json-render/react`, `@json-render/react-pdf`, and `@json-render/react-native` v0.9.0 failed to install because `@internal/react-state` (a private workspace package) was published as a dependency. The internal package is now bundled into each renderer at build time, so it no longer needs to be resolved from npm.
+
+---
+
 ## v0.9.0
 
 February 2026
@@ -218,6 +341,8 @@ February 2026
 
 ### New: Chat Mode (Inline GenUI)
 
+> **Note:** These modes were renamed in v0.12.1 — "Generate" is now "Standalone" and "Chat" is now "Inline". The old names are accepted as deprecated aliases.
+
 json-render now supports two generation modes: **Generate** (JSONL-only, the default) and **Chat** (text + JSONL inline). Chat mode lets the AI respond conversationally with embedded UI specs, ideal for chatbots and copilot experiences.
 
 ```typescript

apps/web/app/(main)/docs/computed-values/page.mdx

@@ -0,0 +1,119 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/computed-values")
+
+# Computed Values
+
+Derive dynamic prop values using registered functions or string templates.
+
+## `$template` — String Interpolation
+
+Use `{ "$template": "..." }` to embed state values into a string. References use `${/path}` syntax where the path is a JSON Pointer:
+
+```json
+{
+  "type": "Text",
+  "props": {
+    "text": { "$template": "Hello, ${/user/name}! You have ${/inbox/count} messages." }
+  },
+  "children": []
+}
+```
+
+If state is `{ "user": { "name": "Alice" }, "inbox": { "count": 3 } }`, the text renders as "Hello, Alice! You have 3 messages."
+
+Missing paths resolve to an empty string.
+
+## `$computed` — Registered Functions
+
+Use `{ "$computed": "<name>", "args": { ... } }` to call a named function registered in your catalog. Each arg can be a literal value or any prop expression (`$state`, `$item`, `$cond`, etc.):
+
+```json
+{
+  "type": "Text",
+  "props": {
+    "text": {
+      "$computed": "fullName",
+      "args": {
+        "first": { "$state": "/form/firstName" },
+        "last": { "$state": "/form/lastName" }
+      }
+    }
+  },
+  "children": []
+}
+```
+
+### Registering Functions
+
+Functions are registered in the catalog and provided at runtime.
+
+**Catalog definition (for AI prompt generation):**
+
+```typescript
+import { defineCatalog } from '@json-render/core';
+import { schema } from '@json-render/react/schema';
+
+const catalog = defineCatalog(schema, {
+  components: { /* ... */ },
+  functions: {
+    fullName: {
+      description: 'Combines first and last name into a full name',
+    },
+    formatCurrency: {
+      description: 'Formats a number as currency',
+    },
+  },
+});
+```
+
+**Runtime implementation:**
+
+```tsx
+import { JSONUIProvider } from '@json-render/react';
+
+const functions = {
+  fullName: (args) => `${args.first ?? ''} ${args.last ?? ''}`.trim(),
+  formatCurrency: (args) => {
+    const value = Number(args.value ?? 0);
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: (args.currency as string) ?? 'USD',
+    }).format(value);
+  },
+};
+
+<JSONUIProvider registry={registry} functions={functions}>
+  <Renderer spec={spec} registry={registry} />
+</JSONUIProvider>
+```
+
+### Using with `createRenderer`
+
+```tsx
+const MyRenderer = createRenderer(catalog, components);
+
+<MyRenderer
+  spec={spec}
+  functions={functions}
+/>
+```
+
+## Combining Expressions
+
+`$computed` args can use any expression type. This example computes a total from repeat item fields:
+
+```json
+{
+  "$computed": "lineTotal",
+  "args": {
+    "price": { "$item": "price" },
+    "quantity": { "$item": "quantity" }
+  }
+}
+```
+
+## Next
+
+- [Watchers](/docs/watchers) — react to state changes with cascading actions
+- [Data Binding](/docs/data-binding) — all expression types
+- [Validation](/docs/validation) — validate form inputs

apps/web/app/(main)/docs/data-binding/page.mdx

@@ -213,6 +213,22 @@ Use `$cond` / `$then` / `$else` to pick a prop value based on a condition:
 
 The condition uses the same [visibility](/docs/visibility) expression format.
 
+## Template Strings
+
+Use `{ "$template": "..." }` to interpolate state values into a string using `${/path}` syntax:
+
+```json
+{
+  "type": "Text",
+  "props": {
+    "text": { "$template": "Welcome back, ${/user/name}!" }
+  },
+  "children": []
+}
+```
+
+See [Computed Values](/docs/computed-values) for details on `$template` and `$computed` expressions.
+
 ## Quick Reference
 
 <div className="my-6 overflow-x-auto">
@@ -255,6 +271,16 @@ The condition uses the same [visibility](/docs/visibility) expression format.
         <td><code>{'{ "$bindItem": "field" }'}</code></td>
         <td>Form components inside repeat</td>
       </tr>
+      <tr>
+        <td><code>{"$template"}</code></td>
+        <td><code>{'{ "$template": "Hello, ${/name}!" }'}</code></td>
+        <td>Anywhere (string props)</td>
+      </tr>
+      <tr>
+        <td><code>{"$computed"}</code></td>
+        <td><code>{'{ "$computed": "fn", "args": { ... } }'}</code></td>
+        <td>Anywhere (requires registered function)</td>
+      </tr>
     </tbody>
   </table>
 </div>

apps/web/app/(main)/docs/generation-modes/page.mdx

@@ -3,15 +3,15 @@ export const metadata = pageMetadata("docs/generation-modes")
 
 # Generation Modes
 
-json-render supports two modes for AI-generated UI: **Generate mode** for standalone UI and **Chat mode** for inline UI within a conversation.
+json-render supports two modes for AI-generated UI: **Standalone mode** for standalone UI and **Inline mode** for inline UI within a conversation.
 
 The mode controls how the AI formats its output and how your app processes the stream. The underlying JSONL patch format is the same in both modes.
 
 <GenerationModesDiagram />
 
-## Generate Mode (Standalone)
+## Standalone Mode
 
-In generate mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
+In standalone mode, the AI outputs **only JSONL patches** — no prose, no markdown. The entire response is a UI spec.
 
 This is the default mode and is ideal for:
 
@@ -25,7 +25,7 @@ This is the default mode and is ideal for:
 ```typescript
 import { streamText } from "ai";
 
-// Generate mode is the default (no mode option needed)
+// Standalone mode is the default (no mode option needed)
 const systemPrompt = catalog.prompt({
   customRules: [
     "Use Card as root for forms and small UIs.",
@@ -74,9 +74,9 @@ The AI outputs only JSONL — one patch per line, no surrounding text:
 {"op":"add","path":"/elements/submit","value":{"type":"Button","props":{"label":"Sign In"}}}
 ```
 
-## Chat Mode (Inline)
+## Inline Mode
 
-In chat mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).
+In inline mode, the AI responds **conversationally first**, then outputs JSONL patches on their own lines. Text-only replies are allowed when no UI is needed (e.g. greetings, clarifying questions).
 
 This is ideal for:
 
@@ -92,8 +92,8 @@ import { streamText } from "ai";
 import { pipeJsonRender } from "@json-render/core";
 import { createUIMessageStream, createUIMessageStreamResponse } from "ai";
 
-// Enable chat mode
-const systemPrompt = catalog.prompt({ mode: "chat" });
+// Enable inline mode
+const systemPrompt = catalog.prompt({ mode: "inline" });
 
 const result = streamText({
   model: yourModel,
@@ -180,8 +180,8 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
     <thead>
       <tr>
         <th />
-        <th>Generate</th>
-        <th>Chat</th>
+        <th>Standalone</th>
+        <th>Inline</th>
       </tr>
     </thead>
     <tbody>
@@ -198,7 +198,7 @@ If the user asks a simple question ("what does BTC stand for?"), the AI replies
       <tr>
         <td>System prompt</td>
         <td><code>{"catalog.prompt()"}</code></td>
-        <td><code>{'catalog.prompt({ mode: "chat" })'}</code></td>
+        <td><code>{'catalog.prompt({ mode: "inline" })'}</code></td>
       </tr>
       <tr>
         <td>Stream utility</td>

apps/web/app/(main)/docs/installation/page.mdx

@@ -9,6 +9,26 @@ Install the core package plus your renderer of choice.
 
 <PackageInstall packages="@json-render/core @json-render/react" />
 
+Peer dependencies: `react ^19.0.0` and `zod ^4.0.0`.
+
+<PackageInstall packages="react zod" />
+
+## For Vue
+
+<PackageInstall packages="@json-render/core @json-render/vue" />
+
+Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.
+
+<PackageInstall packages="vue zod" />
+
+## For Svelte
+
+<PackageInstall packages="@json-render/core @json-render/svelte" />
+
+Peer dependencies: `svelte ^5.0.0` and `zod ^4.0.0`.
+
+<PackageInstall packages="svelte zod" />
+
 ## For React UI with shadcn/ui
 
 Pre-built components for fast prototyping and production use:
@@ -25,6 +45,10 @@ Requires Tailwind CSS in your project. See the [@json-render/shadcn API referenc
 
 <PackageInstall packages="@json-render/core @json-render/remotion remotion @remotion/player" />
 
+## For React Email
+
+<PackageInstall packages="@json-render/core @json-render/react-email @react-email/components @react-email/render" />
+
 ## For External State Management (Optional)
 
 If you want to wire json-render to an existing state management library instead of the built-in store, install the adapter for your library:
@@ -35,17 +59,10 @@ If you want to wire json-render to an existing state management library instead
 
 <PackageInstall packages="@json-render/jotai" />
 
+<PackageInstall packages="@json-render/xstate" />
+
 See the [Data Binding](/docs/data-binding#external-store-controlled-mode) guide for usage.
 
-## Peer Dependencies
-
-json-render requires the following peer dependencies:
-
-- `react` ^19.0.0
-- `zod` ^4.0.0
-
-<PackageInstall packages="react zod" />
-
 ## For AI Integration
 
 To use json-render with AI models, you'll also need the Vercel AI SDK:

apps/web/app/(main)/docs/migration/page.mdx

@@ -31,15 +31,23 @@ import { StateProvider } from "@json-render/react";
 
 `StateProvider` now manages state internally. Use `useStateStore()` to access `get`, `set`, and `update`.
 
-| Before | After |
-|--------|-------|
-| `DataProvider` | `StateProvider` |
-| `data` prop | `initialState` prop |
-| `getValue` / `setValue` props | Removed (use `useStateStore()` hook for `get` / `set`) |
-| `useData` | `useStateStore` |
-| `useDataValue` | `useStateValue` |
-| `useDataBinding` | `useStateBinding` (deprecated, use `useBoundProp` instead) |
-| `DataModel` type | `StateModel` type |
+<table>
+<thead>
+<tr>
+<th>Before</th>
+<th>After</th>
+</tr>
+</thead>
+<tbody>
+<tr><td><code>DataProvider</code></td><td><code>StateProvider</code></td></tr>
+<tr><td><code>data</code> prop</td><td><code>initialState</code> prop</td></tr>
+<tr><td><code>getValue</code> / <code>setValue</code> props</td><td>Removed (use <code>useStateStore()</code> hook for <code>get</code> / <code>set</code>)</td></tr>
+<tr><td><code>useData</code></td><td><code>useStateStore</code></td></tr>
+<tr><td><code>useDataValue</code></td><td><code>useStateValue</code></td></tr>
+<tr><td><code>useDataBinding</code></td><td><code>useStateBinding</code> (deprecated, use <code>useBoundProp</code> instead)</td></tr>
+<tr><td><code>DataModel</code> type</td><td><code>StateModel</code> type</td></tr>
+</tbody>
+</table>
 
 ## Dynamic Expressions
 
@@ -81,10 +89,18 @@ Inside repeat scopes, use `$item` and `$index`:
 }
 ```
 
-| Before | After |
-|--------|-------|
-| `{ "$path": "/..." }` | `{ "$state": "/..." }` |
-| `{ "$data": "/..." }` | `{ "$state": "/..." }` |
+<table>
+<thead>
+<tr>
+<th>Before</th>
+<th>After</th>
+</tr>
+</thead>
+<tbody>
+<tr><td><code>{'{ "$path": "/..." }'}</code></td><td><code>{'{ "$state": "/..." }'}</code></td></tr>
+<tr><td><code>{'{ "$data": "/..." }'}</code></td><td><code>{'{ "$state": "/..." }'}</code></td></tr>
+</tbody>
+</table>
 
 ## Two-Way Binding
 
@@ -293,10 +309,35 @@ const catalog = defineCatalog(schema, {
 
 const prompt = catalog.prompt();
 
-// Chat mode prompt
+// Inline mode prompt (formerly "chat")
+const inlinePrompt = catalog.prompt({ mode: "inline" });
+```
+
+## Generation Modes
+
+The generation mode values passed to `catalog.prompt()` have been renamed for clarity:
+
+- `"generate"` is now `"standalone"`
+- `"chat"` is now `"inline"`
+
+The old names are accepted as deprecated aliases, so existing code will continue to work. Update when convenient.
+
+**Before:**
+
+```typescript
+const prompt = catalog.prompt({ mode: "generate" });
 const chatPrompt = catalog.prompt({ mode: "chat" });
 ```
 
+**After:**
+
+```typescript
+const prompt = catalog.prompt({ mode: "standalone" });
+const inlinePrompt = catalog.prompt({ mode: "inline" });
+```
+
+The default mode (when no `mode` option is provided) is `"standalone"`, which behaves identically to the previous `"generate"` default.
+
 ## Validation
 
 `ValidationCheck` now uses `type` instead of `fn`, `ValidationProvider` uses `customFunctions` instead of `functions`, and `useFieldValidation` takes a config object instead of a checks array.
@@ -315,11 +356,19 @@ const chatPrompt = catalog.prompt({ mode: "chat" });
 { "type": "minLength", "args": { "min": 8 }, "message": "Too short" }
 ```
 
-| Before | After |
-|--------|-------|
-| `{ fn: "required" }` | `{ type: "required" }` |
-| `ValidationProvider functions={...}` | `ValidationProvider customFunctions={...}` |
-| `useFieldValidation(path, checks)` | `useFieldValidation(path, config)` where config is `{ checks, validateOn? }` |
+<table>
+<thead>
+<tr>
+<th>Before</th>
+<th>After</th>
+</tr>
+</thead>
+<tbody>
+<tr><td><code>{'{ fn: "required" }'}</code></td><td><code>{'{ type: "required" }'}</code></td></tr>
+<tr><td><code>{'ValidationProvider functions={...}'}</code></td><td><code>{'ValidationProvider customFunctions={...}'}</code></td></tr>
+<tr><td><code>useFieldValidation(path, checks)</code></td><td><code>useFieldValidation(path, config)</code> where config is <code>{'{ checks, validateOn? }'}</code></td></tr>
+</tbody>
+</table>
 
 ## Visibility Provider
 
@@ -398,16 +447,57 @@ Action params in specs now use `statePath` instead of `path`.
 
 The following exports have been removed from `@json-render/core`:
 
-| Removed | Replacement |
-|---------|-------------|
-| `createCatalog` | `defineCatalog(schema, config)` |
-| `generateCatalogPrompt` | `catalog.prompt()` |
-| `generateSystemPrompt` | `catalog.prompt()` |
-| `ComponentDefinition` | Use catalog component config directly |
-| `CatalogConfig` | Use `defineCatalog` parameters |
-| `SystemPromptOptions` | Use `PromptOptions` |
-| `LogicExpression` | Use `VisibilityCondition` |
-| `AuthState` | Model auth as regular state (e.g. `/auth/isSignedIn`) |
-| `evaluateLogicExpression` | Use `evaluateVisibility` |
-| `createRendererFromCatalog` | Use `defineRegistry` |
-| `traverseTree` (codegen) | Use `traverseSpec` |
+<table>
+  <thead>
+    <tr>
+      <th>Removed</th>
+      <th>Replacement</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>createCatalog</code></td>
+      <td><code>defineCatalog(schema, config)</code></td>
+    </tr>
+    <tr>
+      <td><code>generateCatalogPrompt</code></td>
+      <td><code>catalog.prompt()</code></td>
+    </tr>
+    <tr>
+      <td><code>generateSystemPrompt</code></td>
+      <td><code>catalog.prompt()</code></td>
+    </tr>
+    <tr>
+      <td><code>ComponentDefinition</code></td>
+      <td>Use catalog component config directly</td>
+    </tr>
+    <tr>
+      <td><code>CatalogConfig</code></td>
+      <td>Use <code>defineCatalog</code> parameters</td>
+    </tr>
+    <tr>
+      <td><code>SystemPromptOptions</code></td>
+      <td>Use <code>PromptOptions</code></td>
+    </tr>
+    <tr>
+      <td><code>LogicExpression</code></td>
+      <td>Use <code>VisibilityCondition</code></td>
+    </tr>
+    <tr>
+      <td><code>AuthState</code></td>
+      <td>Model auth as regular state (e.g. <code>/auth/isSignedIn</code>)</td>
+    </tr>
+    <tr>
+      <td><code>evaluateLogicExpression</code></td>
+      <td>Use <code>evaluateVisibility</code></td>
+    </tr>
+    <tr>
+      <td><code>createRendererFromCatalog</code></td>
+      <td>Use <code>defineRegistry</code></td>
+    </tr>
+    <tr>
+      <td><code>traverseTree</code> (codegen)</td>
+      <td>Use <code>traverseSpec</code></td>
+    </tr>
+  </tbody>
+</table>

apps/web/app/(main)/docs/page.mdx

@@ -91,7 +91,7 @@ The result is a native UI built from your own components — not an iframe, not
 - **[Streaming](/docs/streaming)** — Render progressively as the AI responds. Each JSONL patch adds to the spec and the UI updates in real time.
 - **[Data Binding](/docs/data-binding)** — Bind props to runtime data with `$state` paths, repeat elements over arrays, and wire two-way input bindings.
 - **[Visibility](/docs/visibility)** — Show or hide elements based on state conditions. The AI can generate conditional UIs without writing logic.
-- **[Generation Modes](/docs/generation-modes)** — Generate standalone UI (playground/builder) or inline UI within a chat conversation.
+- **[Generation Modes](/docs/generation-modes)** — Standalone mode for full-page generated UI or inline mode for UI embedded in a conversation.
 
 ## Next
 

apps/web/app/(main)/docs/registry/page.mdx

@@ -9,6 +9,7 @@ What a registry contains depends on the schema you use. Each package defines its
 
 - **`@json-render/react`** — Components (React elements) and action handlers
 - **`@json-render/react-native`** — Components (React Native elements) and action handlers
+- **`@json-render/react-email`** — Email components (React Email / HTML)
 - **`@json-render/remotion`** — Clip components, transitions, and effects
 
 ## @json-render/react
@@ -278,6 +279,31 @@ export const { registry } = defineRegistry(catalog, {
 
 See the [@json-render/react-native API reference](/docs/api/react-native) for the full API.
 
+## @json-render/react-email
+
+`@json-render/react-email` uses `defineRegistry` like React and React Native. Components render to React Email primitives (`@react-email/components`). Use `renderToHtml` or `renderToPlainText` for server-side email output:
+
+```tsx
+import { defineRegistry } from '@json-render/react-email';
+import { renderToHtml } from '@json-render/react-email';
+import { Body, Container, Heading, Text } from '@react-email/components';
+
+export const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) => (
+      <Container style={{ padding: 16, backgroundColor: '#fff' }}>
+        <Heading>{props.title}</Heading>
+        {children}
+      </Container>
+    ),
+  },
+});
+
+const html = await renderToHtml(spec, { registry });
+```
+
+See the [@json-render/react-email API reference](/docs/api/react-email) for the full API.
+
 ## @json-render/remotion
 
 `@json-render/remotion` takes a different approach. Instead of `defineRegistry`, it uses a plain component registry with built-in standard components for video production:

apps/web/app/(main)/docs/renderers/page.mdx

@@ -0,0 +1,268 @@
+import { pageMetadata } from "@/lib/page-metadata";
+export const metadata = pageMetadata("docs/renderers");
+
+# Renderers
+
+json-render supports multiple output targets. Each renderer takes the same core concept -- a JSON spec constrained to a catalog -- and renders it natively on a different platform or into a different format.
+
+All renderers share the same workflow:
+
+1. Define a catalog with `defineCatalog`
+2. AI generates a JSON spec
+3. The renderer turns the spec into platform-native output
+
+<table>
+  <thead>
+    <tr>
+      <th>Renderer</th>
+      <th>Package</th>
+      <th>Output</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>React</td>
+      <td>
+        <code>@json-render/react</code>
+      </td>
+      <td>React component tree</td>
+    </tr>
+    <tr>
+      <td>Vue</td>
+      <td>
+        <code>@json-render/vue</code>
+      </td>
+      <td>Vue 3 component tree</td>
+    </tr>
+    <tr>
+      <td>Svelte</td>
+      <td>
+        <code>@json-render/svelte</code>
+      </td>
+      <td>Svelte 5 component tree</td>
+    </tr>
+    <tr>
+      <td>Solid</td>
+      <td>
+        <code>@json-render/solid</code>
+      </td>
+      <td>SolidJS component tree</td>
+    </tr>
+    <tr>
+      <td>shadcn/ui</td>
+      <td>
+        <code>@json-render/shadcn</code>
+      </td>
+      <td>Pre-built Radix UI + Tailwind components (uses React renderer)</td>
+    </tr>
+    <tr>
+      <td>React Native</td>
+      <td>
+        <code>@json-render/react-native</code>
+      </td>
+      <td>Native mobile views</td>
+    </tr>
+    <tr>
+      <td>Image</td>
+      <td>
+        <code>@json-render/image</code>
+      </td>
+      <td>SVG / PNG (via Satori)</td>
+    </tr>
+    <tr>
+      <td>React PDF</td>
+      <td>
+        <code>@json-render/react-pdf</code>
+      </td>
+      <td>PDF documents</td>
+    </tr>
+    <tr>
+      <td>Remotion</td>
+      <td>
+        <code>@json-render/remotion</code>
+      </td>
+      <td>Video compositions</td>
+    </tr>
+  </tbody>
+</table>
+
+## React
+
+Render specs as React component trees in the browser. Supports data binding, streaming, actions, validation, visibility, and computed values.
+
+```tsx
+import { defineRegistry, Renderer } from "@json-render/react";
+import { schema } from "@json-render/react/schema";
+
+const { registry } = defineRegistry(catalog, { components });
+<Renderer spec={spec} registry={registry} />;
+```
+
+Use `StateProvider`, `VisibilityProvider`, and `ActionProvider` for full interactivity. See the [@json-render/react API reference](/docs/api/react) for details.
+
+## Vue
+
+Vue 3 renderer with full feature parity with React: data binding, visibility, actions, validation, repeat scopes, and streaming.
+
+```typescript
+import { defineRegistry, Renderer } from "@json-render/vue";
+import { schema } from "@json-render/vue/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) =>
+      h("div", { class: "card" }, [h("h3", null, props.title), children]),
+  },
+});
+```
+
+Uses composables (`useStateStore`, `useStateBinding`, `useActions`, etc.) instead of React hooks. See the [@json-render/vue API reference](/docs/api/vue) for details.
+
+## Svelte
+
+Svelte 5 renderer with runes-compatible context helpers, visibility conditions, actions, and streaming support.
+
+```typescript
+import { defineRegistry, Renderer } from "@json-render/svelte";
+import { schema } from "@json-render/svelte/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: ({ props, children }) => /* Svelte snippet */,
+  },
+});
+```
+
+See the [@json-render/svelte API reference](/docs/api/svelte) for details.
+
+## Solid
+
+SolidJS renderer with fine-grained reactivity, state bindings, validation, visibility, and event-driven actions.
+
+```tsx
+import { defineRegistry, Renderer } from "@json-render/solid";
+import { schema } from "@json-render/solid/schema";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: (renderProps) => <div>{renderProps.children}</div>,
+  },
+});
+
+<Renderer spec={spec} registry={registry} />;
+```
+
+See the [@json-render/solid API reference](/docs/api/solid) for details.
+
+## shadcn/ui
+
+36 pre-built components using Radix UI and Tailwind CSS. Built on top of `@json-render/react` -- no custom renderer needed.
+
+```tsx
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { defineRegistry, Renderer } from "@json-render/react";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+import { shadcnComponents } from "@json-render/shadcn";
+
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: shadcnComponentDefinitions.Card,
+    Button: shadcnComponentDefinitions.Button,
+  },
+});
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: shadcnComponents.Card,
+    Button: shadcnComponents.Button,
+  },
+});
+```
+
+See the [@json-render/shadcn API reference](/docs/api/shadcn) for the full component list.
+
+## React Native
+
+Render specs as native mobile views. Includes 25+ standard components and standard action definitions.
+
+```tsx
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react-native/schema";
+import {
+  standardComponentDefinitions,
+  standardActionDefinitions,
+} from "@json-render/react-native/catalog";
+import { defineRegistry, Renderer } from "@json-render/react-native";
+
+const catalog = defineCatalog(schema, {
+  components: { ...standardComponentDefinitions },
+  actions: standardActionDefinitions,
+});
+
+const { registry } = defineRegistry(catalog, { components: {} });
+<Renderer spec={spec} registry={registry} />;
+```
+
+See the [@json-render/react-native API reference](/docs/api/react-native) for details.
+
+## Image
+
+Generate SVG and PNG images from JSON specs using Satori. Ideal for OG images, social cards, and banners.
+
+```typescript
+import { renderToSvg, renderToPng } from "@json-render/image/render";
+
+const svg = await renderToSvg(spec, { fonts });
+const png = await renderToPng(spec, { fonts });
+```
+
+Nine standard components: Frame, Box, Row, Column, Heading, Text, Image, Divider, Spacer. PNG output requires `@resvg/resvg-js` as an optional peer dependency.
+
+See the [@json-render/image API reference](/docs/api/image) for details.
+
+## React PDF
+
+Generate PDF documents from JSON specs using `@react-pdf/renderer`. Render to buffer, stream, or file.
+
+```typescript
+import {
+  renderToBuffer,
+  renderToStream,
+  renderToFile,
+} from "@json-render/react-pdf";
+
+const buffer = await renderToBuffer(spec);
+const stream = await renderToStream(spec);
+await renderToFile(spec, "./output.pdf");
+```
+
+Standard components include Document, Page, View, Row, Column, Heading, Text, Image, Table, List, Divider, Spacer, Link, and PageNumber.
+
+See the [@json-render/react-pdf API reference](/docs/api/react-pdf) for details.
+
+## Remotion
+
+Turn JSON timeline specs into video compositions with Remotion.
+
+```tsx
+import { Player } from "@remotion/player";
+import { Renderer } from "@json-render/remotion";
+
+<Player
+  component={Renderer}
+  inputProps={{ spec }}
+  durationInFrames={spec.composition.durationInFrames}
+  fps={spec.composition.fps}
+  compositionWidth={spec.composition.width}
+  compositionHeight={spec.composition.height}
+/>;
+```
+
+Uses a timeline spec format with compositions, tracks, and clips. Includes standard components (TitleCard, TypingText, ImageSlide, etc.), transitions (fade, slide, zoom, wipe), and effects.
+
+See the [@json-render/remotion API reference](/docs/api/remotion) for details.
+
+## Custom Renderers
+
+You can build your own renderer for any output target. See the [Custom Schema & Renderer](/docs/custom-schema) guide for how to define a custom schema and wire it to your own rendering logic.

apps/web/app/(main)/docs/skills/page.mdx

@@ -0,0 +1,123 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("docs/skills");
+
+# Skills
+
+json-render ships with skills that teach AI coding agents how to use each package. Install a skill and your agent in Cursor, Claude Code, or Codex can generate json-render UIs without manual guidance.
+
+## Available Skills
+
+- **core** — Core schemas, catalogs, and AI prompt generation.
+- **react** — React renderer that turns JSON specs into React component trees.
+- **react-pdf** — PDF renderer using `@react-pdf/renderer`.
+- **react-email** — Email renderer that produces HTML or plain-text emails.
+- **react-native** — React Native renderer for native mobile UIs.
+- **shadcn** — Pre-built shadcn/ui components (Radix UI + Tailwind).
+- **image** — Image renderer that turns JSON specs into SVG and PNG via Satori.
+- **remotion** — Remotion renderer for video generation from JSON timeline specs.
+- **vue** — Vue 3 renderer for Vue component trees.
+- **svelte** — Svelte 5 renderer for Svelte component trees.
+- **solid** — SolidJS renderer for fine-grained reactive component trees.
+- **codegen** — Code generation utilities for building custom exporters.
+- **mcp** — MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code.
+- **redux** — Redux adapter for json-render's `StateStore` interface.
+- **zustand** — Zustand adapter for json-render's `StateStore` interface.
+- **jotai** — Jotai adapter for json-render's `StateStore` interface.
+- **xstate** — XState Store adapter for json-render's `StateStore` interface.
+
+## Installation
+
+```bash
+npx skills add vercel-labs/json-render --skill core
+npx skills add vercel-labs/json-render --skill react
+npx skills add vercel-labs/json-render --skill react-pdf
+npx skills add vercel-labs/json-render --skill react-email
+npx skills add vercel-labs/json-render --skill react-native
+npx skills add vercel-labs/json-render --skill shadcn
+npx skills add vercel-labs/json-render --skill image
+npx skills add vercel-labs/json-render --skill remotion
+npx skills add vercel-labs/json-render --skill vue
+npx skills add vercel-labs/json-render --skill svelte
+npx skills add vercel-labs/json-render --skill solid
+npx skills add vercel-labs/json-render --skill codegen
+npx skills add vercel-labs/json-render --skill mcp
+npx skills add vercel-labs/json-render --skill redux
+npx skills add vercel-labs/json-render --skill zustand
+npx skills add vercel-labs/json-render --skill jotai
+npx skills add vercel-labs/json-render --skill xstate
+```
+
+After installing, your AI agent will automatically activate the right skill when it encounters a matching request.
+
+## core
+
+The foundational skill. Teaches agents how to define catalogs, create schemas, build specs, and generate AI prompts. This is the starting point for any json-render project and covers `defineCatalog`, `defineSchema`, `specSchema`, `toPrompt`, and the full spec format.
+
+## react
+
+Teaches agents how to render JSON specs as React component trees using `JsonRender`, `JsonRenderClient`, and `useJsonRender`. Covers custom component registries, client-side interactivity, state management, and streaming integration.
+
+## react-pdf
+
+Teaches agents how to generate PDFs from JSON specs using `@react-pdf/renderer`. Covers the PDF-specific component registry, page layout, and styling.
+
+## react-email
+
+Teaches agents how to render JSON specs as HTML or plain-text emails using React Email components. Covers the email-specific registry and rendering pipeline.
+
+## react-native
+
+Teaches agents how to render JSON specs as native mobile UIs with React Native. Covers the native component registry and platform-specific considerations.
+
+## shadcn
+
+Teaches agents how to use the pre-built shadcn/ui component registry with json-render. Includes Radix UI primitives, Tailwind styling, and the full set of available shadcn components.
+
+## image
+
+Teaches agents how to turn JSON specs into SVG and PNG images using Satori. Covers the image-specific registry, dimensions, fonts, and rendering options.
+
+## remotion
+
+Teaches agents how to generate videos from JSON timeline specs using Remotion. Covers compositions, sequences, timeline structure, and video rendering.
+
+## vue
+
+Teaches agents how to render JSON specs as Vue 3 component trees. Covers the Vue renderer API, custom component registries, and reactivity integration.
+
+## svelte
+
+Teaches agents how to render JSON specs as Svelte 5 component trees. Covers the Svelte renderer API and component registration.
+
+## solid
+
+Teaches agents how to render JSON specs as SolidJS component trees. Covers Solid-specific reactive patterns, provider wiring, bindings, actions, and streaming.
+
+## codegen
+
+Teaches agents how to use code generation utilities to export UI specs as framework-specific source code. Covers the codegen pipeline and custom exporter creation.
+
+## mcp
+
+Teaches agents how to build MCP Apps that serve json-render UIs inside AI tools like Claude, ChatGPT, Cursor, and VS Code. Covers MCP server setup, tool definitions, and UI streaming.
+
+## redux
+
+Teaches agents how to connect a Redux store to json-render's `StateStore` interface for state-driven UIs.
+
+## zustand
+
+Teaches agents how to connect a Zustand store to json-render's `StateStore` interface for lightweight state management.
+
+## jotai
+
+Teaches agents how to connect Jotai atoms to json-render's `StateStore` interface for atomic state management.
+
+## xstate
+
+Teaches agents how to connect an XState Store to json-render's `StateStore` interface for state-machine-driven UIs.
+
+## Source
+
+All skill files are in the [`skills/`](https://github.com/vercel-labs/json-render/tree/main/skills) directory of the repository.

apps/web/app/(main)/docs/validation/page.mdx

@@ -11,11 +11,18 @@ json-render includes common validation functions:
 
 - `required` — Value must be non-empty
 - `email` — Valid email format
-- `minLength` — Minimum string length
-- `maxLength` — Maximum string length
-- `pattern` — Match a regex pattern
-- `min` — Minimum numeric value
-- `max` — Maximum numeric value
+- `minLength` — Minimum string length (args: `{ "min": N }`)
+- `maxLength` — Maximum string length (args: `{ "max": N }`)
+- `pattern` — Match a regex pattern (args: `{ "pattern": "regex" }`)
+- `min` — Minimum numeric value (args: `{ "min": N }`)
+- `max` — Maximum numeric value (args: `{ "max": N }`)
+- `numeric` — Value must be a number
+- `url` — Valid URL format
+- `matches` — Must equal another field (args: `{ "other": { "$state": "/path" } }`)
+- `equalTo` — Alias for matches (args: `{ "other": { "$state": "/path" } }`)
+- `lessThan` — Value must be less than another field (args: `{ "other": { "$state": "/path" } }`)
+- `greaterThan` — Value must be greater than another field (args: `{ "other": { "$state": "/path" } }`)
+- `requiredIf` — Required only when another field is truthy (args: `{ "field": { "$state": "/path" } }`)
 
 ## Using Validation in JSON
 
@@ -143,14 +150,114 @@ function TextField({ props, bindings }) {
 
 See the [@json-render/react API reference](/docs/api/react) for full `ValidationProvider` and `useFieldValidation` documentation.
 
+## Cross-Field Validation
+
+Validation args support `{ "$state": "/path" }` references to compare against other fields. This enables cross-field rules like "confirm password must match password":
+
+```json
+{
+  "type": "Input",
+  "props": {
+    "label": "Confirm Password",
+    "value": { "$bindState": "/form/confirmPassword" },
+    "checks": [
+      { "type": "required", "message": "Please confirm your password" },
+      {
+        "type": "matches",
+        "args": { "other": { "$state": "/form/password" } },
+        "message": "Passwords must match"
+      }
+    ]
+  }
+}
+```
+
+Other cross-field examples:
+
+```json
+{
+  "checks": [
+    {
+      "type": "greaterThan",
+      "args": { "other": { "$state": "/form/startDate" } },
+      "message": "End date must be after start date"
+    }
+  ]
+}
+```
+
+```json
+{
+  "checks": [
+    {
+      "type": "requiredIf",
+      "args": { "field": { "$state": "/form/enableNotifications" } },
+      "message": "Email is required when notifications are enabled"
+    }
+  ]
+}
+```
+
+## Conditional Validation
+
+Use the `enabled` field in the validation config to only run checks when a condition is met:
+
+```json
+{
+  "type": "Input",
+  "props": {
+    "label": "Company Name",
+    "value": { "$bindState": "/form/company" },
+    "checks": [
+      { "type": "required", "message": "Company name is required" }
+    ]
+  }
+}
+```
+
+In the component implementation, you can pass `enabled` to `useFieldValidation`:
+
+```typescript
+useFieldValidation(bindings?.value ?? "", {
+  checks: props.checks ?? [],
+  enabled: { "$state": "/form/accountType", eq: "business" },
+});
+```
+
+This only validates the company name when the account type is "business".
+
 ## Validation Timing
 
 Control when validation runs with `validateOn`:
 
 - `change` — Validate on every input change
-- `blur` — Validate when field loses focus
+- `blur` — Validate when field loses focus (default for Input, Textarea)
 - `submit` — Validate only on form submission
 
+## Form-Level Validation
+
+Use the built-in `validateForm` action to validate all registered fields at once. This is useful for a "Submit" button that should validate the entire form before proceeding:
+
+```json
+{
+  "type": "Button",
+  "props": { "label": "Submit" },
+  "on": {
+    "press": [
+      { "action": "validateForm", "params": { "statePath": "/formResult" } },
+      { "action": "submitForm" }
+    ]
+  },
+  "children": []
+}
+```
+
+The `validateForm` action runs `validateAll()` and writes `{ valid: boolean }` to the specified state path (defaults to `/formValidation`). Your submit handler can then check `{ "$state": "/formResult/valid" }` to decide whether to proceed.
+
+> **Note:** Actions in a list execute sequentially, but `submitForm` does not automatically gate on validation. Guard submission with a `$cond` visibility condition on the button or check `{ "$state": "/formResult/valid" }` inside your action handler to skip submission when the form is invalid.
+
 ## Next
 
-Learn about [generation modes](/docs/generation-modes).
+- [Computed Values](/docs/computed-values) — derive dynamic prop values
+- [Watchers](/docs/watchers) — react to state changes
+- [Generation Modes](/docs/generation-modes) — how AI generates specs

apps/web/app/(main)/docs/watchers/page.mdx

@@ -0,0 +1,167 @@
+import { pageMetadata } from "@/lib/page-metadata"
+export const metadata = pageMetadata("docs/watchers")
+
+# Watchers
+
+React to state changes by triggering actions when watched paths update.
+
+## The `watch` Field
+
+Elements can have an optional `watch` field that maps state paths to action bindings. When the value at a watched path changes, the bound actions fire automatically.
+
+`watch` is a **top-level field** on the element (sibling of `type`, `props`, `children`) — not inside `props`.
+
+```json
+{
+  "type": "Select",
+  "props": {
+    "label": "Country",
+    "value": { "$bindState": "/form/country" },
+    "options": ["US", "Canada", "UK"]
+  },
+  "watch": {
+    "/form/country": {
+      "action": "loadCities",
+      "params": { "country": { "$state": "/form/country" } }
+    }
+  },
+  "children": []
+}
+```
+
+When the user selects a different country, the `loadCities` action fires with the new country value. The action handler can fetch city data and update state, causing a dependent city Select to re-render with new options.
+
+## Cascading Selects
+
+A common pattern is cascading dropdowns where selecting a value in one field loads options for another:
+
+```json
+{
+  "root": "form",
+  "elements": {
+    "form": {
+      "type": "Stack",
+      "props": { "direction": "vertical", "gap": "md" },
+      "children": ["country-select", "city-select"]
+    },
+    "country-select": {
+      "type": "Select",
+      "props": {
+        "label": "Country",
+        "value": { "$bindState": "/form/country" },
+        "options": ["US", "Canada", "UK"]
+      },
+      "watch": {
+        "/form/country": [
+          { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } },
+          { "action": "setState", "params": { "statePath": "/form/city", "value": "" } }
+        ]
+      },
+      "children": []
+    },
+    "city-select": {
+      "type": "Select",
+      "props": {
+        "label": "City",
+        "value": { "$bindState": "/form/city" },
+        "options": { "$state": "/availableCities" },
+        "placeholder": "Select a city"
+      },
+      "children": []
+    }
+  },
+  "state": {
+    "form": { "country": "", "city": "" },
+    "availableCities": []
+  }
+}
+```
+
+The watcher on `country-select` fires two actions when the country changes:
+1. `loadCities` — fetches and writes city options to `/availableCities`
+2. `setState` — resets the city selection
+
+The city Select reads its options from `{ "$state": "/availableCities" }`, so it automatically updates when the data is loaded.
+
+### Action Handler
+
+```typescript
+const handlers = {
+  loadCities: async (params) => {
+    const cities = await fetchCities(params.country);
+    // setState is called by the runtime to write the result
+    return cities;
+  },
+};
+```
+
+Or with `defineRegistry`:
+
+```typescript
+const { registry, handlers } = defineRegistry(catalog, {
+  components: { /* ... */ },
+  actions: {
+    loadCities: async (params, setState) => {
+      const response = await fetch(`/api/cities?country=${params.country}`);
+      const cities = await response.json();
+      setState('/availableCities', cities);
+    },
+  },
+});
+```
+
+## Multiple Watchers
+
+An element can watch multiple state paths. Each path maps to one or more action bindings:
+
+```json
+{
+  "watch": {
+    "/form/startDate": { "action": "validateDateRange" },
+    "/form/endDate": { "action": "validateDateRange" },
+    "/form/quantity": [
+      { "action": "recalculateTotal" },
+      { "action": "checkInventory", "params": { "qty": { "$state": "/form/quantity" } } }
+    ]
+  }
+}
+```
+
+## Behavior
+
+- Watchers only fire on **value changes**, not on the initial render
+- Comparison is by reference (`===`), not deep equality
+- Action params support the same expressions as event bindings (`$state`, `$item`, `$index`)
+- Multiple action bindings on the same path execute sequentially
+
+## When to Use `watch` vs `on`
+
+<table>
+<thead>
+<tr>
+<th>Mechanism</th>
+<th>Trigger</th>
+<th>Use Case</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>on</code></td>
+<td>User interaction (press, change, blur)</td>
+<td>Button clicks, input changes, form submissions</td>
+</tr>
+<tr>
+<td><code>watch</code></td>
+<td>State value change (any source)</td>
+<td>Cascading data, derived state, cross-field sync</td>
+</tr>
+</tbody>
+</table>
+
+Use `on` when reacting to direct user actions. Use `watch` when a state change (from any source — user input, action handler, or external store update) should trigger side effects.
+
+## Next
+
+- [Data Binding](/docs/data-binding) — connect elements to state
+- [Computed Values](/docs/computed-values) — derive prop values
+- [Visibility](/docs/visibility) — conditionally show or hide elements

apps/web/app/api/docs-chat/route.ts

@@ -16,7 +16,8 @@ const SYSTEM_PROMPT = `You are a helpful documentation assistant for json-render
 
 GitHub repository: https://github.com/vercel-labs/json-render
 Documentation: https://json-render.dev/docs
-npm packages: @json-render/core, @json-render/react, @json-render/remotion, @json-render/codegen
+npm packages: @json-render/core, @json-render/react, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @json-render/react-three-fiber, @json-render/react-native, @json-render/react-email, @json-render/react-pdf, @json-render/image, @json-render/remotion, @json-render/codegen, @json-render/mcp, @json-render/redux, @json-render/zustand, @json-render/jotai, @json-render/xstate
+Skills: json-render ships AI agent skills that teach coding agents how to use each package. Install with "npx skills add vercel-labs/json-render --skill <name>". Available skills: core, react, react-pdf, react-email, react-native, shadcn, react-three-fiber, image, remotion, vue, svelte, solid, codegen, mcp, redux, zustand, jotai, xstate. See /docs/skills for details.
 
 You have access to the full json-render documentation via the bash and readFile tools. The docs are available as markdown files in the /workspace/docs/ directory.
 

apps/web/components/generation-modes-diagram.tsx

@@ -1,100 +1,257 @@
 "use client";
 
-function Skeleton({ className = "" }: { className?: string }) {
-  return <div className={`rounded bg-muted-foreground/10 ${className}`} />;
-}
-
-/** Simple form wireframe reused in both diagrams */
-function FormUI() {
+function ScheduleItem({
+  time,
+  label,
+  color,
+}: {
+  time: string;
+  label: string;
+  color: string;
+}) {
   return (
-    <div className="border border-border rounded-lg p-2.5 space-y-1.5 bg-muted/30">
-      {/* Title */}
-      <Skeleton className="h-2.5 w-14 mb-1" />
-      {/* Input fields */}
-      <Skeleton className="h-4 w-full rounded-sm" />
-      <Skeleton className="h-4 w-full rounded-sm" />
-      {/* Submit button */}
-      <Skeleton className="h-4 w-16 rounded-sm bg-muted-foreground/20 mt-1" />
+    <div className="flex items-center gap-2 py-1.5 border-t border-border/50 first:border-t-0">
+      <span className="text-[10px] text-muted-foreground/60 w-12 shrink-0 tabular-nums">
+        {time}
+      </span>
+      <span
+        className="w-1.5 h-1.5 rounded-full shrink-0"
+        style={{ background: color }}
+      />
+      <span className="text-[11px] text-muted-foreground">{label}</span>
     </div>
   );
 }
 
-function ChatModeDiagram() {
+function InlineModeDiagram() {
   return (
     <div className="flex flex-col h-full">
-      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
-        Chat Mode
+      <div className="text-sm font-medium text-foreground text-center mb-3">
+        Inline Mode
       </div>
-      <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-col">
-        {/* Chat area */}
-        <div className="flex-1 p-3 overflow-hidden flex justify-center">
-          <div className="w-1/3 min-w-[120px] space-y-3">
+      <div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-col">
+        <div className="flex-1 p-4 space-y-3 overflow-hidden">
+          {/* User message */}
+          <div className="flex justify-end">
+            <div className="bg-muted-foreground/20 rounded-2xl rounded-br px-3.5 py-2 max-w-[85%]">
+              <span className="text-[11px] text-foreground/80">
+                I have back-to-back meetings today
+              </span>
+            </div>
+          </div>
+
+          {/* AI response */}
+          <div className="space-y-2">
+            <p className="text-[11px] text-muted-foreground/70">
+              Packed day! Here&apos;s what you&apos;ve got:
+            </p>
+            <div className="bg-muted/40 border border-border rounded-xl p-3 w-[92%]">
+              <div className="text-[11px] font-semibold text-foreground/80 mb-2">
+                Today&apos;s Schedule
+              </div>
+              <ScheduleItem
+                time="10:00 AM"
+                label="Design Review"
+                color="#7aa2f7"
+              />
+              <ScheduleItem
+                time="1:00 PM"
+                label="Sprint Planning"
+                color="#bb9af7"
+              />
+              <ScheduleItem
+                time="3:30 PM"
+                label="Team Standup"
+                color="#9ece6a"
+              />
+              <ScheduleItem
+                time="4:30 PM"
+                label="Eng All-Hands"
+                color="#e0af68"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Prompt input */}
+        <div className="p-2.5">
+          <div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
+            <span className="text-[10px] text-muted-foreground/40 flex-1">
+              Message...
+            </span>
+            <div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
+              <svg
+                className="w-2.5 h-2.5 text-muted-foreground/50"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path
+                  d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                  transform="rotate(-90 12 12)"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-3 flex flex-col items-center gap-2">
+        <div className="text-xs font-medium text-muted-foreground">
+          AI decides when UI beats text
+        </div>
+        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
+          <span>AI chatbots</span>
+          <span className="text-muted-foreground/30">/</span>
+          <span>Copilots</span>
+          <span className="text-muted-foreground/30">/</span>
+          <span>Assistants</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function LandingPage() {
+  return (
+    <div className="w-full h-full flex flex-col bg-muted/20">
+      {/* Nav */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          className="shrink-0"
+        >
+          <rect
+            x="2"
+            y="14"
+            width="5"
+            height="8"
+            rx="1"
+            className="fill-muted-foreground/60"
+          />
+          <rect
+            x="9.5"
+            y="8"
+            width="5"
+            height="14"
+            rx="1"
+            className="fill-muted-foreground/60"
+          />
+          <rect
+            x="17"
+            y="2"
+            width="5"
+            height="20"
+            rx="1"
+            className="fill-muted-foreground/60"
+          />
+        </svg>
+        <div className="flex items-center gap-2">
+          <span className="text-[9px] text-muted-foreground/50">Pricing</span>
+          <span className="text-[9px] text-muted-foreground/50">Blog</span>
+          <span className="text-[8px] font-semibold bg-foreground text-background rounded-md px-1.5 py-0.5 whitespace-nowrap">
+            Get Started
+          </span>
+        </div>
+      </div>
+
+      {/* Hero */}
+      <div className="flex-1 flex flex-col items-center justify-center gap-2.5 text-center px-4">
+        <span className="text-[8px] font-medium text-green-400 bg-green-400/10 border border-green-400/15 rounded-full px-2 py-0.5">
+          Trusted by 2,000+ teams
+        </span>
+        <div className="text-sm font-bold text-foreground leading-tight">
+          Analytics that
+          <br />
+          move the needle
+        </div>
+        <div className="text-[10px] text-muted-foreground/50 leading-relaxed">
+          Ship what matters. No setup required.
+        </div>
+        <div className="flex gap-1.5 mt-1">
+          <button className="bg-foreground text-background text-[9px] font-semibold rounded-lg px-3 py-1.5 whitespace-nowrap">
+            Start Free
+          </button>
+          <button className="border border-border text-muted-foreground text-[9px] font-medium rounded-lg px-3 py-1.5 whitespace-nowrap">
+            Book Demo
+          </button>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="flex justify-center gap-3 py-2 border-t border-border/50">
+        <span className="text-[8px] text-muted-foreground/30">Privacy</span>
+        <span className="text-[8px] text-muted-foreground/30">Terms</span>
+        <span className="text-[8px] text-muted-foreground/30">Status</span>
+      </div>
+    </div>
+  );
+}
+
+function StandaloneModeDiagram() {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="text-sm font-medium text-foreground text-center mb-3">
+        Standalone Mode
+      </div>
+      <div className="flex-1 border border-border rounded-2xl bg-background overflow-hidden flex flex-row">
+        {/* Left panel - conversation */}
+        <div className="w-[38%] border-r border-border/50 flex flex-col">
+          <div className="flex-1 p-3 space-y-2.5">
             {/* User message */}
             <div className="flex justify-end">
-              <div className="bg-muted rounded-xl px-3 py-2">
-                <Skeleton className="h-2 w-14" />
+              <div className="bg-muted-foreground/20 rounded-2xl rounded-br px-2.5 py-1.5">
+                <span className="text-[10px] text-foreground/80 block leading-relaxed">
+                  A landing page for my analytics startup
+                </span>
               </div>
             </div>
+            {/* AI text */}
+            <p className="text-[10px] text-muted-foreground/60 leading-relaxed">
+              Here&apos;s a clean landing page with a hero, nav, and CTAs.
+            </p>
+          </div>
 
-            {/* Assistant text */}
-            <div className="space-y-2">
-              <div className="space-y-1.5">
-                <Skeleton className="h-2 w-full" />
-                <Skeleton className="h-2 w-3/4" />
-              </div>
-
-              {/* Inline UI */}
-              <FormUI />
-
-              {/* More text after UI */}
-              <div className="space-y-1.5">
-                <Skeleton className="h-2 w-4/5" />
+          {/* Prompt input */}
+          <div className="p-2.5">
+            <div className="bg-muted/50 border border-border rounded-xl px-2.5 py-1.5 flex items-center gap-1.5">
+              <span className="text-[10px] text-muted-foreground/40 flex-1">
+                Message...
+              </span>
+              <div className="w-5 h-5 rounded-md bg-muted-foreground/20 flex items-center justify-center">
+                <svg
+                  className="w-2.5 h-2.5 text-muted-foreground/50"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                    transform="rotate(-90 12 12)"
+                  />
+                </svg>
               </div>
             </div>
           </div>
         </div>
 
-        {/* Input bar */}
-        <div className="p-2 flex justify-center">
-          <div className="w-1/3 min-w-[120px] flex items-center gap-2">
-            <Skeleton className="h-7 flex-1 rounded-md" />
-            <Skeleton className="h-7 w-7 rounded-md" />
-          </div>
+        {/* Right panel - landing page */}
+        <div className="flex-1">
+          <LandingPage />
         </div>
       </div>
-      <div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
-        Text + UI interleaved in messages
-      </div>
-    </div>
-  );
-}
-
-function GenerateModeDiagram() {
-  return (
-    <div className="flex flex-col h-full">
-      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
-        Generate Mode
-      </div>
-      <div className="flex-1 border border-border rounded-lg bg-background overflow-hidden flex flex-row">
-        {/* Left panel - prompt */}
-        <div className="w-[38%] border-r border-border flex flex-col">
-          <div className="flex-1" />
-          <div className="p-3 space-y-2">
-            <Skeleton className="h-7 w-full rounded-md" />
-            <Skeleton className="h-5 w-16 rounded-md" />
-          </div>
+      <div className="mt-3 flex flex-col items-center gap-2">
+        <div className="text-xs font-medium text-muted-foreground">
+          Prompt in, UI out
         </div>
-
-        {/* Right panel - UI preview */}
-        <div className="flex-1 p-3 flex items-center justify-center">
-          <div className="w-3/4">
-            <FormUI />
-          </div>
+        <div className="flex items-center gap-1.5 text-[10px] text-muted-foreground/50">
+          <span>Website builders</span>
+          <span className="text-muted-foreground/30">/</span>
+          <span>Text-to-widget</span>
+          <span className="text-muted-foreground/30">/</span>
+          <span>Dashboards</span>
         </div>
       </div>
-      <div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
-        Prompt separate from UI preview
-      </div>
     </div>
   );
 }
@@ -103,11 +260,11 @@ export function GenerationModesDiagram() {
   return (
     <div className="not-prose my-8">
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-        <div className="h-[280px]">
-          <ChatModeDiagram />
+        <div className="h-[420px]">
+          <InlineModeDiagram />
         </div>
-        <div className="h-[280px]">
-          <GenerateModeDiagram />
+        <div className="h-[420px]">
+          <StandaloneModeDiagram />
         </div>
       </div>
     </div>

apps/web/lib/docs-navigation.ts

@@ -16,6 +16,7 @@ export const docsNavigation: NavSection[] = [
       { title: "Introduction", href: "/docs" },
       { title: "Installation", href: "/docs/installation" },
       { title: "Quick Start", href: "/docs/quick-start" },
+      { title: "Skills", href: "/docs/skills" },
       { title: "Migration Guide", href: "/docs/migration" },
       { title: "Changelog", href: "/docs/changelog" },
     ],
@@ -27,13 +28,16 @@ export const docsNavigation: NavSection[] = [
       { title: "Schemas", href: "/docs/schemas" },
       { title: "Catalog", href: "/docs/catalog" },
       { title: "Data Binding", href: "/docs/data-binding" },
+      { title: "Computed Values", href: "/docs/computed-values" },
       { title: "Visibility", href: "/docs/visibility" },
+      { title: "Watchers", href: "/docs/watchers" },
       { title: "Validation", href: "/docs/validation" },
     ],
   },
   {
     title: "Rendering",
     items: [
+      { title: "Renderers", href: "/docs/renderers" },
       { title: "Registry", href: "/docs/registry" },
       { title: "Streaming", href: "/docs/streaming" },
       { title: "Generation Modes", href: "/docs/generation-modes" },
@@ -62,11 +66,41 @@ export const docsNavigation: NavSection[] = [
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-pdf",
         external: true,
       },
+      {
+        title: "React Email",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/react-email",
+        external: true,
+      },
       {
         title: "Remotion",
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/remotion",
         external: true,
       },
+      {
+        title: "Image",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/image",
+        external: true,
+      },
+      {
+        title: "Svelte",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/svelte",
+        external: true,
+      },
+      {
+        title: "Vue",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vue",
+        external: true,
+      },
+      {
+        title: "Renders with Vite (Vue / React / Svelte / Solid)",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
+        external: true,
+      },
+      {
+        title: "MCP App",
+        href: "https://github.com/vercel-labs/json-render/tree/main/examples/mcp",
+        external: true,
+      },
     ],
   },
   {
@@ -92,10 +126,24 @@ export const docsNavigation: NavSection[] = [
       { title: "@json-render/core", href: "/docs/api/core" },
       { title: "@json-render/react", href: "/docs/api/react" },
       { title: "@json-render/react-pdf", href: "/docs/api/react-pdf" },
+      { title: "@json-render/react-email", href: "/docs/api/react-email" },
       { title: "@json-render/shadcn", href: "/docs/api/shadcn" },
       { title: "@json-render/react-native", href: "/docs/api/react-native" },
+      { title: "@json-render/image", href: "/docs/api/image" },
       { title: "@json-render/remotion", href: "/docs/api/remotion" },
+      { title: "@json-render/vue", href: "/docs/api/vue" },
+      { title: "@json-render/svelte", href: "/docs/api/svelte" },
+      { title: "@json-render/solid", href: "/docs/api/solid" },
+      {
+        title: "@json-render/react-three-fiber",
+        href: "/docs/api/react-three-fiber",
+      },
       { title: "@json-render/codegen", href: "/docs/api/codegen" },
+      { title: "@json-render/mcp", href: "/docs/api/mcp" },
+      { title: "@json-render/redux", href: "/docs/api/redux" },
+      { title: "@json-render/zustand", href: "/docs/api/zustand" },
+      { title: "@json-render/jotai", href: "/docs/api/jotai" },
+      { title: "@json-render/xstate", href: "/docs/api/xstate" },
     ],
   },
 ];

apps/web/lib/page-titles.ts

@@ -23,7 +23,10 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/streaming": "Streaming",
   "docs/validation": "Validation",
   "docs/data-binding": "Data Binding",
+  "docs/computed-values": "Computed Values",
   "docs/visibility": "Visibility",
+  "docs/watchers": "Watchers",
+  "docs/renderers": "Renderers",
   "docs/generation-modes": "Generation Modes",
   "docs/code-export": "Code Export",
   "docs/custom-schema": "Custom Schema & Renderer",
@@ -34,15 +37,27 @@ export const PAGE_TITLES: Record<string, string> = {
   "docs/ag-ui": "AG-UI Integration",
   "docs/migration": "Migration Guide",
   "docs/changelog": "Changelog",
+  "docs/skills": "Skills",
 
   // API references
   "docs/api/core": "@json-render/core API",
   "docs/api/react": "@json-render/react API",
+  "docs/api/vue": "@json-render/vue API",
+  "docs/api/solid": "@json-render/solid API",
   "docs/api/react-pdf": "@json-render/react-pdf API",
+  "docs/api/react-email": "@json-render/react-email API",
   "docs/api/react-native": "@json-render/react-native API",
+  "docs/api/svelte": "@json-render/svelte API",
   "docs/api/codegen": "@json-render/codegen API",
+  "docs/api/image": "@json-render/image API",
   "docs/api/remotion": "@json-render/remotion API",
   "docs/api/shadcn": "@json-render/shadcn API",
+  "docs/api/mcp": "@json-render/mcp API",
+  "docs/api/redux": "@json-render/redux API",
+  "docs/api/zustand": "@json-render/zustand API",
+  "docs/api/jotai": "@json-render/jotai API",
+  "docs/api/react-three-fiber": "@json-render/react-three-fiber API",
+  "docs/api/xstate": "@json-render/xstate API",
 };
 
 /**

apps/web/package.json

@@ -1,10 +1,11 @@
 {
   "name": "web",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
+    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
     "dev": "portless json-render next dev --turbopack",
     "build": "next build",
     "start": "next start",
@@ -50,7 +51,7 @@
     "tailwind-merge": "^3.4.0",
     "unist-util-visit": "5.1.0",
     "vaul": "^1.1.2",
-    "zod": "^4.0.0"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",

examples/chat/CHANGELOG.md

@@ -1,5 +1,50 @@
 # example-chat
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+  - @json-render/shadcn@0.12.1
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/react@0.12.0
+  - @json-render/shadcn@0.12.0
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [3f1e71e]
+  - @json-render/core@0.11.0
+  - @json-render/react@0.11.0
+  - @json-render/shadcn@0.11.0
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [9cef4e9]
+  - @json-render/core@0.10.0
+  - @json-render/react@0.10.0
+  - @json-render/shadcn@0.10.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [b103676]
+  - @json-render/react@0.9.1
+  - @json-render/shadcn@0.9.1
+  - @json-render/core@0.9.1
+
 ## 0.1.1
 
 ### Patch Changes

examples/chat/lib/agent.ts

@@ -130,7 +130,7 @@ When the user asks for a quiz, test, or Q&A, build an interactive experience:
 4. You can also add a final score section that becomes visible when all questions are submitted.
 
 ${explorerCatalog.prompt({
-  mode: "chat",
+  mode: "inline",
   customRules: [
     "NEVER use viewport height classes (min-h-screen, h-screen) — the UI renders inside a fixed-size container.",
     "Prefer Grid with columns='2' or columns='3' for side-by-side layouts.",

examples/chat/package.json

@@ -1,9 +1,10 @@
 {
   "name": "example-chat",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {
+    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
     "dev": "portless chat-demo.json-render next dev --turbopack",
     "build": "next build",
     "start": "next start",
@@ -33,7 +34,7 @@
     "streamdown": "^2.2.0",
     "tailwind-merge": "^3.4.0",
     "three": "^0.182.0",
-    "zod": "4.3.5"
+    "zod": "4.3.6"
   },
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",

examples/dashboard/CHANGELOG.md

@@ -1,5 +1,50 @@
 # example-dashboard
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/codegen@0.12.1
+  - @json-render/react@0.12.1
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/codegen@0.12.0
+  - @json-render/react@0.12.0
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [3f1e71e]
+  - @json-render/core@0.11.0
+  - @json-render/codegen@0.11.0
+  - @json-render/react@0.11.0
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [9cef4e9]
+  - @json-render/core@0.10.0
+  - @json-render/react@0.10.0
+  - @json-render/codegen@0.10.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [b103676]
+  - @json-render/react@0.9.1
+  - @json-render/core@0.9.1
+  - @json-render/codegen@0.9.1
+
 ## 0.1.1
 
 ### Patch Changes

examples/dashboard/package.json

@@ -1,9 +1,10 @@
 {
   "name": "example-dashboard",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {
+    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
     "dev": "portless dashboard-demo.json-render next dev --turbopack",
     "build": "next build",
     "start": "next start",
@@ -39,7 +40,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "zod": "^4.0.0"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",

examples/image/CHANGELOG.md

@@ -0,0 +1,25 @@
+# example-image
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/image@0.12.1
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/image@0.12.0
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [3f1e71e]
+  - @json-render/core@0.11.0
+  - @json-render/image@0.11.0

examples/image/app/api/generate/route.ts

@@ -0,0 +1,34 @@
+import { streamText } from "ai";
+import { buildUserPrompt, type Spec } from "@json-render/core";
+import { imageCatalog } from "@/lib/catalog";
+
+export const maxDuration = 60;
+
+const SYSTEM_PROMPT = imageCatalog.prompt();
+
+const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
+
+export async function POST(req: Request) {
+  const { prompt, startingSpec } = (await req.json()) as {
+    prompt: string;
+    startingSpec?: Spec | null;
+  };
+
+  if (!prompt || typeof prompt !== "string") {
+    return Response.json({ error: "prompt is required" }, { status: 400 });
+  }
+
+  const userPrompt = buildUserPrompt({
+    prompt,
+    currentSpec: startingSpec,
+  });
+
+  const result = streamText({
+    model: process.env.AI_GATEWAY_MODEL ?? DEFAULT_MODEL,
+    system: SYSTEM_PROMPT,
+    prompt: userPrompt,
+    temperature: 0.7,
+  });
+
+  return result.toTextStreamResponse();
+}

examples/image/app/api/image/route.ts

@@ -0,0 +1,79 @@
+import { renderToPng } from "@json-render/image/render";
+import { examples } from "@/lib/examples";
+import type { Spec } from "@json-render/core";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+
+let fontCache: ArrayBuffer | null = null;
+
+async function loadFont(): Promise<ArrayBuffer> {
+  if (fontCache) return fontCache;
+  const fontPath = join(
+    process.cwd(),
+    "node_modules",
+    "geist",
+    "dist",
+    "fonts",
+    "geist-sans",
+    "Geist-Regular.ttf",
+  );
+  const buffer = await readFile(fontPath);
+  fontCache = buffer.buffer.slice(
+    buffer.byteOffset,
+    buffer.byteOffset + buffer.byteLength,
+  );
+  return fontCache;
+}
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const name = searchParams.get("name") ?? "og-image";
+  const download = searchParams.get("download") === "1";
+
+  const example = examples.find((e) => e.name === name);
+  if (!example) {
+    return new Response("Example not found", { status: 404 });
+  }
+
+  return imageResponse(example.spec, name, download);
+}
+
+export async function POST(req: Request) {
+  const { spec, download, filename } = (await req.json()) as {
+    spec: Spec;
+    download?: boolean;
+    filename?: string;
+  };
+
+  if (!spec || !spec.root || !spec.elements) {
+    return new Response("Invalid spec", { status: 400 });
+  }
+
+  return imageResponse(spec, filename ?? "image", download ?? false);
+}
+
+async function imageResponse(spec: Spec, name: string, download: boolean) {
+  const fontData = await loadFont();
+  const fonts = [
+    {
+      name: "Geist Sans",
+      data: fontData,
+      weight: 400 as const,
+      style: "normal" as const,
+    },
+  ];
+
+  const png = await renderToPng(spec, { fonts });
+
+  const disposition = download
+    ? `attachment; filename="${name}.png"`
+    : `inline; filename="${name}.png"`;
+
+  return new Response(Buffer.from(png), {
+    headers: {
+      "Content-Type": "image/png",
+      "Content-Disposition": disposition,
+      "Cache-Control": "no-store",
+    },
+  });
+}

examples/image/app/globals.css

@@ -0,0 +1,124 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/image/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+
+const geist = Geist({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "json-render Image Example",
+  description: "Generate images from JSON specs with @json-render/image",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={geist.className}>{children}</body>
+    </html>
+  );
+}

examples/image/app/page.tsx

@@ -0,0 +1,627 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { examples } from "@/lib/examples";
+import { createSpecStreamCompiler } from "@json-render/core";
+import type { Spec } from "@json-render/core";
+import { cn } from "@/lib/utils";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { ImageIcon, Download, Loader2, ArrowRight, Square } from "lucide-react";
+
+type Mode = "scratch" | "example";
+type MobileView = "json" | "preview";
+
+interface Selection {
+  mode: Mode;
+  exampleName?: string;
+}
+
+const IMAGE_REFRESH_INTERVAL_MS = 3000;
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
+    >
+      {copied ? "copied" : "copy"}
+    </button>
+  );
+}
+
+function isRenderableSpec(spec: Spec | null): spec is Spec {
+  if (!spec?.root || !spec.elements) return false;
+  const root = spec.elements[spec.root];
+  return root?.type === "Frame";
+}
+
+export default function Page() {
+  const [selection, setSelection] = useState<Selection>({
+    mode: "example",
+    exampleName: examples[0]!.name,
+  });
+  const [prompt, setPrompt] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [generatedSpec, setGeneratedSpec] = useState<Spec | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [mobileView, setMobileView] = useState<MobileView>("preview");
+  const [examplesSheetOpen, setExamplesSheetOpen] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const imageUrlRef = useRef<string | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const mobileInputRef = useRef<HTMLTextAreaElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const codeScrollRef = useRef<HTMLDivElement>(null);
+  const mobileCodeScrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!generating) return;
+    codeScrollRef.current?.scrollTo({
+      top: codeScrollRef.current.scrollHeight,
+    });
+    mobileCodeScrollRef.current?.scrollTo({
+      top: mobileCodeScrollRef.current.scrollHeight,
+    });
+  }, [generating, generatedSpec]);
+
+  const currentExample =
+    selection.mode === "example"
+      ? examples.find((e) => e.name === selection.exampleName)
+      : null;
+
+  const activeSpec = generatedSpec ?? currentExample?.spec ?? null;
+
+  const exampleImageUrl =
+    selection.mode === "example" && !generatedSpec
+      ? `/api/image?name=${selection.exampleName}`
+      : null;
+
+  const displayImageUrl = imageUrl ?? exampleImageUrl;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [selection.mode, selection.exampleName]);
+
+  const fetchImageBlob = useCallback(
+    async (spec: Spec, signal?: AbortSignal) => {
+      const res = await fetch("/api/image", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ spec }),
+        signal,
+      });
+      if (!res.ok) throw new Error("Failed to generate image");
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+
+      const prev = imageUrlRef.current;
+      imageUrlRef.current = url;
+      setImageUrl(url);
+
+      if (prev) URL.revokeObjectURL(prev);
+    },
+    [],
+  );
+
+  const lastRefreshSpec = useRef<string>("");
+  const generatedSpecRef = useRef<Spec | null>(null);
+  generatedSpecRef.current = generatedSpec;
+
+  useEffect(() => {
+    if (!generating) return;
+
+    const interval = setInterval(() => {
+      const spec = generatedSpecRef.current;
+      if (!spec) return;
+
+      const specKey = JSON.stringify(spec);
+      if (specKey === lastRefreshSpec.current) return;
+      if (!isRenderableSpec(spec)) return;
+
+      lastRefreshSpec.current = specKey;
+      setRefreshing(true);
+      fetchImageBlob(spec)
+        .catch(() => {})
+        .finally(() => setRefreshing(false));
+    }, IMAGE_REFRESH_INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [generating, fetchImageBlob]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim()) return;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setGenerating(true);
+    setError(null);
+    lastRefreshSpec.current = "";
+
+    try {
+      const startingSpec =
+        selection.mode === "example" && currentExample
+          ? currentExample.spec
+          : null;
+
+      const res = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: prompt.trim(), startingSpec }),
+        signal: controller.signal,
+      });
+      if (!res.ok) throw new Error("Generation failed");
+
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error("No response body");
+
+      const decoder = new TextDecoder();
+      const compiler = createSpecStreamCompiler<Spec>(
+        startingSpec ? { ...startingSpec } : {},
+      );
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value, { stream: true });
+        const { result, newPatches } = compiler.push(chunk);
+        if (newPatches.length > 0) setGeneratedSpec(result);
+      }
+
+      const finalSpec = compiler.getResult();
+      setGeneratedSpec(finalSpec);
+      setGenerating(false);
+
+      await fetchImageBlob(finalSpec);
+    } catch (e) {
+      if (controller.signal.aborted) return;
+      setError(e instanceof Error ? e.message : "Something went wrong");
+      setGenerating(false);
+    }
+  }, [prompt, selection, currentExample, fetchImageBlob]);
+
+  const handleStop = useCallback(() => {
+    abortRef.current?.abort();
+    setGenerating(false);
+
+    if (isRenderableSpec(generatedSpec)) {
+      fetchImageBlob(generatedSpec).catch(() => {});
+    }
+  }, [generatedSpec, fetchImageBlob]);
+
+  const select = (next: Selection) => {
+    abortRef.current?.abort();
+    setSelection(next);
+    setGeneratedSpec(null);
+    setImageUrl(null);
+    setError(null);
+    setPrompt("");
+    setGenerating(false);
+    setExamplesSheetOpen(false);
+  };
+
+  const handleDownload = async () => {
+    if (!activeSpec) return;
+    if (generatedSpec) {
+      const res = await fetch("/api/image", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ spec: generatedSpec, download: true }),
+      });
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "image.png";
+      a.click();
+      URL.revokeObjectURL(url);
+    } else if (selection.mode === "example") {
+      window.open(
+        `/api/image?name=${selection.exampleName}&download=1`,
+        "_blank",
+      );
+    }
+  };
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleGenerate();
+      }
+    },
+    [handleGenerate],
+  );
+
+  const jsonCode = activeSpec
+    ? JSON.stringify(activeSpec, null, 2)
+    : "// select an example or generate an image";
+
+  // ---------------------------------------------------------------------------
+  // Pane: Chat / Examples
+  // ---------------------------------------------------------------------------
+  const chatPane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-2">
+        <ImageIcon className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-mono text-muted-foreground">
+          json-render / image
+        </span>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-1">
+          <p className="px-2 pt-2 pb-1 text-[11px] font-mono text-muted-foreground">
+            start
+          </p>
+          <button
+            onClick={() => select({ mode: "scratch" })}
+            className={cn(
+              "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+              selection.mode === "scratch"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+            )}
+          >
+            <span className="font-medium">From scratch</span>
+          </button>
+
+          <p className="px-2 pt-3 pb-1 text-[11px] font-mono text-muted-foreground">
+            examples
+          </p>
+          {examples.map((ex) => (
+            <button
+              key={ex.name}
+              onClick={() => select({ mode: "example", exampleName: ex.name })}
+              className={cn(
+                "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                selection.mode === "example" &&
+                  selection.exampleName === ex.name
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+              )}
+            >
+              <span className="font-medium">{ex.label}</span>
+              <p className="text-xs text-muted-foreground/70 mt-0.5 leading-snug">
+                {ex.description}
+              </p>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <div
+        className="border-t border-border p-3 cursor-text"
+        onMouseDown={(e) => {
+          const target = e.target as HTMLElement;
+          if (!target.closest("button") && target.tagName !== "TEXTAREA") {
+            e.preventDefault();
+            inputRef.current?.focus();
+          }
+        }}
+      >
+        {error && (
+          <div className="mb-2 rounded bg-destructive/10 px-3 py-1.5 text-xs text-destructive">
+            {error}
+          </div>
+        )}
+        <textarea
+          ref={inputRef}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            selection.mode === "scratch"
+              ? "Describe the image you want..."
+              : `Modify the ${currentExample?.label ?? "example"}...`
+          }
+          className="w-full bg-background text-sm resize-none outline-none placeholder:text-muted-foreground/50"
+          rows={2}
+          autoFocus
+        />
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-[11px] text-muted-foreground">
+            {selection.mode === "example" && currentExample
+              ? currentExample.label
+              : "scratch"}
+          </span>
+          {generating ? (
+            <button
+              onClick={handleStop}
+              className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors"
+              aria-label="Stop"
+            >
+              <Square className="h-3 w-3" fill="currentColor" />
+            </button>
+          ) : (
+            <button
+              onClick={handleGenerate}
+              disabled={!prompt.trim()}
+              className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors disabled:opacity-30"
+              aria-label="Generate"
+            >
+              <ArrowRight className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Pane: JSON Spec
+  // ---------------------------------------------------------------------------
+  const codePane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-3">
+        <span className="text-xs font-mono text-foreground">json</span>
+        {generating && (
+          <Loader2 className="h-3 w-3 text-muted-foreground animate-spin" />
+        )}
+        <div className="flex-1" />
+        {activeSpec && <CopyButton text={jsonCode} />}
+      </div>
+      <div ref={codeScrollRef} className="flex-1 overflow-auto">
+        <pre className="p-3 text-xs leading-relaxed font-mono text-muted-foreground whitespace-pre">
+          {jsonCode}
+        </pre>
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Pane: Image Preview
+  // ---------------------------------------------------------------------------
+  const previewPane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-3">
+        <span className="text-xs font-mono text-foreground">preview</span>
+        {(generating || refreshing) && (
+          <Loader2 className="h-3.5 w-3.5 text-muted-foreground animate-spin" />
+        )}
+        <div className="flex-1" />
+        {activeSpec && (
+          <button
+            onClick={handleDownload}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono flex items-center gap-1"
+          >
+            <Download className="h-3 w-3" />
+            download
+          </button>
+        )}
+      </div>
+      <div className="flex-1 relative bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center p-4">
+        {displayImageUrl ? (
+          <img
+            key={displayImageUrl}
+            src={displayImageUrl}
+            alt="Generated image"
+            className="max-w-full max-h-full object-contain rounded shadow-lg"
+          />
+        ) : (
+          <div className="flex flex-col items-center justify-center gap-2 text-neutral-400">
+            <ImageIcon className="h-10 w-10" />
+            <p className="text-sm">
+              {selection.mode === "scratch"
+                ? "Enter a prompt to generate an image"
+                : "Select an example to preview"}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  return (
+    <div className="h-dvh flex flex-col">
+      {/* Desktop: 3-pane resizable layout */}
+      <div className="hidden lg:flex flex-1 min-h-0">
+        <ResizablePanelGroup className="flex-1">
+          <ResizablePanel defaultSize={25} minSize={15}>
+            {chatPane}
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={35} minSize={20}>
+            {codePane}
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={40} minSize={20}>
+            {previewPane}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Mobile: toolbar + content + prompt */}
+      <div className="flex lg:hidden flex-col flex-1 min-h-0">
+        <div className="border-b border-border h-10 flex items-center px-1">
+          <button
+            onClick={() => setExamplesSheetOpen(true)}
+            className="px-3 h-full text-xs font-mono text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1.5"
+          >
+            <ImageIcon className="h-3.5 w-3.5" />
+            {selection.mode === "example" && currentExample
+              ? currentExample.label
+              : "scratch"}
+          </button>
+          <div className="flex-1" />
+          <button
+            onClick={() => setMobileView("json")}
+            className={cn(
+              "px-3 h-full text-xs font-mono transition-colors",
+              mobileView === "json"
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            json
+          </button>
+          <button
+            onClick={() => setMobileView("preview")}
+            className={cn(
+              "px-3 h-full text-xs font-mono transition-colors",
+              mobileView === "preview"
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            preview
+          </button>
+          {activeSpec && (
+            <button
+              onClick={handleDownload}
+              className="px-3 h-full text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Download className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+
+        <div className="flex-1 min-h-0">
+          {mobileView === "json" ? (
+            <div ref={mobileCodeScrollRef} className="h-full overflow-auto">
+              <pre className="p-3 text-xs leading-relaxed font-mono text-muted-foreground whitespace-pre">
+                {jsonCode}
+              </pre>
+            </div>
+          ) : (
+            <div className="h-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center p-4">
+              {displayImageUrl ? (
+                <img
+                  key={displayImageUrl}
+                  src={displayImageUrl}
+                  alt="Generated image"
+                  className="max-w-full max-h-full object-contain rounded shadow-lg"
+                />
+              ) : (
+                <div className="flex flex-col items-center justify-center gap-2 text-neutral-400">
+                  <ImageIcon className="h-10 w-10" />
+                  <p className="text-sm">
+                    {selection.mode === "scratch"
+                      ? "Enter a prompt to generate an image"
+                      : "Select an example"}
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div
+          className="border-t border-border p-3 cursor-text"
+          onMouseDown={(e) => {
+            const target = e.target as HTMLElement;
+            if (!target.closest("button") && target.tagName !== "TEXTAREA") {
+              e.preventDefault();
+              mobileInputRef.current?.focus();
+            }
+          }}
+        >
+          {error && (
+            <div className="mb-2 rounded bg-destructive/10 px-3 py-1.5 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+          <textarea
+            ref={mobileInputRef}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={
+              selection.mode === "scratch"
+                ? "Describe the image you want..."
+                : `Modify the ${currentExample?.label ?? "example"}...`
+            }
+            className="w-full bg-background text-sm resize-none outline-none placeholder:text-muted-foreground/50"
+            rows={2}
+          />
+          <div className="flex justify-end mt-2">
+            {generating ? (
+              <button
+                onClick={handleStop}
+                className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors"
+                aria-label="Stop"
+              >
+                <Square className="h-3 w-3" fill="currentColor" />
+              </button>
+            ) : (
+              <button
+                onClick={handleGenerate}
+                disabled={!prompt.trim()}
+                className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors disabled:opacity-30"
+                aria-label="Generate"
+              >
+                <ArrowRight className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Sheet open={examplesSheetOpen} onOpenChange={setExamplesSheetOpen}>
+        <SheetContent side="left" className="w-72 p-0">
+          <SheetTitle className="sr-only">Examples</SheetTitle>
+          <ScrollArea className="h-full">
+            <div className="p-2 space-y-1">
+              <p className="px-2 pt-2 pb-1 text-[11px] font-mono text-muted-foreground">
+                start
+              </p>
+              <button
+                onClick={() => select({ mode: "scratch" })}
+                className={cn(
+                  "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                  selection.mode === "scratch"
+                    ? "bg-muted text-foreground"
+                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                )}
+              >
+                <span className="font-medium">From scratch</span>
+              </button>
+
+              <p className="px-2 pt-3 pb-1 text-[11px] font-mono text-muted-foreground">
+                examples
+              </p>
+              {examples.map((ex) => (
+                <button
+                  key={ex.name}
+                  onClick={() =>
+                    select({ mode: "example", exampleName: ex.name })
+                  }
+                  className={cn(
+                    "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                    selection.mode === "example" &&
+                      selection.exampleName === ex.name
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                  )}
+                >
+                  <span className="font-medium">{ex.label}</span>
+                  <p className="text-xs text-muted-foreground/70 mt-0.5 leading-snug">
+                    {ex.description}
+                  </p>
+                </button>
+              ))}
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+}

examples/image/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

examples/image/components/ui/resizable.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

examples/image/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

examples/image/components/ui/sheet.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

examples/image/eslint.config.js

@@ -0,0 +1,12 @@
+import { nextJsConfig } from "@internal/eslint-config/next-js";
+
+/** @type {import("eslint").Linter.Config[]} */
+export default [
+  ...nextJsConfig,
+  {
+    rules: {
+      "react/prop-types": "off",
+      "@next/next/no-img-element": "off",
+    },
+  },
+];

examples/image/lib/catalog.ts

@@ -0,0 +1,7 @@
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/image/server";
+import { standardComponentDefinitions } from "@json-render/image/catalog";
+
+export const imageCatalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+});

examples/image/lib/examples.ts

@@ -0,0 +1,771 @@
+import type { Spec } from "@json-render/core";
+
+export interface Example {
+  name: string;
+  label: string;
+  description: string;
+  spec: Spec;
+}
+
+export const examples: Example[] = [
+  // ==========================================================================
+  // OG Image
+  // ==========================================================================
+  {
+    name: "og-image",
+    label: "OG Image",
+    description: "Social sharing card for Open Graph (1200x630)",
+    spec: {
+      root: "frame",
+      elements: {
+        frame: {
+          type: "Frame",
+          props: {
+            width: 1200,
+            height: 630,
+            backgroundColor: "#0f172a",
+            padding: 60,
+            flexDirection: "column",
+            justifyContent: "space-between",
+          },
+          children: ["top-row", "content", "bottom-row"],
+        },
+        "top-row": {
+          type: "Row",
+          props: { gap: 12, alignItems: "center" },
+          children: ["logo-dot", "brand"],
+        },
+        "logo-dot": {
+          type: "Box",
+          props: {
+            width: 32,
+            height: 32,
+            backgroundColor: "#6366f1",
+            borderRadius: 16,
+          },
+          children: [],
+        },
+        brand: {
+          type: "Text",
+          props: { text: "acme.dev", fontSize: 24, color: "#94a3b8" },
+          children: [],
+        },
+        content: {
+          type: "Column",
+          props: { gap: 16 },
+          children: ["title", "subtitle"],
+        },
+        title: {
+          type: "Heading",
+          props: {
+            text: "Build faster with the modern developer platform",
+            level: "h1",
+            color: "#f8fafc",
+            letterSpacing: "-0.02em",
+            lineHeight: 1.1,
+          },
+          children: [],
+        },
+        subtitle: {
+          type: "Text",
+          props: {
+            text: "Ship production-ready apps in minutes, not months.",
+            fontSize: 24,
+            color: "#94a3b8",
+            lineHeight: 1.4,
+          },
+          children: [],
+        },
+        "bottom-row": {
+          type: "Row",
+          props: { gap: 8, alignItems: "center" },
+          children: ["url"],
+        },
+        url: {
+          type: "Text",
+          props: {
+            text: "acme.dev/platform",
+            fontSize: 18,
+            color: "#6366f1",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+      },
+    },
+  },
+
+  // ==========================================================================
+  // Blog Post Card
+  // ==========================================================================
+  {
+    name: "blog-card",
+    label: "Blog Post Card",
+    description: "Social card for a blog post with author info",
+    spec: {
+      root: "frame",
+      elements: {
+        frame: {
+          type: "Frame",
+          props: {
+            width: 1200,
+            height: 630,
+            backgroundColor: "#ffffff",
+            padding: 60,
+            flexDirection: "column",
+            justifyContent: "space-between",
+          },
+          children: ["header", "body", "footer"],
+        },
+        header: {
+          type: "Row",
+          props: { gap: 10, alignItems: "center" },
+          children: ["category-badge"],
+        },
+        "category-badge": {
+          type: "Box",
+          props: {
+            backgroundColor: "#dbeafe",
+            borderRadius: 20,
+            paddingTop: 6,
+            paddingBottom: 6,
+            paddingLeft: 16,
+            paddingRight: 16,
+          },
+          children: ["category-text"],
+        },
+        "category-text": {
+          type: "Text",
+          props: {
+            text: "Engineering",
+            fontSize: 16,
+            color: "#1d4ed8",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        body: {
+          type: "Column",
+          props: { gap: 20 },
+          children: ["blog-title", "blog-excerpt"],
+        },
+        "blog-title": {
+          type: "Heading",
+          props: {
+            text: "How We Reduced API Latency by 90% with Edge Computing",
+            level: "h1",
+            color: "#0f172a",
+            letterSpacing: "-0.02em",
+            lineHeight: 1.15,
+          },
+          children: [],
+        },
+        "blog-excerpt": {
+          type: "Text",
+          props: {
+            text: "A deep dive into our migration from centralized servers to edge functions, and the performance gains we achieved along the way.",
+            fontSize: 22,
+            color: "#64748b",
+            lineHeight: 1.5,
+          },
+          children: [],
+        },
+        footer: {
+          type: "Row",
+          props: { gap: 16, alignItems: "center" },
+          children: ["author-avatar", "author-info"],
+        },
+        "author-avatar": {
+          type: "Box",
+          props: {
+            width: 48,
+            height: 48,
+            backgroundColor: "#e2e8f0",
+            borderRadius: 24,
+          },
+          children: [],
+        },
+        "author-info": {
+          type: "Column",
+          props: { gap: 2 },
+          children: ["author-name", "author-date"],
+        },
+        "author-name": {
+          type: "Text",
+          props: {
+            text: "Sarah Chen",
+            fontSize: 18,
+            color: "#0f172a",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "author-date": {
+          type: "Text",
+          props: {
+            text: "February 15, 2026",
+            fontSize: 16,
+            color: "#94a3b8",
+          },
+          children: [],
+        },
+      },
+    },
+  },
+
+  // ==========================================================================
+  // Event Banner
+  // ==========================================================================
+  {
+    name: "event-banner",
+    label: "Event Banner",
+    description: "Wide promotional banner for an event (1920x1080)",
+    spec: {
+      root: "frame",
+      elements: {
+        frame: {
+          type: "Frame",
+          props: {
+            width: 1920,
+            height: 1080,
+            backgroundColor: "#18181b",
+            padding: 100,
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          children: [
+            "badge-row",
+            "spacer-1",
+            "event-title",
+            "spacer-2",
+            "details-row",
+            "spacer-3",
+            "cta",
+          ],
+        },
+        "badge-row": {
+          type: "Row",
+          props: { alignItems: "center", justifyContent: "center" },
+          children: ["live-badge"],
+        },
+        "live-badge": {
+          type: "Box",
+          props: {
+            backgroundColor: "#dc2626",
+            borderRadius: 24,
+            paddingTop: 8,
+            paddingBottom: 8,
+            paddingLeft: 24,
+            paddingRight: 24,
+          },
+          children: ["live-text"],
+        },
+        "live-text": {
+          type: "Text",
+          props: {
+            text: "LIVE EVENT",
+            fontSize: 18,
+            color: "#ffffff",
+            fontWeight: "bold",
+            letterSpacing: "0.1em",
+          },
+          children: [],
+        },
+        "spacer-1": {
+          type: "Spacer",
+          props: { height: 40 },
+          children: [],
+        },
+        "event-title": {
+          type: "Heading",
+          props: {
+            text: "DevConf 2026",
+            level: "h1",
+            color: "#ffffff",
+            align: "center",
+            letterSpacing: "-0.03em",
+            lineHeight: 1.0,
+          },
+          children: [],
+        },
+        "spacer-2": {
+          type: "Spacer",
+          props: { height: 32 },
+          children: [],
+        },
+        "details-row": {
+          type: "Row",
+          props: {
+            gap: 40,
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          children: ["date-text", "dot-sep", "location-text"],
+        },
+        "date-text": {
+          type: "Text",
+          props: {
+            text: "March 15-17, 2026",
+            fontSize: 28,
+            color: "#a1a1aa",
+          },
+          children: [],
+        },
+        "dot-sep": {
+          type: "Text",
+          props: { text: "/", fontSize: 28, color: "#52525b" },
+          children: [],
+        },
+        "location-text": {
+          type: "Text",
+          props: {
+            text: "San Francisco, CA",
+            fontSize: 28,
+            color: "#a1a1aa",
+          },
+          children: [],
+        },
+        "spacer-3": {
+          type: "Spacer",
+          props: { height: 48 },
+          children: [],
+        },
+        cta: {
+          type: "Box",
+          props: {
+            backgroundColor: "#6366f1",
+            borderRadius: 12,
+            paddingTop: 16,
+            paddingBottom: 16,
+            paddingLeft: 48,
+            paddingRight: 48,
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          children: ["cta-text"],
+        },
+        "cta-text": {
+          type: "Text",
+          props: {
+            text: "Register Now",
+            fontSize: 24,
+            color: "#ffffff",
+            fontWeight: "bold",
+            letterSpacing: "0.02em",
+          },
+          children: [],
+        },
+      },
+    },
+  },
+
+  // ==========================================================================
+  // Social Square
+  // ==========================================================================
+  {
+    name: "social-square",
+    label: "Social Square",
+    description: "Square format card for Instagram or social media (1080x1080)",
+    spec: {
+      root: "frame",
+      elements: {
+        frame: {
+          type: "Frame",
+          props: {
+            width: 1080,
+            height: 1080,
+            backgroundColor: "#faf5ff",
+            padding: 80,
+            flexDirection: "column",
+            justifyContent: "space-between",
+          },
+          children: ["top-section", "quote-section", "bottom-section"],
+        },
+        "top-section": {
+          type: "Row",
+          props: {
+            alignItems: "center",
+            justifyContent: "space-between",
+          },
+          children: ["quote-icon", "slide-number"],
+        },
+        "quote-icon": {
+          type: "Heading",
+          props: { text: '"', level: "h1", color: "#9333ea" },
+          children: [],
+        },
+        "slide-number": {
+          type: "Text",
+          props: {
+            text: "01 / 05",
+            fontSize: 18,
+            color: "#a855f7",
+            fontWeight: "bold",
+            letterSpacing: "0.1em",
+          },
+          children: [],
+        },
+        "quote-section": {
+          type: "Column",
+          props: { gap: 24 },
+          children: ["quote-text"],
+        },
+        "quote-text": {
+          type: "Heading",
+          props: {
+            text: "The best way to predict the future is to create it.",
+            level: "h2",
+            color: "#1e1b4b",
+            letterSpacing: "-0.01em",
+            lineHeight: 1.3,
+          },
+          children: [],
+        },
+        "bottom-section": {
+          type: "Column",
+          props: { gap: 4 },
+          children: ["author-name-sq", "author-title"],
+        },
+        "author-name-sq": {
+          type: "Text",
+          props: {
+            text: "Peter Drucker",
+            fontSize: 22,
+            color: "#1e1b4b",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "author-title": {
+          type: "Text",
+          props: {
+            text: "Management Consultant & Author",
+            fontSize: 18,
+            color: "#7c3aed",
+          },
+          children: [],
+        },
+      },
+    },
+  },
+
+  // ==========================================================================
+  // Bar Graph
+  // ==========================================================================
+  {
+    name: "bar-graph",
+    label: "Bar Graph",
+    description: "Data visualization bar chart (1200x630)",
+    spec: {
+      root: "frame",
+      elements: {
+        frame: {
+          type: "Frame",
+          props: {
+            width: 1200,
+            height: 630,
+            backgroundColor: "#ffffff",
+            padding: 48,
+            flexDirection: "column",
+          },
+          children: ["header", "chart-area"],
+        },
+        header: {
+          type: "Column",
+          props: { gap: 4 },
+          children: ["chart-title", "chart-subtitle"],
+        },
+        "chart-title": {
+          type: "Heading",
+          props: {
+            text: "Monthly Revenue",
+            level: "h2",
+            color: "#0f172a",
+            letterSpacing: "-0.02em",
+            lineHeight: 1.2,
+          },
+          children: [],
+        },
+        "chart-subtitle": {
+          type: "Text",
+          props: {
+            text: "Q3-Q4 2025 (in thousands USD)",
+            fontSize: 18,
+            color: "#94a3b8",
+          },
+          children: [],
+        },
+        "chart-area": {
+          type: "Row",
+          props: {
+            gap: 0,
+            alignItems: "flex-end",
+            justifyContent: "space-between",
+            flex: 1,
+          },
+          children: [
+            "bar-jul",
+            "bar-aug",
+            "bar-sep",
+            "bar-oct",
+            "bar-nov",
+            "bar-dec",
+          ],
+        },
+
+        "bar-jul": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-jul", "rect-jul", "lbl-jul"],
+        },
+        "val-jul": {
+          type: "Text",
+          props: {
+            text: "$42k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-jul": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 168,
+            backgroundColor: "#6366f1",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-jul": {
+          type: "Text",
+          props: {
+            text: "Jul",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+
+        "bar-aug": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-aug", "rect-aug", "lbl-aug"],
+        },
+        "val-aug": {
+          type: "Text",
+          props: {
+            text: "$58k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-aug": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 232,
+            backgroundColor: "#6366f1",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-aug": {
+          type: "Text",
+          props: {
+            text: "Aug",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+
+        "bar-sep": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-sep", "rect-sep", "lbl-sep"],
+        },
+        "val-sep": {
+          type: "Text",
+          props: {
+            text: "$51k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-sep": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 204,
+            backgroundColor: "#6366f1",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-sep": {
+          type: "Text",
+          props: {
+            text: "Sep",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+
+        "bar-oct": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-oct", "rect-oct", "lbl-oct"],
+        },
+        "val-oct": {
+          type: "Text",
+          props: {
+            text: "$73k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-oct": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 292,
+            backgroundColor: "#818cf8",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-oct": {
+          type: "Text",
+          props: {
+            text: "Oct",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+
+        "bar-nov": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-nov", "rect-nov", "lbl-nov"],
+        },
+        "val-nov": {
+          type: "Text",
+          props: {
+            text: "$85k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-nov": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 340,
+            backgroundColor: "#818cf8",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-nov": {
+          type: "Text",
+          props: {
+            text: "Nov",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+
+        "bar-dec": {
+          type: "Column",
+          props: {
+            gap: 8,
+            alignItems: "center",
+            justifyContent: "flex-end",
+            flex: 1,
+          },
+          children: ["val-dec", "rect-dec", "lbl-dec"],
+        },
+        "val-dec": {
+          type: "Text",
+          props: {
+            text: "$97k",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+            fontWeight: "bold",
+          },
+          children: [],
+        },
+        "rect-dec": {
+          type: "Box",
+          props: {
+            width: 80,
+            height: 388,
+            backgroundColor: "#4f46e5",
+            borderRadius: 8,
+          },
+          children: [],
+        },
+        "lbl-dec": {
+          type: "Text",
+          props: {
+            text: "Dec",
+            fontSize: 16,
+            color: "#64748b",
+            align: "center",
+          },
+          children: [],
+        },
+      },
+    },
+  },
+];

examples/image/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

examples/image/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/image/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  serverExternalPackages: ["@resvg/resvg-js", "satori"],
+};
+
+export default nextConfig;

examples/image/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "example-image",
+  "version": "0.1.3",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "portless image-demo.json-render next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint --max-warnings 0"
+  },
+  "dependencies": {
+    "@json-render/core": "workspace:*",
+    "@json-render/image": "workspace:*",
+    "@resvg/resvg-js": "^2.6.2",
+    "satori": "^0.19.2",
+    "@tailwindcss/postcss": "^4.1.18",
+    "ai": "6.0.103",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "geist": "^1.7.0",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-resizable-panels": "^4.4.1",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.1.18",
+    "zod": "4.3.6"
+  },
+  "devDependencies": {
+    "@internal/eslint-config": "workspace:*",
+    "@internal/typescript-config": "workspace:*",
+    "@types/node": "^22.10.0",
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
+    "eslint": "^9.39.1",
+    "shadcn": "^3.8.5",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.7.2"
+  }
+}

examples/image/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

examples/image/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../packages/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "declaration": false,
+    "declarationMap": false,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/mcp/CHANGELOG.md

@@ -0,0 +1,21 @@
+# example-mcp
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/mcp@0.12.1
+  - @json-render/react@0.12.1
+  - @json-render/shadcn@0.12.1
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/mcp@0.12.0
+  - @json-render/react@0.12.0
+  - @json-render/shadcn@0.12.0

examples/mcp/README.md

@@ -0,0 +1,63 @@
+# MCP App Example
+
+A json-render MCP App that serves interactive shadcn/ui-based UIs directly inside Claude, ChatGPT, Cursor, VS Code, and other MCP-capable clients.
+
+## Setup
+
+```bash
+pnpm install
+pnpm build
+```
+
+## Usage
+
+### With Cursor
+
+Add to `.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "json-render": {
+      "command": "npx",
+      "args": ["tsx", "examples/mcp/server.ts", "--stdio"]
+    }
+  }
+}
+```
+
+### With Claude Desktop
+
+Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "json-render": {
+      "command": "npx",
+      "args": ["tsx", "/absolute/path/to/examples/mcp/server.ts", "--stdio"]
+    }
+  }
+}
+```
+
+### HTTP Transport
+
+```bash
+pnpm start
+# Server listens on http://localhost:3001/mcp
+```
+
+### Stdio Transport
+
+```bash
+pnpm start:stdio
+```
+
+## How It Works
+
+1. The Vite build bundles the React app (with shadcn components and `useJsonRenderApp` hook) into a single self-contained HTML file
+2. The MCP server registers a `render-ui` tool with the catalog prompt as its description
+3. When the LLM calls the tool, it generates a json-render spec constrained to the catalog
+4. The host renders the bundled HTML in a sandboxed iframe
+5. The iframe receives the spec via the MCP Apps protocol and renders it with json-render

examples/mcp/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob:; img-src * data: blob:; font-src * data:; connect-src *; media-src *;" />
+  <title>json-render MCP App</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

examples/mcp/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "example-mcp",
+  "version": "0.1.2",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "start": "tsx server.ts",
+    "start:stdio": "tsx server.ts --stdio",
+    "dev": "tsx watch server.ts"
+  },
+  "dependencies": {
+    "@json-render/core": "workspace:*",
+    "@json-render/mcp": "workspace:*",
+    "@json-render/react": "workspace:*",
+    "@json-render/shadcn": "workspace:*",
+    "@modelcontextprotocol/ext-apps": "^1.2.0",
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.3",
+    "@types/react-dom": "19.2.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.4",
+    "tailwindcss": "^4.2.1",
+    "tsx": "^4.21.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.5",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}

examples/mcp/server.ts

@@ -0,0 +1,86 @@
+import { createMcpApp } from "@json-render/mcp";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { catalog } from "./src/catalog.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function loadHtml(): string {
+  const htmlPath = path.join(__dirname, "dist", "index.html");
+  if (!fs.existsSync(htmlPath)) {
+    throw new Error(
+      `Built HTML not found at ${htmlPath}. Run 'pnpm build' first.`,
+    );
+  }
+  return fs.readFileSync(htmlPath, "utf-8");
+}
+
+async function startStdio() {
+  const html = loadHtml();
+  const server = await createMcpApp({
+    name: "json-render Example",
+    version: "1.0.0",
+    catalog,
+    html,
+  });
+  await server.connect(new StdioServerTransport());
+}
+
+async function startHttp() {
+  const html = loadHtml();
+  const port = parseInt(process.env.PORT ?? "3001", 10);
+
+  const expressApp = createMcpExpressApp({ host: "0.0.0.0" });
+
+  expressApp.all("/mcp", async (req, res) => {
+    const server = await createMcpApp({
+      name: "json-render Example",
+      version: "1.0.0",
+      catalog,
+      html,
+    });
+
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  expressApp.listen(port, () => {
+    console.log(`MCP server listening on http://localhost:${port}/mcp`);
+  });
+}
+
+if (process.argv.includes("--stdio")) {
+  startStdio().catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });
+} else {
+  startHttp().catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });
+}

examples/mcp/src/catalog.ts

@@ -0,0 +1,10 @@
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
+
+export const catalog = defineCatalog(schema, {
+  components: {
+    ...shadcnComponentDefinitions,
+  },
+  actions: {},
+});

examples/mcp/src/globals.css

@@ -0,0 +1,106 @@
+@import "tailwindcss";
+@source "../../../packages/shadcn/src";
+@source "../../../packages/react/src";
+
+@custom-variant dark (&:is([data-theme="dark"] *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+[data-theme="dark"] {
+  --background: var(--color-background-secondary, var(--vscode-editor-background, oklch(0.145 0 0)));
+  --foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
+  --card: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
+  --card-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
+  --popover: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
+  --popover-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
+  --primary: var(--color-text-primary, var(--vscode-foreground, oklch(0.922 0 0)));
+  --primary-foreground: var(--color-background-primary, var(--vscode-sideBar-background, oklch(0.205 0 0)));
+  --secondary: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
+  --secondary-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
+  --muted: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
+  --muted-foreground: var(--color-text-secondary, var(--vscode-descriptionForeground, oklch(0.708 0 0)));
+  --accent: var(--color-background-tertiary, var(--vscode-activityBar-background, oklch(0.269 0 0)));
+  --accent-foreground: var(--color-text-primary, var(--vscode-foreground, oklch(0.985 0 0)));
+  --destructive: var(--color-text-danger, var(--vscode-errorForeground, oklch(0.704 0.191 22.216)));
+  --border: var(--color-border-primary, var(--vscode-widget-border, oklch(1 0 0 / 10%)));
+  --input: var(--color-border-secondary, var(--vscode-editorWidget-border, oklch(1 0 0 / 15%)));
+  --ring: var(--color-ring-primary, var(--vscode-focusBorder, oklch(0.556 0 0)));
+}
+
+* {
+  box-sizing: border-box;
+  border-color: var(--color-border);
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--vscode-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply text-foreground;
+    background-color: var(--color-background) !important;
+  }
+}
+
+button {
+  cursor: pointer;
+}

examples/mcp/src/main.tsx

@@ -0,0 +1,269 @@
+import "./globals.css";
+import {
+  Component,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { createRoot } from "react-dom/client";
+import { App as McpApp } from "@modelcontextprotocol/ext-apps";
+import { JSONUIProvider, Renderer, defineRegistry } from "@json-render/react";
+import { shadcnComponents } from "@json-render/shadcn";
+import type { Spec } from "@json-render/core";
+import { catalog } from "./catalog";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    ...shadcnComponents,
+    Avatar: ({ props }: { props: Record<string, unknown> }) => {
+      const name = (props.name as string) || (props.alt as string) || "?";
+      const src = props.src as string | undefined;
+      const initials = name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+      const size = props.size === "lg" ? 48 : props.size === "sm" ? 32 : 40;
+      const [imgFailed, setImgFailed] = useState(false);
+      const onError = useCallback(() => setImgFailed(true), []);
+      const showImg = src && !imgFailed;
+
+      return (
+        <div
+          style={{
+            width: size,
+            height: size,
+            borderRadius: "50%",
+            overflow: "hidden",
+            backgroundColor: "var(--color-background-tertiary, #27272a)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+          }}
+        >
+          {showImg ? (
+            <img
+              src={src}
+              alt={name}
+              referrerPolicy="no-referrer"
+              crossOrigin="anonymous"
+              width={size}
+              height={size}
+              onError={onError}
+              style={{ objectFit: "cover", width: size, height: size }}
+            />
+          ) : (
+            <span
+              style={{
+                fontSize: size * 0.4,
+                color: "var(--color-text-secondary, #a1a1aa)",
+              }}
+            >
+              {initials}
+            </span>
+          )}
+        </div>
+      );
+    },
+  },
+});
+
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  { error: Error | null }
+> {
+  state = { error: null as Error | null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    if (this.state.error) {
+      return (
+        <div
+          style={{
+            padding: 16,
+            color: "#dc2626",
+            fontFamily: "monospace",
+            fontSize: 13,
+          }}
+        >
+          Error: {this.state.error.message}
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function forceFullWidth(spec: Spec): Spec {
+  if (!spec.elements) return spec;
+  const elements = { ...spec.elements };
+  for (const [key, el] of Object.entries(elements)) {
+    if (el.type === "Card" && el.props) {
+      elements[key] = {
+        ...el,
+        props: { ...el.props, maxWidth: "full", centered: false },
+      };
+    }
+  }
+  return { ...spec, elements };
+}
+
+function parseSpec(
+  result: { content?: Array<{ type: string; text?: string }> } | undefined,
+): Spec | null {
+  const text = result?.content?.find((c) => c.type === "text")?.text;
+  if (!text) return null;
+  try {
+    return forceFullWidth(JSON.parse(text) as Spec);
+  } catch {
+    return null;
+  }
+}
+
+function applyHostContext(ctx: {
+  theme?: string;
+  styles?: { variables?: Record<string, string> };
+}) {
+  if (ctx.theme) {
+    document.documentElement.setAttribute("data-theme", ctx.theme);
+    document.documentElement.style.colorScheme = ctx.theme;
+  }
+  if (ctx.styles?.variables) {
+    const root = document.documentElement;
+    for (const [key, value] of Object.entries(ctx.styles.variables)) {
+      root.style.setProperty(key, value);
+    }
+  }
+}
+
+function McpAppView() {
+  const [spec, setSpec] = useState<Spec | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let specReceived = false;
+
+    function handleSpec(s: Spec) {
+      if (specReceived) return;
+      specReceived = true;
+      setSpec(s);
+    }
+
+    function onMessage(event: MessageEvent) {
+      if (specReceived) return;
+      const data = event.data as Record<string, unknown> | undefined;
+      if (!data || typeof data !== "object") return;
+      const method = data.method as string | undefined;
+      const params = data.params as Record<string, unknown> | undefined;
+
+      // Cursor sends the spec via tool-input
+      if (method === "ui/notifications/tool-input" && params?.arguments) {
+        const args = params.arguments as Record<string, unknown>;
+        const rawSpec = args.spec;
+        if (
+          rawSpec &&
+          typeof rawSpec === "object" &&
+          "root" in rawSpec &&
+          "elements" in rawSpec
+        ) {
+          handleSpec(forceFullWidth(rawSpec as Spec));
+        }
+      }
+    }
+    window.addEventListener("message", onMessage);
+
+    const app = new McpApp({ name: "json-render", version: "1.0.0" });
+
+    app.ontoolresult = (result) => {
+      const parsed = parseSpec(
+        result as { content?: Array<{ type: string; text?: string }> },
+      );
+      if (parsed) handleSpec(parsed);
+    };
+
+    app.onhostcontextchanged = (ctx) =>
+      applyHostContext(ctx as Parameters<typeof applyHostContext>[0]);
+
+    app.onerror = (err: unknown) => {
+      setError(err instanceof Error ? err.message : String(err));
+    };
+
+    app
+      .connect()
+      .then(() => {
+        const ctx = app.getHostContext?.();
+        if (ctx)
+          applyHostContext(ctx as Parameters<typeof applyHostContext>[0]);
+
+        // Fallback: if host didn't provide theme, detect via media query
+        if (!ctx || !(ctx as Record<string, unknown>).theme) {
+          const prefersDark = window.matchMedia(
+            "(prefers-color-scheme: dark)",
+          ).matches;
+          document.documentElement.setAttribute(
+            "data-theme",
+            prefersDark ? "dark" : "light",
+          );
+          document.documentElement.style.colorScheme = prefersDark
+            ? "dark"
+            : "light";
+        }
+      })
+      .catch((err: unknown) =>
+        setError(err instanceof Error ? err.message : String(err)),
+      );
+
+    return () => {
+      window.removeEventListener("message", onMessage);
+      app.close().catch(() => {});
+    };
+  }, []);
+
+  if (error) {
+    return (
+      <div
+        style={{
+          padding: 16,
+          color: "#dc2626",
+          fontFamily: "monospace",
+          fontSize: 13,
+        }}
+      >
+        {error}
+      </div>
+    );
+  }
+
+  if (!spec) {
+    return (
+      <div
+        style={{
+          padding: 16,
+          color: "#6b7280",
+          fontFamily: "sans-serif",
+          fontSize: 14,
+        }}
+      >
+        Loading...
+      </div>
+    );
+  }
+
+  return (
+    <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
+      <div className="w-full">
+        <Renderer spec={spec} registry={registry} />
+      </div>
+    </JSONUIProvider>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <ErrorBoundary>
+    <McpAppView />
+  </ErrorBoundary>,
+);

examples/mcp/src/mcp-app-view.tsx

@@ -0,0 +1,89 @@
+import { JSONUIProvider, Renderer } from "@json-render/react";
+import { shadcnComponents } from "@json-render/shadcn";
+import { defineRegistry } from "@json-render/react";
+import { useJsonRenderApp } from "@json-render/mcp/app";
+import { catalog } from "./catalog";
+import { useState, useEffect } from "react";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    ...shadcnComponents,
+  },
+});
+
+const debugStyle = {
+  padding: 12,
+  fontFamily: "monospace",
+  fontSize: 12,
+  color: "#000",
+  background: "#fffbe6",
+  border: "1px solid #faad14",
+  borderRadius: 4,
+  margin: 8,
+  whiteSpace: "pre-wrap" as const,
+  wordBreak: "break-all" as const,
+};
+
+export function McpAppView() {
+  const [logs, setLogs] = useState<string[]>(["App mounted"]);
+
+  const addLog = (msg: string) => {
+    setLogs((prev) => [
+      ...prev,
+      `${new Date().toISOString().slice(11, 23)} ${msg}`,
+    ]);
+  };
+
+  const { spec, loading, connected, connecting, error } = useJsonRenderApp({
+    name: "json-render-mcp-example",
+    version: "1.0.0",
+  });
+
+  useEffect(() => {
+    addLog(
+      `State: connecting=${connecting} connected=${connected} error=${error?.message ?? "none"} loading=${loading} spec=${spec ? "yes" : "null"}`,
+    );
+  }, [connecting, connected, error, loading, spec]);
+
+  useEffect(() => {
+    if (spec) {
+      addLog(
+        `Spec received: root=${spec.root}, elements=${Object.keys(spec.elements ?? {}).join(",")}`,
+      );
+    }
+  }, [spec]);
+
+  if (error) {
+    return (
+      <div style={debugStyle}>
+        <div style={{ color: "#ef4444", fontWeight: "bold" }}>
+          Connection error: {error.message}
+        </div>
+        <div style={{ marginTop: 8 }}>{logs.join("\n")}</div>
+      </div>
+    );
+  }
+
+  if (!spec) {
+    return (
+      <div style={debugStyle}>
+        <div>
+          {connecting
+            ? "Connecting to host..."
+            : loading
+              ? "Waiting for UI spec..."
+              : "No spec received."}
+        </div>
+        <div style={{ marginTop: 8 }}>{logs.join("\n")}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <JSONUIProvider registry={registry} initialState={spec.state ?? {}}>
+        <Renderer spec={spec} registry={registry} loading={loading} />
+      </JSONUIProvider>
+    </div>
+  );
+}

examples/mcp/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "server.ts"]
+}

examples/mcp/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteSingleFile } from "vite-plugin-singlefile";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), viteSingleFile()],
+  resolve: {
+    dedupe: ["react", "react-dom"],
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: false,
+    rollupOptions: {
+      input: "index.html",
+    },
+  },
+});

examples/no-ai/CHANGELOG.md

@@ -1,5 +1,50 @@
 # example-no-ai
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+  - @json-render/shadcn@0.12.1
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/react@0.12.0
+  - @json-render/shadcn@0.12.0
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [3f1e71e]
+  - @json-render/core@0.11.0
+  - @json-render/react@0.11.0
+  - @json-render/shadcn@0.11.0
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [9cef4e9]
+  - @json-render/core@0.10.0
+  - @json-render/react@0.10.0
+  - @json-render/shadcn@0.10.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [b103676]
+  - @json-render/react@0.9.1
+  - @json-render/shadcn@0.9.1
+  - @json-render/core@0.9.1
+
 ## 0.1.1
 
 ### Patch Changes

examples/no-ai/app/page.tsx

@@ -2,33 +2,31 @@
 
 import { useState, useEffect, useCallback, type ReactNode } from "react";
 import ConfettiExplosion from "react-confetti-explosion";
-import {
-  Renderer,
-  StateProvider,
-  VisibilityProvider,
-  ActionProvider,
-  ValidationProvider,
-} from "@json-render/react";
+import { JSONUIProvider, Renderer } from "@json-render/react";
 import type { Spec } from "@json-render/core";
-import { registry, actionHandlers, onConfetti } from "@/lib/render/registry";
+import {
+  registry,
+  actionHandlers,
+  computedFunctions,
+  onConfetti,
+} from "@/lib/render/registry";
 import { examples } from "@/lib/examples";
 
 function SpecRenderer({ spec }: { spec: Spec }): ReactNode {
   return (
-    <StateProvider initialState={spec.state ?? {}}>
-      <VisibilityProvider>
-        <ActionProvider handlers={actionHandlers}>
-          <ValidationProvider>
-            <Renderer spec={spec} registry={registry} />
-          </ValidationProvider>
-        </ActionProvider>
-      </VisibilityProvider>
-    </StateProvider>
+    <JSONUIProvider
+      registry={registry}
+      initialState={spec.state ?? {}}
+      handlers={actionHandlers}
+      functions={computedFunctions}
+    >
+      <Renderer spec={spec} registry={registry} />
+    </JSONUIProvider>
   );
 }
 
 export default function Page() {
-  const [selectedIndex] = useState(0);
+  const [selectedIndex, setSelectedIndex] = useState(0);
   const selected = examples[selectedIndex]!;
   const [confettiKey, setConfettiKey] = useState(0);
   const [confettiActive, setConfettiActive] = useState(false);
@@ -41,30 +39,50 @@ export default function Page() {
   useEffect(() => onConfetti(fireConfetti), [fireConfetti]);
 
   return (
-    <div className="h-screen flex items-center justify-center bg-muted/30">
-      <div
-        className="relative bg-background border rounded-lg shadow-sm"
-        style={{ width: 960, height: 1080 }}
-      >
-        {confettiActive && (
-          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <ConfettiExplosion
-              key={confettiKey}
-              portal={false}
-              force={0.8}
-              duration={3500}
-              particleCount={400}
-              particleSize={8}
-              colors={["#00F0FF", "#7B61FF", "#FF3DFF", "#00FF94", "#FFE14D"]}
-              width={1600}
-              height="200vh"
-              zIndex={1}
-              onComplete={() => setConfettiActive(false)}
-            />
+    <div className="h-screen flex flex-col bg-muted/30">
+      {/* Example selector */}
+      <nav className="flex gap-1 p-3 overflow-x-auto border-b bg-background shrink-0">
+        {examples.map((ex, i) => (
+          <button
+            key={ex.name}
+            onClick={() => setSelectedIndex(i)}
+            className={`px-3 py-1.5 text-sm rounded-md whitespace-nowrap transition-colors ${
+              i === selectedIndex
+                ? "bg-primary text-primary-foreground"
+                : "hover:bg-muted"
+            }`}
+          >
+            {ex.name}
+          </button>
+        ))}
+      </nav>
+
+      {/* Render area */}
+      <div className="flex-1 flex items-start justify-center overflow-auto p-6">
+        <div className="relative bg-background border rounded-lg shadow-sm w-full max-w-[960px]">
+          {confettiActive && (
+            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+              <ConfettiExplosion
+                key={confettiKey}
+                portal={false}
+                force={0.8}
+                duration={3500}
+                particleCount={400}
+                particleSize={8}
+                colors={["#00F0FF", "#7B61FF", "#FF3DFF", "#00FF94", "#FFE14D"]}
+                width={1600}
+                height="200vh"
+                zIndex={1}
+                onComplete={() => setConfettiActive(false)}
+              />
+            </div>
+          )}
+          <div className="p-6 relative z-10">
+            <p className="text-xs text-muted-foreground mb-4">
+              {selected.description}
+            </p>
+            <SpecRenderer key={selectedIndex} spec={selected.spec} />
           </div>
-        )}
-        <div className="h-full overflow-auto p-6 flex items-center justify-center relative z-10">
-          <SpecRenderer key={selectedIndex} spec={selected.spec} />
         </div>
       </div>
     </div>

examples/no-ai/lib/examples.ts

@@ -508,4 +508,353 @@ export const examples: Example[] = [
       },
     },
   },
+
+  // =========================================================================
+  // Advanced: Registration form with cross-field validation & $template
+  // =========================================================================
+  {
+    name: "Registration Form",
+    description:
+      "Cross-field validation, $template preview, and validateForm action",
+    spec: {
+      root: "card",
+      state: {
+        form: {
+          name: "",
+          email: "",
+          password: "",
+          confirmPassword: "",
+          accountType: "personal",
+          company: "",
+        },
+        result: null,
+      },
+      elements: {
+        card: {
+          type: "Card",
+          props: {
+            title: "Create Account",
+            description: "Fill out the form below to register",
+            maxWidth: "md",
+            centered: null,
+          },
+          children: ["formStack"],
+        },
+        formStack: {
+          type: "Stack",
+          props: {
+            direction: "vertical",
+            gap: "md",
+            align: null,
+            justify: null,
+          },
+          children: [
+            "preview",
+            "sep0",
+            "nameInput",
+            "emailInput",
+            "passwordInput",
+            "confirmInput",
+            "sep1",
+            "accountTypeRadio",
+            "companyInput",
+            "sep2",
+            "actions",
+            "statusText",
+          ],
+        },
+
+        // $template live preview
+        preview: {
+          type: "Text",
+          props: {
+            text: {
+              $template: "Welcome, ${/form/name}! Your email: ${/form/email}",
+            },
+            variant: "muted",
+          },
+          visible: { $state: "/form/name", neq: "" },
+          children: [],
+        },
+        sep0: { type: "Separator", props: { orientation: null }, children: [] },
+
+        nameInput: {
+          type: "Input",
+          props: {
+            label: "Full Name",
+            name: "name",
+            type: "text",
+            placeholder: "Jane Doe",
+            value: { $bindState: "/form/name" },
+            checks: [
+              { type: "required", message: "Name is required" },
+              {
+                type: "minLength",
+                args: { min: 2 },
+                message: "Name must be at least 2 characters",
+              },
+            ],
+            validateOn: "blur",
+          },
+          children: [],
+        },
+        emailInput: {
+          type: "Input",
+          props: {
+            label: "Email",
+            name: "email",
+            type: "email",
+            placeholder: "jane@example.com",
+            value: { $bindState: "/form/email" },
+            checks: [
+              { type: "required", message: "Email is required" },
+              { type: "email", message: "Enter a valid email address" },
+            ],
+            validateOn: "blur",
+          },
+          children: [],
+        },
+        passwordInput: {
+          type: "Input",
+          props: {
+            label: "Password",
+            name: "password",
+            type: "password",
+            placeholder: "At least 8 characters",
+            value: { $bindState: "/form/password" },
+            checks: [
+              { type: "required", message: "Password is required" },
+              {
+                type: "minLength",
+                args: { min: 8 },
+                message: "Password must be at least 8 characters",
+              },
+            ],
+            validateOn: "blur",
+          },
+          children: [],
+        },
+        confirmInput: {
+          type: "Input",
+          props: {
+            label: "Confirm Password",
+            name: "confirmPassword",
+            type: "password",
+            placeholder: "Re-enter your password",
+            value: { $bindState: "/form/confirmPassword" },
+            checks: [
+              { type: "required", message: "Please confirm your password" },
+              {
+                type: "matches",
+                args: { other: { $state: "/form/password" } },
+                message: "Passwords must match",
+              },
+            ],
+            validateOn: "blur",
+          },
+          children: [],
+        },
+        sep1: { type: "Separator", props: { orientation: null }, children: [] },
+
+        accountTypeRadio: {
+          type: "Radio",
+          props: {
+            label: "Account Type",
+            name: "accountType",
+            options: ["personal", "business"],
+            value: { $bindState: "/form/accountType" },
+            checks: null,
+            validateOn: null,
+          },
+          children: [],
+        },
+        companyInput: {
+          type: "Input",
+          props: {
+            label: "Company Name",
+            name: "company",
+            type: "text",
+            placeholder: "Acme Inc.",
+            value: { $bindState: "/form/company" },
+            checks: [
+              {
+                type: "requiredIf",
+                args: { field: { $state: "/form/accountType" } },
+                message: "Company name is required for business accounts",
+              },
+            ],
+            validateOn: "blur",
+          },
+          visible: { $state: "/form/accountType", eq: "business" },
+          children: [],
+        },
+        sep2: { type: "Separator", props: { orientation: null }, children: [] },
+
+        actions: {
+          type: "Stack",
+          props: {
+            direction: "horizontal",
+            gap: "sm",
+            align: null,
+            justify: "end",
+          },
+          children: ["submitBtn"],
+        },
+        submitBtn: {
+          type: "Button",
+          props: { label: "Register", variant: "primary", disabled: null },
+          on: {
+            press: [
+              {
+                action: "validateForm",
+                params: { statePath: "/result" },
+              },
+            ],
+          },
+          children: [],
+        },
+
+        // Validation result
+        statusText: {
+          type: "Alert",
+          props: {
+            title: "Validation Result",
+            message: {
+              $cond: { $state: "/result/valid", eq: true },
+              $then: "All fields are valid -- ready to submit!",
+              $else: "Please fix the errors above before submitting.",
+            },
+            type: {
+              $cond: { $state: "/result/valid", eq: true },
+              $then: "success",
+              $else: "error",
+            },
+          },
+          visible: { $state: "/result", neq: null },
+          children: [],
+        },
+      },
+    },
+  },
+
+  // =========================================================================
+  // Advanced: Cascading selects with watchers & $computed
+  // =========================================================================
+  {
+    name: "Cascading Selects",
+    description:
+      "Watchers reset dependent fields, $computed derives display values",
+    spec: {
+      root: "card",
+      state: {
+        form: { country: "", city: "" },
+        availableCities: [],
+      },
+      elements: {
+        card: {
+          type: "Card",
+          props: {
+            title: "Shipping Address",
+            description: "Select your country to load available cities",
+            maxWidth: "md",
+            centered: null,
+          },
+          children: ["formStack"],
+        },
+        formStack: {
+          type: "Stack",
+          props: {
+            direction: "vertical",
+            gap: "md",
+            align: null,
+            justify: null,
+          },
+          children: [
+            "countrySelect",
+            "citySelect",
+            "sep",
+            "addressPreview",
+            "templatePreview",
+          ],
+        },
+
+        countrySelect: {
+          type: "Select",
+          props: {
+            label: "Country",
+            name: "country",
+            options: ["US", "Canada", "UK", "Germany", "Japan"],
+            placeholder: "Choose a country",
+            value: { $bindState: "/form/country" },
+            checks: [{ type: "required", message: "Country is required" }],
+            validateOn: "change",
+          },
+          watch: {
+            "/form/country": [
+              {
+                action: "setState",
+                params: {
+                  statePath: "/availableCities",
+                  value: {
+                    $computed: "citiesForCountry",
+                    args: { country: { $state: "/form/country" } },
+                  },
+                },
+              },
+              {
+                action: "setState",
+                params: { statePath: "/form/city", value: "" },
+              },
+            ],
+          },
+          children: [],
+        },
+
+        citySelect: {
+          type: "Select",
+          props: {
+            label: "City",
+            name: "city",
+            options: { $state: "/availableCities" },
+            placeholder: "Select a city",
+            value: { $bindState: "/form/city" },
+            checks: [{ type: "required", message: "City is required" }],
+            validateOn: "change",
+          },
+          children: [],
+        },
+        sep: { type: "Separator", props: { orientation: null }, children: [] },
+
+        // $computed formatted address
+        addressPreview: {
+          type: "Heading",
+          props: {
+            text: {
+              $computed: "formatAddress",
+              args: {
+                city: { $state: "/form/city" },
+                country: { $state: "/form/country" },
+              },
+            },
+            level: "h3",
+          },
+          children: [],
+        },
+
+        // $template string interpolation
+        templatePreview: {
+          type: "Text",
+          props: {
+            text: {
+              $template:
+                "Shipping to: ${/form/city} in ${/form/country}. Cities available: ${/availableCities}",
+            },
+            variant: "muted",
+          },
+          visible: { $state: "/form/country", neq: "" },
+          children: [],
+        },
+      },
+    },
+  },
 ];

examples/no-ai/lib/render/catalog.ts

@@ -13,4 +13,13 @@ export const catalog = defineCatalog(schema, {
       description: "Fire confetti",
     },
   },
+  functions: {
+    formatAddress: {
+      description:
+        "Formats country and city into a single address string like 'City, Country'",
+    },
+    citiesForCountry: {
+      description: "Returns an array of city names for the given country code",
+    },
+  },
 });

examples/no-ai/lib/render/registry.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { defineRegistry } from "@json-render/react";
+import type { ComputedFunction } from "@json-render/core";
 import { shadcnComponents } from "@json-render/shadcn";
 import { catalog } from "./catalog";
 
@@ -13,6 +14,14 @@ export function onConfetti(cb: () => void) {
   };
 }
 
+const cityData: Record<string, string[]> = {
+  US: ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"],
+  Canada: ["Toronto", "Vancouver", "Montreal", "Calgary", "Ottawa"],
+  UK: ["London", "Manchester", "Birmingham", "Edinburgh", "Bristol"],
+  Germany: ["Berlin", "Munich", "Hamburg", "Frankfurt", "Cologne"],
+  Japan: ["Tokyo", "Osaka", "Kyoto", "Yokohama", "Sapporo"],
+};
+
 export const { registry } = defineRegistry(catalog, {
   components: {
     ...shadcnComponents,
@@ -24,6 +33,23 @@ export const { registry } = defineRegistry(catalog, {
   },
 });
 
-export const actionHandlers: Record<string, () => void> = {
+export const actionHandlers: Record<
+  string,
+  (params: Record<string, unknown>) => void
+> = {
   confetti: () => confettiListener?.(),
 };
+
+export const computedFunctions: Record<string, ComputedFunction> = {
+  formatAddress: (args) => {
+    const city = (args.city as string) ?? "";
+    const country = (args.country as string) ?? "";
+    if (!city && !country) return "No location selected";
+    if (!city) return country;
+    return `${city}, ${country}`;
+  },
+  citiesForCountry: (args) => {
+    const country = (args.country as string) ?? "";
+    return cityData[country] ?? [];
+  },
+};

examples/no-ai/package.json

@@ -1,9 +1,10 @@
 {
   "name": "example-no-ai",
-  "version": "0.1.1",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {
+    "predev": "command -v portless >/dev/null 2>&1 || (echo '\\nportless is required but not installed. Run: npm i -g portless\\nSee: https://github.com/vercel-labs/portless\\n' && exit 1)",
     "dev": "portless no-ai-demo.json-render next dev --turbopack",
     "build": "next build",
     "start": "next start",
@@ -23,7 +24,7 @@
     "react-dom": "19.2.4",
     "react-confetti-explosion": "^3.0.3",
     "tailwind-merge": "^3.4.0",
-    "zod": "4.3.5"
+    "zod": "4.3.6"
   },
   "devDependencies": {
     "@internal/eslint-config": "workspace:*",

examples/react-email/.env.example

@@ -0,0 +1,9 @@
+# Vercel AI Gateway
+# Automatically authenticated when deployed on Vercel
+# For local development, get your key from https://vercel.com/ai-gateway
+AI_GATEWAY_API_KEY=
+
+# AI Model Configuration
+# Override the default model used for email generation
+# Default: anthropic/claude-haiku-4.5
+AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5

examples/react-email/CHANGELOG.md

@@ -0,0 +1,17 @@
+# example-react-email
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react-email@0.12.1
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [63c339b]
+  - @json-render/core@0.12.0
+  - @json-render/react-email@0.12.0

examples/react-email/app/api/email/route.ts

@@ -0,0 +1,47 @@
+import {
+  renderToHtml,
+  renderToPlainText,
+} from "@json-render/react-email/render";
+import { examples } from "@/lib/examples";
+import type { Spec } from "@json-render/core";
+
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const name = searchParams.get("name") ?? "vercel-invite";
+  const plain = searchParams.get("plain") === "1";
+
+  const example = examples.find((e) => e.name === name);
+  if (!example) {
+    return new Response("Example not found", { status: 404 });
+  }
+
+  return emailResponse(example.spec, plain);
+}
+
+export async function POST(req: Request) {
+  const { spec, plain } = (await req.json()) as {
+    spec: Spec;
+    plain?: boolean;
+  };
+
+  if (!spec || !spec.root || !spec.elements) {
+    return new Response("Invalid spec", { status: 400 });
+  }
+
+  return emailResponse(spec, plain ?? false);
+}
+
+async function emailResponse(spec: Spec, plain: boolean) {
+  const content = plain
+    ? await renderToPlainText(spec)
+    : await renderToHtml(spec);
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": plain
+        ? "text/plain; charset=utf-8"
+        : "text/html; charset=utf-8",
+      "Cache-Control": "no-store",
+    },
+  });
+}

examples/react-email/app/api/generate/route.ts

@@ -0,0 +1,34 @@
+import { streamText } from "ai";
+import { buildUserPrompt, type Spec } from "@json-render/core";
+import { emailCatalog } from "@/lib/catalog";
+
+export const maxDuration = 60;
+
+const SYSTEM_PROMPT = emailCatalog.prompt();
+
+const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
+
+export async function POST(req: Request) {
+  const { prompt, startingSpec } = (await req.json()) as {
+    prompt: string;
+    startingSpec?: Spec | null;
+  };
+
+  if (!prompt || typeof prompt !== "string") {
+    return Response.json({ error: "prompt is required" }, { status: 400 });
+  }
+
+  const userPrompt = buildUserPrompt({
+    prompt,
+    currentSpec: startingSpec,
+  });
+
+  const result = streamText({
+    model: process.env.AI_GATEWAY_MODEL ?? DEFAULT_MODEL,
+    system: SYSTEM_PROMPT,
+    prompt: userPrompt,
+    temperature: 0.7,
+  });
+
+  return result.toTextStreamResponse();
+}

examples/react-email/app/globals.css

@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+    --radius: 0.625rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

examples/react-email/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "json-render React Email Example",
+  description:
+    "Generate HTML emails from JSON specs with @json-render/react-email",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/react-email/app/page.tsx

@@ -0,0 +1,608 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { examples } from "@/lib/examples";
+import { createSpecStreamCompiler } from "@json-render/core";
+import type { Spec } from "@json-render/core";
+import { cn } from "@/lib/utils";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable";
+import { FileText, Download, Loader2, ArrowRight, Square } from "lucide-react";
+
+type Mode = "scratch" | "example";
+type MobileView = "json" | "preview";
+
+interface Selection {
+  mode: Mode;
+  exampleName?: string;
+}
+
+const HTML_REFRESH_INTERVAL_MS = 2000;
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      onClick={() => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      }}
+      className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono"
+    >
+      {copied ? "copied" : "copy"}
+    </button>
+  );
+}
+
+function isRenderableSpec(spec: Spec | null): spec is Spec {
+  if (!spec?.root || !spec.elements) return false;
+  const root = spec.elements[spec.root];
+  if (!root) return false;
+  if (root.type !== "Html" || !root.children?.length) return false;
+  const childTypes = root.children.map((id) => spec.elements[id]?.type);
+  return childTypes.includes("Head") || childTypes.includes("Body");
+}
+
+export default function Page() {
+  const [selection, setSelection] = useState<Selection>({
+    mode: "example",
+    exampleName: examples[0]!.name,
+  });
+  const [prompt, setPrompt] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [generatedSpec, setGeneratedSpec] = useState<Spec | null>(null);
+  const [htmlContent, setHtmlContent] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [mobileView, setMobileView] = useState<MobileView>("preview");
+  const [examplesSheetOpen, setExamplesSheetOpen] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const mobileInputRef = useRef<HTMLTextAreaElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const codeScrollRef = useRef<HTMLDivElement>(null);
+  const mobileCodeScrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!generating) return;
+    codeScrollRef.current?.scrollTo({
+      top: codeScrollRef.current.scrollHeight,
+    });
+    mobileCodeScrollRef.current?.scrollTo({
+      top: mobileCodeScrollRef.current.scrollHeight,
+    });
+  }, [generating, generatedSpec]);
+
+  const currentExample =
+    selection.mode === "example"
+      ? examples.find((e) => e.name === selection.exampleName)
+      : null;
+
+  const activeSpec = generatedSpec ?? currentExample?.spec ?? null;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [selection.mode, selection.exampleName]);
+
+  const fetchHtml = useCallback(async (spec: Spec, signal?: AbortSignal) => {
+    const res = await fetch("/api/email", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ spec }),
+      signal,
+    });
+    if (!res.ok) throw new Error("Failed to render email");
+    const html = await res.text();
+    setHtmlContent(html);
+  }, []);
+
+  // Fetch HTML for example specs on selection change
+  useEffect(() => {
+    if (selection.mode !== "example" || !currentExample || generatedSpec)
+      return;
+    fetchHtml(currentExample.spec).catch(() => {});
+  }, [selection.mode, currentExample, generatedSpec, fetchHtml]);
+
+  // Progressive HTML refresh during generation
+  const lastRefreshSpec = useRef<string>("");
+  const generatedSpecRef = useRef<Spec | null>(null);
+  generatedSpecRef.current = generatedSpec;
+
+  useEffect(() => {
+    if (!generating) return;
+
+    const interval = setInterval(() => {
+      const spec = generatedSpecRef.current;
+      if (!spec) return;
+
+      const specKey = JSON.stringify(spec);
+      if (specKey === lastRefreshSpec.current) return;
+      if (!isRenderableSpec(spec)) return;
+
+      lastRefreshSpec.current = specKey;
+      setRefreshing(true);
+      fetchHtml(spec)
+        .catch(() => {})
+        .finally(() => setRefreshing(false));
+    }, HTML_REFRESH_INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [generating, fetchHtml]);
+
+  const handleGenerate = useCallback(async () => {
+    if (!prompt.trim()) return;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    setGenerating(true);
+    setError(null);
+    lastRefreshSpec.current = "";
+
+    try {
+      const startingSpec =
+        selection.mode === "example" && currentExample
+          ? currentExample.spec
+          : null;
+
+      const res = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: prompt.trim(), startingSpec }),
+        signal: controller.signal,
+      });
+      if (!res.ok) throw new Error("Generation failed");
+
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error("No response body");
+
+      const decoder = new TextDecoder();
+      const compiler = createSpecStreamCompiler<Spec>(
+        startingSpec ? { ...startingSpec } : {},
+      );
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const chunk = decoder.decode(value, { stream: true });
+        const { result, newPatches } = compiler.push(chunk);
+        if (newPatches.length > 0) setGeneratedSpec(result);
+      }
+
+      const finalSpec = compiler.getResult();
+      setGeneratedSpec(finalSpec);
+      setGenerating(false);
+
+      await fetchHtml(finalSpec);
+    } catch (e) {
+      if (controller.signal.aborted) return;
+      setError(e instanceof Error ? e.message : "Something went wrong");
+      setGenerating(false);
+    }
+  }, [prompt, selection, currentExample, fetchHtml]);
+
+  const handleStop = useCallback(() => {
+    abortRef.current?.abort();
+    setGenerating(false);
+
+    if (isRenderableSpec(generatedSpec)) {
+      fetchHtml(generatedSpec).catch(() => {});
+    }
+  }, [generatedSpec, fetchHtml]);
+
+  const select = (next: Selection) => {
+    abortRef.current?.abort();
+    setSelection(next);
+    setGeneratedSpec(null);
+    setHtmlContent(null);
+    setError(null);
+    setPrompt("");
+    setGenerating(false);
+    setExamplesSheetOpen(false);
+  };
+
+  const handleDownload = async () => {
+    if (!activeSpec) return;
+    const spec = generatedSpec ?? currentExample?.spec;
+    if (!spec) return;
+
+    const res = await fetch("/api/email", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ spec }),
+    });
+    if (!res.ok) return;
+    const html = await res.text();
+    const blob = new Blob([html], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "email.html";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleGenerate();
+      }
+    },
+    [handleGenerate],
+  );
+
+  const jsonCode = activeSpec
+    ? JSON.stringify(activeSpec, null, 2)
+    : "// select an example or generate an email";
+
+  // ---------------------------------------------------------------------------
+  // Pane: Chat / Examples
+  // ---------------------------------------------------------------------------
+  const chatPane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-2">
+        <FileText className="h-3.5 w-3.5 text-muted-foreground" />
+        <span className="text-xs font-mono text-muted-foreground">
+          json-render / react-email
+        </span>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-1">
+          <p className="px-2 pt-2 pb-1 text-[11px] font-mono text-muted-foreground">
+            start
+          </p>
+          <button
+            onClick={() => select({ mode: "scratch" })}
+            className={cn(
+              "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+              selection.mode === "scratch"
+                ? "bg-muted text-foreground"
+                : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+            )}
+          >
+            <span className="font-medium">From scratch</span>
+          </button>
+
+          <p className="px-2 pt-3 pb-1 text-[11px] font-mono text-muted-foreground">
+            examples
+          </p>
+          {examples.map((ex) => (
+            <button
+              key={ex.name}
+              onClick={() => select({ mode: "example", exampleName: ex.name })}
+              className={cn(
+                "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                selection.mode === "example" &&
+                  selection.exampleName === ex.name
+                  ? "bg-muted text-foreground"
+                  : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+              )}
+            >
+              <span className="font-medium">{ex.label}</span>
+              <p className="text-xs text-muted-foreground/70 mt-0.5 leading-snug">
+                {ex.description}
+              </p>
+            </button>
+          ))}
+        </div>
+      </ScrollArea>
+
+      <div
+        className="border-t border-border p-3 cursor-text"
+        onMouseDown={(e) => {
+          const target = e.target as HTMLElement;
+          if (!target.closest("button") && target.tagName !== "TEXTAREA") {
+            e.preventDefault();
+            inputRef.current?.focus();
+          }
+        }}
+      >
+        {error && (
+          <div className="mb-2 rounded bg-destructive/10 px-3 py-1.5 text-xs text-destructive">
+            {error}
+          </div>
+        )}
+        <textarea
+          ref={inputRef}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            selection.mode === "scratch"
+              ? "Describe the email you want..."
+              : `Modify the ${currentExample?.label ?? "example"}...`
+          }
+          className="w-full bg-background text-sm resize-none outline-none placeholder:text-muted-foreground/50"
+          rows={2}
+          autoFocus
+        />
+        <div className="flex justify-between items-center mt-2">
+          <span className="text-[11px] text-muted-foreground">
+            {selection.mode === "example" && currentExample
+              ? currentExample.label
+              : "scratch"}
+          </span>
+          {generating ? (
+            <button
+              onClick={handleStop}
+              className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors"
+              aria-label="Stop"
+            >
+              <Square className="h-3 w-3" fill="currentColor" />
+            </button>
+          ) : (
+            <button
+              onClick={handleGenerate}
+              disabled={!prompt.trim()}
+              className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors disabled:opacity-30"
+              aria-label="Generate"
+            >
+              <ArrowRight className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Pane: JSON Spec
+  // ---------------------------------------------------------------------------
+  const codePane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-3">
+        <span className="text-xs font-mono text-foreground">json</span>
+        {generating && (
+          <Loader2 className="h-3 w-3 text-muted-foreground animate-spin" />
+        )}
+        <div className="flex-1" />
+        {activeSpec && <CopyButton text={jsonCode} />}
+      </div>
+      <div ref={codeScrollRef} className="flex-1 overflow-auto">
+        <pre className="p-3 text-xs leading-relaxed font-mono text-muted-foreground whitespace-pre">
+          {jsonCode}
+        </pre>
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Pane: Email Preview
+  // ---------------------------------------------------------------------------
+  const previewPane = (
+    <div className="h-full flex flex-col">
+      <div className="border-b border-border px-3 h-9 flex items-center gap-3">
+        <span className="text-xs font-mono text-foreground">preview</span>
+        {(generating || refreshing) && (
+          <Loader2 className="h-3 w-3 text-muted-foreground animate-spin" />
+        )}
+        <div className="flex-1" />
+        {activeSpec && (
+          <button
+            onClick={handleDownload}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono flex items-center gap-1"
+          >
+            <Download className="h-3 w-3" />
+            download
+          </button>
+        )}
+      </div>
+      <div className="flex-1 relative bg-neutral-600">
+        {htmlContent ? (
+          <div className="h-full flex justify-center p-5 overflow-auto">
+            <iframe
+              srcDoc={htmlContent}
+              className="w-[620px] h-full border-none bg-white shadow-sm"
+              title="Email preview"
+            />
+          </div>
+        ) : (
+          <div className="h-full flex flex-col items-center justify-center gap-2 text-neutral-400">
+            <FileText className="h-10 w-10" />
+            <p className="text-sm">
+              {selection.mode === "scratch"
+                ? "Enter a prompt to generate an email"
+                : "Select an example to preview"}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+  return (
+    <div className="h-dvh flex flex-col">
+      {/* Desktop: 3-pane resizable layout */}
+      <div className="hidden lg:flex flex-1 min-h-0">
+        <ResizablePanelGroup className="flex-1">
+          <ResizablePanel defaultSize={25} minSize={15}>
+            {chatPane}
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={35} minSize={20}>
+            {codePane}
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={40} minSize={20}>
+            {previewPane}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+
+      {/* Mobile: toolbar + content + prompt */}
+      <div className="flex lg:hidden flex-col flex-1 min-h-0">
+        <div className="border-b border-border px-3 h-9 flex items-center gap-3 shrink-0">
+          <button
+            onClick={() => setExamplesSheetOpen(true)}
+            className="text-xs font-mono font-medium px-1.5 py-0.5 rounded bg-muted text-foreground shrink-0"
+          >
+            {selection.mode === "example" && currentExample
+              ? currentExample.label
+              : "scratch"}
+          </button>
+          {(["json", "preview"] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setMobileView(tab)}
+              className={cn(
+                "text-xs font-mono transition-colors shrink-0",
+                mobileView === tab
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+          {(generating || refreshing) && (
+            <Loader2 className="h-3 w-3 text-muted-foreground animate-spin shrink-0" />
+          )}
+          <div className="flex-1" />
+          {activeSpec && (
+            <button
+              onClick={handleDownload}
+              className="text-xs text-muted-foreground hover:text-foreground transition-colors font-mono flex items-center gap-1"
+            >
+              <Download className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+
+        <div ref={mobileCodeScrollRef} className="flex-1 min-h-0 overflow-auto">
+          {mobileView === "json" ? (
+            <pre className="p-3 text-xs leading-relaxed font-mono text-muted-foreground whitespace-pre">
+              {jsonCode}
+            </pre>
+          ) : (
+            <div className="h-full relative bg-neutral-600">
+              {htmlContent ? (
+                <div className="h-full flex justify-center p-5 overflow-auto">
+                  <iframe
+                    srcDoc={htmlContent}
+                    className="w-[620px] h-full border-none bg-white shadow-sm"
+                    title="Email preview"
+                  />
+                </div>
+              ) : (
+                <div className="h-full flex flex-col items-center justify-center gap-2 text-neutral-400">
+                  <FileText className="h-10 w-10" />
+                  <p className="text-sm">Enter a prompt to generate an email</p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div
+          className="border-t border-border p-3 shrink-0 cursor-text"
+          onMouseDown={(e) => {
+            const target = e.target as HTMLElement;
+            if (!target.closest("button") && target.tagName !== "TEXTAREA") {
+              e.preventDefault();
+              mobileInputRef.current?.focus();
+            }
+          }}
+        >
+          <textarea
+            ref={mobileInputRef}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={
+              selection.mode === "scratch"
+                ? "Describe the email you want..."
+                : `Modify the ${currentExample?.label ?? "example"}...`
+            }
+            className="w-full bg-background text-base resize-none outline-none placeholder:text-muted-foreground/50"
+            rows={2}
+          />
+          <div className="flex justify-between items-center mt-2">
+            <span className="text-[11px] text-muted-foreground">
+              {selection.mode === "example" && currentExample
+                ? currentExample.label
+                : "scratch"}
+            </span>
+            {generating ? (
+              <button
+                onClick={handleStop}
+                className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors"
+                aria-label="Stop"
+              >
+                <Square className="h-3 w-3" fill="currentColor" />
+              </button>
+            ) : (
+              <button
+                onClick={handleGenerate}
+                disabled={!prompt.trim()}
+                className="w-7 h-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center hover:bg-primary/90 transition-colors disabled:opacity-30"
+                aria-label="Generate"
+              >
+                <ArrowRight className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        <Sheet open={examplesSheetOpen} onOpenChange={setExamplesSheetOpen}>
+          <SheetContent side="left" className="w-80 p-0">
+            <SheetTitle className="sr-only">Examples</SheetTitle>
+            <ScrollArea className="h-full">
+              <div className="p-2 space-y-1">
+                <p className="px-2 pt-2 pb-1 text-[11px] font-mono text-muted-foreground">
+                  start
+                </p>
+                <button
+                  onClick={() => select({ mode: "scratch" })}
+                  className={cn(
+                    "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                    selection.mode === "scratch"
+                      ? "bg-muted text-foreground"
+                      : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                  )}
+                >
+                  From scratch
+                </button>
+                <p className="px-2 pt-3 pb-1 text-[11px] font-mono text-muted-foreground">
+                  examples
+                </p>
+                {examples.map((ex) => (
+                  <button
+                    key={ex.name}
+                    onClick={() =>
+                      select({ mode: "example", exampleName: ex.name })
+                    }
+                    className={cn(
+                      "w-full text-left px-3 py-2 rounded text-sm transition-colors",
+                      selection.mode === "example" &&
+                        selection.exampleName === ex.name
+                        ? "bg-muted text-foreground"
+                        : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                    )}
+                  >
+                    <span className="font-medium">{ex.label}</span>
+                    <p className="text-xs text-muted-foreground/70 mt-0.5 leading-snug">
+                      {ex.description}
+                    </p>
+                  </button>
+                ))}
+              </div>
+            </ScrollArea>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </div>
+  );
+}

examples/react-email/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

examples/react-email/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

examples/react-email/components/ui/resizable.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: ResizablePrimitive.GroupProps) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: ResizablePrimitive.SeparatorProps & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.Separator>
+  );
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

examples/react-email/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

examples/react-email/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

examples/react-email/components/ui/sheet.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+            <XIcon className="size-4" />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

examples/react-email/components/ui/tabs.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

examples/react-email/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

examples/react-email/lib/catalog.ts

@@ -0,0 +1,8 @@
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react-email/server";
+import { standardComponentDefinitions } from "@json-render/react-email/catalog";
+
+export const emailCatalog = defineCatalog(schema, {
+  components: standardComponentDefinitions,
+  actions: {},
+});

examples/react-email/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

examples/react-email/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.