🛍️ 更多精选好物 ›
📊 公开数据一览
| 📦 榜单安装量 | 3.0K |
| ⭐ GitHub Stars | 15,825（fork 856） |
| 🗓️ 最近推送 | 2026-07-08 |
| 🌱 项目创建 | 2026-01-14 |
| 💻 语言 / License | TypeScript · Apache-2.0 |
| 🐛 开放Issue | 100 |
📝 工具简介
生成式UI框架，用代码描述直接产出界面组件。
📖 怎么用
安装分平台，React 用 `npm install @json-render/core @json-render/react`，要预置 shadcn/ui 组件就加装 `npm install @json-render/shadcn`，React Native 则用 `npm install @json-render/core @json-render/react-native`。初始化先 `import { defineCatalog } from "@json-render/core"` 定义组件目录，再用 `defineRegistry` 注册。开始用时，把 AI 生成的 spec 传给 `<Renderer spec={spec} registry={registry} />` 就能渲染，spec 用 root + elements 的扁平格式。
📋 迷你测评
生成式UI框架，用代码描述直接产出界面组件。亮点是描述即生成，省去手动编写模板。
📄 README 要点
这是一个生成式UI框架，核心思路是让AI根据自然语言提示生成界面，但限定在你预先定义的组件范围内，保证输出安全可控。它输出的是符合你schema的JSON格式，可以流式渲染，支持React、Vue、Svelte、Solid和React Native等多平台。内置了36个现成的shadcn/ui组件，开箱即用。使用起来很简单，先定义组件目录，再定义具体组件，最后渲染AI生成的JSON就行。适合想要用AI快速生成动态个性化界面，但又不想牺牲可靠性和可控性的场景。
查看英文原文
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）
交流使用体验、避坑建议；违规内容将被删除