LWC Formatter
Format Lightning Web Components HTML templates. It runs entirely on your device — nothing is uploaded.
Example
Format Lightning Web Components HTML templates.
How it works
Prettier's LWC parser formats Salesforce Lightning Web Component templates cleanly.
Good to know
The LWC Formatter cleans up the HTML markup inside Salesforce Lightning Web Component templates — the .html files that sit alongside your JavaScript and metadata in an LWC bundle. Paste your template, and it reflows indentation, attribute wrapping, and tag nesting using Prettier's HTML parser, so directives like template if:true, for:each, iterator:, and slot markup all line up consistently. It's aimed at Salesforce developers and admins who write or review components and want tidy, diff-friendly templates without setting up a local build.
Reach for it when you've pasted markup from a Stack Exchange answer, inherited an inconsistently formatted component, or want to standardize spacing before opening a pull request. Because it runs entirely in your browser, it's also handy when you can't (or shouldn't) paste org code into a third-party server — useful for client or regulated work.
Read the output as a normalized version of the same template: the structure and behavior are unchanged, only whitespace, line breaks, and attribute alignment are adjusted. If a tag was malformed or a directive bracket was unbalanced, formatting may fail or leave that region untouched, which is itself a quick signal that the markup has a syntax problem worth fixing.
A practical caveat: this tool formats the HTML template only, not the component's JavaScript controller or the .js-meta.xml file. For those, use a JavaScript-aware formatter, and for true project-wide consistency, pair this with a committed Prettier config and the Salesforce Prettier plugin in your repo so local and online output match.
Frequently asked questions
Is my data uploaded anywhere?
No — everything runs in your browser. Your code never leaves your device, so it's safe for private work and runs offline once loaded.
Is this tool free?
Yes, completely free with no sign-up and no limits.
People also ask
What is a Lightning Web Component HTML template?
It's the markup file in an LWC bundle, wrapped in a top-level <template> tag, that defines a component's UI. It uses Salesforce-specific directives such as if:true, for:each, and slots, and pairs with a JavaScript file and a metadata XML file.
Does formatting an LWC template change how the component behaves?
No. Formatting only adjusts whitespace, indentation, line breaks, and attribute wrapping. The tags, directives, and bindings stay the same, so the rendered output and behavior are unchanged.
Can this tool format the JavaScript and meta XML files in an LWC bundle?
No, it targets the HTML template markup. The component's JavaScript controller and the .js-meta.xml file need a JavaScript-aware or XML-aware formatter instead.
Will it handle LWC directives like for:each and if:true correctly?
Yes. It uses Prettier's HTML parser, which treats these as normal attributes, so directive-bearing tags are indented and wrapped along with the rest of the template.
How is this different from formatting plain HTML?
LWC templates are valid HTML but include a required <template> wrapper, Salesforce directives, and data-binding syntax in attributes. The formatting rules are the same as HTML; the difference is the markup patterns you're cleaning up.
How do I get the same formatting in my code editor?
Install Prettier and the prettier-plugin-apex or the Salesforce Prettier configuration in your project, then commit a .prettierrc file. That keeps local saves and CI consistent with what you see here.
Why did my template fail to format or come out unchanged?
That usually points to a syntax issue, such as an unclosed tag or an unbalanced directive bracket. Fix the malformed markup and run it again.
Related tools