What problem it solves

AI-generated interfaces can produce output that is difficult to control or render reliably. The framework addresses this by defining component catalogs, schemas, and actions that constrain generation while supporting progressive rendering across multiple platforms.

Key features

• Guardrailed component catalogs — Define the components and actions available to a model, then generate interfaces within those boundaries. Catalogs also provide the schemas and descriptions used to construct AI prompts.

  Source: README

• Progressive spec streaming — Process model output as chunks arrive and update the interface with partial results. A streaming compiler exposes the current result, new patches, and the final compiled spec.

  Source: README

• Cross-platform rendering — Use the same catalog with renderers for React, Vue, Svelte, Solid, and React Native. Additional packages cover video, PDF documents, email, terminal interfaces, chat cards, images, 3D scenes, and full web applications.

  Source: README

• State-driven interfaces — Connect generated interfaces to a state model through conditional visibility, dynamic props, actions, and state watchers. Registered functions can also be invoked through computed expressions.

  Source: README

• Developer tooling — Inspect generated specifications with a drop-in panel that includes a spec tree, state editor, action log, stream log, catalog browser, and DOM picker. Adapters are available for React, Vue, Svelte, and Solid.

  Source: README

Quick start

Copied verbatim from the project's README.

# for React
npm install @json-render/core @json-render/react
# for React with pre-built shadcn/ui components
npm install @json-render/shadcn
# or for React Native
npm install @json-render/core @json-render/react-native
# or for video
npm install @json-render/core @json-render/remotion
# or for PDF documents
npm install @json-render/core @json-render/react-pdf
# or for HTML email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# or for Vue
npm install @json-render/core @json-render/vue
# or for Svelte
npm install @json-render/core @json-render/svelte
# or for SolidJS
npm install @json-render/core @json-render/solid
# or for terminal UIs
npm install @json-render/core @json-render/ink ink react
# or for full Next.js apps (routes, layouts, SSR, metadata)
npm install @json-render/core @json-render/react @json-render/next
# or for 3D scenes (and gaussian splatting via the GaussianSplat component)
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three

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

const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      description: "A card container",
    },
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        format: z.enum(["currency", "percent", "number"]).nullable(),
      }),
      description: "Display a metric value",
    },
    Button: {
      props: z.object({
        label: z.string(),
        action: z.string(),
      }),
      description: "Clickable button",
    },
  },
  actions: {
    export_report: { description: "Export dashboard to PDF" },
    refresh_data: { description: "Refresh all metrics" },
  },
});

import { defineRegistry, Renderer } from "@json-render/react";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) => (
      <div className="card">
        <h3>{props.title}</h3>
        {children}
      </div>
    ),
    Metric: ({ props }) => (
      <div className="metric">
        <span>{props.label}</span>
        <span>{format(props.value, props.format)}</span>
      </div>
    ),
    Button: ({ props, emit }) => (
      <button onClick={() => emit("press")}>{props.label}</button>
    ),
  },
});

Who it may suit

This may suit developers building AI-generated interfaces in React, Vue, Svelte, Solid, or React Native. It may also suit teams that need generated output constrained by application-defined components, actions, and schemas.

Topics to discuss

• Which component catalog and schema patterns work best for reliable generated interfaces?

• How should teams handle state, actions, and computed values in generated specifications?

• Which renderer and output targets should receive additional examples and tooling support?

Written by ReadmeX AI from the project's README, source and public GitHub data; it may contain mistakes.

Read the original README https://github.com/vercel-labs/json-render#readme

ReadmeX opened this community for a trending project; it is not run by the project. Maintainers can claim it from the community page.