🛍️ 更多精选好物 ›
📊 公开数据一览
| 📦 榜单安装量 | 39 |
| ⭐ GitHub Stars | 15,834（fork 857） |
| 🗓️ 最近推送 | 2026-07-08 |
| 🌱 项目创建 | 2026-01-14 |
| 💻 语言 / License | TypeScript · Apache-2.0 |
| 🐛 开放Issue | 100 |
📝 工具简介
Generative UI框架，用来生成渲染界面。
📖 怎么用
这是个生成式 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`。然后定义组件目录：用 `defineCatalog(schema, { components: { Card: { props: z.object({...}) } } })` 配置好组件和校验规则。接着创建注册表 `defineRegistry(catalog, { components: { Card: ... } })`，最后在组件里用 `<Renderer spec={spec} registry={registry} />` 渲染，spec 是扁平格式（root key + elements map）。
📋 迷你测评
Generative UI框架，用来生成渲染界面。亮点是直接产出界面而非单张图。适合快速搭UI原型，具体效果看框架配置。
📄 README 要点
这是个生成式UI框架，叫json render。它能从自然语言提示生成动态、个性化的界面，同时保证输出可靠。核心思路是AI只能在你自己定义的组件范围内生成，这样既灵活又安全。输出是符合你schema的JSON格式，还能流式渲染，模型边响应边显示。支持React、Vue、Svelte、Solid这些web框架，还有React Native移动端。内置36个shadcn/ui组件可以直接用。上手很快，定义好组件目录、写好组件、然后渲染AI生成的spec就行。适合想用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）
交流使用体验、避坑建议；违规内容将被删除