GitHub - superlucky84/lithent: ➿ Lightweight virtual DOM library for predictable UIs. 4KB core with closure-based state.

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.

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

npx create-lithent@latest

Pick a project name and template (SSR/SPA) and you’re ready to go.

Install via npm

Use directly from a CDN

<script src="https://cdn.jsdelivr.net/npm/lithent/dist/lithent.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lithent/ftags/dist/lithentFTags.umd.js"></script>

📦 View all available CDN URLs

Two ways to build components

Lithent offers two complementary styles you can freely mix in the same project.

Manual Mode — Explicit control with renew()

import { mount } from 'lithent';

const Counter = mount(renew => {
  let count = 0;
  return () => <button onClick={() => { count++; renew(); }}>{count}</button>;
});

Light API Mode — Automatic reactivity

import { lmount } from 'lithent';
import { lstate } from 'lithent/helper';

const Counter = lmount(() => {
  const count = lstate(0);
  return () => <button onClick={() => count.value++}>{count.value}</button>;
});

📚 Explore component patterns in detail

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

Ecosystem

License

MIT © superlucky84

_{Built with ❤️ by the Lithent community}