Free Online HTML Formatter
Format and beautify HTML, including pages with JavaScript, CSS, PHP and Laravel Blade. Only whitespace changes, so your code keeps working.
Tip: Ctrl + Enter to format · Ctrl + K to clear
How it works
- Paste HTML, a Blade or PHP template, or a Vue or Alpine component.
- Choose the indentation: 2, 4 or 8 spaces, or tabs.
- Click Format HTML (or press Ctrl + Enter).
- Copy the result or download it as formatted.html.
Frequently asked questions
Does it work with Blade, PHP and other templates?
Yes. Blade echoes, directives and components, PHP tags, Twig and Jinja tags and ERB tags are kept exactly as written, and control blocks such as @if … @endif, @foreach, @switch, <?php if (): ?> … <?php endif; ?> and {% for %} indent the markup inside them.
Does it format inline CSS and JavaScript?
Yes. Code inside <style> and <script> tags is formatted as CSS and JavaScript at the right indentation. JSON-LD is formatted too, and HTML templates inside script tags are formatted as HTML.
Can formatting break my code?
It only changes whitespace. Before showing the result, the formatter checks that every other character is exactly as you pasted it; if a block could not be formatted safely, that block (or the whole input) is left as it was.
Will formatting change how my page looks?
No. Spacing between inline elements such as links and bold text is kept as written, and the contents of <pre> and <textarea> are not touched. Only line breaks and indentation between block elements change.
Can it fix broken HTML?
It formats broken markup without changing it, but it does not add missing closing tags or repair invalid nesting. Indentation that drifts after formatting usually points to an unclosed tag.
Is my HTML sent to a server?
No. Formatting happens in your browser, so templates and page source stay private.
HTML Formatter for real-world templates
Real pages are rarely plain HTML. This formatter is built for markup mixed with JavaScript, CSS and server-side template code, such as a Laravel Blade view, a WordPress theme file or a Vue component, and lays it out with consistent indentation.
What it understands
- HTML: block and inline elements, attributes containing ">" or quotes, unclosed tags, comments and SVG.
- JavaScript and CSS: <script> and <style> blocks are formatted with proper parsers, so braces inside strings, regular expressions and comments don't throw the indentation off.
- Laravel Blade: {{ }}, {!! !!} and {{-- --}}, directives such as @if, @foreach, @forelse, @switch, @section and @push, @php blocks, @verbatim and <x-component> tags.
- PHP, Twig and ERB: <?php ?> and <?= ?> tags, including if/endif and while/endwhile blocks, Twig and Jinja {% %} tags, and ERB or EJS <% %> tags.
- Vue and Alpine.js: attributes such as @click, :class and x-data stay exactly as written.
Your code stays the same
Formatting only changes whitespace. Template code is set aside before formatting and put back exactly as written, the contents of <pre> and <textarea> are not touched, and spacing between inline elements is kept so the page looks the same. As a final check, the result must contain exactly the same characters as your input apart from whitespace; if it doesn't, your code is returned unchanged.
Is my HTML uploaded?
No. The formatting is performed directly in your browser. Your HTML does not need to be uploaded to a server, so private templates stay private.