Sandbox
- 12 installs
- 610 repo stars
- Updated June 26, 2026
- alsk1992/cloddsbot
Sandbox is a Claude Code skill for the clodds bot that pushes HTML to a live-updating canvas server for visual previews and agent-driven UI.
About
Sandbox is a clodds skill that serves a local HTTP canvas page and renders pushed HTML in real time. Developers use it to give an agent a visual surface for previews, dashboards, and agent-driven UI, and to capture screenshots of the current state. It matters when a chat agent needs to show rendered output rather than plain text.
- Pushes HTML to a live-updating canvas server for visual previews and dashboards
- Chat commands to start, push, reset, screenshot, and check status of the canvas
- JavaScript eval and unsafe mode are off by default via env flags
Sandbox by the numbers
- 12 all-time installs (skills.sh)
- Ranked #1,643 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
sandbox capabilities & compatibility
- Capabilities
- html preview · screenshot · dashboard
- Use cases
- ui design
- Pricing
- Free
What sandbox says it does
Push HTML content to a live-updating canvas server for visual previews, dashboards, and agent-driven UI.
`/sandbox screenshot` captures the current canvas state as an image
npx skills add https://github.com/alsk1992/cloddsbot --skill sandboxAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 12 |
|---|---|
| repo stars | ★ 610 |
| Last updated | June 26, 2026 |
| Repository | alsk1992/cloddsbot ↗ |
What it does
Push HTML to a live canvas so an agent can render a visual preview or dashboard and screenshot it.
Who is it for?
Giving a chat agent a live visual canvas to render HTML previews, dashboards, or UI.
Skip if: Production web hosting or persistent front-end applications.
When should I use this skill?
You want an agent to render and screenshot HTML output instead of returning text.
What you get
HTML is rendered on a live canvas and can be screenshotted.
- live canvas url
- rendered html preview
- canvas screenshot
By the numbers
- 5 canvas commands (start, push, reset, screenshot, status)
- 2 env flags (CANVAS_ALLOW_JS_EVAL, ALLOW_UNSAFE_SANDBOX)
Files
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 settingsEnvironment 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 resetHow 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
/**
* Sandbox CLI Skill
*
* Commands:
* /sandbox start - Start canvas sandbox
* /sandbox push <html> - Push HTML to canvas
* /sandbox reset - Reset canvas
* /sandbox screenshot - Take screenshot
* /sandbox status - Canvas status
*/
import type { CanvasService } from '../../../canvas/index';
let canvas: CanvasService | null = null;
async function getCanvas(): Promise<CanvasService> {
if (canvas) return canvas;
const { createCanvasService } = await import('../../../canvas/index');
canvas = createCanvasService();
return canvas;
}
async function execute(args: string): Promise<string> {
const parts = args.trim().split(/\s+/);
const cmd = parts[0]?.toLowerCase() || 'help';
try {
switch (cmd) {
case 'start': {
const c = await getCanvas();
const url = await c.startServer();
return `Canvas sandbox started at ${url}`;
}
case 'push': {
const html = parts.slice(1).join(' ');
if (!html) return 'Usage: /sandbox push <html>';
const c = await getCanvas();
const { components } = await import('../../../canvas/index');
c.pushComponent(components.custom(html));
return `Pushed HTML to canvas. ${c.getUrl() ? `View at ${c.getUrl()}` : 'Start server with `/sandbox start`.'}`;
}
case 'reset': {
const c = await getCanvas();
c.reset();
return 'Canvas reset to blank state.';
}
case 'screenshot':
case 'snap': {
const c = await getCanvas();
const buf = await c.snapshot();
return `Screenshot captured (${(buf.length / 1024).toFixed(1)} KB).`;
}
case 'status': {
const c = await getCanvas();
const state = c.getState();
const url = c.getUrl();
let output = '**Canvas Sandbox Status**\n\n';
output += `Server: ${url || 'not running'}\n`;
output += `HTML: ${state.html ? `${state.html.length} chars` : 'empty'}\n`;
output += `CSS: ${state.css ? `${state.css.length} chars` : 'none'}\n`;
output += `JS eval: ${process.env.CANVAS_ALLOW_JS_EVAL === 'true' ? 'enabled' : 'disabled (CANVAS_ALLOW_JS_EVAL)'}\n`;
output += `Unsafe sandbox: ${process.env.ALLOW_UNSAFE_SANDBOX === 'true' ? 'enabled' : 'disabled (ALLOW_UNSAFE_SANDBOX)'}`;
return output;
}
default:
return helpText();
}
} catch (error) {
return `Sandbox error: ${error instanceof Error ? error.message : String(error)}`;
}
}
function helpText(): string {
return `**Sandbox Commands**
/sandbox start - Start canvas sandbox
/sandbox push <html> - Push HTML to canvas
/sandbox reset - Reset canvas
/sandbox screenshot - Take screenshot
/sandbox status - Canvas status`;
}
export default {
name: 'sandbox',
description: 'Visual canvas sandbox for agent-driven UI and live previews',
commands: ['/sandbox', '/canvas'],
handle: execute,
};
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
Is JavaScript executed in the canvas?
No by default. It is enabled only when CANVAS_ALLOW_JS_EVAL is set.
How do I capture the current canvas?
Run /sandbox screenshot to capture the current canvas state as an image.