Introduction

Basic concepts

Leeze.js is based on simple concepts: buckets and custom HTML attributes.

You can think of buckets exactly like a standard JS variable, but they are used to tell Leeze.js what elements to update with whatever data we put inside them.
Each bucket has to have a name and can hold any data (called value). Whenever the value changes, every reactive element dependent on that bucket will get its contents updated with the new bucket value.
You will read later on that you can use the HTML attribute lz-bucket to specify the name of the bucket that an element will be updated with, and LZ.setValue() to create a new bucket or update a bucket's value.

Some of the custom HTML attributes that Leeze.js uses are:

lz-reactive is fundamental to Leeze.js. It indicates that an element supports reactivity and its value will be updated either by changing a variable or automatically, by specifying a source element.

If you use lz-bucket, specifying a bucket name, the element's content will be updated automatically when the value of that bucket changes.
lz-source is a little more nuanced: you have to specify an element id to make it work, but the element must be an input element. Specifically, the element must support the oninput event and it must hold its value in the value property. An <input type="text"> is perfect for this.

lz-target is used to specify which property of the reactive element Leeze.js has to change when the linked bucket or source element value changes.

lz-onchange is an attribute used to tell Leeze.js what function to call when the element's content has changed, acting essentially as a callback. The name of the function can be a fully qualified name (e.g. my.namespaced.function). The new value will be passed to this function when called.

Dynamic page content

Leeze.js supports dynamic page content. This means that you can add or remove a reactive element whenever and Leeze.js will act accordingly.
This makes the HTML elements dynamically added to the page (e.g. as an API response) immediately reactive.