Hbars is a Haml-like syntax transpiler for Ember HTMLBars templates that compiles concise Haml-style markup into HTMLBars template syntax.
What is Hbars?
Hbars is a Node.js-based transpiler that converts templates written in a Haml-inspired indentation syntax into Ember HTMLBars template files. It takes .hbars source files as input and produces standard HTMLBars markup as output, passing HTMLBars helper logic through with minimal transformation. The project is published on npm and documented at hbars.io, and it also integrates with Ember-cli through the companion ember-cli-hbars addon.
Key Features
- Haml-like syntax — Write template markup using Haml's indentation-based shortcuts, such as
%tagand.class, while using HTMLBars helpers in place of Ruby expressions. - npm package — Install with
npm install --save-dev hbarsfor direct use in Node.js build processes. - Ember-cli addon — The separate
ember-cli-hbarspackage adds Hbars compilation to Ember-cli projects withnpm install --save-dev ember-cli-hbars. - Documentation site — Comprehensive usage details and syntax reference live at hbars.io.
- Testem test runner — The repository uses Testem (
npm test) for automated testing and includes a grep-style runner (./bin/test 'compiler') to run specific test subsets. - Vim integration — Haml syntax highlighting works for
.hbarsfiles; addau BufNewFile,BufRead *.hbars set filetype=hamlto.vimrc. - Open contribution — The project welcomes pull requests and lists planned features including
plain:raw text blocks, multi-line attribute lists, HTML doctypes, and data attribute sub-hashes.
Who should use Hbars?
- Ember application developers — Developers who want to write Ember templates with Haml's concise indentation style instead of verbose HTML tag pairs.
- Frontend template authors — Engineers authoring large template suites who benefit from reduced visual noise and faster markup entry.
- Build tooling engineers — Developers integrating Hbars into custom compilation pipelines via its npm package.
What can you do with Hbars?
- Author templates faster — Write cleaner, indentation-based templates and let Hbars output the corresponding HTMLBars markup.
- Reuse Haml editing tools — Apply existing Haml editor modes (Vim, Emacs, etc.) to
.hbarsfiles for familiar syntax highlighting. - Extend the compiler — Contribute missing features or file feature requests, as the project explicitly seeks help in expanding Haml coverage.
How does Hbars work?
Hbars reads .hbars source text and transpiles it to HTMLBars template text. HTMLBars helper expressions embedded in the source are preserved and passed through to the output with minimal rewriting, letting Ember's runtime evaluate them normally.
FAQ
How do I install Hbars?
Install the core package with npm install --save-dev hbars. For Ember-cli projects, also install the addon with npm install --save-dev ember-cli-hbars.
Does Hbars work with Ember-cli?
Yes, the ember-cli-hbars addon integrates Hbars compilation into Ember-cli's build pipeline. After installing the addon, .hbars files are processed automatically.
How can I get syntax highlighting for Hbars?
Because Hbars syntax closely matches Haml, you can tell your editor to treat .hbars files as Haml. In Vim, add au BufNewFile,BufRead *.hbars set filetype=haml to your .vimrc.
Can I contribute features to Hbars?
The project is open to contributions. Its README lists desired features such as raw text blocks with a plain: filter, multi-line attribute lists, HTML doctypes, and data attribute sub-hashes.
