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
todostable with Row Level Security
Install the client
$ npm i @supabase/supabase-jsCreate the client
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
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.
Related
- React (Vite) with a Supabase-compatible backend
- Next.js with a Supabase-compatible backend
- Vue and Nuxt with a Supabase-compatible backend
- React Native and Expo with a Supabase-compatible backend
- Quickstart
- supabase-js client docs
Updated 2026-10-23.