The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    a living template engine that helping us to create data-driven component.
    Filed under  › 

    • 🔾45%Overall
    • 1,057
    • 25.7 days
    • 🕩155
    • 👥10



    Build Status

    Regularjs is a living template engine that helps us to create data-driven components.


    • String-based template makes it flexible to write your component;
    • data-binding based on dirty-check: experience from AngularJS-like frameworks also makes sense to regularjs;
    • self-contained and well-defined encapsulation makes it more easily integrated with other frameworks;
    • composite components: components can be used as "custom elements";
    • directive, filter, event and animation... all you need is provided out of the box with concise API.

    Quick Start

    Example 1: define a simple Note Component

    var Note = Regular.extend({
        "<input {#if !disabled} r-model='hello' {#else} disabled {/if} > {hello} \
        <button on-click={disabled = !disabled}>{disabled? 'active': 'disable'} it</button>"
    // inject component into #app , you can also inject at 'before' , 'after', 'top'.
    var note = new Note().$inject("#app");

    Example1 on

    This example is dead simple, but you can find the directive and attribute is easily switched by statement 'if', which is difficult with other mvvm frameworks.

    Example 2: define a List Component

    var NoteList = Regular.extend({
        "<ul>{#list notes as nt}" +
          "<li class={nt.done? 'done': ''} on-click={nt.done= !nt.done}>{{nt.content}}</li>" +
    var list = new NoteList({
      data: {
        notes: [
          {content: 'playgame'},
          {content: 'homework'}

    In this Example, we create a ListView with the statement list.

    Example2 on

    Example 3: combine Note with NoteList

    We need to refactor Note to make it composable.

    var Note = Regular.extend({
      name: 'note',  // register component during the definition of Component
       "<input r-model={draft}> <button on-click={}> post</button>",
      post: function(){
        var data =;
        this.$emit('post', data.draft);
        data.draft = ""; //clear the draft
    Regular.component('list', NoteList);  // manual register a component

    When 'Enter' is pressed, Note will emit a 'post' event with draft as the $event object.

    The keyword this in the template refers to the component itself.

    Then, let's define the core component: NoteApp.

    var NoteApp = Regular.extend({
        "<note on-post={notes.push({ content: $event} )}/>"+
        "<list notes ={notes}></list>"
    var noteapp = new NoteApp({
        data: {notes:[]}

    you can register a component (via attribute name or method Component.component) to make it composable in other components.

    Example3 on

    See more on Guide: Quick Start


    Browser Compatibility

    IE7+ and other modern browsers.



    bower install regularjs

    dist/regular.js has been packaged as a standard UMD, and therefore you can use it in AMD, commonjs or global.

    npm (browserify or other based on commonjs)

    $ npm install regularjs


    var Regular = require('regularjs');


    $ component install regularjs/regular


    var Regular = require('regularjs/regular');

    Direct download

    1. regular.js
    2. regular.min.js

    Who are using?

    1. NetEase: the operator of the famous website



    regularjs is still under heavy development, and please help us with feedback. Contributing to this project is also welcome.

    • Please open an issue before sending pull request
    • if needed, add your testcase in test/specs folder. Always make sure the gulp test is passed, and the test/runner/index.html is passed in every target browser (if a certain browser is not installed, list that in gulpfile's karmaConfig)




    remove log code in production mode;

    Show All