Solid

This is the SolidJS renderer for the json-render ecosystem. You'd reach for it when you need to turn JSON specs into live Solid component trees with fine-grained reactivity. The setup is straightforward: define a catalog with zod schemas, wire up your components to receive props and emit events, then let the Renderer handle the rest. What's nice is the binding system. Props can reference state paths, templates, or conditions, and components like inputs get reactive two-way binding through useBoundProp. The provider stack handles state, visibility, validation, and actions out of the box. There's even streaming UI support if you're generating interfaces on the fly. It's a solid pick if you're building dynamic UIs from backend-driven schemas in Solid.

skills.sh installs: 1.1K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill solid --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/solid

@json-render/solid renders json-render specs into Solid component trees with fine-grained reactivity.

Quick Start

import { Renderer, JSONUIProvider } from "@json-render/solid";
import type { Spec } from "@json-render/solid";
import { registry } from "./registry";

export function App(props: { spec: Spec | null }) {
  return (
    <JSONUIProvider registry={registry} initialState={{}}>
      <Renderer spec={props.spec} registry={registry} />
    </JSONUIProvider>
  );
}

Create a Catalog

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/solid/schema";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Button: {
      props: z.object({
        label: z.string(),
        variant: z.enum(["primary", "secondary"]).nullable(),
      }),
      description: "Clickable button",
    },
    Card: {
      props: z.object({ title: z.string() }),
      description: "Card container",
    },
  },
  actions: {
    submit: { description: "Submit data" },
  },
});