SvelteSet

Reactive Set that triggers updates when modified

The SvelteSet class provides a reactive wrapper around JavaScript’s Set. When you add, delete, or clear items, Svelte’s reactivity system is automatically notified.

Import

import { SvelteSet } from 'svelte/reactivity';

Usage

Basic usage

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

  const tags = new SvelteSet(['javascript', 'svelte']);

  function addTag(tag) {
    tags.add(tag);
  }

  function removeTag(tag) {
    tags.delete(tag);
  }
</script>

<ul>
  {#each [...tags] as tag}
    <li>
      {tag}
      <button onclick={() => removeTag(tag)}>×</button>
    </li>
  {/each}
</ul>

<input 
  type="text" 
  onchange={(e) => {
    addTag(e.target.value);
    e.target.value = '';
  }}
/>

Unique selections

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

  const selected = new SvelteSet();
  const items = ['Apple', 'Banana', 'Orange', 'Mango'];

  function toggle(item) {
    if (selected.has(item)) {
      selected.delete(item);
    } else {
      selected.add(item);
    }
  }
</script>

<div>
  {#each items as item}
    <label>
      <input
        type="checkbox"
        checked={selected.has(item)}
        onchange={() => toggle(item)}
      />
      {item}
    </label>
  {/each}
</div>

<p>Selected: {selected.size} items</p>

Methods

All standard Set methods work and trigger reactivity when they modify the set:

• add(value) - Adds a value
• delete(value) - Removes a value
• clear() - Removes all values
• has(value) - Checks if value exists (doesn’t trigger reactivity)
• size - Property that returns the number of elements

Notes

• More efficient than using $state() with a regular Set
• Iteration methods work as expected (forEach, keys, values, entries)
• The Set is proxied to track changes automatically

See also

• $state - General reactive state
• SvelteMap - Reactive Map
• SvelteDate - Reactive Date