Turboboosted 2 KB view library for browser & node.js
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Turboboosted 2 KB view library with 100 % test coverage.

npm npm downloads Build Status npm Twitter Follow

FRZR is now RE:DOM!

Check it out! https://redom.js.org


npm install frzr


Latest updates

Using at server-side


Using with JSX


Getting started

http://codepen.io/collection/XKwVMG (more will be added soon..)

Calendar project example


Creating a table



HelsinkiJS talk


SurviveJS interview:


el(tagName, (attributes), (...children))

Creates a HTML element:

var p = el('p', { textContent: 'Hello world!' });

You can also define children:

var div = el('div', null, p);

You can also omit attributes:

var p = el('p', 'Hello world!' );
var div = el('div', p);

It's also possible the register custom elements and attributes, covered here.

svg(tagName, (attributes), (...children))

Works like el, but creates a SVG element:

var circle = svg('circle', { cx: 50, cy: 50, r: 50 });
var canvas = svg('svg', { width: 100, height: 100 }, circle);

Creating components

Components (or Views) are just POJF (plain old JavaScript functions):

function Item () {
  this.el = el('p');
Item.prototype.update = function (text) {
  this.el.textContent = text;
var item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>

You can also use ES6 classes:

class Item {
  constructor () {
    this.el = el('p');
  update (text) {
    this.el.textContent = text;
const item = new Item();
item.update('Hello world!');
mount(document.body, item); // <body><p>Hello world!</p></body>

There are also some lifecycle "events" covered here.

new List(View, (key), (initData), (skipRender));

Automatically inserts, removes and even reorders components. Previous example makes a lot more sense now:

var list = new List(Item);
mount(document.body, list);
list.update([1, 2, 3]); // <body><p>1</p><p>2</p><p>3</p></body>
list.update([2, 3, 4, 5]); // <body><p>2</p><p>3</p><p>4</p><p>5</p></body>

By defining a second key parameter you can reorder DOM elements. The third initData parameter just gets sent to the Component constructor as a first argument, with item and index. The fourth skipRender parameter skips the DOM update, if you want to implement a custom method.

mount(target, child)

You can mount HTML elements/components to HTML elements/components.

mount(document.body, p);
mount(document.body, div);
mount(div, p);

mountBefore(target, child, before)

mountBefore(document.body, svg, div);

unmount(target, child)

Unmounts element/component from element/component.

unmount(document.body, svg);

setChildren(target, [child])

This cleverly replaces target's children. Children already in the DOM automatically gets moved / kept in place.

setChildren(document.body, [p, svg]);

virtual-dom version

If you like virtual dom updates better, check out RZR. You can also mix & match!