HTML/CSS/JS Live Editor
A tiny in-browser playground — write HTML, CSS and JS and see the result update live in a sandboxed preview, no account or build step.
1,202 views
How It Works
Type into the HTML, CSS and JS tabs and the preview pane updates as you go, rendering the combined result inside a sandboxed iframe. The sandbox attribute is set to allow-scripts without allow-same-origin, which is what actually makes it safe: scripts running inside the preview execute in a distinct, opaque origin, so they cannot read this page's cookies, local storage, or DOM, and this page can't reach into the iframe either. That isolation is a browser-enforced security boundary, not just a visual frame — it's the same mechanism sites use to embed untrusted third-party content (ads, widgets, user-submitted snippets) safely, without trusting the code inside it.
Editing itself is deliberately plain: three textareas, no syntax highlighting, no autocomplete. That's a conscious trade-off rather than a missing feature — a real code-editing experience (tokenizing keywords, matching brackets, autocompleting tags) means loading a substantial third-party editor library, which adds weight and a load delay before you can type a single character. This tool optimizes for the opposite: open the page and start typing immediately, with zero dependencies and no build step of any kind.
Every keystroke in any of the three tabs triggers a rebuild: the current HTML, the current CSS wrapped in a <style> tag, and the current JS wrapped in a <script> tag are assembled into one document and written into the iframe. There's no diffing or incremental patching — the whole preview document is simply replaced, which is fast enough at this scale to feel instant while keeping the implementation simple.
Good to Know
Because everything — editing and rendering — happens in your browser, there's no server round-trip and no account needed. It's well suited to quickly testing a CSS trick, isolating a JavaScript bug from a larger codebase before reporting it, or prototyping a small component before copying the working result into a real project. Nothing you type is saved anywhere automatically, so treat it as a scratchpad: copy out anything you want to keep before closing the tab.
Frequently Asked Questions
Is my code sent anywhere?
No — everything runs locally in your browser. The preview is rendered in a sandboxed iframe on this same page; nothing is uploaded or saved on a server.
Why no syntax highlighting?
Adding a real code editor (syntax highlighting, autocomplete) means loading a heavy third-party editor library. This tool stays deliberately lightweight — plain textareas, instant load, zero dependencies, and nothing to download before you can start typing.
Is the preview safe to run untrusted code in?
The preview iframe uses sandbox="allow-scripts" without allow-same-origin, so scripts inside it cannot read cookies, local storage, or anything else from this page — it's isolated the same way an untrusted embed would be. This is a real browser-enforced boundary, not a cosmetic one.
Can my JavaScript in the preview affect the rest of this website?
No — the sandboxed iframe is treated by the browser as a separate, opaque origin. Scripts inside it are confined to that iframe's own document; they have no path to this page's variables, network requests, cookies, or storage, regardless of what the script tries to do.
Does the preview update on every keystroke?
Yes — the iframe content is rebuilt from the current HTML, CSS and JS tabs live as you type, so you see the effect of a change (a new CSS rule, a tweaked function) immediately without clicking a separate "run" button or waiting for a build step.
Similar Tools
Report a Problem
HTML/CSS/JS Live Editor
Comments
No comments yet — be the first to write one!