json-renderCAUTION

From the repository's own README, as read at the audited commit. Badges and raw HTML are left out.

# for React
npm install @json-render/core @json-render/react
# for React with pre-built shadcn/ui components
npm install @json-render/shadcn
# or for React Native
npm install @json-render/core @json-render/react-native
# or for video
npm install @json-render/core @json-render/remotion
# or for PDF documents
npm install @json-render/core @json-render/react-pdf
# or for HTML email
npm install @json-render/core @json-render/react-email @react-email/components @react-email/render
# or for Vue
npm install @json-render/core @json-render/vue
# or for Svelte
npm install @json-render/core @json-render/svelte
# or for SolidJS
npm install @json-render/core @json-render/solid
# or for terminal UIs
npm install @json-render/core @json-render/ink ink react
# or for full Next.js apps (routes, layouts, SSR, metadata)
npm install @json-render/core @json-render

The instruction file, verbatim from the audited commit — this is the text the model reads, and the surface the audit's instruction layer examines. Quoted here so you can judge it without cloning anything.

---
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 @json-render/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;
}
```

CAUTIONgrade B · trust 86/100 Install with care. The audit found things worth knowing before you trust its output.

What the source does

Filesystem

none-observed

Network

declared (6 observation(s))

Shell

none-observed

Dependencies

not all pinned

Secrets in source

none-found

Findings (15)

style: 'mapbox://styles/mapbox/standard',

const url = `http://127.0.0.1:${port}`;

.node-version

return new Function(`return (${code});`)() as Record<string, unknown>;

import { catalog, customRules } from "../../lib/render/catalog";

import { stripe, formatAmount, formatDate } from "../../stripe";

import { stripe, formatAmount, formatDate } from "../../stripe";

import { schema as imageSchema } from "../../image/src/schema";

import { schema as inkSchema } from "../../ink/src/schema";

@ai-sdk/gateway, @mdx-js/mdx, @radix-ui/react-dialog, @radix-ui/react-slot, @radix-ui/react-tabs, @upstash/ratelimit, @upstash/redis, @vercel/analytics

@ai-sdk/gateway, @ai-sdk/react, @react-three/drei, @react-three/fiber, @streamdown/code, ai, class-variance-authority, clsx

@ai-sdk/gateway, ai, class-variance-authority, clsx, drizzle-orm, lucide-react, next-themes, postgres

@ai-sdk/gateway, @ai-sdk/react, ai, next, react, react-dom, @types/node, @types/react

@ai-sdk/gateway, @react-three/drei, @react-three/fiber, @react-three/postprocessing, @react-three/rapier, @upstash/ratelimit, @upstash/redis, @vercel/blob

pnpm-lock.yaml

Gates applied: no_behavioural_pass.

[![ModelsAtlas audit: json-render](https://modelsatlas.com/skills/vercel-labs/json-render-core/badge.svg)](https://modelsatlas.com/skills/vercel-labs/json-render-core/)

Not your listing, or something out of date? Claim or update your listing.