README

json-render

The Generative UI framework.

Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.


  
  
  
  


bash
 for React
npm install @json-render/core @json-render/react
 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


 Why json-render?

json-render is a Generative UI framework: AI generates interfaces from natural language prompts, constrained to components you define. You set the guardrails, AI generates within them:

- 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, Solid (web), React Native (mobile) from the same catalog
- Batteries Included - 36 pre-built shadcn/ui components ready to use

 Quick Start

 1. Define Your Catalog

typescript
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" },
  },
});


 2. Define Your Components

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

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) = (
      
        {props.title}
        {children}
      
    ),
    Metric: ({ props }) = (
      
        {props.label}
        {for

Top issues

Latest release

New Features

- Chat SDK renderer: Added @json-render/chat to render specs as Chat SDK cards, so one catalog posts natively on Slack, Teams, and the other Chat SDK platforms. streamCard streams a card into a thread and edits it as elements arrive, and toCard validates specs against per-component schemas and optional platform limits. State expressions, visible, and repeat resolve against spec.state (451)
- Chat SDK example: Added a playground that previews generated messages as Slack renders them, with a Teams Adaptive Card view and a copy button for Block Kit Builder (451)

 Contributors

- @R