Use TypeScript with SvelteKit and Supabase

Focus on writing product code with this powerful pair of tools.

Feb 1, 2023

Ross Robino

# Load

Full-stack types with one extra dependency

It’s hard to avoid adding lots of different dependencies when creating a full-stack web application. Many projects use separate packages for rendering, routing, data fetching, creating an API, managing state, hosting a database/storage, and setting up authentication. Lee Robinson recently wrote Why You Should Use a React Framework, in this post he highlights how developers should spend their time writing code that is unique to their application, and less time writing boilerplate to connect tools together. I believe we can take this one step further by utilizing SvelteKit, and even further by pairing it with Supabase.

SvelteKit is the first party framework and the recommended way to build Svelte applications. Among other features, it provides a powerful way to load data and render pages server side.

In addition, SvelteKit works nicely with TypeScript, one nice feature of SvelteKit’s load function is how the returned type is passed to its respective layout or page.

Supabase is a popular backend-as-a-service tool. Some of the features it provides include a PostgreSQL database, optional hosting, authentication, serverless APIs, and helper querying libraries. Supabase makes it simple for JavaScript developers to create robust, full-stack applications with the skills and language they already are familiar with.

Generated types (without Prisma)

During development, it’s useful to keep track of the type of data you expected from any particular request. With TypeScript, you can take advantage of typechecking and auto-completion as your write your queries and in your markup. This is often difficult to accomplish because you must keep track of and sync your types against your schema (tables, columns, types, etc.), or create a type for each request.

If you’ve used Prisma before, you’ll be familiar with the benefits of having schema types generated for you instead of creating them yourself. This is made possible because your schema is also housed in your project.

While you can use Prisma with Supabase, it requires some extra configuration to take full advantage of features like row level security or authentication. We do not have to use Prisma—or manually write our schema/types in our project—to get the same benefits using Supabase’s JavaScript client. Instead of having to create a type for each query, it’s possible to generate types based on your projects schema with the Supabase CLI. Then you can easily utilize these types throughout your project.

Here’s how to start creating full-stack, type safe, applications with SvelteKit and Supabase in under 40 lines of code.

Create a Supabase project

  • Login and create a new project at using their web application.
  • Create a table from the table editor—I’ll name mine todos
  • Add description
  • Enable Row Level Security
  • We will not need Realtime for this tutorial
  • Add columns to your table:
titletextEmpty String
  • Use the Insert Rows button to add a few rows to the table with any data you like

Row Level Security

Since Row Level Security is enabled on our table, no one can currently create, read, update, or delete. We can add a SELECT policy to enable our database to be read.

  • Navigate to Authentication > Policies and create a new policy. I’ve selected Get started quickly > Enable read access to everyone.

Create a SvelteKit project

  • Create a new SvelteKit project using the following commands. Select the skeleton project template and be sure to add type checking with TypeScript.
npm create svelte@latest
npm install

Environment variables

  • Create a .env file at the root of your project (outside of src) to put environment variables, these are found in Settings > API in the project dashboard. The Supabase client will use these variables to query the database.

Generate types

  • Install the Supabase CLI as a development dependency
npm install -D supabase
npx supabase login
  • Add a new script to package.json as a shortcut to run the type generation command
  • Replace PROJECT_ID with the id from your PUBLIC_SUPABASE_URL environment variable
// package.json

	"scripts": {
		"update-types": "npx supabase gen types typescript --project-id \"PROJECT_ID\" --schema public > src/lib/db/types.ts"
  • Now run this command to generate types into the src/lib/db/types.ts file
npm run update-types

Inspect the new file, these generated types should match our table schema. Each time you update your schema in Supabase (add a new table or column, change a type, etc.), you can run this command to sync your types with your project.

// src/lib/db/types.ts


export interface Database {
  public: {
    Tables: {
      todos: {
        Row: {
          complete: boolean
          created_at: string
          id: string
          title: string

Supabase client

Next we can set up our client to query the database.

  • Install the Supabase JavaScript client as a dependency
npm install @supabase/supabase-js
  • Create a src/lib/db/client.ts file, this will be imported wherever we want to run our query (server or client side)
// src/lib/db/client.ts

import { createClient } from "@supabase/supabase-js";
import type { Database } from "./types"; // our generated types
import {
} from "$env/static/public";

export const db = createClient<Database>(

The generated types are imported here and applied to the client, then our responses from the client will be automatically typed! If you are seeing errors when importing the environment variables, be sure to run npm run dev.


Finally, we can fetch our data with a server side load function.

  • Create a src/routes/+page.server.ts file
// src/routes/+page.server.ts

import { db } from "$lib/db/client";
import { error } from "@sveltejs/kit";

export const load = async () => {
	const { data: todos, error: db_error } = await db.from("todos").select();
	if (!todos) throw error(404, db_error);
	return { todos };

This loads the data server side for server side rendering. Check out the SvelteKit’s loading data documentation if you’re unfamiliar with how this works.

As you type, you should see your table name appear as an argument in the from method due to our generated types!

Auto-complete your database queries using the generated types.


  • Finally, create a src/routes/+page.svelte file to display the data on the page
<!-- src/routes/+page.svelte -->

<script lang="ts">
	export let data;

<h1>Todo List</h1>

{#each data.todos as { title, complete, created_at }}
	<h2>{complete ? "Done" : "Todo"} | {title}</h2>
	<p>{new Date(created_at).toLocaleDateString()}</p>

Here’s where we can take full advantage of TypeScript’s type checking and autocompletion. You can press ctrl + space to get suggestions and the types from your schema. The best part is that this is all accomplished without having to manually create any types.

Auto-complete when writing markup using the generated types.


Supabase and SvelteKit together can equip you with a powerful toolset and eliminate many extra dependencies in your stack. SvelteKit and the Supabase client, combined with the generated types from the CLI gives you the power of TypeScript without the extra work. Thanks for reading!


Find an error in this post? Any updates are appreciated. Edit this post