What is the HTML Formatter?

The HTML Formatter is an in-browser tool that beautifies or minifies HTML markup with Prettier, formats inline CSS and JavaScript, and previews the result in a sandboxed iframe.

How do I beautify minified HTML?

Paste your minified HTML into the input box and choose Beautify. The HTML Formatter reindents the markup and reformats any inline and blocks for readability.

Does the HTML Formatter format inline CSS and JavaScript?

Yes. Prettier formats and blocks automatically as part of beautifying the page.

Can I minify HTML as well as beautify it?

Yes. Switch to Minify mode to strip whitespace and produce the smallest equivalent markup for production.

Can I choose tabs instead of spaces?

Yes. Toggle the Tabs option in the HTML Formatter to indent with tabs, or leave it off to use spaces.

Is my HTML uploaded anywhere when I format it?

No. All formatting and preview rendering happen locally in your browser, so your markup never leaves your device.

HTML Formatter

Beautify or minify HTML, format inline CSS/JS, and preview the result.

Your HTML is beautified, minified, and previewed entirely in your browser — nothing is uploaded to a server.

Cleaning up stylesheets too? Try the CSS Formatter.

About HTML Formatter

This html formatter beautifies or minifies raw markup and formats any inline CSS and JavaScript automatically using Prettier. Paste messy template output, scraped pages, or hand-written markup and get clean, consistently indented HTML in one step, or switch to minify mode to strip whitespace and shrink the document for production. A sandboxed preview lets you render the markup safely with scripting disabled, so embedded scripts never execute. As an html beautifier and prettifier, it is built for front-end developers, QA engineers, and anyone who needs to format html online without context-switching. Everything runs locally in your browser, so your data never leaves your device. Choose tabs or spaces for indentation to match your project style.

Features

Beautify HTML with consistent, readable indentation
Minify HTML to remove whitespace and shrink output
Format inline <style> and <script> blocks via Prettier
Sandboxed preview renders markup with scripting disabled
Toggle between tabs and spaces for indentation
Handles full pages or partial markup snippets
Copy formatted or minified output in one click
Runs entirely in your browser

How to use the HTML Formatter

Paste your HTML into the input box.
Choose Beautify to format, Minify to compress, or Preview to render it.
Toggle Tabs on or off to set your indentation style.
Copy the formatted or minified HTML from the output panel.

Example

Input

<div   class="card"><h1>Hi</h1><p>Hello   world</p></div>

Output

<div class="card">
  <h1>Hi</h1>
  <p>Hello world</p>
</div>

Beautify mode reindents markup and normalizes whitespace.

Common errors & troubleshooting

Embedded scripts do not run in the preview. — This is intentional — the preview is a sandboxed iframe with scripting disabled so pages render safely. Test interactive code in your own environment.
Inline CSS or JS is not reformatted. — Ensure the code is inside proper <style> or <script> tags; Prettier only formats recognized inline blocks during beautify.
Malformed or unclosed tags produce unexpected indentation. — Close mismatched tags in your source — the formatter reflows valid structure but cannot guess intended nesting.
Minified output is hard to read. — Switch back to Beautify mode; minify is meant for production size, not readability.

Frequently asked questions

What is the HTML Formatter?: The HTML Formatter is an in-browser tool that beautifies or minifies HTML markup with Prettier, formats inline CSS and JavaScript, and previews the result in a sandboxed iframe.
How do I beautify minified HTML?: Paste your minified HTML into the input box and choose Beautify. The HTML Formatter reindents the markup and reformats any inline <style> and <script> blocks for readability.
Does the HTML Formatter format inline CSS and JavaScript?: Yes. Prettier formats <style> and <script> blocks automatically as part of beautifying the page.
Can I minify HTML as well as beautify it?: Yes. Switch to Minify mode to strip whitespace and produce the smallest equivalent markup for production.
Can I choose tabs instead of spaces?: Yes. Toggle the Tabs option in the HTML Formatter to indent with tabs, or leave it off to use spaces.
Is my HTML uploaded anywhere when I format it?: No. All formatting and preview rendering happen locally in your browser, so your markup never leaves your device.

Related tools

CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
JS / TS Formatter — Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.
XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
HTML Escape / Unescape — Escape and unescape HTML special characters and entities.
Markdown Preview — Render Markdown to HTML with a live preview.
SVG Optimizer — Minify SVG — strip comments, metadata and editor cruft, and collapse whitespace.
JSON Formatter — Beautify, minify and validate JSON with error locations.
SQL Formatter — Format SQL for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle.