How do I turn a minified one-line HTML page back into readable code?

Paste the compressed markup into the input box and the formatter rebuilds the structure for you. It reads the tag hierarchy, drops each element onto its own line, and indents children one level deeper than their parent. For example ` One Two ` becomes a ul on line one, two indented li lines, and a closing ul, so you can actually read the nesting. Pick 2 spaces, 4 spaces or a tab from the indent control to match your project style.

How are void elements like br, img and input handled?

Void (self-closing) elements never get a closing tag or an indent step, because they cannot hold children. So ` ` and ` ` and ` ` each land on their own line at the current depth and the next sibling stays at the same indent rather than being pushed one level in. This matches the HTML5 spec list of void elements (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr).

Will the content inside pre, script or style get reflowed?

No. The text inside pre, textarea, script and style is preserved verbatim, byte for byte. These are whitespace-significant or raw-text regions, so reindenting them would change what renders or break the code. If you have a ` ` ASCII art block or a multi-line inline ` `, the formatter passes it straight through and only indents the surrounding tags, never the protected body.

Is this the opposite of an HTML minifier?

Yes, roughly. A minifier strips whitespace and line breaks to shrink the file for shipping; a formatter adds whitespace and line breaks back so a human can read and edit it. Use the formatter while you work and debug, then run the html-minifier before deploying to production. The two are a round trip: beautify to read, minify to ship, and the rendered page looks the same either way.

Does formatting change what my HTML means or how it renders?

For normal markup the formatter only adds insignificant whitespace between tags, which browsers ignore, so the rendered page is identical. The one thing to know: whitespace between inline elements (like a space between two ` ` links) is significant, so keep the inline on-same-line switch on when a sentence mixes text and inline tags, or you might see an extra gap. Protected regions (pre, script, style, textarea) are never touched, so their meaning is fully preserved.

Read minified HTML you pulled from view-source

You open view-source on a live page and the whole body is one unreadable line. Copy it, paste it here, and the formatter expands it into an indented tree so you can find the one div with the class you need. No build tools, no editor extension, no round trip through a local file just to see the structure of someone else's page.

Clean up HTML a CMS or email tool spat out

WYSIWYG editors and email builders often export HTML as a wall of nested tables and inline styles with zero formatting. Drop it in, beautify it, and suddenly you can see the table structure, spot the stray closing tag, and edit the markup by hand instead of fighting a one-line blob in a textarea.

Make a diff readable before committing

A teammate committed a template as one minified line and now every change shows up as a giant single-line diff. Format both versions to consistent 2-space indent, paste them into your diff tool, and the real change stands out line by line instead of hiding inside an unreadable string.

Tidy a snippet before pasting into docs or a tutorial

You are writing a blog post or README and want the example HTML to look professional. Run your snippet through the formatter with the indent width your code blocks use, keep inline tags on one line so prose examples read naturally, and paste clean, consistent markup that readers can copy without reformatting.

HTML Formatter — Beautify and Indent Messy HTML

Beautify minified or messy HTML into clean indented markup, browser-only

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Indent:

Keep inline tags on same line

Input

Output

Formatted output appears here.

What this tool does

Free online HTML formatter and beautifier that turns a minified or messy one-line page into clean, indented, readable markup. Paste compressed HTML and the tool walks the tag hierarchy, putting each element on its own line and indenting by depth with your choice of 2 spaces, 4 spaces or a tab. Void elements like br, img, input and meta never get a phantom closing indent, and you can keep inline elements such as span, a, b and i on the same line so a sentence does not shatter into one word per row. The contents of pre, textarea, script and style stay exactly as written so whitespace-sensitive code and preformatted text survive untouched. It is forgiving by design: no strict validity check, so partial snippets and slightly broken markup still get tidied. Everything runs in your browser with one-click copy and a shareable URL. 100% client-side, nothing uploaded.

Tool details

Input: Text + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Download; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 9 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How HTML Formatter fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Read minified HTML you pulled from view-source
You open view-source on a live page and the whole body is one unreadable line. Copy it, paste it here, and the formatter expands it into an indented tree so you can find the one div with the class you need. No build tools, no editor extension, no round trip through a local file just to see the structure of someone else's page.
Clean up HTML a CMS or email tool spat out
WYSIWYG editors and email builders often export HTML as a wall of nested tables and inline styles with zero formatting. Drop it in, beautify it, and suddenly you can see the table structure, spot the stray closing tag, and edit the markup by hand instead of fighting a one-line blob in a textarea.
Make a diff readable before committing
A teammate committed a template as one minified line and now every change shows up as a giant single-line diff. Format both versions to consistent 2-space indent, paste them into your diff tool, and the real change stands out line by line instead of hiding inside an unreadable string.
Tidy a snippet before pasting into docs or a tutorial
You are writing a blog post or README and want the example HTML to look professional. Run your snippet through the formatter with the indent width your code blocks use, keep inline tags on one line so prose examples read naturally, and paste clean, consistent markup that readers can copy without reformatting.

Common pitfalls

Expecting the formatter to fix broken HTML. It tidies whitespace and indentation but does not repair unclosed tags or invalid nesting. If `<div><p></div>` goes in mismatched, it comes out indented but still mismatched. Use a validator for correctness; use this for readability.
Turning off the inline-on-same-line switch and then wondering why text gained gaps. Whitespace between inline elements is significant, so breaking `<a>one</a> <a>two</a>` onto separate lines can add or move a rendered space. Keep inline tags inline when the markup is prose.
Assuming pre or script content will be reindented to match. It will not, on purpose. Those regions are preserved verbatim, so if the code inside a script tag looks unindented relative to the page, that is correct behavior, not a bug.

Privacy

The whole formatter is plain JavaScript that runs in your browser tab. Your HTML is tokenized and reindented locally and is never sent to any server, logged, or stored. The one caveat: the shareable URL encodes your input in the query string, so a share link pasted into chat will record that markup in the recipient server's access log. For confidential page source or unreleased templates, use the copy button and paste the text rather than sharing the URL.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Developer

Browse all tools for this role

HTML Formatter — Beautify and Indent Messy HTML

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How HTML Formatter fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Read minified HTML you pulled from view-source

Clean up HTML a CMS or email tool spat out

Make a diff readable before committing

Tidy a snippet before pasting into docs or a tutorial

Common pitfalls

Privacy

FAQ

HTML Minifier

XML Formatter & Validator

CSS Formatter & Minifier

HTML to Markdown

AI Eval Planner

API Key Generator

ASCII Table Generator

ASCII Table Reference

awk + sed Cheatsheet

AWS CLI Cheatsheet

Barcode Generator

Number Base Converter