Formatters
Glimmer Formatter
Canonical .hbs formatting — mustaches, block helpers and angle-bracket components, the Ember way.
In short
Format Glimmer/Handlebars templates online: mustaches, block helpers, components and named blocks in canonical Ember style. Prettier engine. Free.
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
Glimmer JS Formatter: input and output
An Ember cart-line template: an angle-bracket component invocation with `@args`, a modifier and a block param crammed onto one line, a `<:price>` named block, and an `{{#each}}`/`{{else}}` list with inconsistent indentation.
{{!-- Cart line --}}
<CartLine @item={{this.item}} @onRemove={{fn this.remove this.item.id}} class='line {{if this.item.gift "gift"}}' {{on 'click' this.select}} as |line|>
{{#if line.discounted}}
<span class="badge">{{line.discount}}% off</span>
{{/if}}
<:price>{{format-money line.total currency='USD'}}</:price>
</CartLine>
<ul>
{{#each this.items key="id" as |item index|}}
<li {{on 'click' (fn this.select item)}}>{{index}}. {{item.name}}</li>
{{else}}
<li class='empty'>Your cart is empty</li>
{{/each}}
</ul>{{! Cart line }}
<CartLine
@item={{this.item}}
@onRemove={{fn this.remove this.item.id}}
class="line {{if this.item.gift 'gift'}}"
{{on "click" this.select}}
as |line|
>
{{#if line.discounted}}
<span class="badge">{{line.discount}}% off</span>
{{/if}}
<:price>{{format-money line.total currency="USD"}}</:price>
</CartLine>
<ul>
{{#each this.items key="id" as |item index|}}
<li {{on "click" (fn this.select item)}}>{{index}}. {{item.name}}</li>
{{else}}
<li class="empty">Your cart is empty</li>
{{/each}}
</ul>Attribute values get double quotes while the string inside `{{if … 'gift'}}` switches to single quotes because it sits within a double-quoted attribute; the `{{!-- --}}` comment is shortened to `{{! }}` since it contains no `}}`.
Learn more
Formatting Glimmer, properly
Glimmer templates (Ember's .hbs files) mix HTML with Handlebars mustaches, {{#block}} helpers, angle-bracket components and named blocks. Prettier's Glimmer plugin formats them with the conventions the Ember ecosystem standardized — component arguments wrapped readably, block contents indented, modifiers kept tidy.
Ember apps live and die by template readability; long component invocations with @args and modifiers need consistent wrapping to review sanely. This is the same formatting ember-template-lint ecosystems expect, available for any pasted snippet.
Help
Frequently asked questions
Everything you need to know about the Glimmer JS Formatter.
01How do I format Glimmer code here?
Paste a Glimmer/Handlebars template (or load a file/URL) and press Format. Prettier's Glimmer parser understands mustaches, block helpers, angle-bracket components and named blocks, wrapping component arguments and indenting block contents in the Ember ecosystem's conventions.
02Can I format generic Handlebars (non-Ember) templates here?
Usually yes — the Glimmer grammar is a superset of common Handlebars usage, so typical {{mustache}} and {{#each}} templates format fine. Exotic runtime-specific helpers may parse differently; for Ember code it's exact.
03Why did my quotes flip, and does `~` whitespace control survive?
Prettier normalizes Glimmer to double quotes: attribute values and string literals in a standalone mustache become `"…"`, while a string inside a mustache that sits within a double-quoted attribute uses single quotes — `class="line {{if @gift 'gift'}}"` — so nothing needs escaping. `{{~` and `~}}` tildes stay exactly where you put them. One rule matters most: the printer never adds whitespace between text, elements and mustaches where none existed, because Handlebars renders that whitespace, so a tightly packed `{{#each}}<li>` pair stays packed until you add a line break.