bem-xjst editorconfig jscs travis-ci npm

Declarative template engine for the browser and server


Declarative template engine for the browser and server.

NPM version Build Status Dependency Status devDependency Status Coverage Status

Online demo. Twitter account: @bemxjst


Install it by npm: npm install bem-xjst.


As a node.js module

var bemxjst = require('bem-xjst');
var bemhtml = bemxjst.bemhtml;

// Add templates
var templates = bemhtml.compile(function() {

// Apply templates to data context in BEMJSON format and get result as HTML string
var html = templates.apply({ block: 'b' });
// Result in html: <div class="b">yay</div>
var bemxjst = require('bem-xjst');
var bemtree = bemxjst.bemtree;

// Add templates
var templates = bemtree.compile(function() {

// Apply templates to data context in BEMJSON format and get result as BEMJSON
var bemjson = templates.apply({ block: 'b' });
// Result in bemjson: { block: 'b1', content: 'yay' }

As a CLI tool

CLI can be used for creation bundles. See Compiler generate.

$ bem-xjst --help

  bem-xjst [OPTIONS] [ARGS]

  -h, --help : Help
  -v, --version : Version
  -e, --engine : Engine name (default: bemhtml, supported: bemhtml | bemtree)
  -i INPUT, --input=INPUT : File with user templates (default: stdin)
  -o OUTPUT, --output=OUTPUT : Output bundle file (default: stdout)



.compile(string or function)

Compile input templates and return templates object. (See documentation below for its methods)

.generate(string or function)

Generate output JavaScript code that might be transferred and executed in browser to get the templates object.



Run compiled templates on specified input context. Return resulting HTML output.

.compile(string or function)

Add more BEM templates to the templates instance. Might be called in runtime to deliver more blocks declarations to the client.

var bemxjst = require('bem-xjst');
var templates = bemxjst.bemhtml.compile(function() {

templates.apply({ block: 'b' });
// Return '<a class="b"></a>'

templates.compile(function() {
  block('b').content()('Hi, folks!');

templates.apply({ block: 'b' });
// Return '<a class="b">Hi, folks!</a>'


Constructor of the this object available in template bodies. Might be amended to expose some functionality to the templates, or to add _flush method.

var bemxjst = require('bem-xjst');
var templates = bemxjst.bemhtml.compile('');

templates.BEMContext.prototype.myField = 'opa';

templates.compile(function() {
  block('b').content()(function() {
    return this.myField;

templates.apply({ block: 'b' });
// Return '<div class="b">opa</div>'


To run benchmarks:

cd bench/
npm install
node run.js -h
node run.js

Benchmarks could be run in --compare mode to verify absence of regression in comparison to previous bem-xjst version. Make sure that the benchmarks/package.json has the right git hash of bem-xjst before running!



Code and documentation copyright 2016 YANDEX LLC. Code released under the Mozilla Public License 2.0.

Top Contributors

miripiruni indutny tadatuta veged vithar Yeti-or zxqfox basilred greenkeeperio-bot sbmaxx fual mishanga blond apsavin Guria incrop arikon vkz


-   v8.5.1 zip tar
-   v8.5.0 zip tar
-   v8.4.2 zip tar
-   v8.4.1 zip tar
-   v8.4.0 zip tar
-   v8.3.1 zip tar
-   v8.3.0 zip tar
-   v8.2.0 zip tar
-   v8.1.0 zip tar
-   v8.0.0 zip tar
-   v7.6.2 zip tar
-   v7.6.1 zip tar
-   v7.6.0 zip tar
-   v7.5.0 zip tar
-   v7.4.1 zip tar
-   v7.4.0 zip tar
-   v7.3.1 zip tar
-   v7.3.0 zip tar
-   v7.2.0 zip tar
-   v7.1.0 zip tar
-   v7.0.4 zip tar
-   v7.0.3 zip tar
-   v7.0.2 zip tar
-   v7.0.1 zip tar
-   v7.0.0 zip tar
-   v6.7.0 zip tar
-   v6.6.0 zip tar
-   v6.5.5 zip tar
-   v6.5.4 zip tar
-   v6.5.3 zip tar