---
name: codegen
description: Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…
---

# codegen

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…

# codegenby vercel
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for…

`npx skills add https://github.com/vercel-labs/json-render --skill codegen`Download ZIPGitHub

## @json-render/codegen

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.

## Installation

```
`npm install @json-render/codegen
`
```

## Tree Traversal

```
`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" }
`
```

## Serialization

```
`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\"'
`
```

### SerializeOptions

```
`interface SerializeOptions {
quotes?: "single" | "double";
indent?: number;
}
`
```

## Types

```
`import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";

const myGenerator: CodeGenerator = {
generate(spec) {
return [
{ path: "package.json", content: "..." },
{ path: "app/page.tsx", content: "..." },
];
},
};
`
```

## Building a Custom Generator

```
`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;
}
`
```

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel-labs/json-render/tree/HEAD/skills/codegen
**Author**: vercel
**Discovered via**: mcpservers.org