How do Svelte Stores work and how do you create custom ones?

WHAT THIS TESTS: Whether you understand the Svelte store contract at a deep level, not just the syntax. Interviewers want to see that you know a store is simply an object with a subscribe method that returns an unsubscribe function, and that you can build abstractions on top of writable rather than treating stores as magic global variables.

A GOOD ANSWER COVERS: First, the core contract. Any object with a subscribe method that accepts a callback and returns an unsubscribe function is a valid store. Second, creating a custom writable. You import writable from svelte/store, call it with an initial value, then wrap the returned set and update methods with your domain logic before exposing them. Third, script-level subscription. You can manually call store.subscribe and store the returned unsubscribe function to call on component unmount, or you can use the dollar-sign prefix like store which Svelte compiles into an auto-subscription that cleans up automatically when the component destroys. Fourth, template usage. Prefixing the store name with in the template gives you the current value reactively and handles teardown without boilerplate.

COMMON WRONG ANSWERS: Returning something other than an unsubscribe function from a custom subscribe method. Treating store as a normal variable without acknowledging the auto-subscription lifecycle. Confusing Svelte 5 runes like state with the classic svelte/store API and suggesting you mix them inside a custom writable implementation. Forgetting that $ prefix only works inside svelte files, not in plain JavaScript modules. Storing the raw writable object in a component without subscribing and wondering why the template does not update.

LIKELY FOLLOW-UPS: How would you make a store readonly? You could use the readonly helper from svelte/store or simply expose only the subscribe method. How do you derive state from multiple stores? Use derived from svelte/store. What is a StartStopNotifier and when does it fire? It runs when the first subscriber subscribes, useful for setting up external event listeners or WebSocket connections. How would you reset a store to its initial value? You would need to capture the initial value in closure and expose a reset method alongside set and update.

ONE CONCRETE EXAMPLE: Suppose you need a counter that clamps between zero and ten. You would create a function createClampedCounter(initial) that calls writable(initial) and returns an object with subscribe, plus a custom set method that clamps the incoming value before calling the original set, and an update method that wraps the original update with a clamping function. In a component you would import it, instantiate const counter = createClampedCounter(0), then read it in the template with $counter and call counter.set(15) knowing it clamps to 10.

Source: svelte.dev