A basic state machine using only svelte stores

stateMachine.svelte

<script lang="ts">
  import { derived, readable, writable } from 'svelte/store'

  type States = 'view' | 'edit'
  const state = writable<States>('view')

  const _substate = derived(state, ($state) => {
    if ($state === 'edit') return writable<{ item?: number }>({})
    return readable(null)
  })

  $: substate = $_substate
</script>

<button on:click={() => ($state = $state === 'view' ? 'edit' : 'view')}>Switch</button>

<div><b>{$state}</b></div>

<hr />

<pre>{JSON.stringify($substate, null, 2)}</pre>

<hr />

{#if $state === 'edit'}
  {#each [1, 2, 3] as i}
    <button
      on:click={() => {
        if ($substate) $substate.item = i
      }}
    >
      {i}
    </button>
  {/each}
{/if}