introduction

• A JavaScript library that allows you to create interactive websites and single page apps with less work.
• Extends the attribute space of typical HTML to provide a rich set of functionality.
• Provides the JavaScript, so you don't have to.

all the things

quick start

Load lazui from a CDN

<script src="https://www.unpkg.com/@anywhichway/lazui"></script>

for HTML

<div data-lz:state="{clickCount:0}" onclick="this.getState().clickCount++">
    Click Count: ${clickCount}
</div>

<template id="goodbye">
    Goodbye ${userName}
</template>
<div data-lz:src="#goodbye" data-lz:state='{userName:"John"}' data-lz:trigger="click dispatch:load" data-lz:target="outer">
    Hello, ${userName}. The date and time is ${new Date().toLocaleTimeString()}. Click to leave.
</div>

<template data-lz:state="person">
{
    name: "Mary",
    age: 21,
    married: false
}
</template>
<form data-lz:usestate="person" data-lz:controller="/controllers/lz/form.js">
    <input data-lz:bind="name" type="text" placeholder="name">
    <input data-lz:bind="age" type="number" placeholder="age">
    <input data-lz:bind="married" type="checkbox"> Married
</form>
<div data-lz:usestate="person">${name}'s age is ${age}${married ? " and married" :""}.</div>

for JavaScript

<script>
const {render,html} = lazui;
let count = 0;
const clicked = (event) => {
    count++;
    event.target.innerText = `Click count: ${count}`;
};
render(document.currentScript,
    html`<div onclick=${clicked}>Click count: ${count}</div>`,
    {where:"afterEnd"});
</script>

Ok, now it's time to dive in!