HTML Formatter

Overview

• Formats HTML whose tags are packed into a single line into a readable form with proper indentation and line breaks, using Prettier.
• Adjusts attribute quoting and line breaks to a consistent style, following Prettier's standard rules.
• Useful when you want to visually inspect HTML source, such as an HTML email template or a component's rendered output.

Usage

1. Enter the HTML you want to format into the text area.
2. Click the "Format" button.
3. The indented result is displayed below. Use the "Copy" button to copy it to the clipboard.

Example

<div><p>hello</p></div>

<div><p>hello</p></div>

Use Cases

• Formatting single-line HTML output by server-side rendering or a template engine for debugging
• Formatting another site's HTML source into a readable form before referencing it
• Formatting an HTML snippet into a consistent style before including it in a code review or documentation

FAQ

Notes

• Formatting fails if the HTML is syntactically invalid, such as when closing tags don't match correctly.
• Attribute quoting and line breaks are unified to Prettier's standard rules, regardless of the original formatting.
• Formatting very large HTML may make browser processing slow.