How do I add a video player to a SvelteKit app?

The player is a web component, so it goes straight into Svelte markup with no wrapper and no React. The one rule is to import it inside onMount, because it registers against customElements and SvelteKit renders your components on the server first.

Can I upload video from SvelteKit without adding React?

Yes. The prebuilt uploader is a React component, but the chunked upload engine underneath is plain JavaScript with no view layer. Drive it from a Svelte component and build the UI with runes, or mount the React one inside onMount and accept two dependencies.

How do I get around SvelteKit's BODY_SIZE_LIMIT for video?

Stop sending the file through your server. Raising the limit moves the failure to Nginx's client_max_body_size, then to your platform's own cap, then to its execution timeout. A +server.ts endpoint that returns a signed URL is a few hundred bytes.

Why do I get 'document is not defined' during SSR?

Something touching the DOM is running on the server. React DOM, a player import at the top of the file, or anything reading document at the top of a module. Move it inside onMount, which never runs on the server.

Why does importing $env/static/private fail the build?

Because a component that runs in the browser is importing your server module. Only +server.ts, +page.server.ts and other server files may. This is SvelteKit catching a credential leak at build time, which is a guarantee the other frameworks in this space do not give you.

Does hls.js work in a SvelteKit project?

It does, and it usually misbehaves in dev before it misbehaves anywhere else. Vite pre-bundles dependencies, and a package whose client runtime must be a single shared instance can end up duplicated. Add it to optimizeDeps.exclude and restart, since Vite caches the pre-bundle.

Where should the playback ID come from, a load function or the component?

A +page.server.ts load function. It runs on the server, so credentials stay there and only the ID crosses to the browser. It is also where a signed token would be created for private playback, which a component cannot do.

Does Svelte 5 with runes change any of this?

Not on the server side. Load functions, +server.ts endpoints and $env/static/private are unchanged. On the client, $state makes driving an upload progress bar from events simpler than a store did, which is one reason the engine route is more attractive than it used to be.

FRAMEWORKS

SvelteKit video

Complete video infrastructure for a SvelteKit app. Install the packages and you get uploads, adaptive playback, live streams, DRM, analytics and AI features, without building your own encoding, storage and delivery.

Read the docs View on GitHub

Free plan: 10 videos, 100K streaming minutes, 300 minutes of subtitles and moderation. No credit card.

Node 18+ · SvelteKit SSRruntime

@fastpix/fastpix-nodeserver SDK

No Reactrequired

What you get

What you get from FastPix for SvelteKit video

Four things you don't have to build or run yourself.

One video API

Upload, storage, delivery, the player, analytics and AI all come from the same API. No Vite plugin, nothing added to your build.

Built-in encoding

FastPix turns each upload into several quality levels and packages them for streaming. No FFmpeg, no queue workers.

Analytics already on

The player sends view data on its own. Add a title and a viewer ID and you can see who watched what.

Secure video streaming and DRM

Sign a token on your server and pass it to the player. Widevine, PlayReady and FairPlay are all supported.

Functionality

Every SvelteKit video capability, from upload to AI

Pick a group, then a capability. Each one tells you whether the code goes in a +server endpoint, a server load, or the Svelte component itself.

Video upload API

A +server.ts endpoint creates the signed URL. The browser then uploads the file straight to FastPix in chunks, which is also how you sidestep SvelteKit's BODY_SIZE_LIMIT entirely: the bytes never reach your server, so there is no body to limit.

Where it runs · +server.ts creates, browser sends

1// src/routes/api/upload-url/+server.ts

2export async function POST() {

3 const upload = await fastpix.inputVideo.upload(

4 { corsOrigin: "*" },

5 { headers: { "X-Client-Type": "web-browser" } },

6 );

7 return json({ url: upload.data.url });

8}

Docs →

Svelte video player

The player is a web component, so it goes straight into Svelte markup with no wrapper and no React. It registers against customElements, a browser-only API, so import it from onMount rather than at the top of the file or SSR throws on window.

Where it runs · Svelte markup, no React

1<script>

2 import { onMount } from "svelte";

3 onMount(() => { import("@fastpix/fp-player"); });

4</script>

5

6<fastpix-player playback-id={data.playbackId} />

Docs →Repo →

Server-side AI processing

Every AI feature runs on the video after it is uploaded. You ask for it from a .server module and the result arrives on a webhook. None of it touches a component, so runes or stores makes no difference to any of it.

Where it runs · Server module, not Svelte

1// Opt in per media at upload time,

2// then read the result from a webhook.

3// No component code involved.

Docs →

Setup

Install and configure the SvelteKit video packages

Install the SvelteKit video packages

The upload engine and the player run in the browser and neither needs React. The Node SDK runs in your endpoints, where it creates upload URLs, signs playback tokens and asks for AI features.

npm

1# The Svelte-native path: no React, no React DOM

2npm install @fastpix/fastpix-node @fastpix/resumable-uploads @fastpix/fp-player

3

4# The prebuilt UI path, if you want the ready-made drop zone.

5# It is a React component, so it pulls React in.

6npm install @fastpix/fp-react-uploader react react-dom

7

8// No stylesheet needed on the resumable-uploads path.

9// You build the markup, so you own the styling.

Configure the SvelteKit video packages

There's no API key. You get two values, an Access Token ID and a Secret Key, and they work as a username and password. SvelteKit refuses to compile if a component imports them.

Get your access token

.env + fastpix.server.ts

1// .env

2FASTPIX_USERNAME=your-access-token-id

3FASTPIX_PASSWORD=your-secret-key

4

5// src/lib/fastpix.server.ts

6// The .server suffix and $env/static/private mean

7// importing this from a component fails the build.

8import { FASTPIX_USERNAME, FASTPIX_PASSWORD } from "$env/static/private";

9

10export const fastpix = new Fastpix({

11 security: { username: FASTPIX_USERNAME, password: FASTPIX_PASSWORD },

12});

A SvelteKit project with all of it wired

The endpoint, the Svelte upload component, the webhook handler and the player page, in one project you can clone and run. Everything in one place instead of four doc pages.

· SvelteKit· Svelte 5· +server endpoints

· Resumable upload· HLS playback· No React

Fork the example

Behind the scenes

What happens after your SvelteKit app uploads a file

Here's what happens between the file leaving the browser and the video reaching a viewer. None of it is code you write, and none of it runs in your app.

480p

1080p

4K

Native uploader

Chunked and resumable, from the browser to a signed URL.

Import from a URL

Or pass a public video URL and FastPix pulls it in.

Ingest, encode, package

No FFmpeg, no build step, nothing in your output directory.

Chunked, resumable ingest

Transcode to a ladder

Store and version

Package HLS renditions

Thumbnails and captions

Encrypt for DRM

video.media.ready

The webhook that tells your server the video is ready.

Adaptive playback

One playback ID into the player, on-demand or live.

1

2

3

Upload

From your SvelteKit app

Process

FastPix handles this

Play

Webhook + playback ID

Your SvelteKit app only touches the two ends. A server call hands over a signed URL and the player takes the playback ID. In between, a video.media.ready webhook tells your server the video is ready.

FAQ

SvelteKit video questions, answered

How do I add a video player to a SvelteKit app?
The player is a web component, so it goes straight into Svelte markup with no wrapper and no React. The one rule is to import it inside onMount, because it registers against customElements and SvelteKit renders your components on the server first.
Can I upload video from SvelteKit without adding React?
Yes. The prebuilt uploader is a React component, but the chunked upload engine underneath is plain JavaScript with no view layer. Drive it from a Svelte component and build the UI with runes, or mount the React one inside onMount and accept two dependencies.
How do I get around SvelteKit's BODY_SIZE_LIMIT for video?
Stop sending the file through your server. Raising the limit moves the failure to Nginx's client_max_body_size, then to your platform's own cap, then to its execution timeout. A +server.ts endpoint that returns a signed URL is a few hundred bytes.
Why do I get 'document is not defined' during SSR?
Something touching the DOM is running on the server. React DOM, a player import at the top of the file, or anything reading document at the top of a module. Move it inside onMount, which never runs on the server.
Why does importing $env/static/private fail the build?
Because a component that runs in the browser is importing your server module. Only +server.ts, +page.server.ts and other server files may. This is SvelteKit catching a credential leak at build time, which is a guarantee the other frameworks in this space do not give you.
Does hls.js work in a SvelteKit project?
It does, and it usually misbehaves in dev before it misbehaves anywhere else. Vite pre-bundles dependencies, and a package whose client runtime must be a single shared instance can end up duplicated. Add it to optimizeDeps.exclude and restart, since Vite caches the pre-bundle.
Where should the playback ID come from, a load function or the component?
A +page.server.ts load function. It runs on the server, so credentials stay there and only the ID crosses to the browser. It is also where a signed token would be created for private playback, which a component cannot do.
Does Svelte 5 with runes change any of this?
Not on the server side. Load functions, +server.ts endpoints and $env/static/private are unchanged. On the client, $state makes driving an upload progress bar from events simpler than a store did, which is one reason the engine route is more attractive than it used to be.

Go deeper

SvelteKit video

What you get from FastPix for SvelteKit video

One video API

Built-in encoding

Analytics already on

Secure video streaming and DRM

Every SvelteKit video capability, from upload to AI

Video upload API

Svelte video player

Video engagement analytics

Server-side AI processing

Install and configure the SvelteKit video packages

Install the SvelteKit video packages

Configure the SvelteKit video packages

A SvelteKit project with all of it wired

What happens after your SvelteKit app uploads a file

SvelteKit video questions, answered

How do I add a video player to a SvelteKit app?

Can I upload video from SvelteKit without adding React?

How do I get around SvelteKit's BODY_SIZE_LIMIT for video?

Why do I get 'document is not defined' during SSR?

Why does importing $env/static/private fail the build?

Does hls.js work in a SvelteKit project?

Where should the playback ID come from, a load function or the component?

Does Svelte 5 with runes change any of this?

More on SvelteKit video uploads and playback

Uploading large video files efficiently using chunking

How to allow users to upload large videos with pause and resume

Guide to video playback in JavaScript

ABR vs MBR: adaptive and multi-bitrate streaming

Guide to lazy loading HTML videos for your website

Creating a fully customizable video player interface

How to protect video content with signed URLs

Webhooks for video: live events and UGC pipelines

How to set up monitoring for video player errors