dlite

A tiny, blazing fast view library that creates reactive Web Components

📖 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>

🙋 FAQ

See the whole FAQ at https://dlitejs.com/faq/.

🧠 Related projects

Similar projects to dlite are listed on https://unsuckjs.com/.

🙌 Acknowledgements

dlite is forked from the fantastic work done by Mardix with Litedom.

It includes code from these great libraries:

The lightbulb logo is provided from https://openmoji.org/library/emoji-1F4A1/.

adamghill/dlite