# Sandbox

> Visual HTML canvas sandbox for agent-driven UI and live previews Use when this capability is needed.

- Skill: `tomevault-io/sandbox` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/sandbox`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/sandbox/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/sandbox

---


# Sandbox - Visual Canvas

Push HTML content to a live-updating canvas server for visual previews, dashboards, and agent-driven UI.

## Commands

```
/sandbox start        - Start the canvas server (returns URL)
/sandbox push <html>  - Push HTML content to the canvas
/sandbox reset        - Reset canvas to blank state
/sandbox screenshot   - Take a screenshot of the current canvas
/sandbox status       - Show canvas server status and settings
```

## Environment Variables

| Variable | Description |
|----------|-------------|
| `CANVAS_ALLOW_JS_EVAL` | Enable JavaScript evaluation in canvas (default: `false`) |
| `ALLOW_UNSAFE_SANDBOX` | Enable unsafe sandbox mode (default: `false`) |

## Examples

```
/sandbox start
/sandbox push <h1>Hello World</h1><p>Live preview</p>
/sandbox screenshot
/sandbox status
/sandbox reset
```

## How It Works

1. `/sandbox start` launches a local HTTP server that serves the canvas page
2. `/sandbox push <html>` sends HTML to the canvas, rendered in real time
3. `/sandbox screenshot` captures the current canvas state as an image
4. `/sandbox reset` clears all HTML, CSS, and JS from the canvas
5. `/sandbox status` shows whether the server is running, the URL, and content sizes

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/alsk1992) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->

