Sandbox for Radix UI

A small playground: files on one side, the page they make on the other, and a console for what its scripts log.

Use it in a tutorial or a docs page where the reader should change the code and see the result at once. It runs HTML, CSS and JavaScript, not a React or npm project: there is no bundler and no package install, so import from npm and JSX won't run. To let the reader edit code that doesn't run, use a Code Editor alone. In React, each part reads the files from SandboxProvider, so you lay them out with tabs, side by side, or both.

Installation

The install also adds Code Editor, Tabs and Button.

Anatomy

SandboxProvider
└── SandboxTabs
    ├── SandboxTabsList
    │   └── SandboxTabsTrigger
    └── SandboxTabsContent
        └── SandboxLayout
            ├── SandboxFileExplorer
            ├── SandboxCodeEditor
            ├── SandboxPreview
            └── SandboxConsole

SandboxProvider holds the files and draws the frame. The tabs are optional: put SandboxLayout straight inside the provider for a side-by-side view.

Usage

import {
  SandboxCodeEditor, SandboxLayout, SandboxPreview, SandboxProvider,
} from "@/components/ui/sandbox";

const files = {
  "/index.html": `<h1>Hello</h1>`,
  "/styles.css": `h1 { font-family: system-ui; }`,
  "/script.js": `console.log("ready")`,
};

<SandboxProvider className="h-96" defaultFiles={files}>
  <SandboxLayout>
    <SandboxCodeEditor showTabs />
    <SandboxPreview />
  </SandboxLayout>
</SandboxProvider>;

How it runs

• One page. The preview is the first .html file. A <link> to one of the CSS files and a <script src> to one of the JavaScript files are inlined where they are; files it doesn't link are added anyway, CSS to the head and JavaScript to the end of the body.
• A sandboxed frame. The page runs in an iframe with sandbox="allow-scripts" (plus forms and dialogs) and no same-origin access, so its scripts can't read your page, its cookies or its storage.
• Again after each edit. The preview runs again 500 ms after typing stops (delay), with a clean console. The refresh button runs it again at once.
• A console. Each console.log, info, warn, error and debug call, and every uncaught error, is posted from the frame to SandboxConsole; objects show as JSON.
• Nothing to install. No bundler, no service, no network: the files are strings in your page, and only they run.

Demos

Split

A file explorer, the editor with line numbers, and the preview, side by side in one SandboxLayout. It opens on the stylesheet with defaultActiveFile, and the script fills in the heading. Use it on a wide page where the reader should see the code and the page at once. Below about 670 pixels the panes stack, and the explorer becomes a row.

Console

A store page whose buttons log: an info line, a warning when the cart is empty, and an uncaught error from Pay. The preview and the console share a tab set beside the editor; every panel stays mounted, so the page keeps running and logging while the console is shown. Use a console when the lesson is about what a script does, not how the page looks.

FAQ

API Reference