HTML Formatter & Beautifier
Indent and tidy HTML markup. Free, and runs entirely in your browser — nothing you enter is uploaded, stored or sent to a server, and there is no sign-up.
About HTML Formatter
Minified or machine-generated markup is unreadable until it is indented. This re-indents HTML by nesting depth, putting block elements on their own lines so you can see the structure — which container is unclosed, where a table row escaped its table.
It works on fragments as well as whole documents, so a chunk of markup copied from a browser's element inspector or an email template can be tidied without wrapping it in boilerplate.
Where it helps
- Turns one-line minified markup into a readable tree.
- Fragments are fine — no
<html>wrapper required. - The indent width is yours to choose, to match the project's conventions.
- Runs locally, so unreleased markup and customer data stay in the browser.
Limits
- Formatting only: it does not validate markup or report unclosed tags.
- Whitespace is significant inside
<pre>,<textarea>and around inline elements, so reindenting can shift rendered spacing. - Template syntax such as Handlebars, Jinja or JSX is treated as text and may be indented oddly.
- It is not a sanitiser — untrusted markup stays exactly as dangerous as it was.
Frequently asked questions
Will formatting change how the page renders?
Usually not, but whitespace between inline elements is meaningful in HTML, so spacing around <span> and <a> can shift slightly.
Can it fix broken HTML?
No. It reformats what you give it. Unclosed tags become easier to spot once indented, but you still fix them yourself.
Does it work on Vue or JSX components?
Partially. Plain markup indents fine; expressions and directives are treated as opaque text, so use your framework's own formatter for source files.
How do I get back to a small file?
Run the result through the Minifier, which strips the whitespace formatting added here.
Related tools
- CSS Formatter — Format stylesheets with consistent indentation
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
- Minifier — Shrink CSS, HTML or JavaScript
- HTML Entities — Escape and unescape HTML entities
- SCSS/SASS Formatter — Format SCSS syntax and nested rules
- TypeScript Formatter — Format TypeScript source code
More Web Development tools
- CSS Formatter — Format stylesheets with consistent indentation
- JavaScript Formatter — Re-indent JavaScript and TypeScript source
- SCSS/SASS Formatter — Format SCSS syntax and nested rules
- TypeScript Formatter — Format TypeScript source code
- SQL Formatter — Format SQL statements with dialect selection
- SQL Minifier — Collapse formatted SQL into compact text
- CSS Unit Converter — px, rem, em, percentages and viewport units, with a preview
- Query String Parser and Builder — Convert query strings into editable key-value data
- CSP Generator — Build a Content-Security-Policy, or check one, and write it for your server or framework
- CORS Generator — Write CORS configuration for nginx, Express, Go, Django, ASP.NET, Spring and more, and test an origin against it
- cURL Builder — Build an HTTP request and get it as curl, JavaScript, TypeScript, Go, Python, PHP, C#, Java and more
- Minifier — Shrink CSS, HTML or JavaScript
- Flexbox Playground — Try every flex property and read the CSS back
- CSS Grid Playground — Build a grid template and see the tracks it makes
- Responsive Viewport Tester — Render your markup at phone, tablet and desktop widths
- SVG Path Viewer — Draw path data and read back what it contains
- SVG to CSS Converter — Turn an SVG into a data URI for CSS or an img tag
- OAuth 2.0 / OIDC Helper — PKCE verifiers and challenges, state, nonce, and checking what came back
- Regex Tester — Test patterns, inspect groups and preview replacements
- User-Agent Parser — Identify the browser, engine, operating system and device behind a User-Agent string
- HTTP Status Codes — Look up what a status code means, when to send it, and whether it is cached or safe to retry
- HTML to JSX — Convert HTML and SVG markup into JSX for React, with styles, attributes and whitespace handled
- Semver Checker — Test versions against npm ranges, sort them by precedence, and see what each bump produces
- Cookie Parser and Builder — Read Set-Cookie and Cookie headers, check them against browser rules, and write one for your framework