ToolSink

HTML Formatter

Indent, prettify or minify HTML, XML and JSX. 100% client-side — your markup never leaves the browser.

What is the HTML Formatter?

The HTML Formatter indents and prettifies HTML, XML and JSX markup with correct nesting, attribute alignment and tag casing. Paste minified markup from a build step and get back readable source you can edit or review.

It is essential for anyone who inherits legacy sites, debugs server-rendered pages or copies markup out of a CMS that stores everything on one line. The formatter also handles inline `<script>` and `<style>` blocks — beautifying the JS and CSS inside them.

The formatting engine runs in the browser. Markup that might contain proprietary layouts or unreleased content never touches a server.

How to use the HTML Formatter

  1. 1Paste the raw HTML, XML or JSX into the input box.
  2. 2Pick an indent size (2 or 4 spaces).
  3. 3Toggle "self-close void elements" if working with XHTML.
  4. 4Click "Format" and copy the output.
  5. 5Optionally minify with a single click.

Key features

  • Handles HTML5, XML and JSX
  • Formats embedded JavaScript and CSS
  • Optional tag casing (lowercase / preserve)
  • Configurable attribute wrapping
  • One-click minify
  • Runs offline

Examples

Minified snippet

Input
<div class="card"><h2>Title</h2><p>Body</p><button>Ok</button></div>
Output
<div class="card">
  <h2>Title</h2>
  <p>Body</p>
  <button>Ok</button>
</div>

Why use this tool

  • Turns build-output HTML back into human-readable source
  • Speeds up code review and debugging
  • Preserves inline JS/CSS quality
  • Free and browser-based
  • Your markup stays private

Common use cases

  • Cleaning up minified templates
  • Formatting HTML pasted from a CMS
  • Prettifying XML config files
  • Reviewing server-rendered pages
  • Prepping JSX snippets for a blog post

Frequently asked questions

Will it change my code semantically?

No. Only whitespace is changed. The DOM is identical after parsing.

Does it support Vue or Svelte syntax?

Vue single-file components format reasonably. Svelte support is on the roadmap.

Can I format XML with strict validation?

Yes — enable "XML strict" to reject invalid tags.

Does it re-order attributes?

No. Attribute order is preserved unless you enable "sort attributes".

Are my files uploaded?

No — the tool is entirely client-side.