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.

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

npx create-lithent@latest

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

npm install lithent

<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

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

• mount / lmount — Component initialization
• Portal — Render outside parent DOM
• Hooks — Lifecycle callbacks (mountCallback, updateCallback, mountReadyCallback)
• Ref — Direct DOM access

• state / lstate — Reactive state management
• computed — Derived values
• effect — Side effects
• store / lstore — Global state
• context / lcontext — Cross-component data sharing

• JSX — Via Vite plugin
• FTags — Function-style tags (no build step)
• HTM — Tagged template literals
• Template Strings — Custom templates

📖 View full API reference

MIT © superlucky84