My Tool Studio
Developer

HTML Beautifier

This HTML beautifier takes minified or messy markup and returns clean, indented HTML you can read and edit. Paste a one-line page, a CMS export or an email template, click Beautify, and every nested element moves onto its own line. Choose the indent, where long lines wrap, and how attributes wrap, from only when a line is too long to one attribute per line. The CSS and JavaScript inside style and script tags are formatted too, or kept as written if you untick that option. Show rendered preview displays the page at phone, tablet or desktop width with scripts blocked. You can upload an .html file, turn on Live mode and download the formatted copy. It runs in your browser, so private templates stay on your machine.

Always freeNo sign upRuns in your browser
Output appears here...

How to use

01

Paste, upload or load your HTML

Paste markup into the Input pane, click Upload .html to load a file, or type a URL and click Load page source; both are formatted straight away. Try sample loads a compact pricing page.

02

Pick options and click Beautify

Set Indent, Wrap lines at, Attributes and Script and style indent, and tick the boxes you want. Click Beautify, or turn on Live mode so the output updates as you edit.

03

Preview, copy or download

Tick Show rendered preview to see the page, and pick a width to check a phone layout. Click Copy above the Output pane, or Download .html to save the formatted file.

Why HTML Beautifier

Before and after: a minified page, beautified

Take this one-line fragment from a pricing page: <div class="plan"><h2>Starter</h2><p>For small teams.</p></div>. With the default 2-space indent, the beautifier puts the opening div on the first line, the h2 and the p on their own lines indented by two spaces, and the closing div on the last line.

Short inline content such as a link or a bold word stays inside its paragraph instead of being broken onto separate lines, so the text still reads naturally. With wrapping set to 120 characters, a long paragraph is broken at the nearest space before that limit. Choose No wrapping if you prefer long lines and let your editor wrap them.

Beautifying and minifying are opposite jobs, and most projects need both at different times:

HTML BeautifierHTML Minifier
GoalReadable codeSmaller file
WhitespaceAdds line breaks and indentationRemoves comments and extra whitespace
Use it whenReading, editing, reviewing or comparing codeShipping a page or pasting into an email platform
Changes what the page showsNo, apart from rare inline-block gapsNo
To undo itRun the minifierRun the beautifier (comments are lost)

Common questions

What is the difference between an HTML beautifier and an HTML formatter?
In practice there is none. Both names describe a tool that adds line breaks and indentation to markup, and some people call the same job prettifying. None of them change what the page shows.
Does beautifying HTML change how the page renders?
Almost never. The formatter only adds whitespace between tags, and browsers ignore most of it. One rare exception is inline-block elements placed side by side, where a new line between them can add a small visible gap. Content inside pre and textarea is not reformatted.
Can I format HTML with inline CSS and JavaScript?
Yes. Code inside style and script tags is indented with the same indent setting, and Script and style indent decides whether it starts one level in, at the tag's level or at column 0. Untick Format inline CSS and JavaScript to leave those blocks exactly as written. Inline style attributes stay on one line.
How do I fix inconsistent HTML indentation?
Paste the whole file, pick one indent style and click Beautify. Every line is indented again from scratch based on nesting, so mixed tabs and spaces disappear. If the result looks wrongly nested, you probably have an unclosed tag, and the indentation shows where it starts.
Is it safe to paste private HTML templates into this beautifier?
Yes. Formatting runs in JavaScript in your browser, and uploaded files are read locally. Nothing is sent to a server or stored.
Does the HTML beautifier check my markup for errors?
No. It formats whatever you give it, including invalid HTML, and it does not report problems. Use the W3C Markup Validation Service when you need a proper check.
Can I see a live preview of the beautified HTML?
Yes. Tick Show rendered preview and the page appears under the panes in a sandboxed frame with scripts blocked. Use the Width menu to see it at 375, 768 or 1280 pixels, a quick check of a responsive layout. The HTML Viewer adds live editing and optional JavaScript.
What indent size should I use for HTML?
There is no single standard. Two spaces is common in front-end projects because markup nests deeply, while some teams prefer four spaces or tabs. Match whatever your editor settings or Prettier config already use.
How do I unminify a single-line HTML file?
Paste it into the Input pane or upload it, then click Beautify. The file is split into one element per line with indentation. Comments that a minifier removed cannot be restored.
How do I put each HTML attribute on its own line?
Set Attributes to Each attribute on its own line. Elements with more than one attribute are split so every attribute sits on a line of its own, which makes long class lists and data attributes easy to review in a diff. The aligned choices line attributes up under the first one.

More Developer tools

View all

JSON Formatter

Beautify, minify and browse JSON as a tree

Developer

JSON Validator

Find JSON errors by line and fix them

Developer

JSON Minifier

Minify JSON and see the bytes saved

Developer

JSON to CSV Converter

Convert JSON arrays to CSV or Excel

Developer