Loading…
Loading…
Beautify HTML pages and fragments without changing how they render. Inline spacing, <pre>, and scripts stay intact, and embedded CSS and JavaScript can be formatted too.
Formatted HTML appears here as you type.
A whole page or just a fragment: paste it, drop or upload an .html file, or load it from a URL. The formatter loads the first time you use it, then formats as you type.
Choose the indent, a line width to wrap long lines at (or no wrapping), and whether each attribute goes on its own line. Format CSS & JS also tidies the code inside <style>, <script>, style="", and onclick="".
Safe whitespace (the default) only changes whitespace that can't affect how the page looks: it follows the same CSS rules the browser uses. Spaces between inline elements, <pre> and <textarea> contents, and unformatted scripts stay exactly as written.
Copy it or download it as an .html file. If the markup can't be parsed, like a closing tag with no matching opening tag, you get the line and column and can jump straight to it.
Not with Safe whitespace. In HTML, a space between two inline elements (like <b>a</b> <i>b</i>) is visible, so the formatter never adds or removes one. When a line needs wrapping there, it breaks inside the tag instead (</span\n>). <pre> and <textarea> contents are kept byte-for-byte. Only Ignore mode, which you have to choose deliberately, may change inline spacing.
The markup closes an element that isn't open. Often a block element like <div> sits inside a <p>, which ends the paragraph early so the later </p> has nothing to close. Browsers quietly repair this by guessing, which is why the page may look fine. The formatter reports it so you can fix the real structure.
Only with Format CSS & JS on, and then only its layout: indentation, spacing, and line breaks, the same way Prettier formats .js and .css files. With it off, script and style contents are kept exactly as written. So are script types that aren't JavaScript, like text/template or Handlebars, either way.
No. Formatting runs in your browser using Prettier, the open-source formatter many code editors use. The formatter's code downloads the first time you format something, but your markup is never uploaded.
Plain HTML is the target. Templates that are valid HTML, which is most Vue and Angular markup including {{ }} interpolation, usually format fine. Syntax that isn't HTML, like Svelte's {#if} blocks or JSX, may be misread or rejected. Use a formatter configured for that framework instead.
Data
Format, validate, and minify JSON in your browser. Paste it, upload a file, or load it from a URL. Errors show the exact line and column.
C# / .NET
Paste JSON and get C# model classes or records, ready for System.Text.Json or Newtonsoft.Json. Nested objects, arrays, nullable types, dates, and GUIDs are inferred for you.
SQL
Format and beautify SQL queries for SQL Server (T-SQL), PostgreSQL, MySQL, Oracle, and more. Set the indentation, keyword case, and layout, and get the exact line of any syntax error.
Data
Format, validate, and minify XML (config files, .csproj, SOAP, RSS) in your browser. Entities, CDATA, and mixed content are kept exactly as written, and errors show the line and column.
Data
Format and validate YAML (docker-compose, Kubernetes, GitHub Actions) without losing comments, or convert YAML to JSON. Errors show the exact line and column.
Images · SVG
Preview SVG code live and safely, check its size and viewBox, fix common errors, and export it as PNG, a data URI, a CSS background, or an <img> tag.