Framework guides

Use Da8a with SvelteKit

Connect SvelteKit to Da8a with supabase-js, reading public values from $env/static/public.

Before you start

  • A Da8a project (the Overview page shows the project URL and anon key)
  • A table to query; the quickstart creates a todos table with Row Level Security

Install the client

shell
$ npm i @supabase/supabase-js

Create the client

src/lib/db.ts
import { createClient } from '@supabase/supabase-js'
import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
export const db = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)

The anon key is safe in client code as long as Row Level Security is on for your tables. Never ship the service key to the browser: it bypasses RLS.

Load data in a page

src/routes/+page.ts
import { db } from '$lib/db'
export async function load() {
  const { data } = await db.from('todos').select('*')
  return { todos: data ?? [] }
}

Host it

Deploy the frontend on Chapong and link it to the project: the URL, anon key and auth redirect URLs are kept in sync for you, including on preview deploys.

Questions

Can I use the service key in +page.server.ts?

Yes, from $env/static/private, never from a public variable.

Updated 2026-10-23.