Can I use WebSockets with SvelteKit?

Yes. Use the @apinator/client SDK inside Svelte components with onMount for the WebSocket subscription. The connection runs in the browser; your SvelteKit server routes stay stateless.

How do I authenticate WebSocket channels in SvelteKit?

Create a POST +server.ts route (e.g. src/routes/api/realtime/auth/+server.ts) that uses @apinator/server to sign channel subscriptions. Your app secret stays in $env/static/private.

Does Apinator work with Svelte 5 runes?

Yes. Declare your message array with let messages = $state([]) and push incoming WebSocket events onto it inside a channel.bind() handler. Templates update reactively.

Can I trigger WebSocket events from SvelteKit form actions?

Yes. Import @apinator/server in any server-side file including +page.server.ts actions. Call realtime.trigger() after your database write to broadcast the change in real-time.

Is it free to add real-time WebSocket features to SvelteKit?

Yes. Apinator has a free plan with no credit card required. You can add WebSocket channels and real-time notifications to your SvelteKit app at no cost.

Server + Client SDK

Realtime WebSocket Notifications for SvelteKit

Add WebSocket channels and real-time events to SvelteKit with Svelte 5 runes. Type-safe server SDK for API routes and form actions. Works with $state, onMount, and $env secrets.

Get Started Free View Docs

Server $ npm install @apinator/server

Client $ npm install @apinator/client

SvelteKit's server routes and Svelte 5's reactive runes make real-time WebSocket integration clean and type-safe. Use the server SDK in SvelteKit +server.ts routes to authenticate WebSocket channels and publish events. Use the client SDK with onMount and $state runes to receive live updates in Svelte components — no dedicated WebSocket server needed.

Quick Start

How to add WebSocket notifications to SvelteKit

Add realtime features to your SvelteKit app in a few steps.

Install both SDKs

Add the server SDK for your API routes and the client SDK for Svelte components.

npm install @apinator/server @apinator/client

Create a WebSocket auth endpoint

Add a POST +server.ts route that signs WebSocket channel subscription requests using your app secret. Secrets stay in $env/static/private.

// src/routes/api/realtime/auth/+server.ts
import { json } from '@sveltejs/kit'
import { Apinator } from '@apinator/server'
import { REALTIME_APP_ID, REALTIME_KEY, REALTIME_SECRET } from '$env/static/private'

const realtime = new Apinator({
  appId: REALTIME_APP_ID,
  key: REALTIME_KEY,
  secret: REALTIME_SECRET
})

export async function POST({ request }) {
  const { socket_id, channel_name } = await request.json()
  const auth = realtime.authenticateChannel(socket_id, channel_name)
  return json(auth)
}

Subscribe to a WebSocket channel

Open a persistent WebSocket connection in onMount and subscribe to a channel. Use $state runes for reactive message lists that update the template automatically.

<script lang="ts">
  import { onMount } from 'svelte'
  import { Apinator } from '@apinator/client'

  let messages = $state([])
  const client = new Apinator({
    appKey: 'your-app-key',
    cluster: 'us',
    authEndpoint: '/api/realtime/auth'
  })

  onMount(() => {
    const ch = client.connect().subscribe('private-chat')
    ch.bind('message', (d) => messages = [...messages, JSON.parse(d)])
    return () => client.disconnect()
  });
script>

Trigger from server load or actions

Publish events from SvelteKit form actions, server load functions, or API routes.

// src/routes/api/send/+server.ts
export async function POST({ request }) {
  const data = await request.json()
  await realtime.trigger({
    name: 'message',
    channel: 'private-chat',
    data: JSON.stringify(data)
  })
  return json({ ok: true })
}

Why SvelteKit

Built for SvelteKit developers

$env Integration

Use SvelteKit $env/static/private for secrets. Never expose your API secret to the client bundle.

Svelte 5 Runes

Client SDK works naturally with $state and $derived runes. Reactive updates without boilerplate.

Form Actions

Trigger realtime events from SvelteKit form actions for progressive enhancement with live updates.

TypeScript-First

Full TypeScript support in both server and client SDKs. Type-safe events and channel configuration.

How WebSocket channels work in SvelteKit

SvelteKit's architecture separates server and client code cleanly, which maps directly to how Apinator works. Server SDK code — authenticating WebSocket channels, publishing events — lives in +server.ts files or form actions, where it has access to $env/static/private secrets and runs only on the server. Client SDK code — subscribing to channels, binding events — lives in Svelte components where it connects to a persistent WebSocket and updates reactive state.

Svelte 5 runes make this especially clean. A $state([]) array automatically triggers template re-renders when new WebSocket events push items onto it. The onMount and onDestroy pair maps directly to the connect and disconnect lifecycle, preventing memory leaks. For state shared across multiple components, you can declare a $state rune in a shared .svelte.ts module and import it from any component.

Unlike frameworks where you'd need a separate WebSocket server process running alongside your SvelteKit app, Apinator's hosted infrastructure keeps your deployment stateless and serverless-compatible — no additional server process, no configuration.

Full Example

Full Example: Realtime WebSocket Chat with SvelteKit

Complete WebSocket example: a SvelteKit +server.ts auth endpoint, an API route for triggering events, and a Svelte 5 component that renders real-time messages with $state runes.

src/routes/api/realtime/auth/+server.ts

import { json } from '@sveltejs/kit' import { Apinator } from '@apinator/server' import { REALTIME_APP_ID, REALTIME_KEY, REALTIME_SECRET } from '$env/static/private' const realtime = new Apinator({ appId: REALTIME_APP_ID, key: REALTIME_KEY, secret: REALTIME_SECRET }) export async function POST({ request }) { const { socket_id, channel_name } = await request.json() return json(realtime.authenticateChannel(socket_id, channel_name)) }

Related Docs

Read the core WebSocket guides

Related Use Cases

Explore realtime use cases

Live Chat & Messaging Live Notifications & Activity Feeds Live Auctions & Bidding

Start building realtime SvelteKit apps

Completely free. No credit card. No catch.

Get Started Free Read the Docs