💨 Razorwind is a unified set of tools that make creating design systems a breeze.

[!IMPORTANT] This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be available through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.

Razorwind - JSON Render Catalog Plugin

Razorwind - JSON Render Catalog turns extracted design-system components into an executable json-render catalog and the AI artifacts needed to generate validated UI specs.

Installing

Using pnpm:

pnpm add -D @razorwind/json-render

npm install -D @razorwind/json-render

yarn add -D @razorwind/json-render

Usage

import { defineConfig } from "@razorwind/core";
import jsonRender from "@razorwind/json-render";

export default defineConfig({
  plugins: [
    jsonRender({
      outputPath: "generated/json-render",
      mapComponent: component => ({
        slots: component.name === "Card" ? ["default"] : [],
        props:
          component.name === "Button"
            ? {
                label: { type: "string" },
                disabled: { type: "boolean", required: false }
              }
            : undefined
      }),
      actions: {
        submit: {
          description: "Submit the current form.",
          params: { formId: { type: "string" } }
        }
      },
      prompt: {
        customRules: ["Prefer Card for grouped content."]
      }
    })
  ]
});

Generated artifacts (under json-render/ by default):

• catalog.ts — executable catalog built with defineCatalog
• catalog.prompt.txt — model system prompt generated by json-render
• catalog.schema.json — JSON Schema for structured-output providers
• INSTALL.md — React registry and AI integration instructions

Options

| Option | Default | Description | | -------------- | --------------- | ----------- | | outputPath | "json-render" | Output directory for generated artifacts | | mapComponent | — | Customize props, slots, examples, descriptions, or omit a component | | actions | {} | Typed actions and parameter schemas exposed to generated specs | | prompt | — | Options forwarded to catalog.prompt() | | strict | true | Reject unknown fields in fixed-shape objects while retaining dynamic element keys | | installGuide | (generated) | Override the generated INSTALL.md body |

Extracted Razorwind component metadata does not include prop contracts. Without a mapComponent prop map, the catalog therefore uses z.object({}).catchall(z.unknown()): useful immediately, but deliberately not a fabricated component API. Supply prop definitions when the generated JSON Schema must validate component props. json-render 0.21 itself treats props as a generic record in multi-component catalogs, so catalog.validate() does not enforce these per-component contracts; catalog.schema.json does.

The package also exports createJsonRenderCatalog, createPropsSchema, createJsonRenderJsonSchema, generateJsonRender, and renderCatalogSource for direct programmatic use.

Development

Building

Run pnpm nx build json-render to build the library.

Running unit tests

Run pnpm nx test json-render to execute the unit tests via Vitest.