Fluxlit

A lightweight reactive UI library with fine-grained reactivity, inspired by modern frameworks but designed to be simple and performant.

Features

• 🚀 Fine-grained reactivity - Only updates what actually changed
• 📦 Lightweight - Minimal bundle size
• 🎯 TypeScript first - Full type safety
• 🔄 Reactive state - Automatic UI updates
• 🎨 Template literals - Familiar HTML-like syntax
• 📋 List rendering - Efficient list updates with keys

Installation

npm install fluxlit

Quick Start

import { state, derived, html } from 'fluxlit';

// Create reactive state
const count = state(0);
const doubled = derived(() => count.value * 2);

// Create reactive UI
const app = html`
  <div>
    <h1>Count: ${count}</h1>
    <p>Doubled: ${doubled}</p>
    <button onclick=${() => count.value++}>
      Increment
    </button>
  </div>
`;

document.body.appendChild(app);

API Reference

State Management

state(initialValue)

Creates a reactive state value.

const name = state('John');
name.value = 'Jane'; // Triggers updates

derived(fn)

Creates a computed value that automatically updates when dependencies change.

const fullName = derived(() => `${firstName.value} ${lastName.value}`);

Template System

html

Creates reactive HTML elements using template literals.

const element = html`
  <div class="container">
    <h1>${title}</h1>
    <button onclick=${handleClick}>Click me</button>
  </div>
`;

each(array, renderFn, keyFn?)

Renders lists efficiently with optional keys.

const items = state([1, 2, 3]);

const list = html`
  <ul>
    ${each(
      items,
      (item) => html`<li>${item}</li>`,
      (item) => item
    )}
  </ul>
`;

Examples

Check out the examples/ directory for complete examples including:

• Todo App
• Counter
• Form handling

License

MIT