Marble UI
← Components

Code Sandbox / Terminal

Preview: Default

Tiny live playground: edit HTML/CSS/JS in tabs, preview updates (debounced) in a sandboxed iframe (scripts allowed, no same-origin access), console output captured below. Tab indents in the editor; press Escape first and the next Tab moves focus on instead (Shift+Tab always does).

Import

import { CodeSandbox } from '@marbleui/ui'

Props

<CodeSandbox>

PropTypeDefaultDescription
defaultFiles *requiredSandboxFiles—
classNamestring—

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Tab · React Aria TabList · React Aria TabPanel · React Aria Tabs. Follow the primitive's docs for the full keyboard map.

Usage notes

In-browser playground: edit HTML, CSS and JavaScript in tabs and see the result and console output. For read-only code use CodeBlock.

<CodeSandbox defaultFiles={{
  html: '<button id="b">Clicked 0 times</button>',
  css: 'button { padding: 8px 14px; }',
  js: "document.getElementById('b').onclick = () => console.log('clicked')",
}} />
  • Real: the code runs in an iframe sandboxed with allow-scripts only, so it can’t reach your page, cookies or storage. The preview rebuilds 400 ms after typing stops, and Reload re-runs it. console.log/warn/error and uncaught errors print below, with objects and arrays printed as JSON (circular references show as [Circular]).
  • Your app provides everything else: there’s no bundler, npm, TypeScript or JSX, the script is a classic one (no static import), and there’s no onChange, so edits can’t be saved and vanish on unmount.
  • Tab inserts two spaces. To leave the editor forwards press Escape, then Tab; Shift+Tab always leaves. The editor’s description tells screen reader users this.
  • Each sandbox only shows messages from its own iframe, so several can share a page.
Example source · show
import { CodeSandbox } from './code-sandbox'

export const styles = { Default: () => <CodeSandbox className="w-[44rem] max-w-full" defaultFiles={{ html: '<button id="b">Clicked 0 times</button>', css: 'button {\n  font: inherit;\n  padding: 8px 14px;\n  border-radius: 8px;\n  border: 1px solid #ccc;\n}', js: "let n = 0\nconst b = document.getElementById('b')\nb.onclick = () => {\n  n++\n  b.textContent = `Clicked ${n} times`\n  console.log('clicks', n)\n}" }} /> }

Source: packages/ui/src/code-sandbox/code-sandbox.tsx

Catalog

Category
editor
Priority
Extra
Primitive
custom