Frameworks

Svelte

Svelte and SvelteKit

[Overview](../) · Framework Integrations

Use createPresenceStore() to observe a consent-approved Discord user's presence through a Svelte readable store. The store connects when subscribed to in the browser and disconnects after the final subscriber leaves.

Install

terminal.shbash

bun add @iconical/presence

Svelte component

Example.sveltesvelte

<script lang="ts">
  import { createPresenceStore } from "@iconical/presence/svelte";

  const presence = createPresenceStore({
    userId: "123456789012345678", // Approved Discord ID.
    transport: "auto",
  });
</script>

{#if $presence.loading}
  <p>Connecting…</p>
{:else if $presence.error}
  <p>Presence unavailable</p>
{:else if $presence.data}
  <h2>{$presence.data.profile.displayName}</h2>
  <p>{$presence.data.presence?.status ?? "Waiting for update"}</p>
  {#if $presence.data.spotify}
    <p>Listening to {$presence.data.spotify.song}</p>
  {/if}
{/if}

In SvelteKit, server-side rendering does not open a live stream; the readable store starts its request in the browser once a component subscribes. The adapter supports Svelte 4 and 5.

ℹ️

SvelteKit SSR

The store does not open a connection during server rendering. It starts when subscribed to in the browser.

Multiple users

Import createPresencesStore from @iconical/presence/svelte:

Example.sveltesvelte

<script lang="ts">
  import { createPresencesStore } from "@iconical/presence/svelte";

  const team = createPresencesStore({
    userIds: ["123456789012345678", "222222222222222222"],
  });
</script>

{#each Object.entries($team.data?.presences ?? {}) as [id, member] (id)}
  <p>{member.profile.displayName}: {member.presence?.status ?? "Pending"}</p>
{/each}

Only users who approved sharing appear. Store options include transport and intervalMs. If the Discord user ID changes, create a new store; the current adapter does not observe a reactive change to its options object.

Next steps

See Multi-user for response semantics and Shared connections for how multiple components reuse network connections.

Was this page helpful?

React Vue