What are Lightning Web Components?
Lightning Web Components (LWC) is the modern Salesforce UI framework — a thin layer on top of standards-based Web Components (Custom Elements, Shadow DOM, ES Modules) plus a Salesforce-specific compiler. Each component is a folder of three files: a .html template, a .js controller class extending LightningElement, and a .css file. LWC replaced the older Aura framework as the recommended way to build Lightning Experience apps, Salesforce Mobile UI, and Experience Cloud sites since 2018. Templates use HTML extended with lwc:if, for:each, and {expressionBindings}.
How does this formatter differ from one for Vue or Angular?
Syntactically very little — all three are HTML supersets with framework-specific directives, and all indent the same way at the tag level. The differences are in the directive vocabulary and convention: LWC uses for:each / for:item / for:index instead of v-for or *ngFor; lwc:if / lwc:elseif / lwc:else (introduced in Spring 23) instead of v-if or *ngIf; expression bindings use {camelCase} braces (with no quotes around the value); event handlers use onclick / onchange / onkeyup directly on tags. The formatter handles all of these as ordinary HTML attributes.
Does it support both old (if:true) and new (lwc:if) directives?
Yes. The legacy if:true={isVisible} and if:false={isHidden} attributes are syntactically ordinary HTML, so they format the same way. The newer lwc:if / lwc:elseif / lwc:else directives also format normally. Salesforce recommends migrating to the new directives because they support else and elseif branches; the legacy if:true and if:false do not.
How are <template> tags handled when used as iteration scopes?
In LWC, <template for:each={items} for:item="item">...</template> is a virtual scope that does not render a wrapping element — it groups child templates for the iteration. The formatter treats it as an ordinary tag and indents children one level under it. The same goes for <template lwc:if={condition}>...</template> and the optional <template lwc:else>...</template> branch.
Does it preserve slot syntax for component composition?
Yes. <slot></slot>, named slots <slot name="header"></slot>, and slot content provided by a parent (<span slot="header">...</span>) are formatted as regular HTML elements with one tag per line and consistent indentation. The formatter never modifies attribute values or the slot name attribute.
Can it format the JavaScript controller (.js) of an LWC?
No — this tool focuses on the .html template. The component controller class extending LightningElement, with @api / @track / @wire decorators, getter methods, and event handlers, is plain JavaScript with decorators. Format it with the JavaScript Pretty Print or TypeScript Formatter (which handles decorators) instead.
Does it handle Salesforce Lightning Design System (SLDS) classes?
Yes. SLDS utility classes (slds-p-around_medium, slds-text-heading_small, slds-list_dotted) are ordinary CSS class names — the formatter preserves them in the class attribute exactly as written. Long class lists are kept on the same line as the host element; the formatter does not split attribute values across multiple lines.
Is the LWC template I paste sent to your servers?
No. Formatting runs entirely in your browser using JavaScript. Templates referencing internal Apex controllers, custom field API names, or org-specific record types never leave your device. Open DevTools → Network and click Format to verify no requests are made.