Skip to Content
QuickstartsSvelteKit

SvelteKit

Build and query a ZXCV database from a SvelteKit app, then ship it to the edge. You’ll end with a route that reads live data in a load function and renders it in +page.svelte.

AI Assistance
Help me connect ZXCV to my SvelteKit app. Do the following:
1. Install the @zxcv.build/sdk package.
2. Initialize a client with my project ref + anon key (from Settings → API), using SvelteKit's env convention (PUBLIC_ prefix in .env, imported from $env/static/public).
3. Fetch rows from a "todos" table in a load function and render them in +page.svelte idiomatically.
4. Keep the anon key on the client — authorization is enforced server-side by my policies.
Ask me for my project ref and anon key if I haven't given them.

The anon key is public and safe to ship, because access is enforced server-side by your authorization rules.

Create a project

In the dashboard  click Start building, or run zxcv from your terminal. Open Settings → API and copy your project ref and anon key.

Create a table

In the SQL editor, create a todos table with a couple of rows:

create table todos (
  id          bigint generated always as identity primary key,
  title       text not null,
  is_complete boolean not null default false
);
insert into todos (title) values ('Read the docs'), ('Ship an app');

Install the SDK

bash npm install @zxcv.build/sdk

Initialize the client

Add your keys to .env. SvelteKit exposes variables prefixed with PUBLIC_ to the browser via $env/static/public, which is exactly what the anon key needs:

.env
PUBLIC_ZXCV_PROJECT=acme-store
PUBLIC_ZXCV_ANON_KEY=your-anon-key

Create a shared client:

src/lib/zxcv.ts
import { createClient } from '@zxcv.build/sdk'
import { PUBLIC_ZXCV_PROJECT, PUBLIC_ZXCV_ANON_KEY } from '$env/static/public'
 
export const zxcv = createClient({
  project: PUBLIC_ZXCV_PROJECT,
  anonKey: PUBLIC_ZXCV_ANON_KEY,
})

Fetch and render

Load the data in a +page.ts load function — it runs on the server for the first render and on the client during navigation:

src/routes/+page.ts
import { zxcv } from '$lib/zxcv'
 
export async function load() {
  const { data: todos } = await zxcv
    .from('todos')
    .select('id, title, is_complete')
    .order('id')
 
  return { todos: todos ?? [] }
}

Render what load returned in +page.svelte:

src/routes/+page.svelte
<script lang="ts">
  export let data
</script>
 
<ul>
  {#each data.todos as todo (todo.id)}
    <li>{todo.title}</li>
  {/each}
</ul>

Need the query to stay on the server (e.g. to keep a signed-in user’s session server-only)? Rename the file to +page.server.ts — the load signature is the same. Want live updates? Subscribe with Realtime in an onMount inside +page.svelte.

Deploy

Ship to the global edge from your terminal:

npm i -g zxcv
zxcv link acme-store
zxcv deploy --prod

Every push gets a preview URL; --prod promotes to your domain. See Deploy for custom domains and canaries.

Next steps

Vue & NuxtFlutter