Compat Matrix

One reactive graph. Four frameworks. Four state libraries.

React Vue SolidJS Svelte
State library React Vue SolidJS Svelte
GraphReFly raw useNodeInput / useNodeValue useNodeInput → Ref + setter createNodeInput → [Accessor, setter] nodeWritable / nodeReadable
Jotai jotaiAtom facade · useSyncExternalStore jotaiAtom.subscribe → Ref bridge jotaiAtom.subscribe → createSignal jotaiAtom.subscribe → writable bridge
Nanostores NanoAtom · useSyncExternalStore NanoAtom.subscribe → Ref bridge NanoAtom.subscribe → createSignal NanoAtom ↔ Svelte readable bridge
Zustand ZustandStoreApi · useSyncExternalStore store.subscribe → Ref bridge store.subscribe → createSignal store → Svelte readable

All four state libraries share the same underlying GraphReFly reactive graph — their counts flow into a shared total via derived nodes, inspectable in the graph topology pane. The demo shell coordinates the three-pane layout reactively via its own internal graph.

Run the demo → React Vue SolidJS Svelte