For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Getting Started
    • Overview
    • Authentication
    • RxJS Primer
    • Migrate from v3
  • Web Components
    • Overview
    • Click-to-Call
    • Theming
    • Customization
  • Build Voice & Video Apps
    • Overview
    • Outbound Calls
    • Inbound Calls
    • Device Management
    • Screen Sharing
    • Call Controls
    • Layouts
    • Messaging & Chat
  • Manage Resources
    • Overview
    • Users
    • Address Book
    • Client Preferences
    • Capabilities
  • Deploy
    • Overview
    • Framework Integration
    • SSR & Next.js
    • Troubleshooting
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • What ships where
  • A minimal production topology
Deploy

Overview

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

Framework Integration

Next
Built with

The Browser SDK runs entirely in the browser — there’s no server-side runtime to deploy. What you do deploy is the host application that loads it, plus the small backend surface that mints tokens for your users. This section covers the four things that consistently come up between “it works on my laptop” and “it works in production”:

Framework integration

Idiomatic patterns for wrapping the SDK in React, Vue, Svelte, and Angular — managing client lifetimes, subscribing observables into component state, and avoiding double-mount pitfalls in dev mode.

SSR & Next.js

The SDK is browser-only. Cover dynamic imports, "use client" boundaries, and route handlers that mint tokens without leaking your project credentials.

Troubleshooting

Symptom → cause → fix for the issues that show up most often: expired tokens, black video, autoplay-blocked audio, ICE failures, and browser quirks.

What ships where

A Browser SDK app is split between two runtimes:

Lives in the browserLives on your backend
@signalwire/js (or @signalwire/web-components)Endpoint that mints SATs / embed tokens
Your UIYour auth / user system
WebRTC peer connection(Optionally) webhook handlers for incoming calls

The SDK never sees your SignalWire API credentials. Project ID and auth token live exclusively on the backend; the browser only ever holds a short-lived JWT it received from your token endpoint. This is the most important invariant to preserve across every framework, deployment target, and CDN setup discussed in this section.

A minimal production topology

┌─────────────────────────┐ 1. fetch("/api/sw-token") ┌──────────────────────────┐
│ Browser │ ─────────────────────────────► │ Your backend │
│ • @signalwire/js │ │ • POST /api/sw-token │
│ • Your UI │ ◄───────────────────────────── │ • mints SAT via REST │
│ │ 2. { token, expiry_at } │ • uses PROJECT creds │
│ │ │ (env var, secret) │
│ │ └──────────────────────────┘
│ │ 3. WebSocket → SignalWire ──►┌──────────────────────────┐
│ │ │ SignalWire │
└─────────────────────────┘ └──────────────────────────┘

Everything else (CDN choice, framework, SSR strategy) is a variation on this shape. The remaining pages in this section walk through the practical details of each layer.