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/.
1 Dec 7, 2021
7 Oct 21, 2022
52 Sep 19, 2022
116 Dec 19, 2022
2k Dec 27, 2022
1.5k Jan 7, 2023
49 Oct 15, 2022
15 Oct 31, 2022
633 Jan 5, 2023
1.4k Dec 30, 2022
7 Jul 13, 2022
2 Oct 28, 2021
5 Dec 28, 2022
810 Jan 7, 2023
3 Aug 3, 2021
108 Nov 2, 2022
37 Oct 8, 2022
668 Dec 18, 2022