HTML Beautifier
Minified or machine-generated HTML arrives as one long line where tags, attributes, and text all run together. This beautifier reindents it into a clear tree, with each element on its own line and nesting that shows the document structure at a glance. Because real pages embed styles and scripts, it formats the CSS inside <style> and the JavaScript inside <script> in the same pass, so the whole file comes out tidy. It parses the markup into a syntax tree first, so the rendered page is untouched and only the formatting changes. Pick your indent and line width, and it all runs locally in your browser.
- Reindents minified or one-line HTML into a readable tree, one element per line with nesting that mirrors the structure
- Formats the embedded CSS in <style> and JavaScript in <script> too, not just the markup
- Reformats from a real parse tree, so tags, attributes, and the rendered page stay exactly as they were
- Runs entirely in your browser, so internal pages, client work, or anything unreleased never leaves your device
Overview
Reading a page you did not write, or one a build step flattened, starts with getting the markup back into a shape your eyes can follow. This tool does that without second-guessing what the page means.
- 01
Parser-based reindentation
The HTML is read into a syntax tree before it is printed back out, so the tool understands elements, attributes, and nesting rather than guessing where to break lines. Formatting that comes from a parse tree cannot quietly move content out of the element it belongs to.
- 02
Embedded CSS and JS formatted too
A real page is rarely just markup. The CSS inside every <style> block and the JavaScript inside every <script> block are reformatted in the same pass, so you do not have to copy them into separate tools to make the file readable.
- 03
Indent and width on your terms
Pick two spaces, four spaces, or tabs, and set the wrap width to 80, 100, or 120 columns so long tags with many attributes break where your team expects them to.
- 04
Structure you can scan
Each element lands on its own line and children are indented under their parent, so the document outline is visible at a glance. Collapse or expand every block at once to focus on one section.
- 05
Line and byte count
The output panel shows how many lines the formatted document expands to and its size, so you can see at a glance how dense the original really was.
- 06
Copy, download, or upload
Paste from the clipboard, open an .html file from disk, then copy the tidy result or save it. The whole loop stays on your machine and never touches a server.
How to use
Go from an unreadable block of HTML to a clean, consistently indented document in a few steps.
- 01
Paste your minified or messy HTML into the input panel, or use Upload to open an .html file from disk.
- 02
Pick your indent style and wrap width to match your project conventions.
- 03
Read the formatted markup on the right, with each element on its own line and the embedded CSS and JS laid out too, updating as you adjust the options.
- 04
Copy the result or download it as an .html file, then drop it into your editor to read, review, or keep working on.
Details
The details that make the formatted output trustworthy and easy to live with.
- Built on Prettier, which reformats from a parsed representation rather than by guessing where to insert line breaks.
- Embedded CSS and JavaScript are reformatted with the same engine, so a full page comes out consistent end to end.
- Formatting runs as you type and as you change options, with no button to press before the result updates.
- A syntax error is shown in place with its message instead of producing half-formatted or empty output.
- Nothing is uploaded or logged. The HTML you paste stays in your browser and is gone when you close the tab.
Use cases
Where turning dense markup back into a readable form earns its keep.
-
Reading a minified page
When the only copy of a page is the minified HTML in production or from view-source, format it here to see how the elements and sections are actually structured.
-
Reviewing generated markup
Output from a templating engine, a CMS, or an email builder often ships flattened. Beautifying it makes a code review or an audit possible.
-
Debugging a layout or nesting bug
Indented HTML makes it far easier to spot the unclosed tag, the misplaced element, or the wrapper that is quietly breaking your layout.
-
Producing a clean diff
Format both versions of a page the same way, and a diff tool shows the real change instead of drowning it in whitespace noise.
-
Tidying a snippet with embedded code
A widget or component pasted from documentation often carries inline <style> and <script>. One pass formats the markup and the embedded code together.
-
Teaching and sharing examples
A consistently indented page is easier to explain in a tutorial, a code comment, or a pull request than one with ad-hoc spacing.
See also
Working with a single language instead? TheCSS Beautifier formats stylesheets on their own, and theJavaScript Beautifier does the same for JavaScript files.
Beautifying versus minifying
Beautifying and minifying are the same idea pointed in opposite directions: both only touch the characters a browser ignores between tags, never the meaning. One adds the whitespace that makes markup readable; the other strips it away.
-
Formatting is reversible and safe
Adding indentation and line breaks between elements changes nothing about how the page renders. A browser treats one line and forty as the same document, so beautifying is a presentation change for humans, not a rewrite of your page.
-
Why minified HTML is unreadable
A build step removes the optional whitespace between tags to save bytes. That is ideal for shipping, but it leaves a single line where elements, attributes, and text all run together with no visible boundary.
-
Embedded code is part of the document
Styles and scripts live inside the HTML, so a formatter that only touched the tags would leave half the file unreadable. Treating <style> as CSS and <script> as JavaScript is what makes a real page tidy end to end.
-
It is not un-minifying
Beautifying restores layout, not the original source. Comments that minification stripped are gone for good, and any markup the build inlined stays inlined. You get readable HTML, not a byte-for-byte copy of what the author wrote.
-
Whitespace can be significant
Unlike most code, spaces between inline elements can affect rendering. The formatter respects that, so it reflows the document without changing how it looks in the browser.
-
A reading and reviewing tool
The point is comprehension: making a flattened or unfamiliar page easy to scan, diff, and reason about. For shipping, you still minify, which is the mirror image of this step.
Best practices
Habits that get the most out of formatting HTML.
- Use the beautifier to read and review, but keep the original readable source as your source of truth when you have it.
- Pick one indent style and width for a project and stick to it, so formatted files diff cleanly against each other.
- Remember that formatting will not bring back comments or undo markup the build inlined; it restores layout, not the original source.
- For your own codebase, wire a formatter into your editor or a pre-commit hook so files stay consistent without a manual paste each time.
- Format template output (the HTML a browser receives) rather than the template language itself, which uses syntax this parser does not expect.
Limitations
What this tool does, and what it leaves to other steps.
- It reindents a single HTML document and the CSS and JS embedded in it. It does not fetch linked stylesheets, scripts, or images.
- It restores layout, not lost information. Comments and structure removed by minification do not come back.
- Template languages such as Handlebars, Jinja, or ERB are not HTML on their own; format the rendered output instead of the template source.
- A syntax error stops formatting and is reported, so badly broken input will not silently produce partial output.
FAQ
Common questions about formatting HTML and when to reach for it.
Does beautifying change how my page renders?
No. It only adds the whitespace and line breaks a browser ignores between tags: indentation, line breaks between elements, and consistent nesting. Tags, attributes, and content are untouched, and whitespace that would affect inline layout is preserved, so the rendered page looks the same before and after.
Does it format the CSS and JavaScript inside my HTML?
Yes. The CSS inside every <style> block and the JavaScript inside every <script> block are reformatted alongside the markup, using the same engine as the dedicated CSS and JS beautifiers. You do not have to pull them out into separate tools.
Can it fully reverse a minifier?
It reverses the layout, not the information. Beautifying restores readable indentation, but comments the minifier stripped are gone, and markup it inlined stays inlined. You get clean, readable HTML, not a byte-for-byte copy of the original source.
What indentation options are there?
You can indent with two spaces, four spaces, or tabs, and set the wrap width to 80, 100, or 120 columns so long tags with many attributes break where you expect. You can also collapse, expand, or soft-wrap the output while you read it.
Can I format template files like Handlebars or Jinja?
Not directly. This tool formats standard HTML, which is what a browser receives. Template syntax such as {{ }} or {% %} is not valid HTML on its own, so format the rendered output instead, or use a formatter that understands your template language.
Is my HTML uploaded anywhere?
No. Everything runs in your browser. The HTML you paste and any file you open are processed locally, never transmitted or stored, and disappear when you close the tab, so internal pages and unreleased work stay private.
Related tools
Keep going with the rest of the data and format toolkit.