Free · no sign-up · nothing uploaded
An online HTML editor built for debugging, not just previewing
htmlEdits is a free HTML editor and tester that runs entirely in your browser. Write HTML, CSS and JavaScript, see a live preview as you type, then pop the result into its own tab to inspect it with real DevTools. Every change is saved as a version you can compare and roll back, all on your own machine.
What makes htmlEdits different
Most online HTML playgrounds are built around sharing. htmlEdits is built around the work in between: finding the bug, fixing it, and knowing what you changed.
Detach the result into its own tab, then press F12 Core
One click opens your page in a separate browser tab with nothing wrapped around it and nothing injected into it, so DevTools shows your page and only your page.
- The detached tab reloads automatically every time you edit, so DevTools stays open while you work.
- No account, no saved project, no special link needed to use it.
- Close the tab and the result slides back into the editor.
Local version control for HTML
Source control for quick experiments, without Git, a repo or a login.
- Automatic versions as you work, plus named and starred saves.
- Compare any two versions side by side or unified, with changed words highlighted.
- Scrub a timeline from oldest to newest, then restore with one click. Restores can be undone.
- Stored only in your browser. Nothing is sent anywhere.
Hover link: code ↔ preview
Hover a tag in the editor and its element lights up in the preview, with its size. Hover an element in the preview and its code is highlighted and scrolled into view.
- Find which
<div>is which in seconds. - Line numbers in error messages stay accurate.
Edit text right in the preview
Double-click any text in the result (a heading, a button label, a list item), type, and press Enter. The matching text in your source code updates instantly.
- Only the characters you changed are rewritten. Indentation and entities like
&are kept.
Private by design
No servers, no accounts, no tracking. Your code never leaves your browser, which makes htmlEdits safe for work code you can't paste into public sites.
- Download your page as a file any time.
How to test HTML online in three steps
- Write, paste or drop your HTML into the editor. Press Ctrl/⌘ + V anywhere on the page, or drag an
.htmlfile in. Include<style>and<script>tags just as you would in a real page. - Watch the live preview update as you type. Use the width menu to check phone, tablet and laptop layouts.
- Click Detach result and press F12 in the new tab to inspect elements, read the console and profile performance with your browser's DevTools.
htmlEdits vs. typical online HTML playgrounds
| Feature | htmlEdits | Typical online playground |
|---|---|---|
| Sign-up required | Never | Often, to save or unlock features |
| Where your code is stored | Only in your browser | On the provider's servers |
| Result in its own tab for DevTools | One click, no account | Sometimes; may need a saved project or login |
| Separate tab updates live as you type | Yes | Usually a manual refresh |
| Version history | Automatic, local, unlimited starred | Server-side, often tied to an account or plan |
| Side-by-side diff between versions | Yes, with word-level highlights | Rare |
| Edit text in the preview, source updates | Yes | Rare |
| Two-way code ↔ preview highlighting | Yes | Rare |
Comparison reflects common behaviour of popular online code playgrounds; individual tools and plans vary.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| Ctrl/⌘ + Enter | Restart the page from scratch |
| Ctrl/⌘ + Shift + Enter | Open the result in its own tab |
| Ctrl/⌘ + S | Save a named version |
| Ctrl/⌘ + V anywhere on the page | Load your clipboard into the editor |
Drop an .html file on the page | Open it in the editor |
| Double-click text in the result | Edit it in place (Enter saves, Esc cancels) |
| ← → or ↑ ↓ in History | Step through versions |
Frequently asked questions
Is htmlEdits free?
Yes. It's completely free, with no sign-up, no account and no paid tier.
Where is my code stored?
Only in your own browser, using localStorage. htmlEdits has no server, so your code and version history are never uploaded. Clearing your browser's site data deletes them, so download anything you want to keep.
How do I debug my HTML with DevTools?
Click Detach result. Your page opens in its own tab with nothing injected, so you can press F12 and use the full DevTools. The tab reloads automatically every time you edit. Turn on "Preserve log" in the console to keep logs across reloads.
Does htmlEdits have version control?
Yes. It saves versions automatically as you work, lets you name and star versions, compares any two side by side with highlighted changes, and restores an older version with undo. Up to 80 automatic versions are kept, and starred versions are never cleared automatically.
Can I use CSS and JavaScript?
Yes. Write a normal HTML document with <style> and <script> tags, or link to libraries from a CDN. htmlEdits runs it exactly as a browser would.
Is htmlEdits an alternative to CodePen or JSFiddle?
For quickly writing, testing and debugging a single HTML page, yes. htmlEdits focuses on private, local work and debugging rather than sharing and community features, and it never asks you to sign up.
Does it work on phones and tablets?
The editor, live preview and history work on mobile. Browser DevTools are a desktop feature, so detaching for F12 is most useful on a computer.