SvelteKit

SvelteKit runs load functions on the server before a page renders, which is where you call Prisma ORM to read from a Prisma Postgres database.

In this guide, you'll learn to integrate Prisma ORM with a Prisma Postgres database in a SvelteKit project from scratch. You can find a complete example of this guide on GitHub.

Run one command to scaffold a SvelteKit project with Prisma ORM and Prisma Postgres ready to go:

bunx create-prisma@stable --template svelte

pnpm create prisma@stable --template svelte

yarn create prisma@stable --template svelte

npm create prisma@stable -- --template svelte

Or follow the steps below to set it up manually.

• Node.js 20+
• Svelte VSCode extension (Recommended by Svelte)

You'll be using Svelte CLI instead of npx create svelte@latest. This CLI provides a more interactive setup and built-in support for popular tooling like ESLint and Prettier

Create a new Svelte project:

bunx sv create sveltekit-prisma

pnpm dlx sv create sveltekit-prisma

yarn dlx sv create sveltekit-prisma

npx sv create sveltekit-prisma

It will prompt you to customize your setup. Here are the options you'll choose:

Once the setup completes, navigate into your project and start the development server:

cd sveltekit-prisma

bun run dev

cd sveltekit-prisma
pnpm run dev

cd sveltekit-prisma
yarn dev

cd sveltekit-prisma
npm run dev

At this point, your project is ready to integrate Prisma and connect to a Prisma Postgres database.

To get started with Prisma, you'll need to install a few dependencies:

bun add prisma@prev tsx @types/pg --dev

pnpm add prisma@prev tsx @types/pg --save-dev

yarn add prisma@prev tsx @types/pg --dev

npm install prisma@prev tsx @types/pg --save-dev

bun add @prisma/client@7 @prisma/adapter-pg dotenv pg

pnpm add @prisma/client@7 @prisma/adapter-pg dotenv pg

yarn add @prisma/client@7 @prisma/adapter-pg dotenv pg

npm install @prisma/client@7 @prisma/adapter-pg dotenv pg

Once installed, initialize Prisma in your project:

bunx --bun prisma init --output src/generated/prisma

pnpm prisma init --output src/generated/prisma

yarn prisma init --output src/generated/prisma

npx prisma init --output src/generated/prisma

This will create:

• A prisma directory with a schema.prisma file.
• A prisma.config.ts file for configuring Prisma
• A .env file containing a local DATABASE_URL at the project root.
• An output directory for the generated Prisma Client as src/generated/prisma.

Create a Prisma Postgres database and replace the generated DATABASE_URL in your .env file with the postgres://... connection string from the CLI output:

bunx create-db

pnpm dlx create-db

yarn dlx create-db

npx create-db

In the prisma/schema.prisma file, add the following models and change the generator to use the prisma-client provider:

generator client {

  provider = "prisma-client"

  output   = "../src/generated/prisma"

}

datasource db {

  provider = "postgresql"

}

model User { 

  id    Int     @id @default(autoincrement()) 

  email String  @unique

  name  String?

  posts Post[]

} 

model Post { 

  id        Int     @id @default(autoincrement()) 

  title     String

  content   String?

  published Boolean @default(false) 

  authorId  Int

  author    User    @relation(fields: [authorId], references: [id]) 

} 

This creates two models: User and Post, with a one-to-many relationship between them.

To get access to the variables in the .env file, they can either be loaded by your runtime, or by using dotenv. Include an import for dotenv at the top of the prisma.config.ts

import "dotenv/config"; 

import { defineConfig, env } from "prisma/config";

export default defineConfig({

  schema: "prisma/schema.prisma",

  migrations: {

    path: "prisma/migrations",

  },

  datasource: {

    url: env("DATABASE_URL"),

  },

});

Now, run the following command to create the database tables and generate the Prisma Client:

bunx prisma migrate dev --name init

pnpm prisma migrate dev --name init

yarn prisma migrate dev --name init

npx prisma migrate dev --name init

bunx prisma generate

pnpm prisma generate

yarn prisma generate

npx prisma generate

Add some seed data to populate the database with sample users and posts.

Create a new file called seed.ts in the prisma/ directory:

import { PrismaClient, Prisma } from "../src/generated/prisma/client.js";

import { PrismaPg } from "@prisma/adapter-pg";

const adapter = new PrismaPg({

  connectionString: process.env.DATABASE_URL!,

});

const prisma = new PrismaClient({

  adapter,

});

const userData: Prisma.UserCreateInput[] = [

  {

    name: "Alice",

    email: "alice@prisma.io",

    posts: {

      create: [

        {

          title: "Join the Prisma Discord",

          content: "https://pris.ly/discord",

          published: true,

        },

        {

          title: "Prisma on YouTube",

          content: "https://pris.ly/youtube",

        },

      ],

    },

  },

  {

    name: "Bob",

    email: "bob@prisma.io",

    posts: {

      create: [

        {

          title: "Follow Prisma on Twitter",

          content: "https://www.twitter.com/prisma",

          published: true,

        },

      ],

    },

  },

];

export async function main() {

  for (const u of userData) {

    await prisma.user.create({ data: u });

  }

}

main();

Now, tell Prisma how to run this script by updating your prisma.config.ts:

import "dotenv/config";

import { defineConfig, env } from "prisma/config";

export default defineConfig({

  schema: "prisma/schema.prisma",

  migrations: {

    path: "prisma/migrations",

    seed: `tsx prisma/seed.ts`, 

  },

  datasource: {

    url: env("DATABASE_URL"),

  },

});

Run the seed script:

bunx prisma db seed

pnpm prisma db seed

yarn prisma db seed

npx prisma db seed

And open Prisma Studio to inspect your data:

bunx prisma studio

pnpm prisma studio

yarn prisma studio

npx prisma studio

Inside your /src/lib directory, rename index.ts to prisma.ts. This file will be used to create and export your Prisma Client instance.

The DATABASE_URL is stored in the .env file. To access it, you'll need to import it from the $env/static/private namespace.

Set up the Prisma client like this:

import { PrismaClient } from "../generated/prisma/client.js";

import { DATABASE_URL } from "$env/static/private";

import { PrismaPg } from "@prisma/adapter-pg";

const adapter = new PrismaPg({

  connectionString: DATABASE_URL,

});

const prisma = new PrismaClient({

  adapter,

});

export default prisma;

To fetch data from the database on the server side, create a +page.server.ts file in your routes directory. This file should export a load function, which runs on the server before your page renders.

Use the findMany() method within a basic load function to get a list of users.

Update your +page.server.ts file like this:

import prisma from "$lib/prisma";

export async function load() {

  const users = await prisma.user.findMany({});

  return {

    users,

  };

}

At this point, you're only getting data directly on the User model; no relations like posts are included yet.

To also fetch each user's posts, expand the query using the include option. This tells Prisma to join the related Posts table in the result.

Update your findMany() call like this:

import prisma from "$lib/prisma";

export async function load() {

  const users = await prisma.user.findMany({

    include: {

      posts: true, 

    }, 

  });

  return {

    users,

  };

}

Now, every user in the result will also include a posts array.

In src/routes/+page.svelte, strip the file down to the basics and add a <script> fragment. The file should look like this:

<script lang="ts"></script>

<h1>SvelteKit + Prisma</h1>

Read the data exported from +page.server.ts:

<script lang="ts">

  let { data } = $props(); 

</script>

<h1>SvelteKit + Prisma</h1>

With the data available, map through the users and their posts with Svelte's each block:

<script lang="ts">  let { data } = $props();</script><h1>SvelteKit + Prisma</h1>{#each data.users as user}<h2>{user.name}</h2>// [!code ++] {#each user.posts as post}<ul>  <li><a href="{post.content}">{post.title}</a></li></ul>// [!code ++] {/each} // [!code ++] {/each}

Your SvelteKit app now renders users and their posts from a Prisma Postgres database.

Now that you have a working SvelteKit app connected to a Prisma Postgres database, you can:

• Extend your Prisma schema with more models and relationships
• Add create/update/delete routes and forms
• Explore authentication and validation

• Prisma Documentation
• SvelteKit Documentation