Skip to main content
Markup

HTML Formatter with Preview

Indent HTML source by 2, 4, or 8 spaces, collapse it with the minify option, and inspect the original input through a DOMPurify-sanitized sandboxed preview. Helpful for developers debugging templates, reviewing generated markup, and preparing HTML for version control diffs. Catches structural issues early.

Web formatters

In brief

Beautify ordinary HTML for review while recognizing that formatting is heuristic, minification can change whitespace semantics, and only the preview—not copied or downloaded source—is sanitized.

What this tool supports

  • Typed, pasted, sample, or imported .html/.htm text; the formatter does not parse a DOM or validate document conformance.
  • Regular-expression replacements split tags and adjust indentation; 2, 4, or 8 spaces are available, while Minify collapses whitespace and gaps between tags.
  • Formatted source can be copied or downloaded as formatted.html. Preview mode sanitizes the original input with DOMPurify and inserts it into a sandboxed iframe with a restrictive CSP.
  • Format embedded CSS separately with CSS Formatter, then inspect untrusted rendered fragments with the sanitized Markdown HTML Viewer where appropriate.
  • No. DOMPurify and iframe restrictions apply only to Preview; the source output may still contain scripts, event handlers, links, or other active markup.

How to use HTML Formatter with Preview

Complete a verifiable HTML Formatter with Preview workflow in this browser.

  1. 1

    Step 1

    Provide the exact input

    Typed, pasted, sample, or imported .html/.htm text; the formatter does not parse a DOM or validate document conformance.

  2. 2

    Step 2

    Set the available controls

    Choose Format or Minify, indentation 2/4/8, live processing, and Code or Preview. There is no parser repair, validation report, or configurable sanitizer policy.

  3. 3

    Step 3

    Run the operation

    Regular-expression replacements split tags and adjust indentation; 2, 4, or 8 spaces are available, while Minify collapses whitespace and gaps between tags.

  4. 4

    Step 4

    Verify the result

    Compare structure in a real HTML parser and test whitespace-sensitive elements such as pre, textarea, script, style, and templates before replacing source.

  5. 5

    Step 5

    Continue or export

    Format embedded CSS separately with CSS Formatter, then inspect untrusted rendered fragments with the sanitized Markdown HTML Viewer where appropriate.

Common mistakes

Using the sandboxed preview to test scripts, forms, or network-dependent widgets

Consequence: Preview sanitization and its restrictive iframe CSP deliberately remove active markup and block capabilities, so interactive production behavior can appear broken even when the source is unchanged.

Fix: Use Preview only to inspect sanitized static rendering; test active behavior in an isolated, audited application environment.

Publishing the copied or downloaded source because Preview looked safe

Consequence: DOMPurify and the iframe restrictions protect only the Preview path. The formatted source can still contain scripts, event handlers, unsafe URLs, and other active markup.

Fix: Send publishable HTML through the application’s audited sanitizer and validation pipeline; never substitute this preview for server or build-time security controls.

Overlooking this edge case: Why can formatted or minified HTML behave differently from the input?

Consequence: The formatter is regex-based rather than HTML-tokenizer-based, and whitespace collapsing or tag splitting can alter raw-text, preformatted, inline, malformed, or template content.

Fix: Use a standards-aware HTML parser/formatter for production source and preserve a fixture that exercises whitespace-sensitive nodes.

Best practices

  • Compare structure in a real HTML parser and test whitespace-sensitive elements such as pre, textarea, script, style, and templates before replacing source.
  • Use a standards-aware HTML parser/formatter for production source and preserve a fixture that exercises whitespace-sensitive nodes.
  • Never treat a pleasant preview as proof that the original source is safe, valid, accessible, or production-equivalent.

Connected workflows

Format source without mistaking preview for sanitization

HTML Formatter with PreviewCSS FormatterMarkdown to HTML Viewer

Format embedded CSS separately with CSS Formatter, then inspect untrusted rendered fragments with the sanitized Markdown HTML Viewer where appropriate.

  1. Preserve the original HTML and a fixture containing pre, textarea, script, style, and template content
  2. Format only for source review, then compare the parsed structure with the original
  3. Check whitespace-sensitive and malformed markup in a standards-aware parser
  4. Use Preview to inspect the sanitized static rendering, not active behavior
  5. Publish only through the application’s audited sanitizer and build pipeline

Browser limitations

  • The formatter is regex-based rather than HTML-tokenizer-based, and whitespace collapsing or tag splitting can alter raw-text, preformatted, inline, malformed, or template content.
  • Input, formatted output, sanitized preview markup, and iframe document can coexist in memory; very large documents can pause the tab.
  • DOMPurify and iframe sandbox support vary by browser, and the preview is intentionally not a full networked web-page runtime.

Authoritative resources

HTML Standard: SyntaxPublisher: WHATWG · Reviewed: 2026-07-26HTML Standard: iframe sandbox and srcdocPublisher: WHATWG · Reviewed: 2026-07-26DOMPurifyPublisher: Cure53 · Reviewed: 2026-07-26

Concrete examples

Input
<div><span>Hi</span></div>
Result
<div> <span> Hi </span> </div>

With two-space indentation the heuristic places tags and text on nested lines; a conforming parser should still verify real documents.

Frequently asked questions

Does the formatter parse HTML or only rearrange source text?

Typed, pasted, sample, or imported .html/.htm text; the formatter does not parse a DOM or validate document conformance.

Why can formatted or minified HTML behave differently from the input?

The formatter is regex-based rather than HTML-tokenizer-based, and whitespace collapsing or tag splitting can alter raw-text, preformatted, inline, malformed, or template content.

Is the copied or downloaded HTML sanitized and safe to publish?

No. DOMPurify and iframe restrictions apply only to Preview; the source output may still contain scripts, event handlers, links, or other active markup.

Which elements need a parser-based comparison after formatting?

Compare structure in a real HTML parser and test whitespace-sensitive elements such as pre, textarea, script, style, and templates before replacing source.

Is imported HTML or iframe preview content uploaded?

Source, DOMPurify processing, iframe srcdoc, clipboard, and download remain in this browser. No HTML is uploaded; preview deliberately blocks scripts and network-capable attributes.

How should embedded CSS and untrusted fragments be reviewed?

Format embedded CSS separately with CSS Formatter, then inspect untrusted rendered fragments with the sanitized Markdown HTML Viewer where appropriate.

Privacy and offline behavior

Source, DOMPurify processing, iframe srcdoc, clipboard, and download remain in this browser. No HTML is uploaded; preview deliberately blocks scripts and network-capable attributes.

Related tools