add solid example

* solid: add renderer implementation

This adds a Solid renderer with the same core capabilities as the
existing framework packages, including typed registry helpers,
providers, streaming hooks, docs, and example integration.

* fix: solid reactivity bugs in validation + state

---------

Co-authored-by: Patrick <phall@Patricks-MacBook-Pro.local>

.changeset/config.json

@@ -19,7 +19,8 @@
       "@json-render/xstate",
       "@json-render/image",
       "@json-render/mcp",
-      "@json-render/svelte"
+      "@json-render/svelte",
+      "@json-render/solid"
     ]
   ],
   "linked": [],

README.md

@@ -21,6 +21,8 @@ npm install @json-render/core @json-render/react-email @react-email/components @
 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?
@@ -30,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, Vue, Svelte (web), 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
@@ -91,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>
     ),
   },
 });
@@ -113,24 +113,25 @@ 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/vue` | Vue 3 renderer, composables, providers |
-| `@json-render/svelte` | Svelte 5 renderer with runes-based reactivity |
-| `@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/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 |
+| 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-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
 
@@ -159,7 +160,7 @@ 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)
@@ -199,6 +200,26 @@ const { registry } = defineRegistry(catalog, {
 // <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)
 
 ```tsx
@@ -229,7 +250,7 @@ const { registry } = defineRegistry(catalog, {
   },
 });
 
-<Renderer spec={spec} registry={registry} />
+<Renderer spec={spec} registry={registry} />;
 ```
 
 ### React Native (Mobile)
@@ -250,23 +271,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
@@ -276,7 +314,7 @@ const spec = {
   fps={spec.composition.fps}
   compositionWidth={spec.composition.width}
   compositionHeight={spec.composition.height}
-/>
+/>;
 ```
 
 ### React PDF (Documents)
@@ -287,7 +325,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" },
@@ -301,8 +343,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: [],
     },
@@ -327,7 +375,11 @@ const catalog = defineCatalog(schema, {
 const spec = {
   root: "html-1",
   elements: {
-    "html-1": { type: "Html", props: { lang: "en", dir: "ltr" }, children: ["head-1", "body-1"] },
+    "html-1": {
+      type: "Html",
+      props: { lang: "en", dir: "ltr" },
+      children: ["head-1", "body-1"],
+    },
     "head-1": { type: "Head", props: {}, children: [] },
     "body-1": {
       type: "Body",
@@ -336,11 +388,17 @@ const spec = {
     },
     "container-1": {
       type: "Container",
-      props: { style: { maxWidth: "600px", margin: "0 auto", padding: "20px" } },
+      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: [] },
+    "text-1": {
+      type: "Text",
+      props: { text: "Thanks for signing up." },
+      children: [],
+    },
   },
 };
 
@@ -425,8 +483,16 @@ 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"
+    }
   }
 }
 ```
@@ -445,7 +511,10 @@ 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"]
 }
 ```
@@ -459,9 +528,15 @@ React to state changes by triggering actions:
 ```json
 {
   "type": "Select",
-  "props": { "value": { "$bindState": "/form/country" }, "options": ["US", "Canada", "UK"] },
+  "props": {
+    "value": { "$bindState": "/form/country" },
+    "options": ["US", "Canada", "UK"]
+  },
   "watch": {
-    "/form/country": { "action": "loadCities", "params": { "country": { "$state": "/form/country" } } }
+    "/form/country": {
+      "action": "loadCities",
+      "params": { "country": { "$state": "/form/country" } }
+    }
   }
 }
 ```
@@ -486,7 +561,7 @@ pnpm dev
 - 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): run `pnpm dev` in `examples/vite-renderers`
+- 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
@@ -496,7 +571,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,14 @@
 # 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

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/renderers/page.mdx

@@ -1,5 +1,5 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("docs/renderers")
+import { pageMetadata } from "@/lib/page-metadata";
+export const metadata = pageMetadata("docs/renderers");
 
 # Renderers
 
@@ -22,37 +22,65 @@ All renderers share the same workflow:
   <tbody>
     <tr>
       <td>React</td>
-      <td><code>@json-render/react</code></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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <code>@json-render/react-pdf</code>
+      </td>
       <td>PDF documents</td>
     </tr>
     <tr>
       <td>Remotion</td>
-      <td><code>@json-render/remotion</code></td>
+      <td>
+        <code>@json-render/remotion</code>
+      </td>
       <td>Video compositions</td>
     </tr>
   </tbody>
@@ -67,7 +95,7 @@ import { defineRegistry, Renderer } from "@json-render/react";
 import { schema } from "@json-render/react/schema";
 
 const { registry } = defineRegistry(catalog, { components });
-<Renderer spec={spec} registry={registry} />
+<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.
@@ -90,6 +118,42 @@ const { registry } = defineRegistry(catalog, {
 
 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.
@@ -125,7 +189,10 @@ Render specs as native mobile views. Includes 25+ standard components and standa
 ```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 {
+  standardComponentDefinitions,
+  standardActionDefinitions,
+} from "@json-render/react-native/catalog";
 import { defineRegistry, Renderer } from "@json-render/react-native";
 
 const catalog = defineCatalog(schema, {
@@ -134,7 +201,7 @@ const catalog = defineCatalog(schema, {
 });
 
 const { registry } = defineRegistry(catalog, { components: {} });
-<Renderer spec={spec} registry={registry} />
+<Renderer spec={spec} registry={registry} />;
 ```
 
 See the [@json-render/react-native API reference](/docs/api/react-native) for details.
@@ -159,7 +226,11 @@ See the [@json-render/image API reference](/docs/api/image) for details.
 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";
+import {
+  renderToBuffer,
+  renderToStream,
+  renderToFile,
+} from "@json-render/react-pdf";
 
 const buffer = await renderToBuffer(spec);
 const stream = await renderToStream(spec);
@@ -185,7 +256,7 @@ import { Renderer } from "@json-render/remotion";
   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.

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

@@ -1,6 +1,6 @@
-import { pageMetadata } from "@/lib/page-metadata"
+import { pageMetadata } from "@/lib/page-metadata";
 
-export const metadata = pageMetadata("docs/skills")
+export const metadata = pageMetadata("docs/skills");
 
 # Skills
 
@@ -18,6 +18,7 @@ json-render ships with skills that teach AI coding agents how to use each packag
 - **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.
@@ -38,6 +39,7 @@ 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
@@ -88,6 +90,10 @@ Teaches agents how to render JSON specs as Vue 3 component trees. Covers the Vue
 
 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.

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

@@ -16,8 +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/vue, @json-render/svelte, @json-render/shadcn, @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, image, remotion, vue, svelte, codegen, mcp, redux, zustand, jotai, xstate. See /docs/skills for details.
+npm packages: @json-render/core, @json-render/react, @json-render/vue, @json-render/svelte, @json-render/solid, @json-render/shadcn, @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, 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,20 +1,24 @@
 "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>
   );
 }
@@ -22,48 +26,164 @@ function FormUI() {
 function InlineModeDiagram() {
   return (
     <div className="flex flex-col h-full">
-      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
+      <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">
-            {/* User message */}
-            <div className="flex justify-end">
-              <div className="bg-muted rounded-xl px-3 py-2">
-                <Skeleton className="h-2 w-14" />
-              </div>
+      <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>
 
-            {/* 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" />
+          {/* 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>
 
-        {/* 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" />
+        {/* 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="text-[10px] text-muted-foreground/60 mt-2 text-center">
-        Text + UI interleaved in messages
+      <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>
   );
@@ -72,28 +192,65 @@ function InlineModeDiagram() {
 function StandaloneModeDiagram() {
   return (
     <div className="flex flex-col h-full">
-      <div className="text-xs font-medium text-muted-foreground mb-3 text-center">
+      <div className="text-sm font-medium text-foreground text-center mb-3">
         Standalone 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 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-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>
+
+          {/* 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>
 
-        {/* Right panel - UI preview */}
-        <div className="flex-1 p-3 flex items-center justify-center">
-          <div className="w-3/4">
-            <FormUI />
-          </div>
+        {/* Right panel - landing page */}
+        <div className="flex-1">
+          <LandingPage />
         </div>
       </div>
-      <div className="text-[10px] text-muted-foreground/60 mt-2 text-center">
-        Prompt separate from UI preview
+      <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>
+        <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>
   );
@@ -103,10 +260,10 @@ 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]">
+        <div className="h-[420px]">
           <InlineModeDiagram />
         </div>
-        <div className="h-[280px]">
+        <div className="h-[420px]">
           <StandaloneModeDiagram />
         </div>
       </div>

apps/web/lib/docs-navigation.ts

@@ -92,7 +92,7 @@ export const docsNavigation: NavSection[] = [
         external: true,
       },
       {
-        title: "Renders with Vite (Vue / React / Svelte)",
+        title: "Renders with Vite (Vue / React / Svelte / Solid)",
         href: "https://github.com/vercel-labs/json-render/tree/main/examples/vite-renderers",
         external: true,
       },
@@ -133,6 +133,7 @@ export const docsNavigation: NavSection[] = [
       { 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/codegen", href: "/docs/api/codegen" },
       { title: "@json-render/mcp", href: "/docs/api/mcp" },
       { title: "@json-render/redux", href: "/docs/api/redux" },

apps/web/lib/page-titles.ts

@@ -43,6 +43,7 @@ export const PAGE_TITLES: Record<string, string> = {
   "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",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "license": "Apache-2.0",

examples/chat/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

examples/chat/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-chat",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {

examples/dashboard/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

examples/dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-dashboard",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {

examples/image/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

examples/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-image",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "private": true,
   "scripts": {

examples/mcp/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

examples/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-mcp",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "scripts": {

examples/no-ai/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

examples/no-ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-no-ai",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {

examples/react-email/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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

examples/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-email",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "private": true,
   "scripts": {

examples/react-native/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example-react-native
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react-native@0.12.1
+
 ## 0.1.5
 
 ### Patch Changes

examples/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-native",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "private": true,
   "main": "expo-router/entry",
   "scripts": {

examples/react-pdf/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example-react-pdf
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react-pdf@0.12.1
+
 ## 0.1.5
 
 ### Patch Changes

examples/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-react-pdf",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {

examples/remotion/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example-remotion
 
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/remotion@0.12.1
+
 ## 0.1.5
 
 ### Patch Changes

examples/remotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-remotion",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "private": true,
   "scripts": {

examples/solid/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>json-render solid example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

examples/solid/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "example-solid",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "portless solid-demo.json-render vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@json-render/core": "workspace:*",
+    "@json-render/solid": "workspace:*",
+    "solid-js": "^1.9.11",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}

examples/solid/src/App.tsx

@@ -0,0 +1,13 @@
+import { StateProvider } from "@json-render/solid";
+import { demoSpec } from "./lib/spec";
+import { DemoRenderer } from "./DemoRenderer";
+
+export function App() {
+  const initialState = demoSpec.state ?? {};
+
+  return (
+    <StateProvider initialState={initialState}>
+      <DemoRenderer />
+    </StateProvider>
+  );
+}

examples/solid/src/DemoRenderer.tsx

@@ -0,0 +1,51 @@
+import {
+  ActionProvider,
+  ValidationProvider,
+  VisibilityProvider,
+  Renderer,
+  useStateStore,
+} from "@json-render/solid";
+import { demoSpec } from "./lib/spec";
+import { registry } from "./lib/registry";
+
+export function DemoRenderer() {
+  const stateStore = useStateStore();
+
+  const handlers = {
+    increment: async () => {
+      stateStore.set("/count", Number(stateStore.get("/count") || 0) + 1);
+    },
+    decrement: async () => {
+      stateStore.set(
+        "/count",
+        Math.max(0, Number(stateStore.get("/count") || 0) - 1),
+      );
+    },
+    reset: async () => {
+      stateStore.set("/count", 0);
+    },
+    toggleItem: async (params: Record<string, unknown>) => {
+      const index = params.index as number;
+      const todos = (
+        stateStore.get("/todos") as Array<{
+          id: number;
+          title: string;
+          completed: boolean;
+        }>
+      ).map((item, i) =>
+        i === index ? { ...item, completed: !item.completed } : item,
+      );
+      stateStore.set("/todos", todos);
+    },
+  };
+
+  return (
+    <ActionProvider handlers={handlers}>
+      <VisibilityProvider>
+        <ValidationProvider>
+          <Renderer spec={demoSpec} registry={registry} />
+        </ValidationProvider>
+      </VisibilityProvider>
+    </ActionProvider>
+  );
+}

examples/solid/src/app.css

@@ -0,0 +1,13 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #f9fafb;
+  color: #111827;
+  min-height: 100vh;
+}

examples/solid/src/index.tsx

@@ -0,0 +1,5 @@
+import { render } from "solid-js/web";
+import { App } from "./App";
+import "./app.css";
+
+render(() => <App />, document.getElementById("app")!);

examples/solid/src/lib/catalog.ts

@@ -0,0 +1,90 @@
+import { schema } from "@json-render/solid/schema";
+import { z } from "zod";
+
+export const catalog = schema.createCatalog({
+  components: {
+    Stack: {
+      props: z.object({
+        gap: z.number().optional(),
+        padding: z.number().optional(),
+        direction: z.enum(["vertical", "horizontal"]).optional(),
+        align: z.enum(["start", "center", "end"]).optional(),
+      }),
+      slots: ["default"],
+      description:
+        "Layout container that stacks children vertically or horizontally",
+    },
+    Card: {
+      props: z.object({
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+      }),
+      slots: ["default"],
+      description: "A card container with optional title and subtitle",
+    },
+    Text: {
+      props: z.object({
+        content: z.string(),
+        size: z.enum(["sm", "md", "lg", "xl"]).optional(),
+        weight: z.enum(["normal", "medium", "bold"]).optional(),
+        color: z.string().optional(),
+      }),
+      slots: [],
+      description: "Displays a text string",
+    },
+    Button: {
+      props: z.object({
+        label: z.string(),
+        variant: z.enum(["primary", "secondary", "danger"]).optional(),
+        disabled: z.boolean().optional(),
+      }),
+      slots: [],
+      description: "A clickable button that emits a 'press' event",
+    },
+    Badge: {
+      props: z.object({
+        label: z.string(),
+        color: z.string().optional(),
+      }),
+      slots: [],
+      description: "A small badge/tag label",
+    },
+    ListItem: {
+      props: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        completed: z.boolean().optional(),
+      }),
+      slots: [],
+      description: "A single item in a list",
+    },
+    Input: {
+      props: z.object({
+        value: z.string().optional(),
+        placeholder: z.string().optional(),
+      }),
+      slots: [],
+      description: "A text input field that supports two-way state binding",
+    },
+  },
+  actions: {
+    increment: {
+      params: z.object({}),
+      description: "Increment the counter by 1",
+    },
+    decrement: {
+      params: z.object({}),
+      description: "Decrement the counter by 1",
+    },
+    reset: {
+      params: z.object({}),
+      description: "Reset the counter to 0",
+    },
+    toggleItem: {
+      params: z.object({
+        index: z.number(),
+      }),
+      description: "Toggle the completed state of a todo item",
+    },
+  },
+});

examples/solid/src/lib/components/Badge.tsx

@@ -0,0 +1,27 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface BadgeProps {
+  label: string;
+  color?: string;
+}
+
+export function Badge(renderProps: BaseComponentProps<BadgeProps>) {
+  const color = () => renderProps.props.color ?? "#6b7280";
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        padding: "4px 12px",
+        "border-radius": "9999px",
+        "font-size": "13px",
+        "font-weight": "500",
+        "background-color": `${color()}20`,
+        color: color(),
+        border: `1px solid ${color()}40`,
+      }}
+    >
+      {renderProps.props.label}
+    </span>
+  );
+}

examples/solid/src/lib/components/Button.tsx

@@ -0,0 +1,47 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface ButtonProps {
+  label: string;
+  variant?: "primary" | "secondary" | "danger";
+  disabled?: boolean;
+}
+
+const variantStyles: Record<string, Record<string, string>> = {
+  primary: {
+    background: "#2563eb",
+    color: "#ffffff",
+    border: "1px solid #2563eb",
+  },
+  secondary: {
+    background: "#f3f4f6",
+    color: "#374151",
+    border: "1px solid #d1d5db",
+  },
+  danger: {
+    background: "#fee2e2",
+    color: "#dc2626",
+    border: "1px solid #fca5a5",
+  },
+};
+
+export function Button(renderProps: BaseComponentProps<ButtonProps>) {
+  const variant = () => renderProps.props.variant ?? "primary";
+
+  return (
+    <button
+      disabled={renderProps.props.disabled}
+      onClick={() => renderProps.emit("press")}
+      style={{
+        padding: "8px 16px",
+        "border-radius": "8px",
+        "font-size": "14px",
+        "font-weight": "500",
+        cursor: renderProps.props.disabled ? "not-allowed" : "pointer",
+        opacity: renderProps.props.disabled ? "0.5" : "1",
+        ...variantStyles[variant()],
+      }}
+    >
+      {renderProps.props.label}
+    </button>
+  );
+}

examples/solid/src/lib/components/Card.tsx

@@ -0,0 +1,44 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface CardProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export function Card(renderProps: BaseComponentProps<CardProps>) {
+  return (
+    <div
+      style={{
+        background: "#ffffff",
+        "border-radius": "12px",
+        border: "1px solid #e5e7eb",
+        padding: "20px",
+        "box-shadow": "0 1px 3px rgba(0,0,0,0.06)",
+      }}
+    >
+      {renderProps.props.title && (
+        <h2
+          style={{
+            "font-size": "18px",
+            "font-weight": "600",
+            "margin-bottom": renderProps.props.subtitle ? "4px" : "16px",
+          }}
+        >
+          {renderProps.props.title}
+        </h2>
+      )}
+      {renderProps.props.subtitle && (
+        <p
+          style={{
+            "font-size": "14px",
+            color: "#6b7280",
+            "margin-bottom": "16px",
+          }}
+        >
+          {renderProps.props.subtitle}
+        </p>
+      )}
+      {renderProps.children}
+    </div>
+  );
+}

examples/solid/src/lib/components/Input.tsx

@@ -0,0 +1,30 @@
+import type { BaseComponentProps } from "@json-render/solid";
+import { useBoundProp } from "@json-render/solid";
+
+interface InputProps {
+  value?: string;
+  placeholder?: string;
+}
+
+export function Input(renderProps: BaseComponentProps<InputProps>) {
+  const [value, setValue] = useBoundProp<string>(
+    renderProps.props.value,
+    renderProps.bindings?.value,
+  );
+
+  return (
+    <input
+      value={String(value ?? "")}
+      onInput={(e) => setValue(e.currentTarget.value)}
+      placeholder={renderProps.props.placeholder ?? ""}
+      style={{
+        padding: "8px 12px",
+        "border-radius": "8px",
+        border: "1px solid #d1d5db",
+        "font-size": "14px",
+        outline: "none",
+        width: "100%",
+      }}
+    />
+  );
+}

examples/solid/src/lib/components/ListItem.tsx

@@ -0,0 +1,55 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface ListItemProps {
+  title: string;
+  description?: string;
+  completed?: boolean;
+}
+
+export function ListItem(renderProps: BaseComponentProps<ListItemProps>) {
+  return (
+    <div
+      onClick={() => renderProps.emit("press")}
+      style={{
+        display: "flex",
+        "align-items": "center",
+        gap: "10px",
+        padding: "10px 12px",
+        "border-radius": "8px",
+        border: "1px solid #e5e7eb",
+        cursor: "pointer",
+        "user-select": "none",
+        background: renderProps.props.completed ? "#f0fdf4" : "#ffffff",
+      }}
+    >
+      <span
+        style={{
+          width: "22px",
+          height: "22px",
+          "border-radius": "6px",
+          border: renderProps.props.completed
+            ? "2px solid #22c55e"
+            : "2px solid #d1d5db",
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "center",
+          "font-size": "13px",
+          color: "#22c55e",
+          "flex-shrink": "0",
+        }}
+      >
+        {renderProps.props.completed ? "\u2713" : ""}
+      </span>
+      <span
+        style={{
+          "text-decoration": renderProps.props.completed
+            ? "line-through"
+            : "none",
+          color: renderProps.props.completed ? "#9ca3af" : "#111827",
+        }}
+      >
+        {renderProps.props.title}
+      </span>
+    </div>
+  );
+}

examples/solid/src/lib/components/Stack.tsx

@@ -0,0 +1,27 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface StackProps {
+  gap?: number;
+  padding?: number;
+  direction?: "vertical" | "horizontal";
+  align?: "start" | "center" | "end";
+}
+
+export function Stack(renderProps: BaseComponentProps<StackProps>) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        "flex-direction":
+          renderProps.props.direction === "horizontal" ? "row" : "column",
+        gap: renderProps.props.gap ? `${renderProps.props.gap}px` : undefined,
+        padding: renderProps.props.padding
+          ? `${renderProps.props.padding}px`
+          : undefined,
+        "align-items": renderProps.props.align,
+      }}
+    >
+      {renderProps.children}
+    </div>
+  );
+}

examples/solid/src/lib/components/Text.tsx

@@ -0,0 +1,35 @@
+import type { BaseComponentProps } from "@json-render/solid";
+
+interface TextProps {
+  content: string;
+  size?: "sm" | "md" | "lg" | "xl";
+  weight?: "normal" | "medium" | "bold";
+  color?: string;
+}
+
+const sizeMap: Record<string, string> = {
+  sm: "12px",
+  md: "14px",
+  lg: "18px",
+  xl: "24px",
+};
+
+const weightMap: Record<string, string> = {
+  normal: "400",
+  medium: "500",
+  bold: "700",
+};
+
+export function Text(renderProps: BaseComponentProps<TextProps>) {
+  return (
+    <span
+      style={{
+        "font-size": sizeMap[renderProps.props.size ?? "md"],
+        "font-weight": weightMap[renderProps.props.weight ?? "normal"],
+        color: renderProps.props.color,
+      }}
+    >
+      {String(renderProps.props.content ?? "")}
+    </span>
+  );
+}

examples/solid/src/lib/registry.tsx

@@ -0,0 +1,29 @@
+import { type Components, defineRegistry } from "@json-render/solid";
+import { catalog } from "./catalog";
+import { Stack } from "./components/Stack";
+import { Card } from "./components/Card";
+import { Text } from "./components/Text";
+import { Button } from "./components/Button";
+import { Badge } from "./components/Badge";
+import { ListItem } from "./components/ListItem";
+import { Input } from "./components/Input";
+
+const components: Components<typeof catalog> = {
+  Stack,
+  Card,
+  Text,
+  Button,
+  Badge,
+  ListItem,
+  Input,
+};
+
+export const { registry, handlers: makeHandlers } = defineRegistry(catalog, {
+  components,
+  actions: {
+    increment: async () => {},
+    decrement: async () => {},
+    reset: async () => {},
+    toggleItem: async () => {},
+  },
+});

examples/solid/src/lib/spec.ts

@@ -0,0 +1,130 @@
+import type { Spec } from "@json-render/core";
+
+export const demoSpec: Spec = {
+  root: "root",
+  state: {
+    count: 0,
+    name: "",
+    todos: [
+      { id: 1, title: "Learn SolidJS", completed: true },
+      { id: 2, title: "Try @json-render/solid", completed: false },
+      { id: 3, title: "Build something awesome", completed: false },
+    ],
+  },
+  elements: {
+    root: {
+      type: "Stack",
+      props: { gap: 24, padding: 24, direction: "vertical" },
+      children: [
+        "header",
+        "counter-card",
+        "milestone-badge",
+        "todos-card",
+        "input-card",
+      ],
+    },
+    header: {
+      type: "Text",
+      props: {
+        content: "@json-render/solid demo",
+        size: "xl",
+        weight: "bold",
+      },
+    },
+    "counter-card": {
+      type: "Card",
+      props: {
+        title: "Counter",
+        subtitle: "Click the buttons to change the count",
+      },
+      children: ["counter-body"],
+    },
+    "counter-body": {
+      type: "Stack",
+      props: { gap: 12, direction: "horizontal", align: "center" },
+      children: [
+        "decrement-btn",
+        "counter-value",
+        "increment-btn",
+        "reset-btn",
+      ],
+    },
+    "decrement-btn": {
+      type: "Button",
+      props: { label: "\u2212", variant: "secondary" },
+      on: { press: { action: "decrement" } },
+    },
+    "counter-value": {
+      type: "Text",
+      props: {
+        content: { $state: "/count" },
+        size: "xl",
+        weight: "bold",
+      },
+    },
+    "increment-btn": {
+      type: "Button",
+      props: { label: "+", variant: "primary" },
+      on: { press: { action: "increment" } },
+    },
+    "reset-btn": {
+      type: "Button",
+      props: { label: "Reset", variant: "danger" },
+      on: { press: { action: "reset" } },
+    },
+    "milestone-badge": {
+      type: "Badge",
+      props: { label: "Milestone reached: 10!", color: "#10b981" },
+      visible: { $state: "/count", gte: 10 },
+    },
+    "todos-card": {
+      type: "Card",
+      props: { title: "Todo List", subtitle: "Your tasks" },
+      children: ["todos-list"],
+    },
+    "todos-list": {
+      type: "Stack",
+      props: { gap: 8, direction: "vertical" },
+      repeat: { statePath: "/todos", key: "id" },
+      children: ["todo-item"],
+    },
+    "todo-item": {
+      type: "ListItem",
+      props: {
+        title: { $item: "title" },
+        completed: { $item: "completed" },
+      },
+      on: {
+        press: { action: "toggleItem", params: { index: { $index: true } } },
+      },
+    },
+    "input-card": {
+      type: "Card",
+      props: {
+        title: "Bound Input",
+        subtitle: "Type to update state and see reactive text",
+      },
+      children: ["input-body"],
+    },
+    "input-body": {
+      type: "Stack",
+      props: { gap: 12, direction: "vertical" },
+      children: ["name-input", "name-display"],
+    },
+    "name-input": {
+      type: "Input",
+      props: {
+        value: { $bindState: "/name" },
+        placeholder: "Enter your name...",
+      },
+    },
+    "name-display": {
+      type: "Text",
+      props: {
+        content: { $state: "/name" },
+        size: "md",
+        color: "#6b7280",
+      },
+    },
+  },
+};

examples/solid/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/solid/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solid()],
+});

examples/stripe-app/drawer-app/CHANGELOG.md

@@ -1,5 +1,13 @@
 # com.example.json-render-demo
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+
 ## 0.0.6
 
 ### Patch Changes

examples/stripe-app/drawer-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "com.example.json-render-demo",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Test",
   "private": true,
   "license": "~~proprietary~~",

examples/stripe-app/fullpage-app/CHANGELOG.md

@@ -1,5 +1,13 @@
 # com.example.json-render-fullpage-demo
 
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+
 ## 0.0.6
 
 ### Patch Changes

examples/stripe-app/fullpage-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "com.example.json-render-fullpage-demo",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Full-page Stripe App example (alpha)",
   "private": true,
   "license": "~~proprietary~~",

examples/svelte-chat/CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte-chat
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/svelte@0.12.1
+
 ## 0.0.2
 
 ### Patch Changes

examples/svelte-chat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-chat",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

examples/svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example-svelte
 
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/svelte@0.12.1
+
 ## 0.1.2
 
 ### Patch Changes

examples/svelte/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-svelte",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "type": "module",
   "scripts": {

examples/vite-renderers/CHANGELOG.md

@@ -1,5 +1,15 @@
 # vite-renderers
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+  - @json-render/svelte@0.12.1
+  - @json-render/vue@0.12.1
+
 ## 0.1.3
 
 ### Patch Changes

examples/vite-renderers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-renderers",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,10 +12,12 @@
   "dependencies": {
     "@json-render/core": "workspace:*",
     "@json-render/react": "workspace:*",
+    "@json-render/solid": "workspace:*",
     "@json-render/svelte": "workspace:*",
     "@json-render/vue": "workspace:*",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "solid-js": "^1.9.11",
     "svelte": "^5.49.2",
     "vue": "^3.5.29",
     "zod": "4.3.6"
@@ -27,6 +29,7 @@
     "@vitejs/plugin-react": "^5.1.4",
     "@vitejs/plugin-vue": "^6.0.4",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
+    "vite-plugin-solid": "^2.11.10"
   }
 }

examples/vite-renderers/src/main.ts

@@ -1,7 +1,7 @@
 import "./shared/styles.css";
 import { demoSpec } from "./spec";
 
-type Renderer = "vue" | "react" | "svelte";
+type Renderer = "vue" | "react" | "svelte" | "solid";
 
 const container = document.getElementById("renderer-root") as HTMLElement;
 
@@ -18,10 +18,14 @@ async function switchTo(renderer: Renderer) {
     const mod = await import("./react/mount.tsx");
     mod.mount(container, renderer, demoSpec);
     unmountCurrent = mod.unmount;
-  } else {
+  } else if (renderer === "svelte") {
     const mod = await import("./svelte/mount.ts");
     mod.mount(container, renderer, demoSpec);
     unmountCurrent = mod.unmount;
+  } else {
+    const mod = await import("./solid/mount.tsx");
+    mod.mount(container, renderer, demoSpec);
+    unmountCurrent = mod.unmount;
   }
 }
 

examples/vite-renderers/src/react/registry.tsx

@@ -123,7 +123,9 @@ export const components: Components<AppCatalog> = {
         ? "Rendered with Vue"
         : props.renderer === "react"
           ? "Rendered with React"
-          : "Rendered with Svelte"}
+          : props.renderer === "svelte"
+            ? "Rendered with Svelte"
+            : "Rendered with Solid"}
     </span>
   ),
 
@@ -164,6 +166,17 @@ export const components: Components<AppCatalog> = {
         >
           Svelte
         </button>
+        <button
+          onClick={() => emit("pressSolid")}
+          className={[
+            "json-render-renderer-tab",
+            props.renderer === "solid" && "json-render-renderer-tab--active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          Solid
+        </button>
       </div>
     </div>
   ),

examples/vite-renderers/src/shared/catalog-def.ts

@@ -65,7 +65,7 @@ export const catalogDef = {
       props: z.object({ renderer: z.string() }),
       slots: [],
       description:
-        "Segmented tab control for switching between Vue, React, and Svelte renderers",
+        "Segmented tab control for switching between Vue, React, Svelte, and Solid renderers",
     },
     RendererBadge: {
       props: z.object({ renderer: z.string() }),
@@ -99,5 +99,9 @@ export const catalogDef = {
       params: z.object({}),
       description: "Switch to the Svelte renderer",
     },
+    switchToSolid: {
+      params: z.object({}),
+      description: "Switch to the Solid renderer",
+    },
   },
 };

examples/vite-renderers/src/shared/handlers.ts

@@ -10,6 +10,7 @@ export const actionStubs = {
   switchToVue: async () => {},
   switchToReact: async () => {},
   switchToSvelte: async () => {},
+  switchToSolid: async () => {},
 };
 
 /** Creates action handlers that close over the state store's get/set */
@@ -52,5 +53,10 @@ export function makeHandlers(get: Get, set: Set) {
         new CustomEvent("switch-renderer", { detail: "svelte" }),
       );
     },
+    switchToSolid: async () => {
+      document.dispatchEvent(
+        new CustomEvent("switch-renderer", { detail: "solid" }),
+      );
+    },
   };
 }

examples/vite-renderers/src/shared/styles.css

@@ -11,9 +11,15 @@
   align-items: center;
 }
 
-.json-render-stack--align-start  { align-items: flex-start; }
-.json-render-stack--align-center { align-items: center; }
-.json-render-stack--align-end    { align-items: flex-end; }
+.json-render-stack--align-start {
+  align-items: flex-start;
+}
+.json-render-stack--align-center {
+  align-items: center;
+}
+.json-render-stack--align-end {
+  align-items: flex-end;
+}
 
 /* ---- Card ----------------------------------------------------------------- */
 
@@ -50,12 +56,22 @@
   color: #111827;
 }
 
-.json-render-text--sm { font-size: 12px; }
-.json-render-text--lg { font-size: 16px; }
-.json-render-text--xl { font-size: 24px; }
+.json-render-text--sm {
+  font-size: 12px;
+}
+.json-render-text--lg {
+  font-size: 16px;
+}
+.json-render-text--xl {
+  font-size: 24px;
+}
 
-.json-render-text--medium { font-weight: 500; }
-.json-render-text--bold   { font-weight: 700; }
+.json-render-text--medium {
+  font-weight: 500;
+}
+.json-render-text--bold {
+  font-weight: 700;
+}
 
 /* ---- Button --------------------------------------------------------------- */
 
@@ -211,7 +227,7 @@
   transition: background 0.15s;
 }
 
-.json-render-renderer-tab:first-child {
+.json-render-renderer-tab:not(:last-child) {
   border-right: 1px solid #e5e7eb;
 }
 
@@ -261,3 +277,18 @@
   background-color: #ff3e00;
   color: white;
 }
+
+.renderer-solid .json-render-renderer-badge {
+  color: #2c4f7c;
+  background-color: #2c4f7c18;
+  border-color: #2c4f7c40;
+}
+
+.renderer-solid .json-render-renderer-dot {
+  background-color: #2c4f7c;
+}
+
+.renderer-solid .json-render-renderer-tab--active {
+  background-color: #2c4f7c;
+  color: white;
+}

examples/vite-renderers/src/solid/App.tsx

@@ -0,0 +1,19 @@
+import type { Spec } from "@json-render/core";
+import { StateProvider } from "@json-render/solid";
+import { DemoRenderer } from "./DemoRenderer";
+
+export function App(props: { initialRenderer?: string; spec: Spec }) {
+  const renderer = props.initialRenderer ?? "solid";
+  const initialState = {
+    ...props.spec.state,
+    renderer,
+  };
+
+  return (
+    <div class={`renderer-${renderer}`}>
+      <StateProvider initialState={initialState}>
+        <DemoRenderer spec={props.spec} />
+      </StateProvider>
+    </div>
+  );
+}

examples/vite-renderers/src/solid/DemoRenderer.tsx

@@ -0,0 +1,32 @@
+import type { Spec } from "@json-render/core";
+import {
+  ActionProvider,
+  ValidationProvider,
+  VisibilityProvider,
+  Renderer,
+  defineRegistry,
+  useStateStore,
+} from "@json-render/solid";
+import { catalog } from "./catalog";
+import { components } from "./registry";
+import { actionStubs, makeHandlers } from "../shared/handlers";
+
+const { registry } = defineRegistry(catalog, {
+  components,
+  actions: actionStubs,
+});
+
+export function DemoRenderer(props: { spec: Spec }) {
+  const stateStore = useStateStore();
+  const handlers = makeHandlers(stateStore.get, stateStore.set);
+
+  return (
+    <ActionProvider handlers={handlers}>
+      <VisibilityProvider>
+        <ValidationProvider>
+          <Renderer spec={props.spec} registry={registry} />
+        </ValidationProvider>
+      </VisibilityProvider>
+    </ActionProvider>
+  );
+}

examples/vite-renderers/src/solid/catalog.ts

@@ -0,0 +1,5 @@
+import { schema } from "@json-render/solid/schema";
+import { catalogDef } from "../shared/catalog-def";
+
+export const catalog = schema.createCatalog(catalogDef);
+export type AppCatalog = typeof catalog;

examples/vite-renderers/src/solid/mount.tsx

@@ -0,0 +1,17 @@
+import { render } from "solid-js/web";
+import type { Spec } from "@json-render/core";
+import { App } from "./App";
+
+let dispose: (() => void) | null = null;
+
+export function mount(container: HTMLElement, renderer: string, spec: Spec) {
+  dispose = render(
+    () => <App initialRenderer={renderer} spec={spec} />,
+    container,
+  );
+}
+
+export function unmount() {
+  dispose?.();
+  dispose = null;
+}

examples/vite-renderers/src/solid/registry.tsx

@@ -0,0 +1,194 @@
+import type { Components } from "@json-render/solid";
+import type { AppCatalog } from "./catalog";
+
+export const components: Components<AppCatalog> = {
+  Stack: (renderProps) => (
+    <div
+      class={[
+        "json-render-stack",
+        renderProps.props.direction === "horizontal" &&
+          "json-render-stack--horizontal",
+        renderProps.props.align &&
+          `json-render-stack--align-${renderProps.props.align}`,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{
+        gap: renderProps.props.gap ? `${renderProps.props.gap}px` : undefined,
+        padding: renderProps.props.padding
+          ? `${renderProps.props.padding}px`
+          : undefined,
+      }}
+    >
+      {renderProps.children}
+    </div>
+  ),
+
+  Card: (renderProps) => (
+    <div class="json-render-card">
+      {renderProps.props.title && (
+        <div class="json-render-card-title-wrap">
+          <h2 class="json-render-card-title">{renderProps.props.title}</h2>
+        </div>
+      )}
+      {renderProps.props.subtitle && (
+        <p class="json-render-card-subtitle">{renderProps.props.subtitle}</p>
+      )}
+      {renderProps.children}
+    </div>
+  ),
+
+  Text: (renderProps) => (
+    <span
+      class={[
+        "json-render-text",
+        renderProps.props.size !== "md" &&
+          renderProps.props.size &&
+          `json-render-text--${renderProps.props.size}`,
+        renderProps.props.weight !== "normal" &&
+          renderProps.props.weight &&
+          `json-render-text--${renderProps.props.weight}`,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={renderProps.props.color ? { color: renderProps.props.color } : {}}
+    >
+      {String(renderProps.props.content ?? "")}
+    </span>
+  ),
+
+  Button: (renderProps) => (
+    <button
+      disabled={renderProps.props.disabled}
+      onClick={() => renderProps.emit("press")}
+      class={[
+        "json-render-button",
+        renderProps.props.variant &&
+          `json-render-button--${renderProps.props.variant}`,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      {renderProps.props.label}
+    </button>
+  ),
+
+  Badge: (renderProps) => (
+    <span
+      class="json-render-badge"
+      style={
+        renderProps.props.color
+          ? {
+              "background-color": `${renderProps.props.color}20`,
+              color: renderProps.props.color,
+              "border-color": `${renderProps.props.color}40`,
+            }
+          : {}
+      }
+    >
+      {renderProps.props.label}
+    </span>
+  ),
+
+  ListItem: (renderProps) => (
+    <div
+      onClick={() => renderProps.emit("press")}
+      class={[
+        "json-render-list-item",
+        renderProps.props.completed && "json-render-list-item--done",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <div
+        class={[
+          "json-render-list-item-check",
+          renderProps.props.completed && "json-render-list-item-check--done",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {renderProps.props.completed ? "✓" : ""}
+      </div>
+      <span
+        class={[
+          "json-render-list-item-text",
+          renderProps.props.completed && "json-render-list-item-text--done",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {renderProps.props.title}
+      </span>
+    </div>
+  ),
+
+  RendererBadge: (renderProps) => (
+    <span class="json-render-renderer-badge">
+      <span class="json-render-renderer-dot" />
+      {renderProps.props.renderer === "vue"
+        ? "Rendered with Vue"
+        : renderProps.props.renderer === "react"
+          ? "Rendered with React"
+          : renderProps.props.renderer === "svelte"
+            ? "Rendered with Svelte"
+            : "Rendered with Solid"}
+    </span>
+  ),
+
+  RendererTabs: (renderProps) => (
+    <div class="json-render-renderer-tabs-wrapper">
+      <span class="json-render-renderer-tabs-label">Render</span>
+      <div class="json-render-renderer-tabs">
+        <button
+          onClick={() => renderProps.emit("pressVue")}
+          class={[
+            "json-render-renderer-tab",
+            renderProps.props.renderer === "vue" &&
+              "json-render-renderer-tab--active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          Vue
+        </button>
+        <button
+          onClick={() => renderProps.emit("pressReact")}
+          class={[
+            "json-render-renderer-tab",
+            renderProps.props.renderer === "react" &&
+              "json-render-renderer-tab--active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          React
+        </button>
+        <button
+          onClick={() => renderProps.emit("pressSvelte")}
+          class={[
+            "json-render-renderer-tab",
+            renderProps.props.renderer === "svelte" &&
+              "json-render-renderer-tab--active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          Svelte
+        </button>
+        <button
+          onClick={() => renderProps.emit("pressSolid")}
+          class={[
+            "json-render-renderer-tab",
+            renderProps.props.renderer === "solid" &&
+              "json-render-renderer-tab--active",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+        >
+          Solid
+        </button>
+      </div>
+    </div>
+  ),
+};

examples/vite-renderers/src/spec.ts

@@ -10,7 +10,7 @@ export const demoSpec: Spec = {
       {
         id: 2,
         title:
-          "Try @json-render/vue, @json-render/react, and @json-render/svelte",
+          "Try @json-render/vue, @json-render/react, @json-render/svelte, and @json-render/solid",
         completed: false,
       },
       { id: 3, title: "Build something awesome", completed: false },
@@ -49,6 +49,7 @@ export const demoSpec: Spec = {
         pressVue: { action: "switchToVue" },
         pressReact: { action: "switchToReact" },
         pressSvelte: { action: "switchToSvelte" },
+        pressSolid: { action: "switchToSolid" },
       },
     },
 

examples/vite-renderers/src/svelte/components/RendererBadge.svelte

@@ -12,5 +12,7 @@
     ? "Rendered with Vue"
     : props.renderer === "react"
       ? "Rendered with React"
-      : "Rendered with Svelte"}
+      : props.renderer === "svelte"
+        ? "Rendered with Svelte"
+        : "Rendered with Solid"}
 </span>

examples/vite-renderers/src/svelte/components/RendererTabs.svelte

@@ -42,5 +42,16 @@
         .join(" ")}>
       Svelte
     </button>
+    <button
+      type="button"
+      onclick={() => emit("pressSolid")}
+      class={[
+        "json-render-renderer-tab",
+        props.renderer === "solid" && "json-render-renderer-tab--active",
+      ]
+        .filter(Boolean)
+        .join(" ")}>
+      Solid
+    </button>
   </div>
 </div>

examples/vite-renderers/src/vue/registry.ts

@@ -132,7 +132,9 @@ export const components: Components<AppCatalog> = {
         ? "Rendered with Vue"
         : props.renderer === "react"
           ? "Rendered with React"
-          : "Rendered with Svelte",
+          : props.renderer === "svelte"
+            ? "Rendered with Svelte"
+            : "Rendered with Solid",
     ]),
 
   RendererTabs: ({ props, emit }) =>
@@ -178,6 +180,19 @@ export const components: Components<AppCatalog> = {
           },
           "Svelte",
         ),
+        h(
+          "button",
+          {
+            onClick: () => emit("pressSolid"),
+            class: [
+              "json-render-renderer-tab",
+              props.renderer === "solid" && "json-render-renderer-tab--active",
+            ]
+              .filter(Boolean)
+              .join(" "),
+          },
+          "Solid",
+        ),
       ]),
     ]),
 };

examples/vite-renderers/vite.config.ts

@@ -2,7 +2,13 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import react from "@vitejs/plugin-react";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
+import solid from "vite-plugin-solid";
 
 export default defineConfig({
-  plugins: [svelte(), vue(), react({ include: /\.tsx$/ })],
+  plugins: [
+    svelte(),
+    vue(),
+    react({ include: /src\/react\/.*\.tsx$/ }),
+    solid({ include: [/src\/solid\/.*\.tsx$/, /packages\/solid\/.*\.tsx$/] }),
+  ],
 });

examples/vue/CHANGELOG.md

@@ -1,5 +1,13 @@
 # example-vue
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/vue@0.12.1
+
 ## 0.1.3
 
 ### Patch Changes

examples/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "example-vue",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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)",

package.json

@@ -32,6 +32,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
+    "@solidjs/testing-library": "^0.8.10",
     "@testing-library/svelte": "^5.2.0",
     "@types/react": "^19.2.3",
     "husky": "^9.1.7",
@@ -40,9 +41,11 @@
     "prettier": "^3.7.4",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "solid-js": "^1.9.11",
     "svelte": "^5.0.0",
     "turbo": "^2.7.4",
     "typescript": "5.9.2",
+    "vite-plugin-solid": "^2.11.10",
     "vitest": "^4.0.17"
   },
   "packageManager": "pnpm@10.29.3",
@@ -51,5 +54,12 @@
   },
   "lint-staged": {
     "*.{ts,tsx}": "prettier --write"
-  }
+  },
+  "workspaces": [
+    "apps/*",
+    "examples/*",
+    "examples/stripe-app/*",
+    "packages/*",
+    "tests/*"
+  ]
 }

packages/codegen/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/codegen
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/codegen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/codegen",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "Utilities for generating code from json-render UI trees",
   "keywords": [

packages/core/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @json-render/core
 
+## 0.12.1
+
+### Patch Changes
+
+- 54a1ecf: Rename generation modes and fix MCP React duplicate module error.
+
+  ### Changed:
+  - **`@json-render/core`** — Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
+
+  ### Fixed:
+  - **`@json-render/mcp`** — Resolved React duplicate module error (`useRef` returning null) by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
+
+  ### Other:
+  - Updated `homepage` URLs across all packages to point to `https://json-render.dev`.
+  - Reorganized skills directory structure for cleaner naming.
+  - Added skills documentation page to the web app.
+
 ## 0.12.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/core",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "JSON becomes real things. Define your catalog, register your components, let AI generate.",
   "keywords": [

packages/image/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/image
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/image",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "Image renderer for @json-render/core. JSON becomes SVG and PNG images via Satori.",
   "keywords": [

packages/jotai/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/jotai
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/jotai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/jotai",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "Jotai adapter for json-render StateStore",
   "keywords": [

packages/mcp/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @json-render/mcp
 
+## 0.12.1
+
+### Patch Changes
+
+- 54a1ecf: Rename generation modes and fix MCP React duplicate module error.
+
+  ### Changed:
+  - **`@json-render/core`** — Renamed generation modes from `"generate"` / `"chat"` to `"standalone"` / `"inline"`. The old names still work but emit a deprecation warning.
+
+  ### Fixed:
+  - **`@json-render/mcp`** — Resolved React duplicate module error (`useRef` returning null) by adding `resolve.dedupe` Vite configuration. Added `./build-app-html` export entry point.
+
+  ### Other:
+  - Updated `homepage` URLs across all packages to point to `https://json-render.dev`.
+  - Reorganized skills directory structure for cleaner naming.
+  - Added skills documentation page to the web app.
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Minor Changes

packages/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/mcp",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "MCP Apps integration for @json-render/core. Serve json-render UIs as interactive MCP Apps in Claude, ChatGPT, Cursor, and VS Code.",
   "keywords": [

packages/react-email/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/react-email
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Minor Changes

packages/react-email/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-email",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "React Email renderer for @json-render/core. JSON becomes HTML emails.",
   "keywords": [

packages/react-native/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/react-native
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-native",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "React Native renderer for @json-render/core. JSON becomes React Native components.",
   "keywords": [

packages/react-pdf/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/react-pdf
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/react-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react-pdf",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "React PDF renderer for @json-render/core. JSON becomes PDF documents.",
   "keywords": [

packages/react-state/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @internal/react-state
 
+## 0.8.6
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.8.5
 
 ### Patch Changes

packages/react-state/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internal/react-state",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "private": true,
   "license": "Apache-2.0",
   "description": "Shared React state context for json-render renderer packages",

packages/react/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/react
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "React renderer for @json-render/core. JSON becomes React components.",
   "keywords": [

packages/redux/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/redux
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/redux",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "Redux adapter for json-render StateStore",
   "keywords": [

packages/remotion/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @json-render/remotion
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes

packages/remotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/remotion",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "Apache-2.0",
   "description": "Remotion renderer for @json-render/core. JSON becomes video compositions.",
   "keywords": [

packages/shadcn/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @json-render/shadcn
 
+## 0.12.1
+
+### Patch Changes
+
+- Updated dependencies [54a1ecf]
+  - @json-render/core@0.12.1
+  - @json-render/react@0.12.1
+
 ## 0.12.0
 
 ### Patch Changes