HTML / CSS / JS Playground

Sandbox

Real-time client-side frontend sandbox with live iframe rendering, interactive console logging, and instant export. Zero server execution.

Editor Tab

Output View

Live auto-run

HTML Document

0 lines · 0 chars HTML

Live Preview

About This Tool

A three-pane frontend playground for HTML, CSS, and JavaScript that combines all three assets into a single sandbox document and renders it live in an iframe as you type. Prototyping UI components, testing DOM event listeners, or debugging layout snippets without build steps.

If your code does not need a DOM or a visual canvas, but rather runs as a pure script to inspect console values, use the JavaScript / TypeScript Playground instead.

Key Features

Multi-Pane Source Editors: Separate Monaco-style code editors for HTML, CSS, and JavaScript with syntax highlighting.
Live Auto-Run Preview: Rebuilds and re-renders the sandboxed iframe 350ms after you stop typing, or on demand via Run.
Console Interceptor: Captures console.log, console.warn, and console.error calls into a dedicated inspector tab.
Single-File HTML Export: Download a self-contained HTML file with embedded styles and scripts with one click.
100% In-Browser Privacy: Execution is confined strictly to the client-side sandboxed iframe with zero server telemetry.

Frequently Asked Questions

How does console.log() from my code reach the Console tab?

The bundle sent to the preview iframe overrides console.log, console.warn, console.error, and window.onerror to relay each call to the parent page via window.postMessage, which renders it as a log entry.

What can code in the preview actually do?

The iframe uses sandbox="allow-scripts allow-modals", so scripts run and alert/confirm/prompt work, but the frame has no access to the parent page, cannot navigate the top window, and cannot submit forms outside itself.

What does Export .html download?

A single self-contained sandbox-export.html file with your CSS inlined in a style tag and your JS inlined in a script tag (including the console-bridging shim), runnable offline without this tool.

Does the preview re-run automatically as I type?

Yes, when "Live auto-run" is checked the preview rebuilds about 350ms after you stop typing. Uncheck it to only run on demand via the Run button or Ctrl/Cmd+Enter.

Does any of my code get uploaded?

No. HTML, CSS, and JS are combined and executed entirely inside the sandboxed iframe in your browser; nothing is sent to a server.