Lithent  

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 · 📖 Documentation · 💡 Examples

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

npm install lithent

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

| Package | Description | |--------|-------------| | lithent | Core library (~4KB) | | lithent/helper | Reactive state helpers | | lithent/ssr | Server‑side rendering | | lithent/ftags | Function‑style tag API | | lithent/tag | HTM template support | | create-lithent | Project scaffolding tool |

License

MIT © superlucky84