Glimmer Formatter
Format Glimmer / Handlebars (.hbs) templates. It runs entirely on your device — nothing is uploaded.
Example
Format Glimmer / Handlebars (.hbs) templates.
How it works
Prettier's Glimmer parser formats Handlebars/Ember templates with consistent indentation.
Good to know
The Glimmer Formatter takes raw Handlebars or Ember (.hbs) template markup and reformats it with consistent indentation, line breaks, and attribute spacing using Prettier's official Glimmer parser. It's aimed at Ember.js and Glimmer developers who write component templates, but it's equally handy for anyone wrangling messy Handlebars files who wants a clean, predictable layout without installing Node or wiring up Prettier locally.
Reach for it when you've pasted in inconsistent template code, inherited a file with mixed indentation, or want to standardize block helpers like {{#if}}, {{#each}}, and angle-bracket components before committing. Because it mirrors the same rules Prettier applies in a build pipeline, it's a quick way to preview what your CI or editor-on-save formatting will produce, or to settle indentation debates without running the toolchain.
Reading the result is straightforward: nested HTML elements and Handlebars block helpers are indented to show hierarchy, long element tags with many attributes are wrapped one attribute per line, and inline mustache expressions stay on the line they belong to. If the formatter throws an error or returns unchanged text, that usually signals a syntax problem in the source, such as an unclosed block, mismatched component tag, or stray brace, rather than a formatting issue.
One practical note: this formatter is built for Glimmer-style templates, not plain Handlebars used purely as a string-templating language outside Ember, so unusual non-Glimmer constructs may not parse cleanly. Everything runs locally in your browser through the bundled Prettier standalone build, so you can format proprietary templates safely, but the output reflects Prettier's default Glimmer options rather than any custom config in your project's .prettierrc.
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 Glimmer in Ember?
Glimmer is the rendering engine and template syntax used by Ember.js and standalone Glimmer.js apps. It extends Handlebars-style mustache syntax with angle-bracket component invocation, modifiers, and other features for building reactive UI components.
What is the difference between Handlebars and Glimmer templates?
Handlebars is a general-purpose templating language, while Glimmer is Ember's template format built on top of Handlebars syntax. Glimmer adds component-specific features like angle-bracket invocation (<Component />), element modifiers, and named arguments that plain Handlebars does not include.
Does this formatter use Prettier?
Yes. It runs Prettier's standalone build with the Glimmer plugin entirely in your browser, so the output matches what Prettier's Glimmer parser would produce in a normal command-line or editor setup.
Why is my .hbs file not formatting?
The most common cause is a syntax error in the template, such as an unclosed block helper, a mismatched component tag, or an unbalanced mustache brace. Fix the underlying syntax and the formatter should run successfully.
Can I format Ember component templates with this tool?
Yes. Ember component templates use Glimmer syntax, so you can paste them in and the tool will apply consistent indentation and wrapping to both the HTML and the Handlebars block helpers.
Does formatting change how my template behaves?
No. Formatting only adjusts whitespace, indentation, and line breaks for readability. It does not alter the rendered output or the logic of your helpers, components, and bindings.
What file extension do Glimmer templates use?
Glimmer and Ember templates typically use the .hbs extension, which stands for Handlebars. Some Ember setups also embed templates in JavaScript or TypeScript files using template tags.
Related tools