The editor above is a complete HTML document editor with a live preview: type on the left, and the page you are building renders on the right. It runs entirely in your browser — no install, no account, and nothing you write ever leaves your machine. The preview is a real browser frame, so what you see is what a visitor would see.
Write and run HTML online
Everything you put in the editor is treated as one full HTML document — doctype, <head>, and <body> included. That matters more than it sounds: meta tags, favicons, titles, and stylesheets only behave correctly when they live in a real <head>, and this editor renders yours faithfully. The starter template already includes the boilerplate worth keeping, and the templates menu offers ready documents — a signup form, a data table, a responsive image figure, a favicon demo, and a social meta-tags example — that you can strip for parts.
With Auto-run switched on, the preview refreshes about half a second after you stop typing, so it feels live without flickering on every keystroke. Prefer manual control? Switch it off and press Run (or Ctrl/Cmd + Enter) when you want to render. Open in a new tab pops your current document out into a full browser window — handy for testing forms at real size or sharing your screen during a lesson.
Console output and script errors
console.log from scripts in your document appears in the console panel below the workspace, alongside warnings and errors. When a script throws, the message lands with the line and column where it failed — the numbers match the editor, not some internal representation, because the preview injects its reporting bridge as a single line before your code. Unhandled promise rejections are caught too. If you are learning from the JavaScript curriculum, this panel is the same console discipline you would practice in devtools, minus the intimidating chrome.
Check your layout at real device widths
The width buttons above the preview render your document at a phone width (390 px), a tablet width (820 px), or a desktop width (1280 px), centered and framed so the constraint is obvious. This is the fastest way to feel why max-width, fluid grids, and the viewport meta tag matter: shrink the frame and watch a well-built page reflow while a brittle one overflows. The Responsive default simply fills the panel, which on a laptop is wide enough to test most desktop layouts already.
Why the head matters
Because this is a whole-document editor, the <head> is yours to edit — and it is where a surprising amount of real work happens. The favicon template, for instance, defines an emoji icon entirely inside one link tag, no image file needed; if you want the full picture, the favicon how-to walks through formats, sizes, and the mistakes that make icons silently fail. The meta template demonstrates the tags search engines and chat-app previews actually read. Editing head elements live, with instant feedback, is the difference between memorizing rules and seeing them work.
Your work is saved — locally
The document you are editing is kept in your browser’s local storage, so an accidental reload or a closed tab is not lost work. Reset restores the starter template and clears what was saved. Share packs the whole document into the link itself (the fragment after # is never sent to a server) so you can hand someone an exact copy — a teacher can share a broken page for students to fix, or you can keep a snippet on a second machine. Download saves the file as index.html, and Import opens any .html file from your computer.
Frequently asked questions
Can I use CSS and JavaScript in my HTML? Yes — <style> and <script> blocks work exactly as in any browser. The Web Playground splits HTML, CSS, and JS into three files if you prefer that layout.
Does it need the internet? Only to load the page. Once it is loaded, everything — editing, preview, console — works offline.
Is my HTML uploaded anywhere? No. The preview is generated in your browser. Saved documents live in local storage, and share links carry the code inside the URL itself.
Can I test forms, images, and links? Forms submit locally, images load from any URL you reference, and links open in new tabs. The sandbox keeps your preview isolated from the rest of the site, so experiments cannot leak anywhere.
Why does my page look different from my local file? If your local file relies on files next to it (a local styles.css, images in a folder), those paths resolve inside the sandbox instead — paste the relevant CSS into a <style> block to see the real result.