SvelteKit

Ecosystem

Add the SDK to a SvelteKit app to get resource detection, typed database queries and migrations. SvelteKit keeps its own build and Cloudflare integration. The SDK plugs into its Vite config.

On this pageSet up the SDK in a SvelteKit project · Use SDK features such as void/db from SvelteKit · Upgrade an existing SvelteKit 2 app

The SDK supports SvelteKit 3 and SvelteKit 2.62 or later. The setup below uses SvelteKit 3 with @sveltejs/adapter-cloudflare 8.

Setup

Follow these steps in order.

1. Create a new project

Now you will create a new app and open the new app folder.

npx sv create my-app
cd my-app

Example output: the scaffolder asks a few questions and creates the app folder.

2. Install dependencies

Now you will install the dependencies.

npm install -D @sveltejs/adapter-cloudflare void

Example output: npm finishes with added N packages and no errors.

3. Configure vite.config.ts

import adapter from '@sveltejs/adapter-cloudflare';
import { sveltekit } from '@sveltejs/kit/vite';
import { voidPlugin } from 'void';

export default {
  plugins: [
    voidPlugin(),
    sveltekit({
      adapter: adapter({
        config: './.void-wrangler.jsonc',
        platformProxy: { configPath: './.void-wrangler.jsonc' },
      }),
    }),
  ],
};

4. Create void.config.ts

The adapter now points at the SDK's generated Cloudflare config. Next, add your Cloudflare settings to void.config.ts:

import { defineConfig } from 'void/config';

export default defineConfig({
  cloudflare: {
    name: 'my-app',
    compatibility_date: '2026-02-24',
    compatibility_flags: ['nodejs_compat'],
  },
});

5. Configure tsconfig.json

This step extends SvelteKit's generated config with the SDK's types and database aliases:

{
  "extends": ["$app/tsconfig", "./.void/tsconfig.json"],
  "compilerOptions": {
    "types": ["$app/types", "void/env"]
  },
  "include": ["src", "db", "crons", "queues", "*.ts"]
}

Run void prepare after a fresh clone and before typechecking in CI. This creates .void/tsconfig.json before SvelteKit syncs its config. Use package.json subpath imports for aliases such as SvelteKit 3's #lib.

6. Deploy

Requires: login to your deploy target

void auth login opens your browser to sign in to Cloudflare or your team's platform. No token goes in your project.

Now you will sign in and deploy the app.

void auth login
void deploy

Example output: A browser window opens. The CLI confirms the sign-in when you finish. Build and upload progress, then the live URL.

Use SDK features

Most SDK platform features work with SvelteKit. Use them in server load functions, actions and API routes:

Framework mode does not support SDK-managed auth yet. Use Better Auth's official SvelteKit integration for now.

Database

import { users } from '@schema';
// src/routes/users/+page.server.ts
import { db } from 'void/db';

export async function load() {
  return { users: await db.select().from(users) };
}

Other resources

Use KV, object storage and AI in server-side code. The imports are the same as in an SDK app. Add cron jobs in crons/ and queue consumers in queues/.

Environment variables

Declare variables in env.ts. Read them with import { env } from "void/env". See Environment Variables for local values, production secrets and public VITE_* values.

Access bindings directly

In SvelteKit 3, import the cloudflare:workers module in server-side code:

import { env } from 'cloudflare:workers';

const { results } = await env.DB.prepare('SELECT * FROM users').all();

Existing SvelteKit 2 apps

Use SvelteKit 2.62 or later with @sveltejs/adapter-cloudflare 7. The Vite config above also works with Kit 2. Add the SDK's tsconfig hook to the sveltekit() options:

import { withVoidTSConfig } from 'void/sveltekit';

sveltekit({
  adapter: adapter({
    config: './.void-wrangler.jsonc',
    platformProxy: { configPath: './.void-wrangler.jsonc' },
  }),
  typescript: {
    config: withVoidTSConfig(),
  },
});

Keep your Kit 2 tsconfig setup:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "types": ["void/env"]
  }
}

If your app has svelte.config.js or svelte.config.ts, keep it. Add typescript.config: withVoidTSConfig() under kit. Kit 2's platform.env still works in hooks and load functions.

Next steps

NextNuxtPreviousAstroZoneAll Ecosystem pages