Auto-save enabled — code saved to localStorage

Virtual Console 0

No output yet. Use console.log() in your JS to see messages here.

HTML, CSS & JavaScript Playground

The Ultimate Free Offline Browser IDE — HTML, CSS & JS in Real Time

Complete Usage Guide

Choose a Language Tab

Click HTML, CSS, or JS in the top toolbar to switch between the three Monaco Editor instances. Each tab has full syntax highlighting, bracket matching, and IntelliSense. Your code is auto-saved to localStorage as you type.

Write Code & See Live Preview

Type in the editor — the Live Preview iframe on the right updates automatically 500ms after you stop typing (debounced for performance). Your HTML is injected directly, CSS is wrapped in a <style> tag, and JS runs in a sandboxed <script> context.

Use the Virtual Console

All console.log(), console.warn(), and console.error() calls from your JavaScript are intercepted and displayed in the Virtual Console panel at the bottom — color-coded with timestamps. No need to open browser DevTools.

Load Templates & Format Code

Use the Template button to instantly load starter boilerplates (Blank, Hello World, Flexbox, CSS Animation, Fetch API, Canvas). Hit Format (or Alt+Shift+F) to auto-beautify your code with Monaco's built-in formatter.

Export Project as ZIP

Click Export ZIP to package your entire project. JSZip bundles your code into three separate files: index.html, style.css, and script.js (with stylesheet and script linked in the HTML). FileSaver.js triggers the browser download instantly.

Technical Knowledge Base

Monaco Editor Engine

Web Sandbox STUDIO MAX uses Monaco Editor — the same engine that powers Visual Studio Code. It provides real-time syntax highlighting, multi-cursor editing, IntelliSense autocomplete, error squiggles, minimap navigation, and bracket pair colorization for HTML, CSS, and JavaScript.

Sandboxed iframe Security

The live preview runs inside a sandbox="allow-scripts" iframe. This prevents your preview code from accessing the parent page's DOM or cookies, protecting the tool from XSS. Console bridging is done safely via postMessage — the gold standard for cross-frame communication.

localStorage Auto-Save Architecture

Every keystroke is debounced and saved to localStorage under the keys sandbox_html, sandbox_css, and sandbox_js. On page load, the tool restores your last session automatically. The autosave indicator turns green when saved and yellow while pending — just like a real IDE.

ZIP Export with JSZip + FileSaver

The export function uses JSZip to create a virtual ZIP archive in memory. It writes three files: index.html (with your HTML content, a <link> to style.css, and a <script> tag for script.js), plus the raw CSS and JS files. FileSaver.js then triggers the browser's native download dialog.

Split.js Resizable Panels

The editor/preview split is powered by Split.js, a zero-dependency library that attaches native drag handles between panels. Sizes are saved to localStorage so your preferred layout persists across sessions. On mobile, the gutter is hidden and panels stack vertically automatically.

Debounce Pattern for Performance

The live preview render is triggered through a debounce(fn, 500) wrapper — a classic JavaScript pattern that delays execution until 500ms of inactivity passes. This prevents the iframe from re-rendering on every keystroke, which would cause jank and lost cursor position in heavy documents.

Frequently Asked Questions

Is this really 100% offline and free?

Yes. After the Monaco Editor loads from its CDN on your first visit, everything — editing, previewing, the virtual console, and ZIP export — runs entirely in your browser. No server is involved. It's free with no account, no watermarks, and no limits.

Does my code auto-save? Can I lose my work?

Your code is automatically saved to your browser's localStorage within 800ms of you stopping typing. The autosave indicator at the top confirms this. Refreshing the page, closing the tab, and reopening it will all restore your last session perfectly.

How does the Virtual Console work?

The tool injects a tiny console-interceptor script into the iframe before your code runs. This script overrides window.console.log/warn/error and uses postMessage to relay the arguments to the parent page. The parent page listens for these messages and renders them in the styled Virtual Console panel.

Can I use external libraries like jQuery or Three.js in my preview?

Yes! Simply add <script src="https://cdn.jsdelivr.net/..."></script> tags directly in your HTML editor tab. The live preview iframe fetches those CDN scripts normally. You can also use <link rel="stylesheet"> for external CSS frameworks like Bootstrap or Tailwind.

What's in the exported ZIP file?

The ZIP contains three files: index.html (your HTML wrapped with a full doctype, a <link> to style.css, and a <script> pointing to script.js), style.css (your raw CSS), and script.js (your raw JavaScript). Open the folder in any code editor or web server to run it.

Can I resize the editor and preview panels?

Yes. Grab the divider bar between the editor and preview and drag it left or right to resize. Your preferred split ratio is saved to localStorage. On mobile devices, panels automatically stack vertically for a touch-friendly experience.

Is there a mobile view simulation?

Yes. Click the device toggle icon (desktop/mobile) in the preview toolbar to switch between full-width desktop view and a constrained 375px mobile frame view — perfect for testing responsive CSS breakpoints without leaving the tool.