HTML Formatter & Beautifier

Paste minified markup, a copied page source or an email template, and get cleanly indented HTML with embedded CSS and JS formatted too.

Input · drop a file

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Ticket 412</title><style>body{font-family:sans-serif;margin:0}.tag{background:#f2df3a;padding:4px 8px}</style></head><body><main><h1>Order ready</h1><p class="tag">No. 412 &middot; 3 garments</p><ul><li>Oxford shirt</li><li>Wool trousers</li></ul><button onclick="alert('Collected')">Mark collected</button></main></body></html>

Output

How it formats

The formatter is Prettier, the most widely used code formatter, running in your browser. Each nested element goes on its own line and is indented; long attribute lists wrap; <style> and <script> contents are formatted as CSS and JavaScript.

Whitespace handling is set to “ignore”, which gives the tidiest result. If exact inline spacing matters (for example between two <span>s), check the rendered page after formatting.

Going the other way

To shrink HTML for production, use the HTML minifier.

Questions

Does it fix broken HTML?

It formats what it can parse; clearly broken markup (a closing tag that never opened) is reported with its line. It does not guess at missing tags.

Can I format Vue or Angular templates?

Plain HTML templates work. Framework-specific syntax generally formats fine, but component files (.vue) are best formatted in your editor.