shadcn.io is an independent project built on shadcn/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
└── SandboxConsoleSandboxProvider 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
.htmlfile. 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
iframewithsandbox="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,erroranddebugcall, and every uncaught error, is posted from the frame toSandboxConsole; 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
What code can Sandbox run?
HTML, CSS and JavaScript as the browser runs them. There is no bundler, so JSX, TypeScript and bare imports such as react or lodash don't run; an import from a full URL that serves an ES module does, in a script with type module. For a React or npm project, link to a hosted playground instead. Sandbox suits lessons, snippets and demos of the web platform.
Is it safe to run code a reader typed?
The code runs in an iframe with the sandbox attribute set to allow scripts, forms and dialogs, without same-origin access. It can't read your page, its cookies, its local storage or the reader's session, and it can't navigate your page. It can still use the network like any page, so don't run code from strangers on a page that holds secrets in the URL.
How do I give Sandbox its files in React?
Pass defaultFiles, an object from path to code, such as index.html, styles.css and script.js. To keep the files yourself, pass files and update them in onFilesChange, which gets every file after each edit. defaultActiveFile picks the file the editor opens on.
Why does a script tag in my files break my component?
A closing script tag inside a string ends the script block that holds it, in an HTML file or a single-file component. You don't need one: Sandbox adds every JavaScript file the page doesn't link to the end of the body. If you do link one, write the closing tag as <\/script> in your source.
Why is my Sandbox console empty?
The console shows what the preview logs, so a SandboxPreview has to be on the page, even in a tab that's hidden. SandboxTabs keeps every panel mounted for that reason. The console is cleared each time the preview runs again, after an edit or the refresh button. Logs from another sandbox on the same page never mix in.
How do I lay out the Sandbox parts?
Put the parts you want in SandboxLayout: side by side on a wide sandbox, stacked on a narrow one. Use SandboxTabs to switch between views in the same space, as the first demo does with Code and Preview, or nest tabs in a layout, as the Console demo does. Give SandboxProvider a height; the panes fill it and scroll.
API Reference
SandboxProvider
files?SandboxFiles
The files, controlled: HTML, CSS and JavaScript, by path.
defaultFiles?SandboxFiles
The files when it starts, uncontrolled.
- Default
{}
onFilesChange?(files: SandboxFiles) → void
Called with every file after each edit.
- Parameters
files– SandboxFiles- Returns
void
defaultActiveFile?string
The file the editor opens on. @default the first file.
- Default
""
delay?number
How long the preview waits after the last edit before it runs the files again, in milliseconds.
- Default
500
className?string
Merged with the part's classes.
SandboxLayout
<div> data-slot="sandbox-layout"
className?string
Merged with the part's classes.
SandboxTabs
data-slot="sandbox-tabs"
value?TabsTab.Value
The value of the currently active Tab. Use when the component is controlled.
When the value is null, no Tab will be active.
defaultValue?TabsTab.Value
The default value. Use when the component is not controlled.
When the value is null, no Tab will be active.
- Default
0
onValueChange?(value: string) → void
Called with the tab chosen.
- Parameters
value– string- Returns
void
orientation?TabsRoot.Orientation
The component orientation (layout flow direction).
- Default
"horizontal"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
SandboxTabsList
data-slot="sandbox-tabs-list"
activateOnFocus?boolean
Whether to automatically change the active tab on arrow key focus. Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
- Default
false
loopFocus?boolean
Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
- Default
true
variant?"default" | "line"
Ark default: default.
- Type
"default" | "line"- Default
"line"
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
SandboxTabsTrigger
data-slot="sandbox-tabs-trigger"
valueTabsTab.Value
The value of the Tab.
disabled?boolean
Whether the Tab is disabled.
If a first Tab on a <Tabs.List> is disabled, it won't initially be selected.
Instead, the next enabled Tab will be selected.
However, it does not work like this during server-side rendering, as it is not known
during pre-rendering which Tabs are disabled.
To work around it, ensure that defaultValue or value on <Tabs.Root> is set to an enabled Tab's value.
nativeButton?boolean
Whether the component renders a native <button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>).
- Default
true
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
SandboxTabsContent
data-slot="sandbox-tabs-content"
valueTabsTab.Value
The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
keepMounted?boolean
Whether to keep the HTML element in the DOM while the panel is hidden.
- Default
false
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
SandboxCodeEditor
<div> data-slot="sandbox-code-editor"
readOnly?boolean
The files can be read and copied, not changed.
- Default
false
showLineNumbers?boolean
Number each line.
- Default
false
showTabs?boolean
A tab per file above the code, to switch files.
- Default
false
wrapContent?boolean
Wrap long lines instead of scrolling sideways.
- Default
false
className?string
Merged with the part's classes.
SandboxFileExplorer
<nav> data-slot="sandbox-file-explorer"
className?string
Merged with the part's classes.
SandboxPreview
<div> data-slot="sandbox-preview"
showRefreshButton?boolean
A button that runs the files again. @default true.
- Default
true
title?string
The frame's accessible name.
- Default
"Preview"
className?string
Merged with the part's classes.
SandboxConsole
<div> data-slot="sandbox-console"
className?string
Merged with the part's classes.
data-level?string
Mirrors level.
