项目介绍

json-render 是一个 Generative UI 框架，目标是把自然语言提示转成可用的界面，同时不牺牲可靠性。它不让模型随意生成标记，而是先由开发者定义一份目录，列出允许使用的组件、属性 schema 和动作；模型只能输出符合这份目录的 JSON，渲染器再把 spec 渲染成界面 README。

同一套目录模式覆盖多种渲染目标：React、Vue、Svelte、Solid、React Native、Remotion 视频、React PDF、React Email、Chat SDK 卡片（Slack/Teams/Discord）、Ink 终端、Satori 图片、Three.js 场景，以及 Next.js 和 TanStack Start 全应用 README。@json-render/shadcn 提供 36 个现成的 shadcn/ui 组件，另有 Svelte 版本。

除渲染外，框架还包括 SpecStream 流式编译（模型边输出边渲染部分 spec）、根据目录生成系统提示词、条件可见性、动态属性、动作（含内置 setState）和状态监听 README。devtools 适配器为 React、Vue、Svelte、Solid 提供 spec 树、状态编辑、动作/流日志、目录浏览和 DOM 选取。

它适合希望引入 AI 生成或个性化界面、又要控制哪些组件和动作能出现的 Web 与全栈团队。

快速使用

准备好 Node 和 npm 后，安装核心包和一个渲染器。以 React 为例：

npm install @json-render/core @json-render/react

如需配合预置的 shadcn/ui 组件，再安装 @json-render/shadcn；其他渲染器的安装命令见 README 的包列表 README。

1. 用 defineCatalog 和来自 @json-render/react/schema 的 schema 定义目录，为组件写 Zod 属性 schema，并声明可用动作。
2. 用 defineRegistry 实现同名组件，得到 { registry }。
3. 用 <Renderer spec={spec} registry={registry} /> 渲染 AI 生成的 spec README。

spec 是一个扁平对象：root 指向根元素，elements 以 id 为键，每个元素包含 type、props 和 children。若要在本地查看文档、Playground 和示例，克隆仓库后执行 pnpm install，再执行 pnpm dev，按 README 给出的地址打开文档/Playground 和仪表盘等示例 README。

使用约束

组件目录是可靠性和权限边界：目录外的组件与动作不应到达渲染器，因此必须保持目录和 registry 一致，并为每个目录项提供实现。schema 写得准不准，直接决定输出是否可预测。

各项能力依赖于所选渲染器。流式、devtools 和全应用支持并非所有包都有：devtools 需要对应框架的适配包，图片渲染需要 @resvg/resvg-js，Chat SDK 卡片依赖 Chat SDK；Next.js 和 TanStack Start 渲染器额外提供路由、布局与 SSR，而不只是组件渲染。

实验性的 Jev 组合模式需要按指引锁定精确的包版本 README。项目采用 Apache-2.0 许可证 LICENSE。

HotRepo 点评

2026-09-20 和 09-21，json-render 在全部语言日榜上分别新增 585 和 291 Star；2026-11-08 又以新增 202 Star 在 TypeScript 日榜排到第 11 名，当时总 Star 为 19,411。这说明生成式界面方向确实有较强关注，但现有记录较稀疏，不足以判断热度是否持续。

更实用的信号来自实践讨论：一位早期 HN 评论者称，团队用类似的 JSON 模板界面让非开发者改模板，前约半年效果不错，直到有人把条件嵌套到八层，整个模板变得难以维护，最后专门写了一个 linter HN 讨论。json-render 的目录约束、条件可见性和动态属性解决了权限与可靠性问题，但深层嵌套 spec 的可维护性仍需团队提前考虑；随附的 devtools 和目录派生提示词是值得在真实项目中验证的缓解手段。