生成式 UI 框架。

根据提示词（prompt）生成动态、个性化的用户界面，同时不牺牲可靠性。借助预定义的组件与动作，确保输出既安全又可预期。

# 用于 React
npm install @json-render/core @json-render/react
# 用于 React，并附带预构建的 shadcn/ui 组件
npm install @json-render/shadcn
# 或用于 React Native
npm install @json-render/core @json-render/react-native
# 或用于视频
npm install @json-render/core @json-render/remotion
# 或用于 PDF 文档
npm install @json-render/core @json-render/react-pdf
# 或用于 HTML 邮件
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# 或用于 Vue
npm install @json-render/core @json-render/vue
# 或用于 Svelte
npm install @json-render/core @json-render/svelte
# 或用于 SolidJS
npm install @json-render/core @json-render/solid
# 或用于终端 UI
npm install @json-render/core @json-render/ink ink react
# 或用于完整的 Next.js 应用（路由、布局、SSR、元数据）
npm install @json-render/core @json-render/react @json-render/next
# 或用于 3D 场景（并通过 GaussianSplat 组件支持高斯泼溅）
npm install @json-render/core @json-render/react-three-fiber @react-three/fiber @react-three/drei three

为什么选择 json-render？

json-render 是一个生成式 UI框架：AI 根据自然语言提示词生成界面，但被约束在你所定义的组件范围内。你设置好护栏，AI 在其中进行生成：

• 受护栏保护 —— AI 只能使用你目录（catalog）中提供的组件
• 可预期 —— JSON 输出始终匹配你的 schema
• 快速 —— 模型生成响应时即可边流式传输边渐进渲染
• 跨平台 —— 同一份目录可同时用于 React、Vue、Svelte、Solid（Web）以及 React Native（移动端）
• 开箱即用 —— 内置 36 个预构建的 shadcn/ui 组件，可直接使用

快速入门

1. 定义你的组件目录（Catalog）

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. 定义你的组件实现

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

3. 渲染 AI 生成的规格（Spec）

function Dashboard({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

就这样。 AI 生成 JSON，你只需安全地将其渲染出来。

包（Packages）

渲染器（Renderers）

React（UI）

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

// 扁平化 spec 格式（root 键 + elements 映射）
const spec = {
  root: "card-1",
  elements: {
    "card-1": {
      type: "Card",
      props: { title: "Hello" },
      children: ["button-1"],
    },
    "button-1": {
      type: "Button",
      props: { label: "Click me" },
      children: [],
    },
  },
};

// defineRegistry 用于创建类型安全的组件注册表
const { registry } = defineRegistry(catalog, { components });
<Renderer spec={spec} registry={registry} />;

Vue（UI）

import { h } from "vue";
import { defineRegistry, Renderer } from "@json-render/vue";
import { schema } from "@json-render/vue/schema";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) =>
      h("div", { class: "card" }, [h("h3", null, props.title), children]),
    Button: ({ props, emit }) =>
      h("button", { onClick: () => emit("press") }, props.label),
  },
});

// 在你的 Vue 组件模板中：
// <Renderer :spec="spec" :registry="registry" />

Svelte（UI）

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

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) => /* Svelte 5 snippet */,
    Button: ({ props, emit }) => /* Svelte 5 snippet */,
  },
});

// 在你的 Svelte 组件中：
// <Renderer spec={spec} registry={registry} />

Solid（UI）

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）

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";
import { shadcnComponents } from "@json-render/shadcn";

// 从 36 个标准定义中挑选组件
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,
    Heading: shadcnComponentDefinitions.Heading,
    Button: shadcnComponentDefinitions.Button,
  },
  actions: {},
});

// 使用对应的实现
const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Stack: shadcnComponents.Stack,
    Heading: shadcnComponents.Heading,
    Button: shadcnComponents.Button,
  },
});

<Renderer spec={spec} registry={registry} />;