Skip to content
The smallest independent javascript library for logic-less HTML templating.
JavaScript CSS HTML
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
docs
unit-tests
.gitattributes
.gitignore
COPYING.txt
README.md
RIGHTS.txt
steno.js
steno.js.sln
steno.min.js
steno.min.js.map

README.md

steno.js

  • Author: Sudarsan Balaji
  • License: GNU Affero GPL v3
  • Library Version: v1.5.4
  • Last Updated: 2016-01-11
  • ReadMe Version: 1.2

Description

The smallest independent javascript library for logic-less HTML templating.

The main idea is that you should be able to do something like this:

steno.html('#main-menu.main[role="menu"]>((a>span{\\text})+(ul.dropdown>li{\\text}\\items))',
    {
        text: 'Some text here',
        items:  [
                    {
                        text: 'All'
                    },
                    {
                        text: 'Fall'
                    },
                    {
                        text: 'Down'
                    }
                ]
    });

should output

<div id="main-menu" class="main" role="menu">
    <a>
        <span>Some text here</span>
    </a>
    <ul class="dropdown">
        <li>All</li>
        <li>Fall</li>
        <li>Down</li>
    </ul>
</div>

so that you can then do:

jQuery('.insert-here').append(steno.html('ul>(li>a{Click Here})*4'));

or, like this:

window.steno = steno.html;
$('#insert-here').append(steno('ul>(li>a{Click Here})*4'));

or any other way you'd like to use the steno.html function.

Need precompiled templates? We've got you covered. Try:

var precompiled = steno.compile('ul>li{\\index}\\items'),
    context = { items: [{ index: 0 }, { index: 1 }, { index: 2 }, { index: 3 }] };
console.log(precompiled(context));

will output

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

You can also try

precompiled.render(context);

which will render the same output. steno.js works with both types of usage!

Features

  • Quickly add dom elements or innerHTML to a document.
  • Small but powerful logic-less templates!
  • Precompiled Templates
  • Compatiable with IE7.
  • No dependencies.
  • Comes with utilities, like extend, is, has, trim, random and nullify.

Documentation

Documentation is available at ReadTheDocs. You can read about getting started, learn the syntax and operators. The you can learn about templating. If you're still hungry for more, you can get to the API Reference.

Goals

Short Term

  • Respond to feature requests

Thanks

To wonderful authors of libraries like jQuery, qUnit, underscore and backbone, whose annotated source code was invaluable. Without such libraries, this project would never even have started, and this piece of code would have never seen the light of day.

Something went wrong with that request. Please try again.