HTML formatter
Indented so you can read it, or squeezed so you can ship it.
Examples temporarily replace the input and settings. You can restore your previous work.
Paste or type above to see the result here.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
Example
A one-line bake-sale notice from a site builder, laid out and squeezed back
The Maple Creek PTA’s site builder exports the Fall Bake Sale notice as one line of 269 characters: a heading, a paragraph with the date in bold, a price list and an email link. Before editing it, a volunteer pastes it in with Lay it out and 2 spaces.
- It becomes 22 lines. Each block element (div, h2, p, ul, each li) gets lines of its own, and the text inside sits one step deeper.
- The bold “October 17” and the “the PTA” link stay on the line with their words, so “Friday, October 17, 3:15–4:30 pm” and “Email the PTA.” keep every space.
- 4 spaces gives the same 22 lines, only deeper: 430 characters instead of 360.
- Squeeze it down on the 2-space layout: 360 characters back to 269, 25% less, and the line is exactly the one the site builder exported.
| What to do | In | Out |
|---|---|---|
| Lay it out, 2 spaces | 1 line, 269 characters | 22 lines, 360 characters |
| Lay it out, 4 spaces | the same line | 22 lines, 430 characters |
| Squeeze it down | the 22 lines with 2 spaces | 1 line, 269 characters (25% saved) |
| Squeeze it down | the exported line | 269 characters (0% saved) |
The notice is easy to edit laid out and goes back as the same 269-character line. Squeezing the exported line itself saves 0%: it had no comments and no whitespace between blocks left to remove.
How it works
- Paste the HTML. It is laid out as you type.
- Switch to “squeeze it down” to strip the indentation and the comments instead.
- Choose two spaces, four, or a tab.
- Copy the result, or download it as a file.
Frequently asked questions
- What happens to a document that is not quite valid?
- It still gets formatted. This reads the markup as a run of tags and text rather than parsing it into a tree, because the HTML somebody wants formatted is usually the HTML they are trying to understand — and a tool that refuses it is no help at all. An unclosed tag comes through as it stands.
- Will it break the spacing in my text?
- No, and that is the fiddly part of the job. The space between <b>one</b> and <i>two</i> is rendered, so it is kept; the space either side of a <div> is not, so it goes. Inline elements stay on the line with the words around them.
- Is anything inside <pre> touched?
- Not one character. Every space inside <pre> and <textarea> is rendered, so the content is emitted exactly as it was typed — not even shifted left. Script and style are different: their whitespace means nothing, so those are moved under their tag.
- Does minifying rename anything?
- No. It removes comments and the whitespace that does not show. Nothing is renamed, nothing is reordered, and the document that comes out renders the same as the one that went in.
- Does squeezing also minify the CSS and JavaScript inside <style> and <script>?
- No. Only the whitespace at the start and end of that code goes; the spaces and line breaks inside it stay as typed, so a <style> block written over two lines still comes out over two lines. To shrink the code itself, run it through the CSS formatter or the JavaScript minifier first.
- Is anything sent to a server?
- No. It runs in your browser, so what you paste stays on your computer.