Fine-Grained Reactive State Management for Modern JavaScript
A simple, fast, and powerful state management library for React and React Native. Your UI automatically updates when data changes. No complexity, no boilerplate, just signals.
What is SignalForge?
SignalForge is a reactive state management library that makes building interactive UIs incredibly simple. Think of signals as "smart variables" that automatically notify your UI when they change.
// Create a signal (smart variable)
const count = createSignal(0);
// Computed values auto-update
const doubled = createComputed(() => count.get() * 2);
// Effects run when dependencies change
createEffect(() => {
console.log('Count is now:', count.get());
});
count.set(5); // UI updates automatically! âĻUnlike Redux or Context API, SignalForge requires no providers, no actions, no reducers. Just create signals and watch your app come alive.
Why Choose SignalForge?
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.
ð Learn by Doing - Interactive Demos
15 hands-on examples that teach you SignalForge from beginner to advanced
ðĄ Start with "Basic Signal" - learn the fundamentals in 30 seconds!
Basic Signal
Learn in 30 seconds! Create reactive state with just one hook. Perfect for beginners.
Computed Signal
Auto-calculating values that update when dependencies change. No manual tracking needed.
Effects
Run side effects when signals change. Built-in cleanup. Simpler than useEffect.
React Hooks
useSignal, useSignalValue, useSignalEffect - React integration made simple.
Batch Updates
Update multiple signals at once. 33x faster than sequential updates.
Subscribe
Listen to signal changes outside React. Perfect for logging or analytics.
Shopping Cart
Real e-commerce cart with add/remove items, quantities, and total calculation.
Form Validation
Dynamic form with real-time validation, error messages, and submission handling.
Todo App
Full CRUD app with add, edit, delete, and filter. Classic example done right.
Array Signal
Work with arrays efficiently. Push, filter, map - all optimized for signals.
Untrack
Read signals without creating dependencies. Advanced control over reactivity.
Persistent Signal
Auto-save to localStorage. One line of code for data persistence.
Big Data
Handle 10,000+ items smoothly. See how SignalForge scales.
DevTools
Inspect signals in real-time. Debug like a pro with time-travel.
Time Travel
Undo/Redo built-in. Travel back in time through state changes.
About Forge Community
Forge Community is an open-source collective dedicated to building high-quality, developer-friendly tools for the modern JavaScript ecosystem.
Crafted with Care
Every tool is meticulously designed, tested, and optimized for real-world use.
Open Source
100% free and open. MIT licensed. Community-driven development.
Production Ready
Battle-tested in production apps. Comprehensive docs and support.
Get Started in 30 Seconds
npm install signalforgeimport { useSignal } from 'signalforge/react';
function Counter() {
const [count, setCount] = useSignal(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}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! âĻ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! ð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!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
Why It's So Fast
Built with âĪïļ by Forge Community
MIT Licensed âĒ TypeScript âĒ 2KB gzipped âĒ Zero Dependencies