Complete interface

Elements

Composable React UI for a complete browser IDE: toolbar, file tree, code editor, console, terminal, and live preview. Drop it in whole or assemble the primitives yourself.

$npm i @node-sandbox/elements @node-sandbox/react react react-dom

Drop in a complete IDE

Import the stylesheet once, then render Sandbox. It composes the runtime provider and the full IDE chrome into one component.

import '@node-sandbox/elements/styles.css';
import { Sandbox } from '@node-sandbox/elements';

export default function App() {
  return (
    <Sandbox
      apiKey={import.meta.env.VITE_NODESANDBOX_API_KEY}
      source={{
        type: 'files',
        files: {
          'package.json': JSON.stringify({
            scripts: { dev: 'vite --host 0.0.0.0' },
            dependencies: { vite: '8.1.3' },
          }),
          'index.html': '<h1>Hello from NodeSandbox</h1>',
        },
      }}
      style={{ height: 640 }}
    />
  );
}

Runtime included, engine not bundled.

Elements delegates lifecycle to React and always initializes the hosted Node runtime through Client.

Compose your own layout

Lift SandboxProvider when your own panels need to share the same sandbox. RenderSandboxChrome beside chat, prompts, grading tools, or any product-specific interface.

import {
  SandboxProvider,
  SandboxChrome,
  useSandbox,
} from '@node-sandbox/elements';

function AgentPanel() {
  const { fs, commands } = useSandbox();
  // Your agent and the IDE operate on the same runtime.
  return <aside>Build something…</aside>;
}

export default function Workspace({ apiKey, source }) {
  return (
    <SandboxProvider apiKey={apiKey} source={source} theme="dark">
      <div className="workspace">
        <AgentPanel />
        <SandboxChrome />
      </div>
    </SandboxProvider>
  );
}

Control the interface

Use the ui prop to keep the workflow focused. Every flag can be set independently.

<Sandbox
  apiKey={apiKey}
  source={source}
  ui={{
    showCodeEditor: true,
    showNavigation: false,
    showReload: true,
    showDeviceToggle: true,
    showFullScreenToggle: true,
    showServerOutput: true,
    showConsole: true,
    showTerminal: false,
    showAttribution: true,
  }}
/>

showCodeEditorWeb/code toggle and editor viewtrue

showNavigationHistory controls and URL bartrue

showTerminalInteractive PTY terminalfalse

showConsoleBrowser console eventstrue

showServerOutputANSI dev-server outputtrue

showAttributionNodeSandbox attribution badgetrue

Public components

Import the bundled surface from the package root or keep optional pieces tree-shakeable with subpath imports.

ComponentRole

SandboxProvider and complete chrome in one tag.

SandboxProviderReact runtime provider plus theme and editor state.

SandboxChromeToolbar, preview/editor body, and console drawer.

SandboxIDEFile tree and code editor pair.

SandboxFileTreeStandalone synchronized project tree.

SandboxCodeEditorStandalone code editor.

SandboxConsoleStandalone browser console surface.