HTML Formatter

The Kordu HTML Formatter turns unreadable, minified, or badly indented markup into clean, consistently structured HTML that is easy to scan, diff, and edit. Paste a single-line blob scraped from a production response, a tangled component template, an AI-generated snippet, or a full HTML document — the formatter restores indentation, line breaks, and attribute alignment in milliseconds, entirely inside your browser.

What HTML formatting actually does

HTML formatting (also called beautifying or pretty-printing) is the process of normalizing whitespace, indentation, and line breaks in an HTML document without changing what the browser renders. Browsers ignore most whitespace between tags, which is why minifiers strip it out and why carelessly concatenated markup can collapse into a single unreadable line. A formatter puts the whitespace back in a predictable, rule-based way — each nested element indented one level deeper than its parent, long attribute lists wrapped at a configurable column, and inline runs of text kept together so they remain semantically identical to the original.

Powered by js-beautify

The formatter is built on js-beautify, the same open-source library behind the default HTML formatter in Visual Studio Code, Atom, and dozens of editor extensions. js-beautify is battle-tested across millions of documents and has well-understood behaviour for the tricky cases that trip up naive formatters: void elements, embedded SVG, inline script and style blocks, preserved <pre> content, templating syntax, and mixed inline/block element runs. Because it is a real parser rather than a regex-based rewriter, it handles nested quotes, attributes with angle brackets inside values, and comments without mangling the surrounding markup.

Configurable options

• Indent size — pick 2 spaces, 4 spaces, or tabs to match your project's editorconfig, style guide, or team convention.
• Max line length (wrap) — long opening tags with many attributes get wrapped onto multiple lines once they exceed the configured column width, so diff reviews stay readable.
• Attribute handling — keep attributes on a single line, force each attribute onto its own line, or let long lines wrap by the column rule. Useful when working with React-style markup or the verbose ARIA attribute sets common in accessible design systems.
• Inline element behaviour — control whether inline elements such as <span>, <a>, <strong>, and <em> break to new lines or stay inline with their parent text, which matters when you care about rendered whitespace inside paragraphs.

Common messy-HTML scenarios

• Minified production responses. View Source on a live site and you will usually see the entire document collapsed onto one or two lines. Paste it here to recover a readable structure for auditing, debugging, or competitive research.
• Email templates. MJML, Foundation for Emails, and other email frameworks emit deeply nested tables that become hostile without indentation. The formatter gives you back a navigable tree.
• CMS and page-builder exports. WordPress, Webflow, Wix, and Shopify exports frequently ship inline-styled spans and auto-inserted line breaks with no indentation rules at all.
• AI-generated markup. Snippets from chat assistants often come back single-line or with inconsistent indentation across examples. Paste, format, and drop it into your project with a predictable style.
• Legacy code you inherited. Older codebases may mix tabs and spaces, use inconsistent casing, or glue multiple tags onto one line. One round-trip through the formatter normalizes everything.

Best practices for clean HTML

Readable HTML is the foundation of a maintainable frontend. Keep tag names and attributes lowercase for HTML5 (<div class="card">, not <DIV CLASS="CARD">). Order attributes consistently — a common convention is id, then class, then data-* and aria-*, then framework-specific directives, then event handlers. Use semantic elements (<header>, <main>, <article>, <section>, <nav>, <footer>) instead of generic <div> soup so the formatted tree tells you what each block of markup means. Close optional tags explicitly so the formatter (and your teammates) never has to guess. Keep lines under 120 columns wherever possible so code reviews on narrow diff viewers stay readable.

Common mistakes the formatter surfaces

• Mis-nested tags. Opening a <div> inside a <p> is technically invalid and will be rendered differently across browsers. After formatting, misnesting stands out because indentation levels don't line up the way you expected.
• Significant whitespace inside inline runs. Adding a line break between two <span> elements inside a sentence introduces a space the designer may not have wanted. Configure inline element behaviour to preserve runs you care about.
• Embedded CSS and JS drift. Unformatted <style> and <script> blocks are a pain to audit. js-beautify detects the MIME context and applies CSS and JavaScript formatting rules to their contents.
• Conditional comments and CDATA sections. Legacy IE conditional comments (<!--[if IE]>...) and XML CDATA markers are preserved untouched.

How it compares to other options

Prettier is excellent inside an editor or build pipeline but requires a Node.js install, a config file, and a local install of the plugin package to format HTML. Your IDE's built-in formatter works one file at a time and rarely lets you tweak options on a single snippet. Copying into a sandbox REPL means learning yet another UI. The Kordu HTML Formatter is instant, browser-only, and zero-config — paste, press Format, copy. No signup, no installation, no telemetry.

Partial HTML and full documents

Format anything from a single <button> element up to a full DOCTYPE-prefixed document. The formatter does not require a <!DOCTYPE>, <html>, or <body> wrapper, so component snippets, Shadow DOM fragments, table rows, and email-template partials all work. It will not add a DOCTYPE you didn't include.

SVG and other XML-ish content

SVG elements inside HTML are formatted with proper indentation like any other nested element. If you need aggressive SVG minification or path optimization, pair this tool with the Kordu SVG Optimizer.

Edge cases it handles

• Void elements (<br>, <img>, <input>, <meta>, <link>, <hr>) are left as self-terminating without a closing tag, matching the HTML5 spec.
• <pre>, <textarea>, and <code> blocks are treated as whitespace-significant — their contents are preserved verbatim so you do not accidentally introduce spaces into rendered output.
• Comments (<!-- ... -->) are kept intact and indented at the appropriate level.
• Template syntax from Handlebars, Mustache, Jinja, Liquid, EJS, and similar engines is generally preserved because the delimiters do not conflict with HTML parsing.

Privacy — 100% client-side

All formatting happens inside your browser. Your HTML is never uploaded, logged, stored, or transmitted anywhere. The tool works offline once the page has loaded, has no rate limits, requires no account, and includes no server component you can send data to even if you wanted to. Safe for proprietary markup, internal CMS exports, and pre-release marketing pages.

When not to use a formatter

A formatter is not a validator. If your HTML has structural errors — unclosed tags, mismatched nesting, duplicate IDs, invalid attribute values — a beautifier will indent the broken structure but will not fix it. For structural issues, run the markup through an HTML validator such as the W3C Nu validator. For accessibility problems, run it through an accessibility audit. For semantic issues, review the document tree manually. Use this tool for the one job it does well: making valid HTML readable.