https://github.com/superlucky84/lithent
➿ Lightweight virtual DOM library for predictable UIs. 4KB core with closure-based state.
https://github.com/superlucky84/lithent
components dom framework generators htm javascript jsx lithent lithentjs vdom virtual-dom
Last synced: 4 months ago
JSON representation
➿ Lightweight virtual DOM library for predictable UIs. 4KB core with closure-based state.
- Host: GitHub
- URL: https://github.com/superlucky84/lithent
- Owner: superlucky84
- License: mit
- Created: 2022-07-06T04:47:51.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-01-30T09:09:26.000Z (5 months ago)
- Last Synced: 2026-01-31T01:55:22.078Z (5 months ago)
- Topics: components, dom, framework, generators, htm, javascript, jsx, lithent, lithentjs, vdom, virtual-dom
- Language: TypeScript
- Homepage: https://superlucky84.github.io/lithent/
- Size: 12.6 MB
- Stars: 47
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lithent [](https://www.npmjs.com/package/lithent) [](https://bundlephobia.com/package/lithent) [](LICENSE) [](https://www.typescriptlang.org/)
**Lithent is a JavaScript library for building lightweight, predictable UIs with familiar closure-based patterns.**
It trims away unnecessary magic and complex APIs so your UI code stays simple, explicit, and easy to reason about.
### 🚀 [Get Started](https://superlucky84.github.io/lithent/#/guide/quick-start) · 📖 [Documentation](https://superlucky84.github.io/lithent/#/) · 💡 [Examples](https://superlucky84.github.io/lithent/#/examples/1)
## Why Lithent?
**Lightweight DOM manipulation without the framework weight.** The 4KB core drives complete UIs. Need state management? Opt into helpers like expansion packs instead of adopting a full stack.
Bring in only what you need — let the stack scale with your project.
**Design philosophy:**
- **Small Bundle** — 4KB core with optional extensions
- **Closure-based State** — No magic, just JavaScript
- **Manual or Reactive** — Choose your update strategy
- **Progressive Enhancement** — From static HTML to full SPA
## Quick start
### Create a new project
```bash
npx create-lithent@latest
```
Pick a project name and template (SSR/SPA) and you’re ready to go.
### Install via npm
```bash
npm install lithent
```
### Use directly from a CDN
```html
```
> **[📦 View all available CDN URLs](https://superlucky84.github.io/lithent/#/guide/quick-start)**
## Two ways to build components
Lithent offers two complementary styles you can freely mix in the same project.
**Manual Mode** — Explicit control with `renew()`
```tsx
import { mount } from 'lithent';
const Counter = mount(renew => {
let count = 0;
return () => { count++; renew(); }}>{count};
});
```
**Light API Mode** — Automatic reactivity
```tsx
import { lmount } from 'lithent';
import { lstate } from 'lithent/helper';
const Counter = lmount(() => {
const count = lstate(0);
return () => count.value++}>{count.value};
});
```
> **[📚 Explore component patterns in detail](https://superlucky84.github.io/lithent/#/guide/mounter)**
## Key features
### Core
- **mount / lmount** — Component initialization
- **Portal** — Render outside parent DOM
- **Hooks** — Lifecycle callbacks (`mountCallback`, `updateCallback`, `mountReadyCallback`)
- **Ref** — Direct DOM access
### Helpers (optional)
- **state / lstate** — Reactive state management
- **computed** — Derived values
- **effect** — Side effects
- **store / lstore** — Global state
- **context / lcontext** — Cross-component data sharing
### Template options
- **JSX** — Via Vite plugin
- **FTags** — Function-style tags (no build step)
- **HTM** — Tagged template literals
- **Template Strings** — Custom templates
> **[📖 View full API reference](https://superlucky84.github.io/lithent/#/)**
## Ecosystem
| Package | Description |
|--------|-------------|
| [lithent](https://www.npmjs.com/package/lithent) | Core library (~4KB) |
| [lithent/helper](https://www.npmjs.com/package/lithent) | Reactive state helpers |
| [lithent/ssr](https://www.npmjs.com/package/lithent) | Server‑side rendering |
| [lithent/ftags](https://www.npmjs.com/package/lithent) | Function‑style tag API |
| [lithent/tag](https://www.npmjs.com/package/lithent) | HTM template support |
| [create-lithent](https://www.npmjs.com/package/create-lithent) | Project scaffolding tool |
## License
[MIT](LICENSE) © [superlucky84](https://github.com/superlucky84)
Built with ❤️ by the Lithent community