{"id":143,"date":"2026-05-04T19:44:47","date_gmt":"2026-05-04T23:44:47","guid":{"rendered":"https:\/\/simpletool.io\/blog\/?p=143"},"modified":"2026-05-04T19:44:47","modified_gmt":"2026-05-04T23:44:47","slug":"html-formatter","status":"publish","type":"post","link":"https:\/\/simpletool.io\/blog\/html-formatter\/","title":{"rendered":"HTML Formatter: Beautify HTML with Prettier [2026]"},"content":{"rendered":"
TL;DR:<\/strong> An HTML formatter (or “HTML beautifier”) takes minified, copied, or messy HTML and reformats it with consistent indentation, line wrapping, and attribute alignment. Use it on copied HTML you need to read or edit, AI-generated markup, or scraped pages. Our free HTML formatter<\/a> uses Prettier 3<\/strong> in your browser with full support for HTML5, Vue, Svelte, Angular, and Handlebars templates.<\/div>\n

Reading minified HTML is like reading a one-line essay \u2014 every tag and attribute is jammed together with no visual structure. Try to debug a layout issue or insert a new element and you spend more time finding your place than fixing the bug. A formatter restores the structure: each block-level element on its own line, nested elements indented, long attribute lists wrapped, and closing tags aligned with their opens.<\/p>\n

Our HTML formatter<\/a> runs Prettier 3 in your browser. It auto-detects HTML5, Vue single-file components, Svelte, Astro, Angular, and Handlebars templates. Configurable: indent width, attribute-per-line wrap threshold, void-element style (<br \/><\/code> vs <br><\/code>), and whether to wrap long lines. Paste any size, get clean output, copy or download.<\/p>\n

Prettier HTML options that matter<\/h2>\n\n\n\n\n\n\n\n\n\n\n
Option<\/th>\nDefault<\/th>\nWhen to change<\/th>\n<\/tr>\n<\/thead>\n
printWidth<\/code><\/td>\n80<\/td>\n100\u2013120 if you have many attributes per element<\/td>\n<\/tr>\n
tabWidth<\/code><\/td>\n2<\/td>\n4 only if matching legacy code<\/td>\n<\/tr>\n
htmlWhitespaceSensitivity<\/code><\/td>\n“css”<\/td>\n“strict” if rendering depends on inline whitespace<\/td>\n<\/tr>\n
singleAttributePerLine<\/code><\/td>\nfalse<\/td>\ntrue for very wide attribute lists<\/td>\n<\/tr>\n
bracketSameLine<\/code><\/td>\nfalse<\/td>\ntrue to keep ><\/code> at end of last attribute line<\/td>\n<\/tr>\n
endOfLine<\/code><\/td>\n“lf”<\/td>\n“crlf” only for Windows-only repos<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The whitespace-sensitivity setting (the option you’ll actually want to think about)<\/h2>\n

HTML treats whitespace inconsistently. Inside a <p><\/code>, multiple spaces collapse to one. Inside a <pre><\/code>, every space is preserved. Between two inline elements (<span>a<\/span> <span>b<\/span><\/code>), the space between affects layout. Prettier’s htmlWhitespaceSensitivity<\/code> option controls how aggressively the formatter rearranges whitespace:<\/p>\n