🛍️ 更多精选好物 ›
📊 公开数据一览
| 📦 榜单安装量 | 770 |
| ⭐ GitHub Stars | 15,816（fork 853） |
| 🗓️ 最近推送 | 2026-07-08 |
| 🌱 项目创建 | 2026-01-14 |
| 💻 语言 / License | TypeScript · Apache-2.0 |
| 🐛 开放Issue | 100 |
📝 工具简介
生成式UI框架，帮你快速构建AI驱动的界面组件。
📖 怎么用
先装包，React 项目跑 `npm install @json-render/core @json-render/react`，要预置 shadcn/ui 组件就装 `@json-render/shadcn`，React Native 用 `npm install @json-render/core @json-render/react-native`。然后初始化，用 `defineCatalog` 定义组件目录，比如 `Card` 组件配 zod schema 约束 props。接着用 `defineRegistry` 注册组件，最后在组件里用 `<Renderer spec={spec} registry={registry} />` 渲染。spec 是扁平格式，包含 root 和 elements 映射。
📋 迷你测评
生成式UI框架，帮快速构建AI驱动的界面组件。亮点是轻量级状态管理，适合AI交互场景。但简介未提包体积或性能数据。
📄 README 要点
这是个生成式UI框架，叫json render，能让AI从自然语言提示生成动态、个性化的界面，同时不牺牲可靠性。核心思路是AI只能在预定义的组件和动作里生成，你设好护栏，AI在护栏内发挥。输出是符合schema的JSON，每次都能预测。支持流式渲染，模型边响应边出结果。跨平台，React、Vue、Svelte、Solid、React Native都能用同一套组件目录。内置36个shadcn/ui组件，开箱即用。快速上手三步：定义组件目录、定义组件、渲染AI生成的spec。适合想要AI生成UI又怕不可控的场景。
查看英文原文
json render The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output. [安装/使用命令见下方] 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 [安装/使用命令见下方] 2. Define Your Components [安装/使用命令见下方] 3. Render AI Generated Specs [安装/使用命令见下方] That's it. AI generates JSON, you render it safely. 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/solid SolidJS renderer with fine grained reactive contexts @json render/shadcn 36 pre built shadcn/ui components (Radix UI + Tailwind CSS) @json render/shadcn svelte 36 pre built shadcn svelte components (Svelte 5 + Tailwind CSS) @json render/react three fiber React Three Fiber renderer for 3D scenes (20 built in components, including GaussianSplat) @json render/react native React Native renderer with standard mobile components @json render/next Next.js renderer — JSON becomes full apps with routes, layouts, SSR @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/ink Ink terminal renderer with
💬 评论（0）
交流使用体验、避坑建议；违规内容将被删除