Logic-full template engine for DOM & JavaScript


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
30Jul 2, 2017Feb 3, 2017Minified + gzip package size for barbiche in KB


Barbiche - Template engine for DOM & JavaScript

Barbiche is a logic-full template engine for browser environment. It has been designed to give you complete control over the data you want to merge into an HTML fragment. Once minified and gzipped, Barbiche size is 11KB.

Documentation and interactive examples can be found here.


Barbiche supports:

  • text and HTML insertion
  • conditions (if and optional else)
  • aliases
  • loops
  • flexible subtemplate imports
  • attribute setting
  • class setting

Barbiche has a complete test suite that can be run in your browser.


We ask Barbiche to merge some data into an HTML template:

<template id="test">
    <div bb-alias="items[1].name: 'name'" bb-class="customClass">
        <ul bb-attr="my_replace(attrValue): 'attr-name'">
            <template bb-repeat="items: 'item'">
                <li bb-if="" bb-class="[item.species || 'unknown', (_item_ == 0): 'first']">
                    {{}} (index: {{_item_}})
        <span>{{item.join(', ').toUpperCase()}}</span>
var barbiche = Barbiche();
var frag = barbiche('test').merge({
    customClass: "my-class",
    "items": [
        {species: "hen", name: "Elsa", show: true},
        {species: "cat", name: "Jacynthe", show: false},
        {species: null, name: "Zaza", show: true}
    item: ["hen", "cat", "dog", "spider"],
    some_html: "<div><p>This is...</p><p>...some HTML.</p></div>",
    my_replace: function(str) {return str.replace(/o/g, "O");},
    attrValue: "lunchroom"

The returned document fragment can then be inserted anywhere you want. It contains:

<div class="my-class">
    <ul attr-name="lunchrOOm">
        <li class="hen first">Elsa (index: 0)</li>
        <li class="unknown">Zaza (index: 2)</li>
    <span>HEN, CAT, DOG, SPIDER</span>
    <div><p>This is...</p><p>...some HTML.</p></div>

Browser support

Barbiche requires support of <template> element and basic support of element.classList API. Here is the support table:

Native (v2 & v3) Polyfilled (v2) Polyfilled (v3)
Chrome ≥26 ≥15 ≥26
Firefox ≥22 ≥22 ≥22
IE/Edge No support ≥9 ≥11
Opera ≥15 ≥11.6 ≥15
Safari ≥9 ≥6.2 ≥6.2

Polyfills, once minified and gzipped, weight an additionnal 2KB.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from