dlite

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

📖 Complete documentation

https://dlitejs.com

🧐 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:

• https://github.com/bryhoyt/emerj
• https://github.com/sindresorhus/on-change

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