Skip to content
💾 A DOM-driven micro-framework for Javascript applications
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.

liljs logo

File Size version David Dependency Status David devDependencyStatus PRs Welcome travis CI Gitter

Getting Started

For demos and examples, please visit

To start a liljs instance, you must call the function liljs with an html element to bootstrap to and an optional object with data for the first render cycle.

<div id="app">
  <!-- Elements using lil-* attributes -->

  liljs(document.querySelector('#app'), {
    propertyName: propertyValue,
    propertyName: propertyValue,
  }).then((app) => {

The liljs promise will initialize and render your app, and the returned value, app will be a proxy containing all properties you have defined. To change a value, use app.propertyName and that value will be update both in your proxy and in the DOM.


A Property is a value attached to the liljs proxy that will update the proxy once the value is updated. Properties are created by adding attributes to the child elements of the element defined in the first parameter of liljs() when you initialize your instance.

Properties can be updated by changing their value. This will also re-render the element that the property is attached to.


Sometimes you'd like to add a property after the app has been rendered. This is possible by calling app.addProp on your proxy object.

liljs(document.querySelector('#app'), {
    propertyName: propertyValue,
}).then((app) => {
    name, type, elemList, value

This function takes the following parameters:

Name Type Description
name String Name of a property to add
type String Bind type (style, text, list, ect...)
elemList Array Array of element(s) to apply this property to
value Any Name of the property to render
You can’t perform that action at this time.