Experiments >

Command store with live updating

Experiment #13115th April, 2021by Joshua Nussbaum

The command store that I built yesterday is great for creating a log of operations. But what if you want to show changes in realtime. If a value is databound to a field, that could mean updating on every key press.

It would be easier to have 2 stores:

  1. A “live” store that can be mutated directly, ie. with data binding.
  2. A command store where changes are applied once committed.


We define 2 stores, effectively duplicating the data:

let store = writable(initialstate)
let commandStore = commandStore(initialstate, commands)

And then our inputs bind directly to the “live” store:

<input type="color" bind:value={$store.settings.background} on:blur={save}/>

The save() function is only called after we leave the field, that avoids creating a command on each key press:

function save() {
  commandStore.execute('updateSettings', {
    background: $store.settings.background





  • What happens if on:blur hasn’t fired yet, and the user closes the tab. Currenty, that change in lost.
view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow