Introduction

Leaf provides scope and declarative simplicity to make it easier for developers to organize their code. Leveraging Locality of Behavior, when developers see HTML, they immediately know what it does. No reactivity, no virtual DOM, it’s lightweight as it should be.

Quick Start

HTML

<div data-scope="greet">
  <label for="name">Name</label>
  <input data-target="input" type="text" id="name" />
  <button data-action="click->hello">Greet</button>
  
  <p data-target="output"></p>
</div>

Javascript

import { defineScope } from "https://cdn.jsdelivr.net/gh/Rahmad2830/Leaf@v1.0.0/dist/Leaf.min.js"

defineScope("greet", ({ targets }) => {
  const output = targets.output
  const input = targets.input
  
  function hello() {
    output.textContent = input.value
  }
  
  return { hello }
})

Result

Leaf is perfect when combined with Briz to create dynamic interactions, and it’s the ultimate productivity combo when you want fast, elegant, and functional results. However, you’re free to combine it with other libraries.

Installation

You can simply grab Leaf from cdn link and include in your project by import defineScope in your js file.

//scope_something.js
import { defineScope } from "https://cdn.jsdelivr.net/gh/Rahmad2830/Leaf@v1.0.0/dist/Leaf.min.js"

defineScope("something", () => {
  //Place your code here
})

or you can download Leaf.min.js and include directly in your project.