A complete overhaul of the editor experience, bringing real syntax highlighting, dark mode, persistent auto-save, and a redesigned mobile layout.
Version 1 of the HTML Editor was built around a straightforward goal: a fast, no-install environment for writing and previewing HTML in the browser. v2.0 builds significantly on that foundation. The editing experience has been overhauled, several long-requested features have been added, and a number of bugs that affected core functionality have been resolved.
Below is a full breakdown of what changed and why.
v1 used a plain textarea as its editing surface. Code was displayed as uniform black text with no visual differentiation between tags, attributes, values, strings, or comments, which made reading and debugging HTML more difficult than necessary.
v2.0 replaces the textarea with a purpose-built code editor component that understands the layered structure of HTML documents. It applies HTML tokenization at the document level, CSS tokenization inside <style> blocks, and JavaScript tokenization inside <script> blocks, all simultaneously. HTML tags render in red, attributes in orange, string values in green, CSS properties in cyan, JavaScript keywords in purple, and comments in muted grey italic.
Several additional editing improvements ship alongside this. Bracket matching highlights the paired closing bracket when the cursor is adjacent to an opening one. Tags are closed automatically as you type. The Tab key inserts consistent two-space indentation rather than shifting focus away from the editor, which was the previous browser default behavior.
textarea with no code awarenessv2.0 introduces a full dark mode, accessible via the toggle in the top right corner. The entire page switches themes instantly, covering the background, header, navigation, tab controls, and the editor itself.
The editor uses a carefully selected dark color scheme that preserves all syntax token colors. The background color avoids pure black in favor of a dark grey that reduces eye strain during longer sessions while maintaining clear contrast between the editor surface and the surrounding page chrome. Token colors, particularly the distinction between tags, attributes, strings, and comments, remain clearly distinguishable in both light and dark modes.
In v1, there was no session persistence. Closing the tab, refreshing the page, or navigating away meant losing all work from the current session. The only option was to manually download the file before leaving.
v2.0 writes the editor contents to localStorage automatically on every change. On page load, the editor checks for a saved session and restores it before rendering, making the continuation seamless. There is no save button to remember and no delay. Work is preserved continuously in the background.
This is intentionally scoped to localStorage rather than a remote backend. No account is required, no data leaves the browser, and the saved state persists until the user explicitly clears it.
localStorage on every keystrokeThe v1 layout was optimized for desktop and did not scale well to smaller screens. On mobile, the header buttons would overflow their container, labels would be clipped, and the editor height did not account for the reduced viewport.
v2.0 introduces a responsive layout. On screens below 640px, the header reflows vertically with the action buttons sitting on their own row below the title. All buttons retain their text labels at every screen size. The editor and preview container heights scale proportionally to the viewport so the interface fits without layout issues.
A number of bugs present in v1 have been resolved in this release. Several were silent failures where the page loaded without errors but underlying functionality was not working as intended.
DOMContentLoaded blocks defined conflicting versions of updatePreview() and updateLineNumbers(), with the second silently overwriting the firstHTML Editor v2.0 is available now. No update is required. If you encounter any issues or have feedback, please use the contact page.