json-render

模型吐 JSON，页面直接长出来

开源 unknown 开发框架

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 18725

维护状态活跃

是否开源是

定价模式 unknown

项目预览

项目数据

分类开发框架

开发团队vercel-labs

所属国家

官网地址https://json-render.dev

GitHubhttps://github.com/vercel-labs/json-render

定价模式unknown

价格说明定价信息待确认

访问状态

是否开源是

开源协议Apache-2.0

主要语言TypeScript

技术栈/模型

GitHub 星标★ 18725

30天Star增速

HF 下载量

上线时间2026-01-14 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-20

浏览次数0

项目介绍

json-render 是一个生成式 UI 框架，用 TypeScript 编写。它要解决的是让大模型或后端服务直接输出结构化 JSON，就能在客户端渲染出可交互界面，而不必为每种页面手写组件和布局代码。核心能力包括：用 JSON 描述界面结构与组件树，框架负责解析并映射到真实 UI 组件；支持数据绑定和事件处理，让生成的界面不只是静态展示；面向 AI 场景设计，可作为 LLM 工具调用或流式输出的渲染层，把模型返回的 JSON 即时转成页面。它适合需要动态表单、AI 助手面板、低代码配置页等场景，减少前后端约定 UI 协议的重复工作，让界面生成和业务逻辑解耦。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 10 分钟部署方式：库/依赖 5 步

环境要求

Node.js 环境与 npm 包管理器（README 中安装命令基于 npm）
一个已有的 React 项目（使用 @json-render/react 时需要）
按目标平台选择对应渲染包：React / React Native / Remotion(视频) / re(PDF)

安装与启动步骤

1确认 Node 环境

README 只给出 npm 安装命令，先确保本机 Node.js 与 npm 可用，版本无特殊要求说明。
```
node -v
npm -v
```
2进入你的项目

该框架是库而非独立服务，需在你自己的前端工程目录下安装依赖。
```
cd /your/project
```
3安装 React 版依赖

安装核心包与 React 渲染包，这是 README 给出的默认 React 用法。
```
npm install @json-render/core @json-render/react
```
4可选装 shadcn 组件

若想直接使用预置的 shadcn/ui 组件集，追加安装该包，免去自定义组件映射。
```
npm install @json-render/shadcn
```

5按平台换渲染包

非 Web React 场景，把 react 包换成 React Native、Remotion 或 re(PDF) 包，核心包不变。

npm install @json-render/core @json-render/react-native
npm install @json-render/core @json-render/remotion
npm install @json-render/core @json-render/re

如何确认成功

安装完成后用 npm ls @json-render/core 确认依赖已落地，并在项目中能从 node_modules 正常导入，构建无报错。

常见问题

Q：应该安装哪个包？

A：README 给出四种组合：React 用 core+react，另可加 shadcn 预置组件；React Native 用 core+react-native；视频用 core+remotion；PDF 用 core+re。核心包 @json-render/core 均需安装。

Q：是否必须用 shadcn/ui？

A：不是。@json-render/shadcn 只是可选的预置组件集，不安装则需自行提供组件映射。

Q：能直接当服务部署吗？

A：不能。它是 TypeScript 编写的生成式 UI 框架，以 npm 库形式集成进你的前端项目，由你的应用负责运行和部署。

Q：许可证是什么？

A：README 徽章显示为 Apache-2.0，可商用，使用时请遵守许可证条款。

注意事项

README 只提供了安装命令，未给出 Quick Start 的具体代码与启动方式，请以官网 json-render.dev 文档为准
本项目为 Vercel Labs 产品，接口可能随版本变动
核心包与平台渲染包要配套安装，只装 @json-render/core 无法直接渲染界面

核心亮点

JSON 到 UI 的映射清晰，适合作为 LLM 结构化输出的渲染层
TypeScript 编写，类型定义完整，接入前端工程成本低
支持数据绑定与事件处理，生成界面可交互而非纯静态

不足之处

生态和周边工具相对新，复杂布局与样式定制能力待验证
文档与最佳实践仍在完善，深度使用需读源码

适用场景

AI 助手根据模型返回 JSON 动态生成操作面板
低代码平台用 JSON 配置快速渲染业务表单
后端驱动 UI，按权限和配置下发界面结构

替代项目

A2UI、CopilotKit

上一篇：comark

下一篇：tambo