Codegen

If you're building code generators on top of json-render UI specs, this gives you the traversal and serialization primitives you need. You get utilities to walk spec trees depth-first, collect all referenced components and state paths, and serialize props into JSX-compatible strings with proper escaping. The serialization handles the annoying bits like knowing when to wrap values in braces versus quotes. It's framework-agnostic, so you can build exporters for Next.js, Remix, or whatever else. The API is straightforward: a handful of focused functions that do one thing each, which is exactly what you want when you're stitching together a code generator.

skills.sh installs: 8.9K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill codegen --agent claude-code

Installs into .claude/skills of the current project.

Files

@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: true }

SKILL.md on GitHub