Dlite NPM | npm.io

npm (tag) NPM GitHub Sponsors

📖 Complete documentation

🧐 Introduction

dlite creates Web Components and interactive web pages easily without the bloat of big frameworks. It can be effortlessly added into existing HTML pages to create reusable components for web applications. dlite is perfect for simple, but dynamic static sites or when you want to progressively upgrade a site without changing too much.

⭐ Features

Seriously tiny: <10 kB (<5 kB when gzipped)
No dependencies, no virtual DOM, no JSX, and no build tool required
Reactive Web Components
Progressive template language that leverages template literals
Props support
Computed properties
Two-way data binding
Events handling
Component lifecycle hooks
Directives (e.g. if/else, for, style, class)
Shadow DOM by default with scoped CSS
Put a script tag in your HTML and go ⚡

It is compatible with all modern browsers that support ES2015/ES6, ESM, and Proxy.

🔧 Installation

The easiest way to use dlite is with a script tag.

<script type="module">
  import Dlite from '//unpkg.com/dlite';
</script>

More details about installation.

🔄 Canonical counter example

An example counter component to give you a sense of what dlite looks like. See more examples.

<script type="module">
  import Dlite from '//unpkg.com/dlite';
  
  Dlite({
    el: '#app',
    data: {
      count: 0
    },
    up() {
      this.data.count++;
    },
    down() {
      this.data.count--;
    }
  });
</script>

<template id="app">
  <h1>{this.count}</h1>

  <div>
    <button @click="down">Decrease Count</button>
    <button @click="up">Increase Count</button>
  </div>
</template>