Fork me on GitHub

ist.js

DOM templating made natural

About ist.js

/* IST template example */
header
    @include "header.ist"
section#main
    @each articles
        article
            h1 "{{ title }}"
            "{{ text }}"
footer
    @include "footer.ist"
ist.js is a javascript DOM templating engine. Unlike most other templating engines, it directly generates DOM nodes that you can insert into your document nodes which is often faster than inserting HTML code. It uses indented CSS selectors to describe node trees, and features partials, directives and custom block helpers.
ist.js tries to re-use as many syntax elements from CSS as possible, thus setting your editor to CSS should give nice results in most cases.
Download ist.js v0.6.6 Minified version
You can try the online demo, browse the documentation or take a look at the GitHub repository.

Latest news

ist.js v0.6.6 - Small new features

09 March 2014 permalink

I just released ist.js version 0.6.6, which adds two new features (one of which was actually added in 0.6.5 but I didn't write a post about it).

The first one enables defining global variables or helpers that will be available anywhere in templates:

ist.global("myHelper", function(value) {
    return "helped value: " + value;
});

ist.global("myValue", 42);
div
    /* Renders to "helped value: hi!" */
    "{{ myHelper('hi!') }}"

    /* Renders to "42" */
    "{{ myValue }}"

Note that context variables with the same name as global variables will take precedence, as you're used to in Javascript.

The second features enable escaping newlines with a backslash to make long selectors more readable. All spaces/tabs before the backslash and on the beginning of the following line will be ignored. Take care not to leave spaces after the escaping backslash.

div.class#id[data-one={{ one }}][data-two={{ two }}] \
    [data-three={{ three }}][data-four={{four }}] \
            [data-five={{ five }}][data-six={{ six }}]