Leeze.js Documentation

Quick start

Adding Leeze.js to an HTML page

Leeze.js is just one single JS file so including it in your project is as easy as using a script tag. You can either download the version you want from GitHub and save it locally or use permalinks to the file itself.

Using the local version of the script

To use Leeze.js locally, just go to the Releases section on the GitHub page and choose what version of Leeze.js you want to use. It is recommended to always use the latest stable version available.
Once you downloaded and saved the script in a directory of your choice, just add it to a page using the HTML script tag:

<script src="path/to/script/leeze.js"><script>

Using a GitHub permalink

This method is not the preferred one. You can include Leeze.js in your page using a GitHub permalink to the file. You can use the main branch version (not recommeded as it could be buggy) or a specific commit's version.

<script src="https://github.com/SchiavoAnto/leeze.js/blob/914c517a5bde2e5b75d1aa9439129a2bd9aa8b93/leeze.js"><script>

First steps

Once you have added Leeze.js to your project, you can use all of its features as you want. Here is a basic example, which is essentially the one on the main page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Leeze.js Basic Example</title>
        <script src="path/to/leeze.js"></script>
    </head>
    <body>
        <p lz-reactive lz-source="my-input"></p>
        <input type="text" id="my-input" placeholder="Content..." value="This is the default value.">
    </body>
</html>

In this example, using the lz-source attribute allows us to write no JavaScript. Leeze.js will automatically hook up to the input's oninput event and update the paragraph each time we type something. If the reactive element (in this case, the paragraph) gets removed from the DOM, Leeze.js will automatically unhook from the oninput event.
If we specify a value for the input element, Leeze.js will automatically use it as the default value for the paragraph.

You can check out more examples in the examples page or try Leeze.js right now on the Sandbox page.