`. |\n| `style` | `React.CSSProperties` | | Inline styles for the wrapper `
`. |\n| `onError` | `(error: string) => void` | | Called when the sandbox encounters a runtime error. |\n\n## Available libraries\n\nThe model writes plain imports — Renderize resolves them against a catalog and\nbuilds the iframe's importmap dynamically. The catalog is exposed as\n`Renderize.CATALOG` (and each entry is machine-readable), so you can feed it to\nyour LLM's system prompt.\n\n> **Agent hint:** stop models from guessing packages. Print `Renderize.CATALOG`\n> or the README's table into the prompt, and tell them: \"you may import any of\n> the following; importing anything else will fail loudly with the available\n> list, so correct your next attempt.\"\n\n| Package | Description | Example |\n|---------|-------------|---------|\n| `react` `react-dom` | Already loaded — hooks in scope | no import needed |\n| `radix` | All Radix primitives in one namespace (`Dialog`, `Select`, `Tabs`, …) — compound components | `import { Dialog } from \"radix\";
…` |\n| `@radix-ui/react-*` | Full Radix suite (direct imports also work) | `import { Root } from \"@radix-ui/react-dialog\"` |\n| `lucide-react` | Icons | `import { Plus } from \"lucide-react\"` |\n| `clsx` | Class name utility | `import { clsx } from \"clsx\"` |\n| `tailwind-merge` | Tailwind class merging | `import { twMerge } from \"tailwind-merge\"` |\n| `class-variance-authority` | Variant-based styling | `import { cva } from \"class-variance-authority\"` |\n| `recharts` | Charts | `import { LineChart, Line } from \"recharts\"` |\n| `framer-motion` | Animations | `import { motion } from \"framer-motion\"` |\n| `three` | 3D rendering | `import * as THREE from \"three\"` |\n| `zustand` | State management | `import { create } from \"zustand\"` |\n| `date-fns` | Date utilities | `import { format } from \"date-fns\"` |\n| `axios` | HTTP client | `import axios from \"axios\"` |\n| `react-hook-form` | Forms | `import { useForm } from \"react-hook-form\"` |\n| `zod` | Schema validation | `import { z } from \"zod\"` |\n| `@tanstack/react-query` | Data fetching | `import { useQuery } from \"@tanstack/react-query\"` |\n| `sonner` | Toasts | `import { toast } from \"sonner\"` |\n\nImports are **resolved, not stripped**: each catalog package is wired into the\nimportmap as `https://esm.sh/…?external=react,react-dom`, which guarantees a\nsingle React instance across all packages (the classic \"invalid hook call\"\ndouble-React trap is handled for you). Subpath resolution is included too\n(`three/examples/jsm/…`), so deep imports also work.\n\n**Fail loud, never silent.** If the code imports a package outside the catalog,\nthe sandbox shows a clear error listing the offending package and the available\nones, and `onError` fires with the same message — so the error can be fed back\nto the model for self-correction on the next attempt.\n\n## LLM system prompt\n\nInstead of assembling prompt rules by hand, feed the model the exported\n`SYSTEM_PROMPT` — it encodes every sandbox rule (catalog packages, in-scope\nhooks, no TypeScript, only-import-what-you-use, fail-loud behavior) and is\ngenerated from the catalog, so it never drifts from what the sandbox supports.\n\n```tsx\nimport { Renderize, SYSTEM_PROMPT } from \"@aquiles-ai/renderize\";\n\nconst messages = [\n { role: \"system\", content: SYSTEM_PROMPT },\n { role: \"user\", content: \"A bar chart of quarterly sales\" },\n];\n```\n\n### Radix barrel\n\n`import { Dialog } from \"radix\"` exposes the React built-in *in scope*, no\npackage name memorization needed. Even without an import, using a Radix\ncomponent name like `` is detected and resolved automatically.\n\n```tsx\nimport { Dialog } from \"radix\";\n\nfunction App() {\n const [open, setOpen] = React.useState(false);\n return (\n \n \n Open\n \n \n Hello\n I work inside the sandbox.\n Close\n \n \n );\n}\n```\n\nReact hooks (`useState`, `useEffect`, `useRef`, `useCallback`, `useMemo`,\n`useReducer`, `useContext`, `createContext`, `forwardRef`, `Fragment`) and\n`React` itself are already in module scope. The LLM does not need to import\nthem.\n\n## Requirements for LLM-generated code\n\nThe component name must be `App`. The template calls `React.createElement(App)` directly, so:\n\n```tsx\n// Correct\nfunction App() { ... }\n\n// Also correct (sanitizeCode will fix these automatically)\nexport default function App() { ... }\nexport default function Dashboard() { ... }\nfunction MyComponent() { ... } // if it's the only PascalCase component\n```\n\n## Sandbox security\n\nThe iframe uses this `sandbox` attribute:\n\n```\nallow-scripts allow-forms allow-modals allow-popups allow-downloads\n```\n\n`allow-same-origin` is intentionally omitted. This means:\n\n- No access to `localStorage` or `sessionStorage`\n- No access to `document.cookie`\n- No access to `indexedDB`\n- No access to the parent page's DOM\n\nThe fetch proxy is the only bridge between the iframe and the outside world.\n\n\n## License\n\nApache 2.0","readmeFilename":"README.md"}![\"Renderize\"](\"https://res.cloudinary.com/dmtomxyvm/image/upload/v1772919461/renderize_z4qlyx.png\")
\n\nDrop-in sandbox component that executes AI-generated React code with zero configuration.\n\n```tsx\n![\"Example1\"](\"https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990544/Captura_de_pantalla_2157_ziyjnu.png\")
\n\n![\"Example2\"](\"https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990545/Captura_de_pantalla_2158_b3e1up.png\")
\n\n![\"Example3\"](\"https://res.cloudinary.com/dmtomxyvm/image/upload/v1772990556/Captura_de_pantalla_2159_azlagy.png\")
\n\n