codegen

Generate source code from json-render UI specs for Next.js and Remix exporters.

15.9k|859|Updated Jan 14, 2026

Search Tags:#codegen #serialization #code-generation #exporters #traversal #ui-spec #json-render

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: codegen
Source: https://github.com/vercel-labs/json-render/tree/main/skills/codegen
Command: npx skills add https://github.com/vercel-labs/json-render --skill codegen-vercel-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Code generation utilities for json-render UI trees that automate exporting code from UI specs, reducing manual coding effort.

## Core Features & Use Cases

Tree traversal and spec analysis to extract components, states, and actions.
Serialization helpers to convert props and values into code-ready formats.
Exporter scaffolding to generate framework-specific boilerplate for Next.js, Remix, or other stacks.
Custom code exporters to tailor outputs for your project templates.

### Quick Start Run the codegen tool on a json-render spec to generate initial code scaffolds and exporter-ready artifacts.

Frequently Asked Questions about codegen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate source code from a json-render UI spec?▼

To generate source code from a json-render UI spec, use codegen utilities to traverse the spec tree, serialize props, and produce typed GeneratedFile artifacts for your framework.

Can I scaffold framework-specific exporters for Next.js and Remix using UI specs?▼

Yes, you can scaffold framework-specific exporters for Next.js and Remix by applying codegen utilities to json-render UI specs to generate boilerplate and framework-ready code artifacts.

How does spec traversal collect used components for code generation?▼

Spec traversal analyzes the json-render UI tree to extract and collect used components, states, and actions, converting them into code-ready formats for serialization.

What is the best way to automate exporting code from UI specs without manual coding?▼

Automating code exports from UI specs is best handled by code generation utilities that traverse json-render trees, serialize values, and produce exporter-ready artifacts, reducing manual effort.

Do I need specific dependencies to produce typed outputs across different ecosystems?▼

No specific dependencies are required. The codegen utilities operate independently to traverse json-render specs, serialize props, and produce typed outputs across frameworks like Next.js and Remix.