Labsco
vercel-labs logo

codegen

★ 15,600

by vercel · part of vercel-labs/json-render

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

🔥🔥🔥✓ VerifiedFreeQuick setup
#analytics#git
🧰 Not standalone. This skill ships with vercel-labs/json-render and only works together with that tool — install the tool first, then add this skill.

This is the playbook your agent receives when the skill activates — you don't need to read it to use the skill, but it's here to audit before installing.

by 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 ZIPGitHub15.6k

@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.

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