Is this HTML editor really free and private?

Yes. It runs entirely in your browser with no account and no upload. Your HTML, CSS and JavaScript never leave your device — they are rendered locally inside a sandboxed iframe and autosaved only to your own browser storage.

How does the live preview work?

Your three panes are combined into a single document and loaded into a sandboxed iframe via the srcdoc attribute. The sandbox allows scripts and forms but isolates the preview from the page around it, so a broken script can never crash the editor.

Does my JavaScript actually run?

Yes. The JS pane executes inside the preview frame exactly as it would on a real page. console.log output and any runtime errors are forwarded to the in-app console panel, which you open with the Console button.

Can I save my work and come back later?

The current pen autosaves continuously to localStorage, so reopening the page restores exactly what you were editing. You can also press Save snapshot to keep up to 30 named versions and reload any of them with one click.

Can I import an existing HTML file?

Yes. Use the Import button to load a .html file. The editor splits it into the three panes automatically — inline style blocks go to CSS, inline scripts go to JS, and the body markup goes to HTML. External script tags with a src attribute are dropped for safety.

How do I get my finished page out of the editor?

Press Export .html to download a single self-contained file with your CSS and JS inlined into a valid HTML document. Open it in any browser or drop it straight onto a static host — no build step required.

HTML Live Editor — Gera Tools

A browser-based HTML live editor with separate HTML, CSS and JavaScript panes and a sandboxed preview that re-renders the instant you stop typing. It is built for the moments when you want to test a snippet, prototype a layout, debug a tricky bit of CSS, or teach a concept without spinning up a project, a build tool, or an account. Everything runs locally in your browser, so it is fast, private, and works offline once the page has loaded.

How it works

The editor keeps three text buffers — one each for markup, styles and script. When auto-run is enabled, a short debounce waits until you pause typing and then assembles the three buffers into one document. That document is injected into an <iframe> through its srcdoc attribute with a sandbox allowing scripts, forms, modals and popups, but isolating it from the surrounding page. Because the preview is a real, isolated document, your JavaScript executes exactly as it would on a live site — event listeners fire, timers run, the DOM updates.

A tiny bridge injected into the frame wraps console.log, console.warn and console.error and listens for uncaught errors and rejected promises. Each message is forwarded to the parent window with postMessage, and the Console panel renders them with colour-coding so you can debug without leaving the tool. The whole pen autosaves to localStorage, and Save snapshot stores up to 30 named versions you can reload later. Export .html writes a single self-contained file with your CSS and JS inlined, and Import does the reverse — splitting a pasted document back into the three panes. None of this touches a server.

Example

Suppose you want to test a hover animation. Drop a button into the HTML pane, add a transition and :hover rule in the CSS pane, and a console.log in the JS pane to confirm a click handler fires. With auto-run on, the preview shows the styled button immediately; click it and the Console panel prints your log line. Happy with it? Press Export .html and you have a shareable page. The table below shows what each pane contributes to the final document:

Pane	Goes into	Typical use
HTML	the page body	structure, content, elements
CSS	an inline `style` block	layout, colours, animation
JS	an inline `script` block	interactivity, DOM logic

Every keystroke stays on your machine — nothing is uploaded, logged, or stored anywhere but your own browser.