How HTML beautification works
The beautifier reads your markup tag by tag, tracks how deeply each element is nested, and re-emits it with consistent indentation. It never changes what the page renders — only how the source is laid out.
- Parse the tags. The library scans your input into a stream of tokens: opening tags, closing tags, text content, comments, and the contents of script and style blocks. Quoted attribute values and the bodies of pre and textarea elements are treated as single units, so the whitespace inside them is left alone.
- Track the nesting. As it walks the token stream, the beautifier keeps a running indent level. Every opening tag that isn't self-closing pushes the level one step deeper; every matching closing tag pops it back out. That depth decides how many indent units sit in front of each line you get back.
- Apply your options. Your indent choice — 2 spaces, 4 spaces, or a tab — sets the width of one level. The wrap-at-column value breaks long lines of attributes or text once they pass the column you pick. The blank-line cap collapses long runs of empty lines down to the limit you set.
- Re-emit the markup. Finally the formatter prints the tags back out with the indentation and line breaks it has worked out. If you turned on inline formatting, the contents of each style block run through the CSS formatter and each script block through the JS formatter, so the embedded code lines up with the markup around it.
Why beautify HTML
- Read minified pages. Production HTML ships with the line breaks stripped out to save bytes. Beautifying puts the structure back so you can find the section you're after, spot a missing closing tag, and follow how the document actually nests.
- Tidy inconsistent templates. Markup that several people have edited drifts into mixed indentation and tag placement. One pass through the beautifier normalizes the whole file, so the next commit shows the change you made rather than a wall of reformatted whitespace.
- Doesn't slow your page down. Most online formatters pull their whole library the moment the page opens. This one fetches js-beautify only when you click Beautify or switch Live mode on, so the first load costs a few kilobytes instead of a few hundred and the page stays quick.
- Nothing leaves your browser. The whole thing runs on your device. Your markup is never uploaded to a server, which matters when the page belongs to a client, holds internal URLs, or falls under a confidentiality agreement you've signed.
Common applications
Beautifying HTML comes up whenever someone needs to read markup that wasn't written to be read.
- Inspecting a live page: paste the minified source from View Source to find the markup behind a layout bug you can't reproduce locally.
- Cleaning up CMS output: reformat a template that a page builder exported on one line before you commit it back to the repository.
- Accessibility and SEO reviews: expand the document so you can check heading order, landmark structure, and alt attributes against the real DOM.
A worked example
Take a minified snippet: <div><p>hi</p><span>x</span></div>. Paste it above with indentation set to 2 spaces, then click Beautify. You get back a readable block: the <div> on its own line, the <p>hi</p> and <span>x</span> each indented one level beneath it, and the matching </div> lined up underneath. Switch indentation to Tabs and every level shifts from two spaces to a tab. Add a <style>a{color:red}</style> block, turn on "Also format inline CSS & JS," and the rule expands onto its own indented lines instead of staying on one.
FAQ
Does this run in my browser?
Yes. The js-beautify library is fetched the first time you click Beautify or enable Live mode, then cached. Your markup never leaves the page — there is no server round-trip and no upload.
Will beautifying change how my page renders?
No. The beautifier only adds and removes whitespace and line breaks between tags. The browser ignores that whitespace when it builds the page, so the rendered result is identical. The one thing to watch is whitespace-sensitive content inside pre, textarea, or inline elements, which the formatter deliberately leaves untouched.
What does the inline CSS and JS toggle do?
With it off, the contents of style and script blocks are left exactly as you pasted them. Turn it on and the CSS inside each style block runs through the CSS formatter and the JavaScript inside each script block through the JS formatter, so the embedded code is indented to match the surrounding markup.
What does "wrap at column" do?
It sets the line length at which a tag with many attributes, or a long run of text, gets broken onto multiple lines. Leave it at 0 to keep each element on a single line no matter how long. Set it to 80 or 120 and the formatter wraps anything past that column, which keeps wide elements readable in a narrow editor.
Browser-side HTML beautification gives you readable markup without a build step or an upload. Paste a minified or messy page, pick your indentation and wrap width, decide whether to reformat the inline CSS and JS, then copy or download the result. Nothing leaves your device, there's no account, and the library only loads when you ask for it, so opening this page costs you a few kilobytes rather than a megabyte.