svelte-baked-cookie

// bakery.js
import { bakery } from 'svelte-baked-cookie'
import { json, number, string } from 'svelte-baked-cookie/serde'

export const { bake, rebake } = bakery(
  {
    key1: string,
    key2: number,
    key3: json(
      (x): x is string[] =>
        Array.isArray(x) && x.every((y) => typeof y === 'string'),
      []
    )
  },
  {
    path: '/',
    secure: false
  }
)

// +layout.server.js
import { bake } from 'bakery.js'

export const load = ({ cookies }) => {
  const { bakedCookies, pie } = bake(cookies)

  bakedCookies.key3 = ['value', 'set', 'by', 'server']

  return {
    pie
  }
}

<!-- +layout.svelte -->
<script>
  import { rebake } from 'bakery.js'

  let { data } = $props()

  let pie = $derived(data.pie)

  let c = $derived(rebake(pie))
</script>

<main>
  <code>key1: <input bind:value={c.key1} /></code>
  <code>key2: <input bind:value={c.key2} type="number" /></code>
  <code>key3: {JSON.stringify(c.key3)}</code>
</main>