Browser 106

no file limit

Inspector developer/html-editor

HTML Editor & Live Preview

Overview

This HTML editor pairs a professional code editor with a visual rich editor and a live, responsive preview — all running entirely in your browser. Write real HTML with syntax highlighting, folding, tag auto-close and completion, or switch to the visual editor to format headings, tables, images and links without touching markup; both edit the same document. The preview renders side by side in a sandboxed iframe you can size to mobile, tablet, desktop or any custom width, with an optional column grid and Figma-style rulers for alignment. Turn on inspect to highlight any element in both the code and the preview as you hover. Documents autosave to local storage and can be cleared at any time, and you can export a self-contained HTML file, copy the markup, or print — all privately, and all offline once the page has loaded.

Prototype and Tweak Page SectionsDevelopers and designers draft landing sections, cards and layouts and see them render live at multiple screen sizes before pasting into a project.
Author Rich Email and CMS ContentWrite formatted content — headings, tables, images and links — visually, then copy clean HTML into a newsletter, CMS or knowledge base.
Learn and Teach HTMLStudents and instructors experiment with HTML and instantly see the result, using hover-inspection to connect markup to what appears on screen.
Test Responsive BehaviorPreview a page at mobile, tablet and desktop widths, or a freeform size, to check how a layout adapts before shipping it.
Private, Offline HTML EditingAnyone handling sensitive markup keeps everything on-device, with autosave and local document management and zero uploads.

Key features

Live side-by-side preview that renders as you type
VS Code-class code editor with syntax highlighting, folding, auto-close and completion
Visual rich editor for headings, tables, images, links and formatting
Switch any time between the code and the visual editor over one document
Responsive preview: mobile, tablet, desktop presets plus freeform drag-to-resize
Column grid and Figma-style rulers (top & left) for alignment
Optional hover inspection: highlight an element in both the code and the preview
Documents saved automatically in your browser (IndexedDB); clear all in one tap
Export as a self-contained .html file, copy the HTML, or print
Works fully offline and adapts to light and dark mode

Set

Developer Tools 06

Neighbours

01 CSS Grid Generator 02 Favicon Generator 03 Flexbox Generator 04 Regex Tester & Live Preview 05 Webfont Converter 06 Audio Transcriber

Specification

Command: developer.html_editor
Set: Developer
Input: text
Output: —
Max file: no limit
Batch: single file

Runtime

Engine: CodeMirror 6 · native
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

The file is opened, worked on and written back inside this tab. No upload step exists in this tool — there is nowhere for the bytes to go.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

Write in code or visually

Type real HTML in the code editor, or switch to the rich editor to format headings, tables, images and links visually. Both edit the same document.

Preview live, at any size

See a clean render side by side. Switch between mobile, tablet and desktop widths, drag the handle for a custom size, and toggle a column grid or Figma-style rulers.

Inspect on hover (optional)

Turn on inspect in the preview toolbar, then move your pointer over the code to outline the matching element in the preview, and over the preview to jump to its source in the code.

Save, export or print

Documents autosave locally in your browser. Download a self-contained .html file, copy the HTML, or print — all without uploading anything.

Frequently asked

Is my HTML private?

Completely. The editor, preview, and document storage all run inside your browser. Your code is never sent to a server — there are no uploads and no tracking.

What's the difference between the code and rich editors?

The code editor gives you full control over the entire HTML document — head, styles, scripts and body. The rich (visual) editor edits the visible body content and produces clean, semantic HTML; some advanced markup is simplified there, so use the code editor when you need exact control.

Can I preview different screen sizes?

Yes. Choose mobile, tablet or desktop presets, or drag the resize handle to any custom width. A column grid and Figma-style rulers help you check alignment.

Do scripts run in the preview?

Your document's own scripts run in a sandboxed iframe so you can preview interactive pages. You can turn script execution off with the run-scripts toggle in the preview toolbar.

Where are my documents stored?

In your browser's local IndexedDB storage on this device. They persist between visits but stay only on your computer. Use 'Clear all documents' to wipe them at any time.

Can I export my work?

Yes. Download your document as a self-contained .html file, copy the HTML to your clipboard, or print it directly from your browser.

Does it work offline?

Yes. Once the page has loaded, everything works without a connection, and your documents remain available locally the next time you open the tool.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

Related · Developer Tools