HTML Online Editor
Write HTML, CSS and JavaScript on the left, see the result on the right the moment you hit Run. Nothing to install, no account, and your code never leaves the browser — a scratchpad for testing a snippet, learning markup or prototyping a layout in seconds.
- Runs locally
- Free forever
- No sign-up
HTML Source
Live Preview
What Can You Do With This Editor?
A local code editor is the right tool for building a website. It is the wrong tool for answering the question "what does this tag actually do?" — by the time you have created a folder, saved a file and refreshed a browser tab, you have lost the thread. An online HTML editor closes that gap: type, press Run, see the result. No install, no project setup, no build step.
What you write here is a complete HTML document, so inline CSS and JavaScript work exactly as they would in a real file. The preview runs in a sandboxed iframe, which means your scripts execute normally but cannot touch this page. Turn on Auto-run and the preview refreshes as you type; leave it off and you control when the page reloads — useful when a script has side effects you do not want firing on every keystroke.
Learning HTML
Reading about flex-direction teaches you less in ten minutes than changing it and watching boxes move teaches you in ten seconds.
Edit the sample document, break it deliberately, and press Reset when you want a clean slate back.
Start: change a colour, then a tag
Quick prototyping
Sketching a card layout or testing whether a grid idea holds up does not deserve a whole project folder and a dev server.
Rough it out here first, and once it works, download the file and drop it into your real codebase.
Turn on Auto-run for tight feedback
Debugging a snippet
When a component misbehaves inside a large application, the fastest diagnosis is to pull the markup out and see whether it still breaks on its own.
If it works here in isolation, the bug lives in your surrounding CSS or framework — not in the snippet.
Paste the fragment, strip until it works
Sharing snippets
Explaining code in a chat message is painful. Showing the rendered result next to the source is not.
Copy the code with one click to paste into an email or ticket, or download it as a working index.html the other person can just open.
Copy Code, or Download to send a file
Frequently Asked Questions
Is my code saved or sent to a server?
Neither. The editor is a single page with no backend — your code lives in the textarea and in the preview iframe, both entirely in your browser's memory. Nothing is transmitted, logged or stored, and there is no account to create.
You can confirm it in seconds: open developer tools, watch the Network tab, and press Run. No request goes out. The flip side is that closing or reloading the tab discards your work, so use Download or Copy Code before you navigate away from anything you want to keep.
Can I run JavaScript in the editor?
Yes. Anything inside a <script> tag executes when the preview loads, including DOM manipulation, event listeners, timers and fetch calls. The sample document ships with a small click handler so you can see it working immediately.
The preview runs inside a sandboxed iframe with scripts and modal dialogs allowed. That isolation is deliberate: your code can do whatever it likes inside the frame, but it cannot reach into this page, read the parent document or navigate you elsewhere.
Why isn't my CSS or JavaScript working?
Four causes account for nearly every case. You forgot to press Run — the preview only updates on demand unless Auto-run is on. An unclosed tag earlier in the document is swallowing everything after it; browsers recover from malformed HTML silently rather than reporting an error. Your CSS lives outside a <style> block, or your script outside <script>. Or a script runs before the element it targets exists — move it to the end of <body>.
One genuine limitation: because the frame is sandboxed and has no same-origin privileges, some external resources behave differently than they would on a real domain. Requests to APIs that require credentials or specific CORS headers will fail. Plain CDN stylesheets and images generally load fine.
Can I use this on a phone or tablet?
Yes — below 768px the layout stacks the editor above the preview so both stay usable, and the toolbar wraps rather than overflowing.
That said, writing code on a touch keyboard is genuinely awkward: no Tab key, no easy access to angle brackets, and a much smaller viewport. Mobile works well for reading a snippet someone sent you, tweaking a value or checking how something renders. For real editing, a desktop or an external keyboard is worth the switch.
How do I download my HTML file?
Press Download in the toolbar. The current editor contents are saved as index.html in your browser's downloads folder — a complete, standalone file you can double-click to open, upload to any host, or drop into a project.
Since everything is inline, there are no linked stylesheets or scripts to keep track of. If you would rather move the code somewhere else without a file, Copy Code puts the whole document on your clipboard, and Open in new tab renders it full-screen for a proper look or a clean screenshot.
Is this editor free?
Yes, permanently, with no account, no trial period, no watermark and no feature locked behind a paywall. There is no usage limit either, because there is no server doing the work — your own browser is running the whole thing.
The site is funded by advertising, which is why you may see ads around this tool. The tool itself does not collect your code, track what you write or require anything from you.
Related Tools
Other browser-based tools from this site, plus two established playgrounds worth knowing when you outgrow a single-file scratchpad.
Image Compressor
Shrink the images you embed in a page. Oversized files are the most common reason a working prototype feels slow in the real world.
Use tool → 🔄Image Format Converter
Convert PNG, JPEG, WebP and AVIF. Handy when a mockup needs WebP versions of assets before it goes near production.
Use tool → ✂Background Removal
Produce a transparent PNG for a hero image or avatar without opening an image editor.
Use tool → 💻CodePenExternal
A full online IDE with separate HTML, CSS and JS panes, preprocessor support and a huge public gallery. The right next step when one file stops being enough.
Visit codepen.io → 🎪JSFiddleExternal
The long-running snippet-sharing platform. Its permanent URLs make it the standard way to attach a reproducible test case to a bug report.
Visit jsfiddle.net →