HTML Editor Online — Free Browser-Based HTML Editor

Edit HTML in a two-pane workspace with one-click formatting. Configurable 2-space, 4-space, or tab indent — void-element aware and comment-preserving. 100% in your browser.

Indent:

HTML Input

Formatted HTML

What is an Online HTML Editor?

An online HTML editor is a browser-resident workspace for writing, pasting, and reformatting HTML — no IDE, no install, no commit history needed. The OpenFormatter HTML editor pairs a paste-friendly input pane with a one-click formatter: every Run rewrites your markup with consistent indentation, one element per line, and void elements collapsed onto a single line.

It is the right tool for fast iteration — pasting an email template to clean it up, prototyping a landing page hero, formatting a snippet for a blog post, or fixing the markup a CMS WYSIWYG mangled. For deeper inspection use the read-only HTML viewer; for a single one-shot reformat use the HTML formatter; for the full editing loop, use this page.

How to use the HTML editor — 4 steps

Paste or type HTML. The Input pane accepts any HTML — full documents, fragments, or single elements. Click Load Sample to start from a small demo page.
Pick an indent. Use the toolbar dropdown to choose 2 spaces, 4 spaces, or a tab — match the convention of the project you are editing for.
Click Run. The formatter tokenises the HTML, recognises void and self-closing elements, and emits a clean, line-per-element output.
Edit, reformat, copy. Edit the input as much as you like — every Run produces a fresh output. Click Copy when you are done.

Sample one-line input vs formatted output

One-line HTML

<header><h1>Welcome</h1><nav><a href="/">Home</a><a href="/about">About</a></nav></header>

Formatted HTML

<header>
  <h1>Welcome</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

Two-Pane Workspace

Input on the left, formatted output on the right. Iterate as long as you like — every Run produces a fresh, consistently-indented output.

Configurable Indent

Pick 2 spaces, 4 spaces, or tab from the toolbar dropdown to match Prettier defaults, .editorconfig, or your house style.

Browser-Only Editing

Markup, inline JSON, API keys in script tags — none of it leaves your device. The editor runs entirely in JavaScript on your machine.

Common use cases

check_circleEditing transactional or marketing email HTML before sending through SES, SendGrid, or Postmark
check_circleFixing markup that a CMS WYSIWYG editor mangled — wrapped <p> in <p>, stray <br>, etc.
check_circlePrototyping landing-page hero sections without spinning up a full Next.js project
check_circleCleaning HTML pasted from Word, Google Docs, or another editor before publishing
check_circleFormatting auto-generated HTML from a code generator before committing to a repo
check_circleIterating on a documentation snippet that you will paste into a Markdown file
check_circleEditing a single email template on a phone or Chromebook with no IDE installed
check_circleReformatting a minified HTML email signature before reuse in another client

HTML editor vs HTML viewer vs HTML formatter

All three operate on HTML, but each has a different shape. HTML viewer is read-only — it renders the parsed structure as a navigable tree so you can inspect what the browser sees. HTML formatter is one-shot — paste, format, copy, leave. HTML editor is the workspace: you edit, reformat, edit again, reformat again, all in one tab without losing scroll position. Pick the editor when you are iterating; pick the formatter when you have one job; pick the viewer when you only need to read.

More HTML utilities

View, validate, or shrink HTML with the rest of the OpenFormatter HTML toolkit — all browser-side.

HTML Formatter HTML Viewer HTML Validator

Frequently Asked Questions

How is this HTML editor different from an XML viewer?

An XML viewer renders a parsed tree as a collapsible outline so you can navigate the structure — it is read-only by design. This HTML editor is a writable two-pane workspace: you type or paste HTML on the left, the formatted output appears on the right, and you reformat any time with the Run button. The XML viewer answers "what is in this document"; the HTML editor answers "let me change this document".

Does the editor offer real-time validation?

It does syntax-shape validation at format time — unbalanced tags surface as a misindented output and the formatter sets indent level back to zero on a stray closing tag. For full HTML5 conformance checking with attribute and content-model rules, run the output through the W3C Nu Html Checker or our html-validator tool. The editor focuses on responsiveness; validators focus on completeness.

Will the editor auto-close tags as I type?

No. This is a deliberately minimal textarea-based editor — what you type is what you get. Auto-close, snippets, and Emmet are intentionally omitted because they hide character-level changes and confuse beginners learning HTML. For auto-close, use VS Code or the Codespaces editor; for paste-and-tidy, this is faster.

Can I switch indentation between 2 spaces, 4 spaces, and tabs?

Yes. The toolbar dropdown picks 2 spaces (Google / Airbnb default), 4 spaces (PEP-style), or a tab character. Switching the dropdown then clicking Run reformats the output to the new convention. The convention is applied uniformly so the resulting file matches your project Prettier or .editorconfig settings.

How does the editor handle void elements like <br> and <img>?

Void elements never get a child indent. The formatter detects br, hr, img, input, link, meta, area, base, col, embed, param, source, track, and wbr — emits them on a single line, and does not increase the indent level afterwards. This matches HTML5 parsing rules and prevents the cascading-indent bug that plagues naive formatters.

Is the HTML I paste sent to your servers?

No. Editing and formatting run entirely in your browser. Pages containing API keys in script tags, customer data in inline JSON, or proprietary CSS classes never leave your device. Open DevTools → Network and click Run to confirm no requests are made.

How is the editor different from html-formatter and html-viewer?

html-viewer is read-only — it parses and displays. html-formatter is one-shot — paste, click, copy. html-editor is the workspace: you can edit, reformat, edit again, reformat again, all in one tab. Use the editor when you are iterating on HTML; use the formatter for a single quick reformat.

Does the editor preserve HTML comments?

Yes. The tokeniser recognises  as a single token and emits it intact at the current indent level. Comments survive arbitrarily many format passes — they are never stripped, reordered, or split across lines.