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
    ├── importmap                  resolves lucide-react, @radix-ui/*, etc.
    └── 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 sandbox importmap includes the following packages. Imports from any other module are stripped by sanitizeCode.

| Package | Notes | |---------|-------| | react | v18, hooks already in global scope | | react-dom | v18 | | lucide-react | Icon library | | clsx | Class name utility | | tailwind-merge | Tailwind class merging | | class-variance-authority | CVA, variant-based styling | | @radix-ui/react-* | Full Radix UI primitives suite |

React hooks (useState, useEffect, useRef, useCallback, useMemo, useReducer, useContext, createContext, forwardRef, Fragment) are already imported and available in global 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