Svelte 5 Persistent State - Strictly Runes Supported

Svelte 5 dropped a bomb on front-end development with its runes system, and state management will never be the same. While everyone's scrambling to catch up, @friendofsvelte/state is already miles ahead, offering a dead-simple persistent state solution that feels like it was born for this moment.

The Persistent State Problem That's Driving You Insane

Let's be honest—we've all cursed under our breath when a user refreshes the page and loses their state. Building persistence yourself means writing the same tedious boilerplate for the millionth time. How many more storage event listeners can one developer write before losing their mind?

Enter @friendofsvelte/state - a refreshing, zero-BS approach to state management that embraces Svelte 5's runes revolution while solving the persistent storage problem that plagues every front-end developer's existence.

The Friend of Svelte crew didn't just build another state management library—they built the one you'll actually want to use. No bloat, no philosophy lectures, no 45-minute YouTube tutorials needed. Just persistent state that works out of the box.

What Makes This Library Actually Worth Your Time

• Type Safety That Doesn't Get in Your Way: Full TypeScript support with automatic type inference. No more "Oh it's typed, but you need 17 generic parameters to make it work."
• Storage That Just Works: Your state lives in localStorage or sessionStorage automatically. No plugins, no middleware, no config files.
• Zero Bloat: No dependencies beyond Svelte itself. Your bundle size won't explode because someone decided to include the entirety of lodash.
• Actually Reactive: Seamlessly plugs into Svelte 5's reactivity system. No adapters, no bridges, no "glue code."
• Sync Without Thinking: State syncs across components automatically. No dispatching, no subscribing, no reducer functions.
• One Function to Rule Them All: A single function that handles everything. Not an "elegant architecture" with 27 moving parts.

Getting Your Hands Dirty (It Takes 30 Seconds)

Adding persistent state to your Svelte 5 app couldn't be more straightforward:

1. Install it (you know the drill):

npm install @friendofsvelte/state

1. Define your state (look how clean this is):

// state.svelte.ts
import { PersistentState } from '@friendofsvelte/state';

export const box = new PersistentState('box', {
  color: '#ff3e00',
  dimensions: [100, 100]
}, 'sessionStorage');

1. Use it anywhere (yes, it's really this simple):

<script lang="ts">
  import { box } from './state.svelte';

  const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'brown'];

  function switchNextColor() {
    const currentIndex = colors.indexOf(box.current.color);
    box.current.color = colors[(currentIndex + 1) % colors.length];
  }
</script>

<div 
  style="background-color: {box.current.color}; width: 100px; height: 100px;"
  class="m-2 rounded-2xl"
>
  {box.current.color}
</div>

<button on:click={switchNextColor} class="bg-gray-700 m-2 px-3 rounded-2xl">
  Change color
</button>

How It Plays With Svelte 5 Runes (Like They Were Made for Each Other)

While other libraries are playing catch-up, PersistentState was built from the ground up for Svelte 5's runes system. Here's what happens under the hood:

1. Checks if you've already got saved data (because nobody likes losing their work)
2. Loads your existing data if it's there (with proper deserialization—not that string mess)
3. Falls back to your defaults if nothing's saved (because empty states are user-hostile)
4. Hooks directly into Svelte 5's reactivity (no awkward "connector" patterns)
5. Syncs changes to storage automatically (forget manually saving state—it's 2025!)

The real magic? You don't have to think about any of this. It just works, letting you focus on building features that actually matter.

Beyond the Basics (For When You Need More Power)

The basic API is dead simple, but there's more when you need it:

Storage That Matches Your Needs

// For data that survives browser restarts (like user preferences)
const settings = new PersistentState('settings', defaultSettings, 'localStorage');

// For session-specific data (like form progress)
const tempState = new PersistentState('temp', initialState, 'sessionStorage');

Type Safety That Actually Helps

interface UserPreferences {
  theme: 'light' | 'dark' | 'system';
  fontSize: number;
  notifications: boolean;
}

const preferences = new PersistentState<UserPreferences>('preferences', {
  theme: 'system',
  fontSize: 16,
  notifications: true
});

// Your IDE will catch this before you even save the file
preferences.current.theme = 'dark'; // Works like a charm
preferences.current.theme = 'blue'; // TypeScript stops you from shooting yourself in the foot

Performance That Won't Make Your App Crawl

This isn't one of those libraries that tanks your performance for convenience:

1. It only saves when things actually change (not on every render like some other solutions)
2. Uses fast JSON serialization (no weird custom formats)
3. Batches updates intelligently (your storage isn't getting hammered)

Browser Support (Yes, It Works Everywhere That Matters)

Works in every browser that isn't ancient history:

• Modern browsers? Check.
• localStorage/sessionStorage support? Check.
• JSON? Check.

IE11 users? They have bigger problems than your state management.

The Bottom Line

@friendofsvelte/state isn't trying to be the next Redux or Pinia with philosophical manifestos and complex architecture diagrams. It's a tool that solves one problem perfectly: persistent state in Svelte 5 apps.

It embraces everything that makes Svelte awesome—simplicity, reactivity, and developer experience—while removing the persistent storage headache that's been bothering you for years.

For Svelte 5 developers embracing the runes revolution, this isn't just another option—it's the option that actually respects your time and sanity.

---

Inspired by Rich Harris' local-storage-test, but kicked up several notches with features that make Svelte 5 development even more delightful. Because if the creator of Svelte thinks it's a good approach, who are we to argue?