Arbenger HTML Editor is a free, browser-based editor for writing HTML, CSS, and JavaScript with a live preview that updates as you type. No account, no uploads, no server — your code never leaves your device. This guide walks through every feature.
100% Private
All code editing, formatting, linting, and previewing happens in your browser. Nothing is sent to a server. Your work persists in IndexedDB on your device.
What You'll Learn
1. The Editor
Three tabbed panes — HTML, CSS, and JavaScript — each powered by CodeMirror 6. You get syntax highlighting, auto-completion, bracket matching, code folding, and a custom theme that matches Arbenger's dark/light mode.
All three editors stay mounted when switching tabs — cursor position, scroll, and undo history are preserved.
2. Live Preview
The right panel shows a live preview that updates 300ms after you stop typing. Toggle between auto-run and manual mode with the play/pause button. Click the refresh icon to force a re-run.
Hello, World!
Start editing to see your changes live.
3. Prettier Formatting
Click Format in the editor toolbar or press Shift+Alt+F to format the active pane. Format All formats HTML, CSS, and JavaScript at once.
Prettier runs entirely in your browser via the standalone ESM build. No code is sent anywhere.
4. Error Detection
The editor catches errors as you type. Each language has its own linter:
HTML
Unclosed tags, unmatched closing tags, missing required elements
CSS
Mismatched braces, unexpected closing braces
JavaScript
Syntax errors caught before execution via parse-only check
5. Emmet Abbreviations
Type an Emmet abbreviation and press Tab to expand it. Works in both HTML and CSS panes.
| Type | Get |
|---|---|
| ul>li*3 | <ul><li></li> ×3</ul> |
| div.card>h2+p | <div class="card"><h2>+<p></div> |
| m10 | margin: 10px; |
| bgc | background-color: #fff; |
6. Responsive Device Preview
Test your layout at three fixed viewport sizes, each rendered inside a realistic device frame. A rotation toggle switches between portrait and landscape.
Mobile
375 × 667
Tablet
768 × 1024
Desktop
1440 × 900
7. Built-in Console
A collapsible console panel below the preview captures console.log, warn, error, and info output from your JavaScript. Runtime errors and unhandled promise rejections are captured too.
Filter by level (All / Log / Warn / Error / Info) and clear with one click. The console auto-clears when the preview re-renders.
8. Export
Two export options, both client-side:
ZIP
Three separate files: index.html, style.css, script.js. Ready to open in any code editor.
Standalone HTML
Single index.html file with CSS in a <style> tag and JS in a <script> tag. Open directly in a browser.
Why We Built This
Most online HTML editors either paywall basic features like private pens, or load 5-10MB of IDE framework for a task that should be instant. We wanted something in between: a clean editor with real developer tools (Prettier, linting, Emmet, device preview) that loads fast, works offline, and never touches your code.
Under the Hood
- CodeMirror 6 — modular editor core (~300KB vs Monaco's 5-10MB). Mobile-first, accessible.
- Prettier Standalone — same formatter used by most professional codebases, compiled to run in the browser.
- Sandboxed iframe — preview runs in an isolated iframe. User code cannot access the host page.
- IndexedDB persistence — your code auto-saves to your browser. No cloud, no login.