Skip to main content

How to use Prisma ORM with SvelteKit

15 min

Introduction​

Prisma ORM simplifies database access with type-safe queries, and when paired with SvelteKit, it creates a robust and scalable full-stack architecture.

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.

Prerequisites​

1. Set up your project​

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:

npx sv create sveltekit-prisma

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

info
  • Which template would you like? SvelteKit minimal
  • Add type checking with TypeScript? Yes, using TypeScript syntax
  • What would you like to add to your project?
    • prettier
    • eslint
  • Which package manager do you want to install dependencies with? npm

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

cd sveltekit-prisma
npm run dev

That's it! Svelte makes it a very simple process to get up and running. At this point, your project is ready to integrate Prisma and connect to a Prisma Postgres database.

2. Install and Configure Prisma​

2.1. Install dependencies​

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

npm install prisma tsx --save-dev
npm install @prisma/extension-accelerate @prisma/client

Once installed, initialize Prisma in your project:

npx prisma init --db --output src/generated/prisma
info

You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My SvelteKit Project"

This will create:

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

2.2. Define your Prisma Schema​

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

prisma/schema.prisma
generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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.

2.3. Configure the Prisma Client generator​

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

npx prisma migrate dev --name init

2.4. Seed the database​

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

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

prisma/seed.ts
import { PrismaClient, Prisma } from "../src/generated/prisma";

const prisma = new PrismaClient();

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 package.json:

package.json
{
	"name": "sveltekit-prisma",
	"private": true,
	"version": "0.0.1",
	"type": "module",
	"scripts": {
    // ...
	},
  "prisma": {
    "seed": "tsx prisma/seed.ts"
  }
	"devDependencies": {
    // ...
	},
	"dependencies": {
    // ...
	}
}

Run the seed script:

npx prisma db seed

And open Prisma Studio to inspect your data:

npx prisma studio

3. Integrate Prisma into SvelteKit​

3.1. Create a Prisma Client​

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

tip

Files in src/lib can be accessed from anywhere using the $lib alias.

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:

src/lib/prisma.ts
import { PrismaClient } from '../generated/prisma';
import { DATABASE_URL } from '$env/static/private';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient({
	datasourceUrl: DATABASE_URL
}).$extends(withAccelerate());

export default prisma;

warning

We recommend using a connection pooler (like Prisma Accelerate) to manage database connections efficiently.

If you choose not to use one, avoid instantiating PrismaClient globally in long-lived environments. Instead, create and dispose of the client per request to prevent exhausting your database connections.

3.2. Create a server route​

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:

src/routes/+page.server.ts
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, we can 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:

src/routes/+page.server.ts
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.

3.3. Populate the page​

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

src/routes/+page.svelte
<script lang="ts">
</script>

<h1>SvelteKit + Prisma</h1>

We need to grab the data exported from +page.server.ts:

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

<h1>SvelteKit + Prisma</h1>

Now that we have the data, let's map through the users and their posts with Svelte's each block:

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

<h1>SvelteKit + Prisma</h1>

{#each data.users as user}
  <h2>{user.name}</h2>
  {#each user.posts as post}
    <ul>
      <li><a href={post.content}>{post.title}</a></li>
    </ul>
  {/each}
{/each}

You're done! You've just created a SvelteKit app with Prisma ORM. Below are some next steps to explore, as well as some more resources to help you get started expanding your project.

Next Steps​

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
  • Enable query caching with Prisma Postgres for better performance

More Info​


Stay connected with Prisma

Continue your Prisma journey by connecting with our active community. Stay informed, get involved, and collaborate with other developers:

We genuinely value your involvement and look forward to having you as part of our community!