bem/bem-xjst

bem-xjst (eXtensible JavaScript Templates): declarative template engine for the browser and server

bem-xjst

Declarative template engine for the browser and server with regular JS syntax.

Features

Templates are extensible: they can be redefined or extended

You can redefine or extend just a particular part of output not only by simple redefinition via new templates but also using ‘modes’. E.g. it may be a tag name or its content.

block('link')({ tag: 'span' });
// The template sets tag to `span` for all `link` blocks.
// And tag mode can be redefined if any condition passed.

block('link').match((node, ctx) => ctx.url)({ tag: 'a' });
// The template sets tag to `a` only if block `link` have `url` field.
// Otherwise tag will be ‘span’ as previous template says.

Pattern matching

Templates are written using pattern matching for the values and structure of input data

block('list')({ tag: 'ul' });
block('item')({ tag: 'li' });

We can apply these two declarative-style templates templates to data:

{
  block: 'list',
  content: [
    {
      block: 'item',
      content: {
          block: 'list',
          content: [
              { block: 'item', content: 'CSS' },
              { block: 'item', content: 'HTML' }
          ]
      }
    },
    {
      block: 'item',
      content: {
          block: 'list',
          content: { block: 'item', content: 'JS' }
      }
    }
  ] 
}

The result is:

<ul class="list">
    <li class="item">
        <ul class="list">
            <li class="item">CSS</li>
            <li class="item">HTML</li>
        </ul>
    </li>
    <li class="item">
        <ul class="list">
            <li class="item">JS</li>
        </ul>
    </li>
</ul>

As you can see templates are as simple as CSS.

Automatic recursive traversing upon input data

In the example above you may have noticed that bem-xjst automaticaly traverses input data by content fields. This behaviour is default feature of bem-xjst.

Default rendering

Built-in rendering behavior is used by default, even if the user didn’t add templates. Even without templates. For example from above it will be:

<div class="list">
    <div class="item">
        <div class="list">
            <div class="item">CSS</div>
            <div class="item">HTML</div>
        </div>
    </div>
    <div class="item">
        <div class="list">
            <div class="item">JS</div>
        </div>
    </div>
</div>

That is more than half of the work ;) You will add the salt (couple of templates for tags) and the HTML-soup is very tasty!

No DSL, only JavaScript

Written in JavaScript, so the entire JavaScript infrastructure is available for checking code quality and conforming to best practices.

Since templates is a regular JavaScript code you can use automatic syntax validator from your editor and tools like JSHint/ESLint.

Runs on a server and client

You can use bem-xjst in any browser as well as in any JavaScript VM. We support Node.JS v0.10 and higher.

Tell me more

See documentation:

1. About
2. Quick Start
3. API: usage, methods, signatures and etc
4. Input data format: BEMJSON
5. Templates syntax
6. Templates context
7. Runtime: processes for selecting and applying templates

Try it

Online sandbox

Online demo allows you to share code snippets, change versions and etc. Happy templating!

Install npm package

To compile bem-xjst, you need Node.js v0.10 or later, and npm.

npm install bem-xjst

Copy-paste example from quick start or see simple example from repository. Then read documentation and start experimenting with bem-xjst.

Is bem-xjst used in production?

Yes. A lot of projects in Yandex and Alfa-Bank, also in opensource projects based on bem-core and bem-components.

Benchmarks

See readme.

Runtime linter

See readme.

Static linter and migration tool for templates

See readme.

Links

• Documentation
• Changelog and releases notes
• Contributing guide
• Online demo (you can share code snippets)
• Twitter account: @bemxjst
• Migration guides for all major versions