Formatters
LWC Formatter
Lightning Web Component templates formatted with their own parser — directives and bindings understood.
In short
Format Salesforce LWC templates online: lwc:if, for:each, and binding syntax formatted with prettier's LWC parser. Free and in-browser.
By NaveenKumar T · Updated
- Industry-standard formatting
- Exact error line & column
- 2/3/4-space or tab indent
Runs entirely in your browser — nothing you paste or open here is uploaded, logged, or stored.How we handle data →
Example
LWC Formatter: input and output
A contact-list card template: an `lwc:if`/`lwc:elseif`/`lwc:else` chain around a `for:each` loop, bound `key`, `data-id` and `onclick` attributes, and a `lightning-button` whose attributes run past the line width.
<template>
<lightning-card title={cardTitle} icon-name="standard:contact">
<div class="slds-p-around_medium">
<template lwc:if={isLoading}>
<lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
</template>
<template lwc:elseif={error}>
<p class='slds-text-color_error'>{error.body.message}</p>
</template>
<template lwc:else>
<template for:each={contacts} for:item="c" for:index="i">
<p key={c.Id} data-id={c.Id} onclick={handleSelect}>{i}. {c.Name} — {c.Email}</p>
</template>
</template>
<lightning-button label="Refresh" variant="brand" onclick={refresh} disabled={isLoading} class='slds-m-top_small'></lightning-button>
</div>
</lightning-card>
</template><template>
<lightning-card title={cardTitle} icon-name="standard:contact">
<div class="slds-p-around_medium">
<template lwc:if={isLoading}>
<lightning-spinner
alternative-text="Loading"
size="small"
></lightning-spinner>
</template>
<template lwc:elseif={error}>
<p class="slds-text-color_error">{error.body.message}</p>
</template>
<template lwc:else>
<template for:each={contacts} for:item="c" for:index="i">
<p key={c.Id} data-id={c.Id} onclick={handleSelect}>
{i}. {c.Name} — {c.Email}
</p>
</template>
</template>
<lightning-button
label="Refresh"
variant="brand"
onclick={refresh}
disabled={isLoading}
class="slds-m-top_small"
></lightning-button>
</div>
</lightning-card>
</template>
Every `{expression}` attribute stays bare — `key={c.Id}`, `onclick={handleSelect}`, `disabled={isLoading}` — which is exactly why LWC gets its own parser instead of the generic HTML one.
Learn more
Formatting LWC, properly
LWC templates look like HTML but carry Salesforce-specific grammar: {property} bindings, for:each/for:item iteration, lwc:if|elseif|else conditionals, and nested <template> elements. Prettier's dedicated LWC parser formats these as syntax — preserving the exact attribute forms the LWC compiler requires.
Salesforce developers often work in org-based editors that mangle indentation; pasting templates here restores canonical form before code review or deployment. The parse step also catches template-structure mistakes that otherwise only surface at deploy time.
Help
Frequently asked questions
Everything you need to know about the LWC Formatter.
01How do I format LWC code here?
Paste a Lightning Web Component template (or load a file/URL) and press Format. Prettier's dedicated LWC parser preserves the bare-brace binding syntax ({property}, for:each, lwc:if) the LWC compiler requires, which the generic HTML parser would otherwise mangle.
02What about my component's JavaScript class?
Format the .js (with its decorators like @api and @wire) in the JavaScript Formatter — Babel parser handles decorators natively. This page owns the .html template side; together they cover the whole component bundle.
03Why does the HTML formatter wrap `{contact.Name}` bindings in quotes while this page keeps them bare?
Prettier's `lwc` parser is its HTML parser with one extra rule: an attribute value written as a bare `{expression}` stays unquoted. Push the same template through the generic HTML parser and `key={c.Id}` becomes `key="{c.Id}"`, which the LWC compiler rejects, while `onclick={handleSelect}` is treated as inline JavaScript and mangled. Directives such as `lwc:if`, `for:each` and `for:item` are kept case-exact, long elements split one attribute per line, and the closing bracket is placed so no rendered whitespace changes.