Does the formatter upload my HTML to a server?

No. All parsing and rendering happens in your browser. The markup never leaves the page, so it is safe to use with internal templates or client work.

What indent options are available?

You can pick 2 spaces, 4 spaces, or a tab character. The choice applies to every nested element, including children inside and blocks.

Will comments be preserved?

Yes. HTML comments ( ) are kept in place and re-indented along with surrounding tags. Conditional IE comments are also retained verbatim.

What happens if my HTML has a missing closing tag?

The parser is lenient and will format the document on a best-effort basis, mirroring how a browser would handle the same markup. Severely broken input may produce unexpected nesting.

prettier · html parser · live · client-side

Format HTML with Prettier

Pretty-print messy HTML with configurable indent and wrap width. Uses Prettier's standalone bundle so everything runs locally.

HTML Formatter

Input

112 B

1 lines

Output

0 B

1 lines

Status

parser…

Ratio

0.00×

out/in

input · html

output · formatted html

Loading parser…

Quick Start

How to format HTML

Prettier's HTML printer wraps long tag attributes, normalises whitespace, and indents children based on your settings.

01
Paste minified HTML
Drop any HTML — one-line markup, server-rendered output, or copy-paste from devtools.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
html5PrettierASTstandalonelazy
input · sourceraw · AST
```
<div><h1>Hi</h1></div>
```
loaded · parsedAST · ready
02
Tune indent & width
Set tab (spaces per level) and width (wrap column).
Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.
optionsindentprint-widthmemoisedlive
opts · optionstab/width · live
```
tab=2
width=80
```
options applied · livelive
03
Inspect output
Prettier reflows on the fly — long attribute lists break, void tags stay self-closed.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstable
out · formattedpretty · ready
```
<div>
  <h1>Hi</h1>
</div>
```
formatted · liveidempotent
04
Copy or download
Grab the result as .html or .txt — never leaves your browser.
Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.
exportclipboardbloblanguage MIMEclient-side
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don’t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Use Cases

When to format HTML

Email templates, SSR output, scraped markup.

Email templates

Format minified MJML or transactional HTML for review. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

SSR debug

Make server-rendered HTML readable for diff and review. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Scraped pages

Reformat scraped DOM dumps before parsing or storing. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Code reviews

Normalise contributor whitespace so diffs only show real changes. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Snapshot tests

Stable formatting keeps DOM snapshots from churning. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Docs & posts

Make embedded HTML blocks readable for blog and docs. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic

FAQ

Frequently asked questions

Which Prettier version?

Prettier 3 standalone with the HTML plugin — the same parser the CLI ships with.

Does this re-order attributes?

No. Prettier preserves attribute order; only whitespace and wrapping change.

What about <script> and <style> blocks?

Their inner contents are skipped here — use the JS, CSS, or SCSS formatter for those.

Will it touch <pre> contents?

No — Prettier respects whitespace-sensitive elements like <pre> and <textarea>.

Does my HTML leave the browser?

No — everything runs locally. The Prettier bundle is loaded once and runs in your tab.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!