🛍️ 更多精选好物 ›
📊 公开数据一览
| 📦 榜单安装量 | 959 |
| ⭐ GitHub Stars | 15,814（fork 853） |
| 🗓️ 最近推送 | 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 组件就加 `@json-render/shadcn`，React Native 用 `@json-render/core @json-render/react-native`。然后定义 catalog，用 `defineCatalog(schema, { components: { Card: { props: z.object({...}) } } })` 声明组件和校验规则。接着 `defineRegistry(catalog, { components: { Card: ... } })` 创建 registry，最后把 spec 传给 `<Renderer spec={spec} registry={registry} />` 就能渲染了。spec 用扁平格式，root 指定根元素，elements 里放各个组件。
📋 迷你测评
生成式UI框架，用于构建动态交互界面。亮点是直接生成React风格的邮件模板，开发效率高。但简介未提模板数量或兼容性数据。
📄 README 要点
这是一个叫json render的生成式UI框架，能从自然语言提示生成动态、个性化的界面，同时保证输出的可靠性。它通过预定义的组件和操作来确保安全、可预测的输出，AI只能使用你目录里的组件，JSON输出每次都符合你的schema，还能流式渲染。支持React、Vue、Svelte、Solid和React Native等多个平台，内置36个现成的shadcn/ui组件。使用流程很简单：先定义你的组件目录，再定义组件，最后渲染AI生成的规格就行。适合那些想用AI生成界面但又担心不可控的开发者，既能享受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）
交流使用体验、避坑建议；违规内容将被删除