SvelteKit

Use Void with SvelteKit for resource detection, typed database queries, and migrations. SvelteKit keeps its own build and Cloudflare integration; Void plugs into its Vite configuration.

Setup

1. Create a new project

npx sv create my-app
cd my-app

2. Install dependencies

npm install -D @sveltejs/adapter-cloudflare void

3. Configure vite.config.ts

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

export default defineConfig({
  plugins: [
    voidPlugin(),
    sveltekit({
      adapter: adapter(),
      typescript: {
        config: withVoidTSConfig(),
      },
    }),
  ],
});

If your project already configures SvelteKit in svelte.config.js, keep that file and add typescript.config: withVoidTSConfig() under its kit options instead. SvelteKit ignores svelte.config.js when options are passed directly to sveltekit().

4. Create wrangler.jsonc

SvelteKit's adapter reads bindings from wrangler.jsonc for local dev. voidPlugin() auto-syncs inferred bindings into this file on dev startup, so you only need the base config:

{
  "name": "my-app",
  "compatibility_date": "2026-02-24",
  "compatibility_flags": ["nodejs_compat"],
}

By default, SvelteKit's Cloudflare adapter, voidPlugin() migrations, and void db commands share local state at .wrangler/state/v3, so no extra platformProxy.persist configuration is required.

5. Configure tsconfig.json

SvelteKit generates .svelte-kit/tsconfig.json and expects your root config to extend it. Void generates .void/tsconfig.json for project-specific aliases such as void/db and @schema.

Do not add Void's compilerOptions.paths to the root tsconfig.json; SvelteKit warns because root-level paths override its generated aliases. The withVoidTSConfig() hook merges Void's generated files and aliases into SvelteKit's generated config instead.

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

Run void prepare after a fresh clone or before typechecking in CI so .void/tsconfig.json exists before SvelteKit syncs its config.

6. Deploy

void auth login
void deploy

Using Void Platform Features

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

Void-managed auth is not supported in framework mode yet. Use Better Auth's official SvelteKit integration directly for now.

Database

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

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

KV Storage

import { kv } from 'void/kv';

export async function load() {
  return { settings: await kv.get('app:settings') };
}

Blob Storage

import { storage } from 'void/storage';

export async function load() {
  return { avatar: await storage.get('avatars/user-1.png') };
}

AI

import { ai } from 'void/ai';

export const actions = {
  summarize: async () => {
    return ai.run('@cf/meta/llama-3.3-70b-instruct-fp8-fast', {
      prompt: 'Summarize the latest news',
    });
  },
};

Cron Jobs

// crons/daily-cleanup.ts
import { defineScheduled } from 'void';

export const cron = '0 0 * * *';

export default defineScheduled(async () => {
  // runs daily at midnight
});

Queue Consumers

// queues/emails.ts
import { defineQueue } from 'void';

export default defineQueue<{ to: string; subject: string }>(async (batch) => {
  for (const msg of batch.messages) {
    // process each message
    msg.ack();
  }
});

Environment Variables

Declare environment variables in env.ts, then read them with import { env } from "void/env". Void supplies types, checks values during build and deploy, and stops the build if client code references a server-only key. See Environment Variables.

Accessing Bindings Directly

You can also use SvelteKit's platform.env in server hooks and load functions:

// src/routes/users/+page.server.ts
export async function load({ platform }) {
  const { results } = await platform.env.DB.prepare('SELECT * FROM users').all();
  return { users: results };
}

Or the cloudflare:workers module:

import { env } from 'cloudflare:workers';

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