codegen by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill codegen用于从 json-render UI 树生成代码的框架无关工具。使用这些工具可以为 Next.js、Remix 或其他框架构建自定义代码导出器。
npm install @json-render/codegen
import {
traverseSpec,
collectUsedComponents,
collectStatePaths,
collectActions,
} from "@json-render/codegen";
// 深度优先遍历规范
traverseSpec(spec, (element, key, depth, parent) => {
console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});
// 获取所有使用的组件类型
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }
// 获取所有引用的状态路径
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }
// 获取所有操作名称
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }
import {
serializePropValue,
serializeProps,
escapeString,
type SerializeOptions,
} from "@json-render/codegen";
// 序列化单个值
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }
serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }
// 为 JSX 序列化属性
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'
// 为代码转义字符串
escapeString('hello "world"');
// 'hello \"world\"'
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
interface SerializeOptions {
quotes?: "single" | "double";
indent?: number;
}
import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";
const myGenerator: CodeGenerator = {
generate(spec) {
return [
{ path: "package.json", content: "..." },
{ path: "app/page.tsx", content: "..." },
];
},
};
import {
collectUsedComponents,
collectStatePaths,
traverseSpec,
serializeProps,
type GeneratedFile,
} from "@json-render/codegen";
import type { Spec } from "@json-render/core";
export function generateNextJSProject(spec: Spec): GeneratedFile[] {
const files: GeneratedFile[] = [];
const components = collectUsedComponents(spec);
// 生成 package.json、组件文件、主页面...
return files;
}
每周安装量
211
代码仓库
GitHub 星标数
13.3K
首次出现
2026年3月7日
安全审计
安装于
codex209
cursor207
gemini-cli206
amp206
cline206
github-copilot206
Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.
npm install @json-render/codegen
import {
traverseSpec,
collectUsedComponents,
collectStatePaths,
collectActions,
} from "@json-render/codegen";
// Walk the spec depth-first
traverseSpec(spec, (element, key, depth, parent) => {
console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});
// Get all component types used
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }
// Get all state paths referenced
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }
// Get all action names
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }
import {
serializePropValue,
serializeProps,
escapeString,
type SerializeOptions,
} from "@json-render/codegen";
// Serialize a single value
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }
serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }
// Serialize props for JSX
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'
// Escape strings for code
escapeString('hello "world"');
// 'hello \"world\"'
interface SerializeOptions {
quotes?: "single" | "double";
indent?: number;
}
import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";
const myGenerator: CodeGenerator = {
generate(spec) {
return [
{ path: "package.json", content: "..." },
{ path: "app/page.tsx", content: "..." },
];
},
};
import {
collectUsedComponents,
collectStatePaths,
traverseSpec,
serializeProps,
type GeneratedFile,
} from "@json-render/codegen";
import type { Spec } from "@json-render/core";
export function generateNextJSProject(spec: Spec): GeneratedFile[] {
const files: GeneratedFile[] = [];
const components = collectUsedComponents(spec);
// Generate package.json, component files, main page...
return files;
}
Weekly Installs
211
Repository
GitHub Stars
13.3K
First Seen
Mar 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex209
cursor207
gemini-cli206
amp206
cline206
github-copilot206
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
109,600 周安装