§ Tool 11 of 23 · Format

HTML, indented properly.

Indent, minify, validate, and diff. Native treatment for void elements, comments, and CDATA. v2.11 added side-by-side comparison so two templates can be reconciled without an external diff tool.

Updated
v2.11
Diff added
Modes
Format · Minify · Diff
Pick by intent
Validation
Tag-aware
Void elements handled
Network
Offline
Pure local
DevUtilities HTML Formatter — formatted markup, minified output, side-by-side diff.
Plate xi — HTML Formatter with the diff editor and tag-aware indentation.
§ 01Capabilities

Seven things it does cleanly.

i

Indent properly

Tag-aware indentation. Void elements (br, img) don't sprout phantom closing tags.

ii

Minify

Strip comments and whitespace; preserve structure. Useful for embedded HTML in emails or docs.

iii

Side-by-side diff

CodeMirror diff editor. Both sides auto-format; differences light up.

iv

Real-time

Live formatting as you type. Errors are surfaced inline; the structure pane updates immediately.

v

Comments & CDATA

Both preserved through format and minify. Round-trip is loss-free.

vi

Character & line metrics

Both sides of the diff display character and line counts.

vii

State persistence

Last input and last diff stick across sessions.

§ 02A typical session

Four moves across markup.

Paste markup

From a CMS, an inspector, or an email template.

Paste · ⌘ V

Format or minify

Indent for reading; minify for embedding. Toggle modes anytime.

Mode toggle

Diff

Compare two templates. Both auto-format; differences highlight.

Diff mode

Copy

One-click copy on either side.

Copy · ⌘ C
§ 03Made for these tasks

The work it actually does.

i — Templates

CMS markup

Reformat the WYSIWYG output before pasting it into a structured template.

ii — Email

Email HTML

Minify before sending; format before reading the version your test inbox got.

iii — Diff

Spotting drift

Catch the missing aria-* attribute or the changed class name across two snapshots.

iv — Snapshot

Test fixtures

Format inspector dumps for use as test fixtures, with stable ordering.

v — Audit

Migration review

Compare an old and new template to spot what really moved.

vi — Embed

Inline literals

Minify into a single-line literal for an inline embed.

§ 04Questions, answered

Things people ask before they download.

What does formatting actually do?

Tag-aware indentation. Void elements stay void; comments and CDATA round-trip; attribute order is preserved.

Is it tolerant of malformed input?

Reasonable amounts. Common issues (missing close tags, unquoted attributes) are reported with a line number and tolerated where unambiguous.

How does diff handle whitespace?

Both sides auto-format first, so cosmetic differences don't pollute the result. Real structural changes are what light up.

What's the minify mode for?

Producing compact HTML for embedding in JS strings, JSON payloads, or email templates that benefit from a single-line form.

Does it preserve the doctype?

Yes. The doctype, comments, conditional comments, and CDATA blocks all survive both format and minify.

Does this require network access?

No. HTML formatting is fully local.

§ 05Companion tools

Better with the rest of the shelf.

§ Download

Indent, minify, diff, without leaving the panel.

Download — Mac App StoreChangelog