What does this tool do?
Edit HTML, CSS, and JavaScript in three side-by-side panels and see the live result render in a sandboxed preview as you type. Console output and errors are captured below the preview — perfect for prototyping a UI component, debugging a layout, or sharing a self-contained demo.
How is it sandboxed?
The preview runs inside an isolated <iframe sandbox="allow-scripts"> with no access to the parent page, cookies, or local storage. Each run starts fresh from a clean document — prior state cannot leak between executions, and your code never leaves the browser.
Features & Capabilities
console.log, warn, error, and runtime exceptions show up color-coded below the preview.
Keyboard Shortcuts
- Ctrl/⌘ + Enter — re-run the preview manually.
- Tab inside any editor — insert a 2-space indent instead of moving focus.
- Auto-run on edit — toggle off if you want to commit the full snippet before previewing.
When to Use It
Reach for this playground when you'd otherwise spin up a CodePen or JSFiddle: trying a CSS layout, prototyping a small interactive component, debugging a DOM script in isolation, or sharing a self-contained reproduction of a bug. Because everything renders client-side and nothing is uploaded, it's also safe for snippets that touch internal URLs or embed data you'd rather not paste into a third-party service.
Limits & Caveats
This is a sandboxed iframe, not a full development environment. There's no require, no bundler, and no Node APIs — only what a browser provides (fetch, setTimeout, the DOM, etc.). External stylesheets and scripts can be loaded by adding <link> or <script src> tags in the HTML panel, but network requests from the iframe still hit real endpoints, so be mindful when testing code that calls external APIs.
Frequently Asked Questions
Can I load external libraries like jQuery or React?
Yes — drop a <script src="https://cdn.jsdelivr.net/..."></script> into the HTML panel, and the JS panel can use the global it exposes. ESM imports work too via <script type="module">.
Is my code sent anywhere?
No. The preview is built locally and rendered inside a sandboxed iframe in your tab. There is no server-side runner and no telemetry — your HTML, CSS, and JS never leave the browser.
Why don't I see console.log output in the preview?
The preview pane shows the rendered page, not console output. Open the Console section below the preview to see log, warn, error, and info calls along with any thrown exceptions.
Can I disable auto-run?
Yes — uncheck the Auto-run on edit checkbox. After that, the preview only re-runs when you click Run or press Ctrl/⌘+Enter.