Experiments >

Code animation: Derived selection store

Experiment #14720th April, 2021by Joshua Nussbaum

A few days ago, I built a selection store that allows for a global selection.

To style things differently based on whats selected, it requires checking the selection store:

<div class:selected={$selection && $selection.type == 'name-of-type' && $selection.id == 'some-id'}>

Derived store

In this experiment, I tried a different approach for detected selection using a derived() store. The derived store is a boolean that re-computes based on what’s selected. It simplifies the usage a bit:

  import { isSelected } from './selection'

  export let id

  const selected = isSelected('some-type', id)

<div class:selected={$selected}>


The derived store implementation looks like this:

export function isSelected(type, id = null) {
  return derived(selection, $selection => {
    return $selection && $selection.type == type && $selection.value == id





view all experiments

Stay tuned in

Learn how to add more experimentation to your workflow