Use Voltbase with SvelteKit

Create a Voltbase project, add sample data, and query it from a SvelteKit app.

1. Create a Voltbase project

Sign up or sign in
Create an organization and a project
Open API and copy the Project URL, anon key, and (for server-only writes) the service role key

You can also create projects from the dashboard after signing in — no CLI required for this quickstart.

2. Set up your database

In the dashboard, open Database and create a instruments table (or run SQL):

schema.sql

create table instruments (
  id bigint generated always as identity primary key,
  name text not null
);

insert into instruments (name)
values ('violin'), ('viola'), ('cello');

alter table instruments enable row level security;

create policy "public read"
on instruments for select
to anon
using (true);

Why RLS?

With a public SELECT policy for anon, the browser anon key can read rows. Writes still need auth policies or the service role on the server.

3. Create a SvelteKit app

terminal

npx sv create voltbase-sveltekit
cd voltbase-sveltekit
npm install

Pick the TypeScript template when prompted.

4. Declare environment variables

Create .env at the project root and paste your dashboard values:

.env

PUBLIC_VOLTBASE_URL=https://YOUR_API/api/projects/YOUR_SLUG
PUBLIC_VOLTBASE_ANON_KEY=your-anon-key

SvelteKit exposes PUBLIC_* vars to the browser via $env/static/public.

Keep the service role server-only

Never put the service role key in client bundles. Use the anon key in the browser; use the service role only in server routes, Server Components, or backend jobs.

5. Create a Voltbase client

Install the SDK, then add a small helper:

terminal

npm install voltbase-js

src/lib/voltbase.ts

import { createClient } from 'voltbase-js';
import {
  PUBLIC_VOLTBASE_URL,
  PUBLIC_VOLTBASE_ANON_KEY,
} from '$env/static/public';

export const voltbase = createClient(
  PUBLIC_VOLTBASE_URL,
  PUBLIC_VOLTBASE_ANON_KEY,
);

6. Query Voltbase from SvelteKit

Load data in a server load function, then render in the page:

src/routes/+page.server.ts

// src/routes/+page.server.ts
import { voltbase } from '$lib/voltbase';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  const { data, error } = await voltbase
    .from('instruments')
    .select('id, name')
    .order('id', 'asc');

  if (error) throw new Error(error.message);
  return { instruments: data ?? [] };
};

// src/routes/+page.svelte
<script lang="ts">
  let { data } = $props();
</script>

<ul>
  {#each data.instruments as row}
    <li>{row.name}</li>
  {/each}
</ul>

Next: Auth, Realtime, or the Todo + RLS example.