Xignal is a lightweight, reactive state management library that works across multiple UI frameworks. At its core, Xignal provides three simple primitives:
-
state– creates reactive values -
computed– derives new values from state -
effect– reacts to changes and runs side effects
Basic Example
import { state, computed, effect } from "xignal";
const count = state(1);
const doubled = computed(() => count.get() * 2);
effect(() => {
console.log(`doubled ${doubled.get()}`); // "doubled 2"
});
Framework Support
Xignal works with six major frameworks via dedicated packages:
@xignal/react@xignal/vue@xignal/svelte@xignal/solid@xignal/preact@xignal/lit
Each integration provides helpful utilities like useSignalValue and useSignalState that match the framework’s style.
Share State Across Frameworks
Xignal’s core is independent of any framework. That means you can:
- Share one signal store across React, Vue, etc.
- Build components in different frameworks that use the same data
- Migrate between frameworks without rewriting state logic
Perfect for hybrid apps or gradual upgrades.
Extra Features
- Persistent state via xignal/storage
- Schema validation via xignal/standard-schema
These tools help with long-term app stability and data safety.
Conclusion
Xignal is:
- Minimal
- Reactive
- Cross-framework
It helps you manage state cleanly and consistently—whether you're using one UI framework or several. You can write shared logic once and reuse it across React, Vue, Svelte, Solid, and more.
🔧 Note: Xignal is currently under active development on the road to v1.0. While it's already functional and framework-integrated, APIs may still evolve as the library matures.
Now is a great time to explore Xignal and help shape its future by providing feedback or contributing.
Top comments (0)