PurpleCallio documentation
Add Video Calling to Svelte
The PurpleCallio Svelte SDK wraps the same call engine as the JavaScript SDK behind createPurpleCallio(), exposing connection state, participants, and media as Svelte stores.
Install the package
npm install @purplecallio/svelte @purplecallio/sdk. Works with Svelte 4 or Svelte 5 — it uses the classic store contract (writable/readable) rather than runes, since runes only work inside .svelte files, not a plain library module.
Create a call
Call createPurpleCallio() with a participant token from your backend, then join() to connect signaling and WebRTC.
Subscribe with $ syntax
Read $call.connectionState, $call.participants, and $call.remoteStream directly in a .svelte file, and render streams with the PurpleCallioVideo component.
Clean up explicitly
createPurpleCallio() isn't tied to any component lifecycle automatically — call call.destroy() from onDestroy() to unsubscribe from engine events and leave the call if it's still connected.
Join a call from a Svelte component
<script lang="ts">
import { onDestroy } from "svelte";
import { createPurpleCallio, PurpleCallioVideo } from "@purplecallio/svelte";
const call = createPurpleCallio({ token: participantToken, callId, signalUrl });
call.join();
onDestroy(() => call.destroy());
</script>
<PurpleCallioVideo stream={$call.localStream} muted={true} />
<PurpleCallioVideo stream={$call.remoteStream} />
<button on:click={() => call.camera.toggle()}>Toggle camera</button>Related documentation
Build with PurpleCallio
Explore the documentation to choose hosted UI, React components, or the headless SDK for your integration.