HTML formatter & beautifier

Q: How do I format HTML code?

Paste the HTML above, or open the .html file, choose the indent — 2 spaces is the common default — and press Format HTML. Copy the result or download it as a file. The page itself renders exactly as before; only the whitespace in the source changes.

Paste messy or minified HTML and get it back cleanly indented, with the CSS and JavaScript inside it formatted too — or minify it. Everything runs in your browser.

Beautify or minify in your browser. Nothing is uploaded unless you choose to publish.

HTML arrives in unreadable shapes. A page exported from a builder is one 40,000-character line. Markup copied out of the browser’s inspector keeps whatever indentation the framework left. An AI chat hands you a working page with a <style> block squashed onto a single line and a script nobody can follow.

This formatter re-indents the markup so the nesting is visible, one element per line, and formats the CSS inside <style> and the JavaScript inside <script> as well. It only changes whitespace, so the page renders exactly as before — the chip under the output checks that for you by comparing the text of both versions. Going the other way, Minify strips comments and collapses whitespace for a smaller file.

What the formatter changes — and what it leaves alone

1.
Indentation and line breaks. Nested elements are indented by 2 spaces, 4 spaces or a tab, one block element per line. Long lines wrap at 80 or 120 characters, or not at all.
2.
Embedded CSS and JavaScript. With the box ticked, <style> and <script> contents are formatted too. Untick it to leave them exactly as written.
3.
Never touched: the contents of <pre> and <textarea>, where spacing is part of the content, and your text, attributes and tag names.
4.
Minify removes comments and collapses every run of spaces to one. It does not delete the space between inline elements, because that space is visible.

A real example

A freelancer inherits a client’s landing page as a single index.html exported from a site builder: 612 KB on one line, with the tracking script and three <style> blocks mashed into it. The client wants the hero headline changed and the phone number in the footer fixed.

She opens the file here with Open .html file. At 2-space indent and an 80-column wrap, the one line becomes a few thousand readable ones; the footer is now a <footer> block she can find by scrolling, and the CSS is one rule per line instead of a wall. The chip reads Text unchanged, so she knows nothing but whitespace moved.

She makes the two edits in her own editor, pastes the result back, switches to Minify to hand the client a smaller file, and publishes a preview link so the client can approve the change on their phone before it goes live.

The HTML formatter beautifying the one-line sample: on the left the original markup, on the right the same page indented with its CSS rules one per line, and chips reading 1 to 42 lines, 569 B to 756 B, and Text unchanged. — The sample above at 2-space indent and 80-column wrap. The CSS inside <style> is formatted too, and the check confirms the text did not change.

Beautify or minify?

The same markup, pointed in opposite directions. Pick by what happens to the file next.

To read or edit the code
Indented nesting is the whole point of beautifying.
Beautify
Yes
Minify
No
The smallest file to ship
Comments and repeated whitespace are gone.
Beautify
No
Minify
Yes
A page that renders exactly as before
Both only change whitespace outside <pre>, <textarea>, <script> and <style>.
Beautify
Yes
Minify
Yes
Readable CSS and JavaScript inside the page
Minify leaves embedded code as it was.
Beautify
Yes
Minify
No

You need	Beautify	Minify
To read or edit the codeIndented nesting is the whole point of beautifying.
The smallest file to shipComments and repeated whitespace are gone.
A page that renders exactly as beforeBoth only change whitespace outside <pre>, <textarea>, <script> and <style>.
Readable CSS and JavaScript inside the pageMinify leaves embedded code as it was.

YesPartlyNo

Questions about html formatter

How do I format HTML code?

Paste the HTML above, or open the .html file, choose the indent — 2 spaces is the common default — and press Format HTML. Copy the result or download it as a file. The page itself renders exactly as before; only the whitespace in the source changes.

What is the difference between an HTML formatter and a beautifier?

None in practice — both names mean re-indenting HTML so its structure is readable. "Beautifier" is the older name, from the js-beautify project this tool uses; "formatter" is what editors such as VS Code call the same operation.

Will formatting break my page?

It should not: browsers treat any run of whitespace in normal text as a single space, and the formatter leaves <pre> and <textarea> alone. The one case to watch is an element your CSS styles with white-space: pre, whose spacing the formatter cannot know is meaningful. The Text unchanged check under the output compares the text of both versions for you.

Is my HTML uploaded?

No. Formatting runs in your browser tab. Nothing is sent anywhere unless you press Publish as a page, which is a separate step that gives you a link to the rendered result.

Can I see the page, not just the code?

Yes — paste the formatted HTML into the HTML viewer to see it render with its scripts running, or publish it to get a link anyone can open.

Keep your links forever

Free links last 7 days with a free account. On a paid plan every page you create stays online permanently.

See pricing

Related use cases

What the formatter changes — and what it leaves alone

Indentation and line breaks. Nested elements are indented by 2 spaces, 4 spaces or a tab, one block element per line. Long lines wrap at 80 or 120 characters, or not at all.

Embedded CSS and JavaScript. With the box ticked, <style> and <script> contents are formatted too. Untick it to leave them exactly as written.

Never touched: the contents of <pre> and <textarea>, where spacing is part of the content, and your text, attributes and tag names.

Minify removes comments and collapses every run of spaces to one. It does not delete the space between inline elements, because that space is visible.

A real example

The sample above at 2-space indent and 80-column wrap. The CSS inside <style> is formatted too, and the check confirms the text did not change.

Beautify or minify?

The same markup, pointed in opposite directions. Pick by what happens to the file next.

To read or edit the code
Indented nesting is the whole point of beautifying.
Beautify
Yes
Minify
No
The smallest file to ship
Comments and repeated whitespace are gone.
Beautify
No
Minify
Yes
A page that renders exactly as before
Both only change whitespace outside <pre>, <textarea>, <script> and <style>.
Beautify
Yes
Minify
Yes
Readable CSS and JavaScript inside the page
Minify leaves embedded code as it was.
Beautify
Yes
Minify
No

You need	Beautify	Minify
To read or edit the codeIndented nesting is the whole point of beautifying.
The smallest file to shipComments and repeated whitespace are gone.
A page that renders exactly as beforeBoth only change whitespace outside <pre>, <textarea>, <script> and <style>.
Readable CSS and JavaScript inside the pageMinify leaves embedded code as it was.

YesPartlyNo

Questions about html formatter

How do I format HTML code?

What is the difference between an HTML formatter and a beautifier?

Will formatting break my page?

Is my HTML uploaded?

No. Formatting runs in your browser tab. Nothing is sent anywhere unless you press Publish as a page, which is a separate step that gives you a link to the rendered result.

Can I see the page, not just the code?

Yes — paste the formatted HTML into the HTML viewer to see it render with its scripts running, or publish it to get a link anyone can open.