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