Getting started
Install Persist and wire hydration-aware persistence into any reactive store.
You already have a store. You need durable state without a first-paint flash — and without rewriting when the storage backend or store library changes.
Install
npm install @stainless-code/persistpnpm add @stainless-code/persistyarn add @stainless-code/persistbun add @stainless-code/persistCore is zero-dep. Each subpath is an optional peer — install only what you import. Full table: Entry points.
Peers for the quick-start imports below:
npm install seroval idb-keyval @tanstack/store reactpnpm add seroval idb-keyval @tanstack/store reactyarn add seroval idb-keyval @tanstack/store reactbun add seroval idb-keyval @tanstack/store reactQuick start
import { Store } from "@tanstack/store";
import { createSerovalStorage } from "@stainless-code/persist/codecs/seroval";
import { persistStore } from "@stainless-code/persist/sources/tanstack-store";
import { toHydrationSignal } from "@stainless-code/persist";
import { useHydrated } from "@stainless-code/persist/frameworks/react";
const store = new Store({ theme: "light" });
const persist = persistStore(store, {
name: "app:prefs:v1",
storage: createSerovalStorage(() => localStorage),
});
export const prefsHydration = toHydrationSignal(persist);
// in a component:
const { hydrated } = useHydrated(prefsHydration);Compatibility
| Runtime | Supported range |
|---|---|
| Node | ^20.19.0 || >=22.12.0 |
| Bun | >=1.0.0 |