Codegen
Traverse json-render UI specs and serialize props when building custom code exporters for Next.js, Remix, or other frameworks.
Overview
Codegen is an agent skill for the Build phase that explains how to generate framework code from json-render UI specs using @json-render/codegen traversal and serialization APIs.
Install
npx skills add https://github.com/vercel-labs/json-render --skill codegenWhat is this skill?
- traverseSpec depth-first walk with parent context for custom exporters
- collectUsedComponents, collectStatePaths, and collectActions helpers over a spec
- serializePropValue and serializeProps with $state binding awareness
- Framework-agnostic @json-render/codegen package installable via npm
- Documented escapeString and SerializeOptions for safe emitted source
Adoption & trust: 802 installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a json-render UI spec but no reliable way to walk the tree and emit valid component code for your stack.
Who is it for?
Solo frontend builders standardizing AI-generated UI specs into Next.js, Remix, or similar code paths.
Skip if: Teams not using json-render who only need a one-off React component without spec-driven codegen.
When should I use this skill?
User works on generating code from UI specs, custom json-render exporters, traversing specs, or serializing props for @json-render/codegen.
What do I get? / Deliverables
You can implement or fix custom exporters that output framework source with correctly serialized props, state paths, and actions.
- Custom exporter implementation guidance
- Serialized prop and component usage maps from specs
Recommended Skills
Journey fit
How it compares
Library-focused codegen helpers for json-render—not a full visual builder or hosted deployment pipeline.
Common Questions / FAQ
Who is codegen for?
Indie developers and agent builders using Vercel json-render who need programmatic spec traversal and prop serialization for custom exporters.
When should I use codegen?
During Build frontend work when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
Is codegen safe to install?
It is documentation for an npm library without inherent shell requirements; review the Security Audits panel on this page before adding third-party packages to your app.
SKILL.md
READMESKILL.md - Codegen
# @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 ```bash npm install @json-render/codegen ``` ## Tree Traversal ```typescript 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 ```typescript 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 ```typescript interface SerializeOptions { quotes?: "single" | "double"; indent?: number; } ``` ## Types ```typescript 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 ```typescript 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; } ```