regularjs: a living template engine that helps us to create data-driven component.
JavaScript HTML CSS
Clone or download
leeluolee Merge pull request #203 from regularjs/next
prepare to release stable V0.6
Latest commit 6e18c7b Jan 26, 2018



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;