SvelteMap

Reactive Map that triggers updates when modified

The SvelteMap class provides a reactive wrapper around JavaScript’s Map. When you set, delete, or clear entries, Svelte’s reactivity system is automatically notified.

Import

import { SvelteMap } from 'svelte/reactivity';

Usage

Basic usage

<script>
  import { SvelteMap } from 'svelte/reactivity';

  const preferences = new SvelteMap([
    ['theme', 'dark'],
    ['language', 'en']
  ]);

  function updatePreference(key, value) {
    preferences.set(key, value);
  }
</script>

<div>
  {#each [...preferences] as [key, value]}
    <p>{key}: {value}</p>
  {/each}
</div>

<button onclick={() => updatePreference('theme', 'light')}>
  Switch to light theme
</button>

Cache with reactive updates

<script>
  import { SvelteMap } from 'svelte/reactivity';

  const cache = new SvelteMap();

  async function fetchData(id) {
    if (cache.has(id)) {
      return cache.get(id);
    }

    const data = await fetch(`/api/items/${id}`).then(r => r.json());
    cache.set(id, data);
    return data;
  }

  function clearCache() {
    cache.clear();
  }
</script>

<p>Cached items: {cache.size}</p>
<button onclick={clearCache}>Clear cache</button>

Form data management

<script>
  import { SvelteMap } from 'svelte/reactivity';

  const formData = new SvelteMap();

  function updateField(field, value) {
    formData.set(field, value);
  }

  function submitForm() {
    console.log(Object.fromEntries(formData));
  }

  const isValid = $derived(
    formData.has('name') && 
    formData.has('email') && 
    formData.get('name').length > 0
  );
</script>

<input
  type="text"
  placeholder="Name"
  oninput={(e) => updateField('name', e.target.value)}
/>
<input
  type="email"
  placeholder="Email"
  oninput={(e) => updateField('email', e.target.value)}
/>

<button onclick={submitForm} disabled={!isValid}>
  Submit
</button>

Methods

All standard Map methods work and trigger reactivity when they modify the map:

• set(key, value) - Sets a key-value pair
• delete(key) - Removes an entry
• clear() - Removes all entries
• get(key) - Gets a value (doesn’t trigger reactivity)
• has(key) - Checks if key exists (doesn’t trigger reactivity)
• size - Property that returns the number of entries

Notes

• More efficient than using $state() with a regular Map
• Iteration methods work as expected (forEach, keys, values, entries)
• The Map is proxied to track changes automatically
• Useful for key-value data that needs to be reactive

See also

• $state - General reactive state
• SvelteSet - Reactive Set
• SvelteDate - Reactive Date