Find it on GitHub.

Synless is a "syntax-less" HTML template language that compiles to Incremental DOM render functions for use with Backbone.

I love Backbone. It's a wonderfully-written MVVM library that exudes software crafstmanship. But it's View class is lacking. To quote the Backbone docs:

Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library.

Synless was originally designed to be a replacement for Mustache and jQuery inside Backbone View render methods. They were very easy to use for rendering, with most views needing only a handful of lines of code to manipulate the DOM:

Backbone.View.extend({
    template: $("template").html(),
    render: function() {
        this.$el.html(Mustache.render(
            this.template,
            this.model.attributes
        ));
        return this.el;
    }
});

But rendering the view in this way wipes out all element state (most important being focus and user interactions) and any subviews that have been created. In addition, Mustache templates are entirely text-based. They just happen to contain HTML in this case, and are HTML-unaware. Thus they aren't always valid HTML markup before being rendered which often requires storing them in JavaScript strings or script tag.

Synless aims to be as simple to use as Mustache and jQuery while addressing these issues.

Backbone.View.extend({
    template: Synless.template(
        document.querySelector("template").content
    ),
    render: function() {
        return this.template(this.el);
    }
});

<template>
    <ul>
        <li sl-each="this.collection.models"
            sl-as="model">
            <a sl-attr:href="model.get('url')"
               sl-text="model.get('name')"></a>
        </li>
        <li sl-empty="this.collection.models">
            No Items
        </li>
    </ul>
</template>

It does so by adhering to the following principles:

No Syntax

Templates should have no special syntax. They should be valid HTML before being compiled. And they should be easy to work with in restrictive environments that only allow valid HTML and JavaScript.

Fully In-Browser

Templates should be fully functional in-browser and not require an external build system. The original, readable template source should be usable in COTS environments that have their own repository. There should be no need to maintain an external source file that must be built or compiled before being used in the COTS environment.

Multiple Input Types

HTML can be represented in multiple ways—Strings, Documents, Nodes, NodeLists, HTMLCollections, and DocumentFragments. The compiler should be able to take any of these input types and produce a render function.

DOM Patching

Instead of wiping out the existing DOM subtree, rendering a template should patch the subtree in a performant way that maintains element state. Synless depends on Incremental DOM to do this.

Preservation of Subviews

Templates should have a way to specify that an element's subtree will be managed by an external actor—such as a subview. Patching the DOM tree should leave such elements' subtrees unchanged.