Format Lightning Web Component (LWC) HTML templates for Salesforce.
Loading the tool...
How to use LWC Formatter
Paste your code. The formatter engine loads in a moment the first time.
Adjust the options if you need to.
Copy the formatted result.
About LWC Formatter
LWC templates look like HTML, but their bindings are written without quotes: {value} instead of "{{value}}". A generic HTML formatter may add quotes there and break the component. This one knows the LWC rules and leaves bindings as they should be.
Directives like for:each and if:true are kept as written.
Frequently asked questions
Why not use the HTML formatter?
It would treat unquoted bindings as invalid HTML and could add quotes around them. This one parses the template as LWC.
Does it format the JavaScript file?
No, only the template. Use the Babel Formatter for the JS part of the component.
Is it affiliated with Salesforce?
No. LWC is a Salesforce framework, and this tool simply formats its template syntax.
Why did the first run take a second?
The formatting engine for this language is downloaded the first time you use it, then cached by your browser. After that, formatting is instant and nothing leaves your machine.