Getting Started

Renderify is a runtime-first dynamic renderer that lets LLMs produce real, interactive UI on the fly. It bridges the gap between "LLM can generate code" and "users can see and interact with that UI instantly" — with inline transpilation, JSPM package support, and security-governed execution.

Prerequisites

Node.js >= 22.0.0
pnpm >= 10.29.3

Installation

# Clone the repository
git clone https://github.com/webllm/renderify.git
cd renderify

# Install dependencies
pnpm install

Quick Start

1. Choose a Playground

To paste JSX/TSX or RuntimePlan JSON without configuring a model, open the renderer-only website Playground. It is a static browser renderer and never makes an LLM request.

To generate plans from prompts or exercise the CLI APIs, start the local development Playground:

The fastest way to explore Renderify is through the browser playground:

pnpm playground

Open http://127.0.0.1:4317 in your browser. Try a prompt like:

Build an analytics dashboard with a LineChart from recharts and KPI toggle buttons

Use Render Prompt for one-shot execution, or Stream Prompt to see incremental preview updates followed by the final interactive result.

2. CLI Usage

# Render a prompt and print HTML
pnpm cli -- run "Build a welcome card"

# Print the RuntimePlan JSON (inspect LLM output before rendering)
pnpm cli -- plan "Build a welcome card"

# Probe a RuntimePlan file for compatibility (no execution)
pnpm cli -- probe-plan examples/runtime/recharts-dashboard-plan.json

# Execute a RuntimePlan JSON file
pnpm cli -- render-plan examples/runtime/counter-plan.json

3. Programmatic Usage

The minimal embed path uses @renderify/runtime and @renderify/ir:

import { renderPlanInBrowser } from "@renderify/runtime";
import type { RuntimePlan } from "@renderify/ir";

const plan: RuntimePlan = {
  specVersion: "runtime-plan/v1",
  id: "hello",
  version: 1,
  root: {
    type: "element",
    tag: "div",
    children: [{ type: "text", value: "Hello from Renderify" }],
  },
  capabilities: {},
};

await renderPlanInBrowser(plan, { target: "#app" });

4. Full Pipeline with LLM

For the complete prompt-to-UI pipeline:

import {
  createRenderifyApp,
  DefaultCodeGenerator,
  DefaultContextManager,
  DefaultPerformanceOptimizer,
  DefaultRenderifyConfig,
  DefaultUIRenderer,
  DefaultCustomizationEngine,
  DefaultApiIntegration,
} from "@renderify/core";
import { DefaultRuntimeManager, JspmModuleLoader } from "@renderify/runtime";
import { DefaultSecurityChecker } from "@renderify/security";
import { createLLMInterpreter } from "@renderify/llm";

const config = new DefaultRenderifyConfig();
await config.load();

const app = createRenderifyApp({
  config,
  context: new DefaultContextManager(),
  llm: createLLMInterpreter({
    provider: "openai",
    providerOptions: { apiKey: "your-key" },
  }),
  codegen: new DefaultCodeGenerator(),
  runtime: new DefaultRuntimeManager({
    moduleLoader: new JspmModuleLoader(),
  }),
  security: new DefaultSecurityChecker(),
  performance: new DefaultPerformanceOptimizer(),
  ui: new DefaultUIRenderer(),
  apiIntegration: new DefaultApiIntegration(),
  customization: new DefaultCustomizationEngine(),
});

await app.start();

// Single render
const result = await app.renderPrompt("Build a welcome card");
console.log(result.html);

// Streaming render
for await (const chunk of app.renderPromptStream("Build a dashboard")) {
  if (chunk.type === "preview") {
    console.log("Preview:", chunk.html);
  }
  if (chunk.type === "final") {
    console.log("Final:", chunk.html);
  }
}

await app.stop();

LLM Provider Configuration

Renderify supports hosted and local LLM providers out of the box. Configure via environment variables:

# OpenAI (default)
RENDERIFY_LLM_PROVIDER=openai RENDERIFY_LLM_API_KEY=sk-... pnpm playground

# Anthropic
RENDERIFY_LLM_PROVIDER=anthropic RENDERIFY_LLM_API_KEY=sk-ant-... pnpm playground

# Google (Gemini)
RENDERIFY_LLM_PROVIDER=google RENDERIFY_LLM_API_KEY=... pnpm playground

# OpenAI Codex OAuth backend (no Codex CLI required)
pnpm cli -- auth codex login
RENDERIFY_LLM_PROVIDER=openai-codex pnpm playground

You can also customize the model and base URL:

RENDERIFY_LLM_PROVIDER=openai \
RENDERIFY_LLM_MODEL=gpt-5-mini \
RENDERIFY_LLM_BASE_URL=https://api.openai.com/v1 \
RENDERIFY_LLM_API_KEY=sk-... \
pnpm playground

Security Profiles

Renderify enforces security policies before any code executes. Four built-in profiles:

# Strict: tight limits, requires module integrity hashes
RENDERIFY_SECURITY_PROFILE=strict pnpm playground

# Balanced (default): moderate limits, practical for most use cases
RENDERIFY_SECURITY_PROFILE=balanced pnpm playground

# Trusted: reviewed JSX/source with hooks and package imports
RENDERIFY_SECURITY_PROFILE=trusted pnpm playground

# Relaxed: permissive limits for trusted environments
RENDERIFY_SECURITY_PROFILE=relaxed pnpm playground

# JSPM-only strict mode: strict profile + manifest/integrity + no fallback CDNs
RENDERIFY_RUNTIME_JSPM_ONLY_STRICT_MODE=true pnpm playground

See Security Guide for detailed policy configuration.

Monorepo Commands

pnpm install          # Install dependencies
pnpm lint             # Lint all packages
pnpm typecheck        # Type check all packages
pnpm unit             # Run unit tests
pnpm e2e              # Run end-to-end tests
pnpm bench            # Run benchmarks
pnpm test             # Typecheck + unit tests
pnpm build            # Build all packages
pnpm format           # Auto-format code

Package Overview

Package	npm Name	Purpose
`packages/renderify`	`renderify`	Official top-level SDK facade (recommended app entry)
`packages/ir`	`@renderify/ir`	Intermediate representation: plan/node/state/action types
`packages/runtime`	`@renderify/runtime`	Execution engine, JSPM loader, browser embed API
`packages/security`	`@renderify/security`	Security policy profiles and static checks
`packages/core`	`@renderify/core`	Orchestration facade: config, codegen, plugins, LLM interface
`packages/llm`	`@renderify/llm`	LLM provider implementations (OpenAI, Codex, Anthropic, Google, local)
`packages/cli`	`@renderify/cli`	CLI commands and browser playground server

Next Steps

Architecture Overview — understand the full pipeline
Visual Architecture (Mermaid) — system diagrams for data flow and package boundaries
RuntimePlan IR Reference — learn the intermediate representation
Security Guide — security policies and profiles
LLM Integration — provider configuration and structured output
Runtime Execution — execution engine, module loading, sandboxing
Plugin System — extensibility hooks
CLI & Playground — CLI commands and playground features
Renderer-only website Playground — static code editor with no LLM request
Website deployment — Fumadocs and GitHub Pages workflow
Browser Integration — embedding in web applications
API Reference — complete type and function reference
Troubleshooting & FAQ — failure diagnostics and recovery checklist
Cookbook — copy-paste integration patterns
Performance Tuning — runtime knobs, CI guardrails, and optimization workflow
Contributing Guide — development workflow and conventions

On this page