Renderize

Drop-in sandbox component that executes AI-generated React code with zero configuration.

<Renderize code={llmGeneratedCode} />

How it works

Renderize injects LLM-generated code into a srcdoc iframe that comes pre-loaded with React 18, Tailwind CSS, Babel standalone, and a curated set of UI libraries. The iframe runs without allow-same-origin, so it can't access the parent page's cookies, storage, or DOM.

A built-in fetch proxy bridges the null-origin restriction: the iframe posts fetch requests to the parent window, which executes them and sends the response back. This means AI-generated code can call external APIs without any CORS configuration.

Parent window
│
├── <Renderize />                  mounts the iframe, owns the message bus
│   ├── fetch proxy                relays fetch calls from iframe → real network
│   └── error forwarding           surfaces runtime errors via onError()
│
└── srcdoc iframe (sandboxed)
    ├── React 18 + ReactDOM
    ├── Tailwind CSS (CDN)
    ├── Babel standalone           transpiles JSX + modern JS at runtime
    ├── dynamic importmap          resolved from the code's own imports
    ├── radix barrel               compound components like <Dialog.Root>
    └── App()                      your LLM-generated component

Installation

npm i @aquiles-ai/renderize
# or
pnpm add @aquiles-ai/renderize

Usage

import { Renderize } from "@aquiles-ai/renderize";

export default function Playground() {
  const code = `
    function App() {
      const [count, setCount] = useState(0);
      return (
        <div className="flex flex-col items-center gap-4 p-8">
          <h1 className="text-2xl font-bold">{count}</h1>
          <button
            onClick={() => setCount(c => c + 1)}
            className="px-4 py-2 bg-blue-600 text-white rounded"
          >
            Increment
          </button>
        </div>
      );
    }
  `;

  return <Renderize code={code} height={400} />;
}

Example of integration

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | | React code generated by the LLM. Must define a function component named App. | | height | string \| number | "100%" | Height of the sandbox iframe. | | width | string \| number | "100%" | Width of the sandbox iframe. | | className | string | | Class name for the wrapper <div>. | | style | React.CSSProperties | | Inline styles for the wrapper <div>. | | onError | (error: string) => void | | Called when the sandbox encounters a runtime error. |

Available libraries

The model writes plain imports — Renderize resolves them against a catalog and builds the iframe's importmap dynamically. The catalog is exposed as Renderize.CATALOG (and each entry is machine-readable), so you can feed it to your LLM's system prompt.

Agent hint: stop models from guessing packages. Print Renderize.CATALOG or the README's table into the prompt, and tell them: "you may import any of the following; importing anything else will fail loudly with the available list, so correct your next attempt."

| Package | Description | Example | |---------|-------------|---------| | react react-dom | Already loaded — hooks in scope | no import needed | | radix | All Radix primitives in one namespace (Dialog, Select, Tabs, …) — compound components | import { Dialog } from "radix"; <Dialog.Root>… | | @radix-ui/react-* | Full Radix suite (direct imports also work) | import { Root } from "@radix-ui/react-dialog" | | lucide-react | Icons | import { Plus } from "lucide-react" | | clsx | Class name utility | import { clsx } from "clsx" | | tailwind-merge | Tailwind class merging | import { twMerge } from "tailwind-merge" | | class-variance-authority | Variant-based styling | import { cva } from "class-variance-authority" | | recharts | Charts | import { LineChart, Line } from "recharts" | | framer-motion | Animations | import { motion } from "framer-motion" | | three | 3D rendering | import * as THREE from "three" | | zustand | State management | import { create } from "zustand" | | date-fns | Date utilities | import { format } from "date-fns" | | axios | HTTP client | import axios from "axios" | | react-hook-form | Forms | import { useForm } from "react-hook-form" | | zod | Schema validation | import { z } from "zod" | | @tanstack/react-query | Data fetching | import { useQuery } from "@tanstack/react-query" | | sonner | Toasts | import { toast } from "sonner" |

Imports are resolved, not stripped: each catalog package is wired into the importmap as https://esm.sh/<pkg>…?external=react,react-dom, which guarantees a single React instance across all packages (the classic "invalid hook call" double-React trap is handled for you). Subpath resolution is included too (three/examples/jsm/…), so deep imports also work.

Fail loud, never silent. If the code imports a package outside the catalog, the sandbox shows a clear error listing the offending package and the available ones, and onError fires with the same message — so the error can be fed back to the model for self-correction on the next attempt.

LLM system prompt

Instead of assembling prompt rules by hand, feed the model the exported SYSTEM_PROMPT — it encodes every sandbox rule (catalog packages, in-scope hooks, no TypeScript, only-import-what-you-use, fail-loud behavior) and is generated from the catalog, so it never drifts from what the sandbox supports.

import { Renderize, SYSTEM_PROMPT } from "@aquiles-ai/renderize";

const messages = [
  { role: "system", content: SYSTEM_PROMPT },
  { role: "user", content: "A bar chart of quarterly sales" },
];

Radix barrel

import { Dialog } from "radix" exposes the React built-in in scope, no package name memorization needed. Even without an import, using a Radix component name like <Dialog.Root> is detected and resolved automatically.

import { Dialog } from "radix";

function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger className="px-4 py-2 rounded bg-blue-600 text-white">
        Open
      </Dialog.Trigger>
      <Dialog.Content className="fixed inset-0 m-auto h-fit w-96 rounded-lg bg-white p-6">
        <Dialog.Title>Hello</Dialog.Title>
        <Dialog.Description>I work inside the sandbox.</Dialog.Description>
        <Dialog.Close className="mt-4 text-sm text-gray-500">Close</Dialog.Close>
      </Dialog.Content>
    </Dialog.Root>
  );
}

React hooks (useState, useEffect, useRef, useCallback, useMemo, useReducer, useContext, createContext, forwardRef, Fragment) and React itself are already in module scope. The LLM does not need to import them.

Requirements for LLM-generated code

The component name must be App. The template calls React.createElement(App) directly, so:

// Correct
function App() { ... }

// Also correct (sanitizeCode will fix these automatically)
export default function App() { ... }
export default function Dashboard() { ... }
function MyComponent() { ... }  // if it's the only PascalCase component

Sandbox security

The iframe uses this sandbox attribute:

allow-scripts allow-forms allow-modals allow-popups allow-downloads

allow-same-origin is intentionally omitted. This means:

• No access to localStorage or sessionStorage
• No access to document.cookie
• No access to indexedDB
• No access to the parent page's DOM

The fetch proxy is the only bridge between the iframe and the outside world.

License

Apache 2.0