Fine-Grained Reactive
State Management

Build lightning-fast apps with zero boilerplate

The modern state management library for React & React Native. 33x faster, 90% less code, infinitely simpler.

🚀Get Started Now ⭐Star on GitHub

🪶2KB Gzipped

⚡33x Faster

📦Zero Deps

🎯TypeScript

Quick Start

1️⃣ Install

npm install signalforge

2️⃣ Use in React

import { useSignal } from 'signalforge/react';

function Counter() {
  const [count, setCount] = useSignal(0);
  return <button onClick={() => setCount(count + 1)}>
    Clicked {count} times
  </button>;
}

🎉

That's it! No providers, no context, just works!

Learn By Doing

15 interactive demos that make you a SignalForge expert

Start with Featured Comparisons

SignalForge vs Redux/Zustand

Side-by-side comparison showing 90% less code with the same shopping cart functionality.

Compare SignalForge with traditional state management

Fine-Grained Reactivity

See how only edited cells re-render, while Redux/Context would re-render the entire grid.

Real-time collaboration with minimal re-renders

Advanced Computed Chains

Complex nested calculations with visual dependency tree and automatic updates.

Automatic dependency tracking vs manual selectors

Live Performance Benchmark

Real-time comparison showing render counts and performance differences.

Measure the performance difference

Basic Signal

Create reactive state with just one hook. Quick start for beginners.

How to use useSignal() to create and update state

Computed Signal

Auto-calculating values that update when dependencies change.

Derive values automatically from other signals

Effects

Run side effects when signals change with built-in cleanup.

React to signal changes with automatic cleanup

React Hooks

Complete React integration with useSignal, useSignalValue, and useSignalEffect.

All the React hooks you need for SignalForge

Batch Updates

Update multiple signals efficiently with batched updates for better performance.

Optimize performance with batched updates

Subscribe

Listen to signal changes outside React for logging or analytics.

Monitor signal changes with subscriptions

Shopping Cart

E-commerce cart with add/remove items, quantities, and automatic total calculation.

Build a complete shopping cart feature

Form Validation

Dynamic form with real-time validation and error messages.

Create forms with live validation

Todo App

Full CRUD application with add, edit, delete, and filter functionality.

Build a complete CRUD application

Array Signal

Work with arrays using push, filter, and map optimized for signals.

Handle arrays with signal-optimized methods

Untrack

Read signals without creating dependencies for advanced control.

Fine-tune reactivity with untrack()

Persistent Signal

Auto-save to localStorage with simple one-line configuration.

Persist state across page reloads

Big Data

Handle 10,000+ items efficiently to see how SignalForge scales.

Test performance with large datasets

DevTools

Inspect signals in real-time with debugging tools and time-travel.

Debug with signal inspector and profiler

Time Travel

Built-in undo/redo functionality for state changes.

Implement undo/redo functionality

See The Difference

Compare traditional React to SignalForge

app.tsx

import { createSignal } from 'signalforge';

// Create a signal
const count = createSignal(0);

// Auto-updating computed value
const doubled = createComputed(() =>
  count.get() * 2
);

// Update = UI updates automatically! ✨
count.set(5);

⚡

Lightning Fast

Fine-grained reactivity means only what changed re-renders. 33x faster than useState + useEffect.

🎯

Zero Boilerplate

No providers, no actions, no reducers, no selectors. Just signals. Compare 200 lines of Redux to 20 lines of SignalForge.

🪶

Tiny Bundle

Just 2KB gzipped. Zero dependencies. Tree-shakeable. Your users will thank you.

Everything You Need

Professional features that developers love

✅

Super Easy

Only 3 core functions to learn. No Redux complexity, no boilerplate.

⚡

Blazing Fast

Updates 33x faster with batching. Handles thousands of signals smoothly.

🪶

Tiny Bundle

Just 2KB gzipped. Zero dependencies. Tree-shakeable.

🌍

Works Everywhere

React, React Native, Next.js, or plain JavaScript. SSR ready.

💾

Persistence Built-in

Auto-save to localStorage or AsyncStorage with one line of code.

🛠️

DevTools Ready

Time travel debugging, signal inspection, and performance monitoring.

Get Started in 30 Seconds

1. Install

npm install signalforge

2. Use in React

import { useSignal } from 'signalforge/react';

function Counter() {
  const [count, setCount] = useSignal(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

3. That's it! 🎉

No providers, no context, no configuration needed. Just install and use.

Core Concepts

Master these three concepts and you know 90% of SignalForge

🎯

1. Signals - Reactive Variables

Signals are containers for values that notify subscribers when they change. Think of them as "smart variables" that your UI can watch.

const username = createSignal('John');
const count = createSignal(0);

// Read values
console.log(username.get());  // 'John'

// Update values
username.set('Jane');
count.set(count.get() + 1);

// Your React components automatically re-render! ✨

ReactiveType-safeWritable

🧮

2. Computed - Auto-Calculating Values

Computed signals automatically recalculate when their dependencies change. Perfect for derived state like totals, filtered lists, or formatted data.

const price = createSignal(100);
const quantity = createSignal(3);

// Automatically updates when price or quantity changes
const total = createComputed(() => 
  price.get() * quantity.get()
);

console.log(total.get());  // 300
price.set(150);
console.log(total.get());  // 450 - Updated automatically! 🎉

Auto-updatingMemoizedRead-only

⚡

3. Effects - Side Effects with Cleanup

Effects run code when signals change. Great for logging, API calls, DOM updates, or syncing with external systems. Cleanup functions prevent memory leaks.

const theme = createSignal('light');

createEffect(() => {
  // Runs when theme changes
  document.body.className = theme.get();
  console.log('Theme changed to:', theme.get());
  
  // Optional cleanup
  return () => {
    console.log('Cleaning up old theme');
  };
});

theme.set('dark');  // Effect runs automatically!

Side effectsAuto-cleanupReactive

How Does It Compare?

See how SignalForge stacks up against popular alternatives

Feature	SignalForge	Redux	Zustand	Context API
Bundle Size	2KB	45KB	3KB	0KB (built-in)
Learning Curve	5 mins	2-3 days	30 mins	1 hour
Boilerplate	None	Heavy	Minimal	Medium
Fine-Grained Updates	✅	❌	❌	❌
TypeScript	✅ Built-in	✅	✅	✅
DevTools	✅ Built-in	✅ Extension	⚠️ Limited	❌
Time Travel	✅ Built-in	✅ Via DevTools	❌	❌
Persistence	✅ Built-in	⚠️ Middleware	⚠️ Manual	❌

💡 Pro Tip: SignalForge combines the simplicity of Context API with the power of Redux and the performance of fine-grained reactivity.

Perfect For

SignalForge shines in these scenarios

🛒

E-commerce Apps

✓Shopping cart with auto-calculated totals
✓Product filtering and sorting
✓Persistent user preferences
✓Real-time price updates

📝

Forms & Validation

✓Real-time field validation
✓Computed form state (valid/invalid)
✓Auto-save drafts
✓Complex multi-step wizards

📊

Dashboards & Analytics

✓Real-time data visualization
✓Filtering and aggregation
✓Performance with large datasets
✓Interactive charts and graphs

📱

Mobile Apps (React Native)

✓Tiny bundle for fast app startup
✓AsyncStorage persistence out-of-box
✓Smooth 60fps animations
✓Offline-first capabilities

🎮

Real-Time Applications

✓Chat applications
✓Collaborative editing tools
✓Live sports scores
✓Stock tickers and trading platforms

🎨

Creative Tools

✓Image editors with undo/redo
✓Design tools with live preview
✓Configuration builders
✓Theme customization panels

Performance That Matters

Real benchmarks from our test suite

33x

Faster Updates

Batched updates vs individual changes

10,000+

Signals

Handle thousands of signals smoothly

<1ms

Update Time

Sub-millisecond reactivity

Why It's So Fast

🎯

Fine-Grained Reactivity

Only updates components that actually use changed signals

⚡

Smart Batching

Groups multiple updates into a single render

🧠

Automatic Memoization

Computed values cache results until dependencies change

🪶

Minimal Overhead

Tiny runtime with zero unnecessary abstractions

Built by Forge Community

An open-source collective crafting high-quality tools for modern JavaScript

🔗 Forge Community 📦 npm ⭐ GitHub

MIT Licensed • 100% Open Source • Made with ❤️ for developers

2KB gzipped • Zero Dependencies • TypeScript • Production Ready