Tiny and fast two way (MV-VM) data binding framework for browser environments.

Usage no npm install needed!

<script type="module">
  import dataTier from '';


NPM License: ISC

Quality pipeline Codecov Codacy


data-tier ('tier' from 'to tie') is a two way binding (MVVM) library targeting client (browser) HTML/JavaScript applications.

Primary reasons for data-tier (or - why bother):

  • simplicity, it is much simpler than any other MVVM libs I'm aware of
  • performant and robust data handling due to object-observer
  • perfectly suited for web-components based applications

It is highly advised to briefly review the library's Lifecycle documentation for a main concepts.

Once ready, data-tier's approach to client app architecture will provide a full author's take on when and how to employ data binding in a modern client applications in a non-intrusive, non-prisoning, managable and extensible way.

data-tier relies on an Observable-driven event cycle, having an embedded object-observer as the default Observable provider.

data-tier implements a data binding declaration API (part of this library), which specifies tying data source to element's:

  • attribute
  • event
  • method
  • property

The simplest example of usage, just to give some look'n'feel:

DataTier.ties.create('key1', { firstName: 'Uria' });
<span data-tie="key1:firstName"></span>

Support matrix: CHROME61+ | FIREFOX60+ | EDGE79+ | Safari13+

Changelog is found here.


Use regular npm install data-tier --save-prod to use the library from your local environment:

import * as DataTier from 'node_modules/data-tier/dist/data-tier.min.js';

Alternatively, a CDN deployment available (AWS driven), so one can import it as following:

import * as DataTier from '';

Note: replace the x.y.z by the desired version, one of the listed in the changelog.

CDN features:

  • security:
    • HTTPS only
  • performance
    • highly available (with many geo spread edges)
    • agressive caching setup


Starting walkthrough

Deep dive - API

Use cases - WebComponents, ShadowDOM, MicroFrontends


Security policy is described here. If/when any concern raised, please follow the process.


The easiest point to start from is the walkthrough examples.

Additionally, there are few the CodePen snippets:

  • DataTier binding with regular DOM elements - simple input element, its change event and span reflecting the changed value
  • WebComponent scoped binding - this time we have input tied to the reflecting span by an input event (immediate changes), while all of those scoped within a web-component, each instance of which has its own encapsulated model
  • ... more to come :)

Here we'll overview a rather simple, but quite self explanatory case.

2 elements below are both views tied to the same model. span is one-way bound to reflect the data. input employs two-way binding.

<input data-tie="tieKeyA:status => value => input">
<span data-tie="tieKeyA:status"></span>

This is our model initialization to make it all play together:

import { ties } from '';

const model = ties.create('tieKeyA', {
    status: 'better than ever'

For more details see API reference.


I believe, that data-tier as a framework should serve a single purpose of tying the model with the view in its very basic form: propagating the changes/values to the relevant recipient/s (more conceptual details and examples here).

Functionalities like repeater, router and other well known UI paradigms should be provided by a dedicated components, probably, yet not necessary, built on top of data-tier or any other framework.

Me myself investing some effort in building data-tier oriented components. I'll maintain the list below, updating it from time to time (please update me if you have something to add here).

  • data-tier-list - repeater-like component to render a list of a similar items based on a single template
  • i18n - internationalization library, mostly concerned with translation, where dynamic replacement of the localized texts upon active locale change is driven by data-tier