HTML Editor & Live Preview

Write HTML in a VS Code-class editor or a rich visual editor, with a live side-by-side preview you can resize to any device. Hover to inspect elements in both the code and the preview. Everything runs in your browser — nothing is uploaded.

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.

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

Common Use Cases

  • Prototype and Tweak Page Sections — Developers 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 Content — Write formatted content — headings, tables, images and links — visually, then copy clean HTML into a newsletter, CMS or knowledge base.
  • Learn and Teach HTML — Students and instructors experiment with HTML and instantly see the result, using hover-inspection to connect markup to what appears on screen.
  • Test Responsive Behavior — Preview a page at mobile, tablet and desktop widths, or a freeform size, to check how a layout adapts before shipping it.
  • Private, Offline HTML Editing — Anyone handling sensitive markup keeps everything on-device, with autosave and local document management and zero uploads.

How It Works
1

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.

2

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.

3

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.

4

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 Questions

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.

Related Tools

Favicon Generator Regex Tester & Live Preview Webfont Converter Audio Transcriber Run AI in the browser Invoice Builder