HTML Pretty Print
Pretty-print HTML with clean indentation so it's easy to read and review. It runs entirely on your device — nothing is uploaded.
Example
Input
<ul><li>a</li><li>b</li></ul>
Output
<ul>
<li>a</li>
<li>b</li>
</ul>
How it works
Prettier parses the markup and re-emits it with tidy, consistent formatting.
Good to know
HTML Pretty Print takes a block of markup — whether it arrived as a single unbroken line, came out of a build step, or was copied from "view source" — and re-emits it with consistent indentation and one element per line. It's aimed at front-end developers, QA testers, and anyone reviewing or debugging HTML who needs to actually see the nesting structure instead of squinting at a wall of tags.
Reach for it when you've pasted minified output and can't tell which closing tag belongs to which container, when you're comparing two snippets in a diff and want both formatted the same way first, or when you're pasting fragments into documentation or a bug report and want them legible. Because it uses Prettier under the hood, the formatting is opinionated and stable, so running the same input twice always gives the same result.
Read the output by following the indentation: each level of nesting steps in by two spaces, so a child element always sits to the right of its parent and the matching close tag lines up at the same depth. If a tag stays inline with its text rather than breaking onto its own line, that's Prettier respecting whitespace-sensitive elements (like inline content) where adding line breaks could change how the page renders.
A practical caveat: this is a formatter, not a validator or a fixer. Prettier needs to parse the markup, so badly broken or non-HTML input may fail to format or come out unexpectedly — and it won't tell you a tag is unclosed. If you need that, pair it with the linked HTML Validator. Everything runs in your browser via the bundled Prettier library, so large documents are handled locally with nothing uploaded.
Frequently asked questions
Is my data uploaded anywhere?
No — everything runs in your browser. Your code never leaves your device, so it's safe for private work and runs offline once loaded.
Is this tool free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between pretty printing and formatting HTML?
In practice they refer to the same thing — re-indenting and adding line breaks so markup is readable. "Pretty print" emphasizes the human-readable output, while "format" is the broader term that can also include applying style rules like attribute wrapping and quote consistency.
Does pretty printing HTML change how the page renders?
For most elements it does not, because the browser ignores extra whitespace between tags. The formatter deliberately keeps whitespace-sensitive elements inline to avoid altering visible spacing or layout, so the rendered result stays the same.
What indentation does this tool use for HTML?
It applies Prettier's default of two-space indentation, with each nested level stepping in by two more spaces. The formatting is consistent every time you run it on the same input.
Can I pretty print HTML that contains inline CSS or JavaScript?
Prettier can format embedded <style> and <script> content along with the surrounding markup, so inline CSS and scripts are generally tidied too. Very unusual or syntactically broken embedded code may not reformat cleanly.
How do I reverse pretty printing and make HTML compact again?
Use a minifier instead of a formatter — it strips the added line breaks and indentation to shrink the file. CalcCafe links a Minify HTML tool for exactly that purpose.
Will pretty printing fix broken or invalid HTML?
No. A formatter only re-indents markup it can parse; it does not close missing tags or report errors. Use an HTML validator to catch structural problems.
Is there a size limit on how much HTML I can format?
There is no enforced limit since processing happens locally in your browser. Very large documents simply depend on your device's memory and may take a moment to format.
Why does my output still have some tags on the same line?
That usually means those elements are whitespace-sensitive, so breaking them onto separate lines could change how the content displays. The formatter keeps them inline on purpose to preserve the original rendering.
Related tools