Logo

MonoCalc

/

HTML Prettier

Programming

Re-indents the markup with the style options below.

This mode overrides: bare attribute values (Minify only).

Load a sample

Ctrl/Cmd+Enter formats · Ctrl/Cmd+K clears

HTML source

Formatted HTML

Style

Two spaces, 80 columns, CSS whitespace rules - what `prettier index.html` gives you.
1–8 spaces per level.
Attributes wrap past this column (40–200).
Auto breaks only past the print width.
CSS respects each element's display; Strict never re-spaces a tag.
SVG and MathML names are always preserved.
How <br> and <img> are spelled.
Match the input keeps CRLF where it found it.

Runs entirely in your browser - your markup is never uploaded, and it is parsed, never rendered. Files up to 2 MB.

About This Tool

HTML Prettier - Format, Beautify and Validate HTML Online

HTML rarely arrives tidy. It comes out of a bundler as one 40,000-character line, out of a CMS export with mixed tabs and spaces, out of view source on a live page, or out of three developers who each had different editor settings. This HTML formatter re-prints it as indented, correctly nested markup - or squeezes it back down in minify mode - entirely inside your browser tab.

The markup is tokenized into a node tree that records every tag, every attribute exactly as written and every source offset, and the beautified output is printed by Prettier's own HTML printer. Raw-text elements are consumed as opaque text, so a <div> living inside a JavaScript string never becomes an element - the single most common way a regular-expression beautifier destroys a page.

Whitespace is not decoration

Most of the difficulty in formatting HTML is deciding which whitespace a browser actually paints. A newline between two <div> elements renders as nothing; the same newline between two <span> elements renders as a space, which is why <a>one</a> <a>two</a> and the same pair with no gap look different on screen. The formatter follows each element's default CSS display to tell those cases apart, and it never re-spaces the inside of <pre>, <textarea> or an element carrying xml:space="preserve".

What it handles

The full modern grammar: the HTML5 doctype; void elements such as <br>, <img> and <meta>, with an HTML5 versus XHTML self-closing toggle; raw-text <script> and <style> blocks, whose contents are re-indented by the real JavaScript and CSS printers; boolean and data- attributes; comments, conditional comments and CDATA; character entities; custom elements and web components; and SVG and MathML, where camelCase names like viewBox and preserveAspectRatio are case-sensitive and are never re-cased.

Structure warnings and repair

Because the document is parsed rather than pattern-matched, the same pass that formats can also report what is wrong with it: tags that were never closed, tags closed by the wrong closer, stray end tags with nothing to close, duplicate id values with every line they appear on, nesting HTML forbids such as <li> outside a list, and accessibility gaps such as an <img> with no alt or an <html> with no lang. Repairs a browser would make anyway - discarding a stray closer, writing in a missing </script> - are applied and listed, never applied silently.

Formatting, checked rather than promised
Every result is parsed a third time and compared against the tree built from your original input: same elements, same attributes, same text, same rendered whitespace. Options that genuinely rewrite the document - stripping comments, sorting attributes or classes, dropping empty attributes - are named in the summary, and anything else that fails to match is reported as a bug rather than shipped.

Templates, minification and diffs

<?php … ?> and <% … %> islands are lifted out before printing and restored untouched, since an HTML parser would end them at the first >. Minify mode removes only the whitespace a browser would not paint, drops comments while keeping IE conditional ones, collapses disabled="disabled" to disabled and can strip optional attribute quotes, reporting the bytes saved. Check-only mode shows a line-by-line diff instead of replacing your input.

Private by construction

Nothing is uploaded, nothing is logged, and no network request is made after the page loads - so markup carrying an API key in a data attribute, a customer name in a table or an unreleased headline stays on your machine. Files up to 2 MB can be dropped straight onto the editor.

Frequently Asked Questions

Is the HTML Prettier free?

Yes, HTML Prettier is totally free :)

Can I use the HTML Prettier offline?

Yes, you can install the webapp as PWA.

Is it safe to use HTML Prettier?

Yes, any data related to HTML Prettier only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does this HTML formatter work?

Your markup is tokenized in the browser into a node tree that records every tag, attribute and source offset, and the beautified output is printed by Prettier's own HTML printer at the width and indentation you choose. `<style>` and `<script>` bodies are handed to the CSS and JavaScript printers rather than guessed at, and the result is then parsed a third time and compared against the tree built from your original input, so anything the formatter changed beyond whitespace is reported instead of shipped quietly.

Is my markup uploaded anywhere?

No. Parsing, printing, minifying and validating all run inside your own tab, with no server round-trip and no logging. That matters for HTML in particular, because page source routinely carries API keys in `data-` attributes, customer names in a rendered table, staging URLs and unreleased copy.

Can formatting change how the page renders?

It should not, and the tool checks rather than promises. HTML has real rules about which whitespace is painted: a space between two inline elements is rendered, a newline between two block elements is not, and everything inside `<pre>`, `<textarea>` or an `xml:space="preserve"` element is byte-significant. The output is re-parsed and compared against your input under exactly those rules, and the comparison also catches a dropped attribute, a renamed tag, reordered elements or an `SVG` `viewBox` that lost its capital B.

What does it do with broken markup?

It formats it anyway and tells you what was wrong. Unclosed tags, tags closed by the wrong closer, stray end tags with nothing to close, duplicate `id` values, `<li>` outside a list and `<div>` inside `<p>` all become warnings with a line and column. Stray end tags and a missing `</script>` are spliced or written back in - which is exactly what a browser does with them - and every repair is listed rather than applied silently.

Will it break my Handlebars, Jinja, PHP or Vue template?

`<?php … ?>` and `<% … %>` blocks are lifted out before printing and put back untouched, because an HTML parser ends a processing instruction at the first `>` and would tear `echo "a > b"` in half. Conditional comments for old IE are copied through byte for byte for the same reason. `{{ … }}` and `{% … %}` islands are passed through as text, so they survive, but a block tag that opens inside one element and closes inside another may be re-wrapped - the tool warns when it detects template syntax.

What is the difference between Beautify, Minify and Check only?

Beautify re-indents the document for reading and review. Minify goes the other way: it removes whitespace only where a browser would not paint it, drops comments, collapses `disabled="disabled"` to `disabled` and can strip optional attribute quotes, with a live byte-savings readout. Check only formats internally and shows a line-by-line diff instead of replacing your input, so you can tell a reviewer that a commit is whitespace-only before you make it.