Nifty Beautify

Format HTML inside PHP, Blade, Twig, Jinja, Handlebars, ERB and Liquid templates without breaking the template tags.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

Why

VS Code formats plain HTML, but template files are HTML mixed with <?php ?>, {{ }}, {% %} or <% %>. HTML formatters either refuse or mangle the tags, and PHP formatters ignore the HTML. Nifty Beautify protects the template tags, formats the HTML around them, and puts them back exactly as written.

Features

A cramped Laravel Blade view formatted with Format HTML in This File: tags indented, @foreach and @endforeach on their own lines, {{ }} echoes untouched

A Laravel Blade view formatted: directives on their own lines, echoes untouched, 4 spaces from .editorconfig

A Twig email template tidied, with every {{ }} and {% %} tag kept exactly as written

Templates it understands:
- PHP
- Laravel Blade
- Twig
- Jinja and Django templates
- Nunjucks
- Handlebars
- Ruby ERB
- Shopify Liquid
Tags are never changed. {{ $user->name }}, {!! $html !!}, <?= e($x) ?> and {{ value|filter }} stay byte-for-byte identical, even inside attributes.
Readable structure. Block tags (@if, @foreach, {% for %}, {{#each}}, <% end %>, <?php foreach (…): ?>) go on their own lines.
Just use Format Document. For Blade, Twig, Jinja, Nunjucks, Handlebars, ERB and Liquid files, VS Code's Format Document, Format Selection and format on save use Nifty Beautify.
Format HTML in This File. Right-click in a PHP (or any template) file to format its HTML, while your PHP formatter keeps handling the PHP. Template files are recognised by name too, so a .blade.php view is formatted as Blade and a .twig file as Twig even without a language extension for them.
Your settings. Reads .editorconfig and .jsbeautifyrc (including its html section), and your editor's indentation.
Works in the browser on vscode.dev and github.dev.

Commands

Command	What it does
`Nifty Beautify: Format HTML in This File`	Format the HTML in the file or selection, in any template language

Settings

Setting	Default	What it does
`nifty.beautify.formatPhp`	`false`	Also handle "Format Document" in PHP files
`nifty.beautify.wrapLineLength`	`120`	Wrap long lines (`0` = never)
`nifty.beautify.wrapAttributes`	`auto`	Attribute wrapping style
`nifty.beautify.indentInnerHtml`	`false`	Indent inside `<head>` and `<body>`
`nifty.beautify.maxPreserveNewlines`	`2`	Blank lines kept in a row

Install

VS Code: search for "Nifty Beautify" in the Extensions view, or install from the Visual Studio Marketplace.
Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

Credits

HTML formatting by js-beautify (MIT).

Privacy

This extension collects no telemetry, needs no account and makes no network requests.

More Nifty tools

Nifty SQL: SQL Formatter for 20 Dialects: Format SQL in 20 dialects, including dbt and Jinja templates, with your team's settings. (Open VSX)
Nifty JSON: Formatter, Validator & JSONPath: Format, minify, sort keys, query with JSONPath, copy paths, generate TypeScript types, and browse huge JSON files in a fast tree view. (Open VSX)
Nifty YAML: Formatter, Validator & Converter: Format YAML without losing comments (Kubernetes-style indents), sort keys, lint with yamllint, copy the key path, and convert to and from JSON. (Open VSX)
Nifty XML: XPath, Formatter & XML to JSON: Evaluate XPath with namespaces, copy the XPath of any element, format, minify, check well-formedness and convert XML to JSON. (Open VSX)
Nifty C# Templates: New Class, Record & Namespace: New C# class, interface, record, enum, test and controller files with the right namespace, plus namespace syncing. (Open VSX)
Nifty PHP Server: Built-in PHP Web Server: Serve a folder with PHP's built-in web server in one click, see requests live, and open pages in your browser. (Open VSX)

See all 21 Nifty tools at https://getnifty.dev

Nifty Beautify: Format HTML in PHP, Blade & Twig

Nifty