Skip to content
👌 DOM Component Framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github adding new method ERoot.bindFor Aug 30, 2018
test implementing #25 Dec 9, 2018
.eslintrc.json refactoring code Aug 16, 2018
.gitignore fixing #11 Aug 9, 2018
.travis.yml integrating coverage Aug 4, 2018
LICENSE Create LICENSE Aug 4, 2018 implementing #25 Dec 9, 2018
gulpfile.js integrating gzip Aug 15, 2018
jest.config.js add root error tests Aug 4, 2018
package-lock.json dependencies Dec 19, 2018
package.json dependencies Dec 19, 2018



DOM Component Framework

Build Status Coverage Status Join Chat

If you like VanillaJS and working with DOM directly, this tiny (3Kb gzip) library helps with organizing your code into reusable DOM components. See WiKi for details.

You get the essential element-to-controllers bindings:

<div e-bind="awesome, twinkling, message"></div>

That gives your code isolation and reusability (see the plunker):

app.addController('message', function(/*ctrl*/) {
    // this = ctrl
    // this.node = your DOM element, to work with directly;
    this.node.innerHTML = 'Awesome twinkling message :)';

app.addController('awesome', function() {
    this.node.className = 'green-box';

app.addController('twinkling', function() {
  var s =, a = -0.01;
  setInterval(function() {
    a = (s.opacity < 0 || s.opacity > 1) ? -a : a;
    s.opacity = +s.opacity + a;
  }, 20);

Such controllers can easily find each other, either among children, with EController.find and EController.findOne, or globally, with ERoot.find and ERoot.findOne, and access methods and properties in found controllers directly:

app.addController('myCtrl', function(ctrl) {
    // this = ctrl

    this.onInit = function() {
        // find one child controller, and call its method:

        // find some global controllers, and call a method:
        app.find('globCtrl').forEach(function(c) {

Or you can alias + configure controllers at the same time (method addAlias), without any search.

Other features include:

  • Global and local dynamic bindings, with ERoot.bind and EController.bind.
  • Controllers can extend / inherit each other's functionality, see Inheritance.
  • Native ES6 classes can be optionally used as controllers, see Classes.
  • Modules offer greater reusability and simpler distribution of controllers.
  • Services share functionality across all controllers.
  • TypeScript support right out of the box.

You can create whole libraries of reusable components that will work with any UI framework, or on their own.

Quick Links:  Examples  |  WiKi  |  API

You can’t perform that action at this time.