HTML Formatter
FormattersInstantly format and indent messy HTML with Prettier. Handles HTML5, custom elements, and embedded scripts and styles. Live preview, 100% browser-based.
About HTML Formatter
The HTML Formatter is a Prettier-powered, browser-based tool that instantly beautifies and properly indents raw or minified HTML markup. It handles HTML5, custom elements, Web Components, embedded `<script>` and `<style>` blocks, and produces clean output with configurable indentation and print width. A built-in Live Preview tab renders the formatted HTML in a sandboxed iframe so you can confirm the output looks correct without leaving the tool. All formatting runs in a Web Worker — your HTML never leaves the browser.
Features
- ✓Powered by Prettier's battle-tested HTML parser
- ✓Handles HTML5, custom elements, Web Components, and SVG inline
- ✓Formats embedded <script> blocks (JavaScript) and <style> blocks (CSS) in-place
- ✓Live Preview tab — renders formatted output in a sandboxed iframe instantly
- ✓Configurable indentation: 2 spaces, 4 spaces, or tab
- ✓Print width set to 80 columns for consistent line-wrapped output
- ✓Web Worker execution — formatting never blocks the UI
- ✓Syntax-highlighted editor for both input and output
- ✓One-click clipboard copy of formatted output
- ✓Real-time byte-savings stats (input vs output size)
- ✓Language picker — instantly switch to 20+ other formatters
- ✓Mobile-responsive layout with a dedicated Format button
- ✓100% client-side — nothing is uploaded
Common Use Cases
- Indenting minified HTML received from a build pipeline or CDN before debugging
- Cleaning up hand-written templates with inconsistent indentation
- Previewing HTML snippets in the built-in iframe before pasting into documentation
- Formatting HTML email templates for readability before code review
- Normalising indentation across a team's component library
- Preparing readable HTML for bug reports or Stack Overflow questions
Frequently Asked Questions
QWhich formatter powers this tool?
Prettier's HTML parser — the same parser used by VSCode's built-in formatter and most popular IDE extensions.
QDoes it format inline JavaScript and CSS?
Yes — Prettier formats embedded <script> blocks as JavaScript and <style> blocks as CSS, producing consistently indented output throughout the document.
QWhat does the Live Preview tab do?
The Preview tab renders your formatted HTML in a sandboxed iframe with allow-scripts and allow-same-origin permissions. It lets you visually confirm the output before copying.
QIs my HTML sent to a server?
No. All formatting runs locally in a Web Worker inside your browser. Your markup never leaves your device.