# SvelteKit (Prisma ORM v7) (/docs/guides/v7/frameworks/sveltekit)

Learn how to use Prisma ORM in a SvelteKit app

Location: Guides > v7 > Frameworks > SvelteKit

## Introduction

[SvelteKit](https://svelte.dev/docs/kit) 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](https://github.com/prisma/prisma-examples/tree/latest/orm/sveltekit).

## Quick start

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

#### bun

```bash
bunx create-prisma@stable --template svelte
```

#### pnpm

```bash
pnpm create prisma@stable --template svelte
```

#### yarn

```bash
yarn create prisma@stable --template svelte
```

#### npm

```bash
npm create prisma@stable -- --template svelte
```

Or follow the steps below to set it up manually.

## Prerequisites

- [Node.js 20+](https://nodejs.org)
- [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) (Recommended by Svelte)

## 1. Set up your project

You'll be using [Svelte CLI](https://github.com/sveltejs/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:

#### bun

```bash
bunx sv create sveltekit-prisma
```

#### pnpm

```bash
pnpm dlx sv create sveltekit-prisma
```

#### yarn

```bash
yarn dlx sv create sveltekit-prisma
```

#### npm

```bash
npx sv create sveltekit-prisma
```

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

> \[!NOTE]
>
> - _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:

#### bun

```bash
cd sveltekit-prisma
bun run dev
```

#### pnpm

```bash
cd sveltekit-prisma
pnpm run dev
```

#### yarn

```bash
cd sveltekit-prisma
yarn dev
```

#### npm

```bash
cd sveltekit-prisma
npm run dev
```

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:

#### bun

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

#### pnpm

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

#### yarn

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

#### npm

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

#### bun

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

#### pnpm

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

#### yarn

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

#### npm

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

> \[!NOTE]
> If you are using a different database provider (MySQL, SQL Server, SQLite), install the corresponding driver adapter package instead of `@prisma/adapter-pg`. For more information, see [Database drivers](/guides/core-concepts-v7-supported-databases-database-drivers).

Once installed, initialize Prisma in your project:

#### bun

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

#### pnpm

```bash
pnpm prisma init --output src/generated/prisma
```

#### yarn

```bash
yarn prisma init --output src/generated/prisma
```

#### npm

```bash
npx prisma init --output src/generated/prisma
```

> \[!NOTE]
> `prisma init` creates the Prisma scaffolding and a local `DATABASE_URL`. In the next step, you will create a Prisma Postgres database and replace that value with a direct `postgres://...` connection string.

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:

#### bun

```bash
bunx create-db
```

#### pnpm

```bash
pnpm dlx create-db
```

#### yarn

```bash
yarn dlx create-db
```

#### npm

```bash
npx create-db
```

### 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 title="prisma/schema.prisma"
generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

model User { // [!code ++]
  id    Int     @id @default(autoincrement()) // [!code ++]
  email String  @unique // [!code ++]
  name  String? // [!code ++]
  posts Post[] // [!code ++]
} // [!code ++]
 // [!code ++]
model Post { // [!code ++]
  id        Int     @id @default(autoincrement()) // [!code ++]
  title     String // [!code ++]
  content   String? // [!code ++]
  published Boolean @default(false) // [!code ++]
  authorId  Int // [!code ++]
  author    User    @relation(fields: [authorId], references: [id]) // [!code ++]
} // [!code ++]
```

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

### 2.3 Add `dotenv` to `prisma.config.ts`

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`

```ts
import "dotenv/config"; // [!code ++]
import { defineConfig, env } from "prisma/config";
export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
  },
  datasource: {
    url: env("DATABASE_URL"),
  },
});
```

### 2.4. Configure the Prisma Client generator

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

#### bun

```bash
bunx prisma migrate dev --name init
```

#### pnpm

```bash
pnpm prisma migrate dev --name init
```

#### yarn

```bash
yarn prisma migrate dev --name init
```

#### npm

```bash
npx prisma migrate dev --name init
```

#### bun

```bash
bunx prisma generate
```

#### pnpm

```bash
pnpm prisma generate
```

#### yarn

```bash
yarn prisma generate
```

#### npm

```bash
npx prisma generate
```

### 2.5. 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:

```typescript title="prisma/seed.ts"
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`:

```ts title="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`, // [!code ++]
  },
  datasource: {
    url: env("DATABASE_URL"),
  },
});
```

Run the seed script:

#### bun

```bash
bunx prisma db seed
```

#### pnpm

```bash
pnpm prisma db seed
```

#### yarn

```bash
yarn prisma db seed
```

#### npm

```bash
npx prisma db seed
```

And open Prisma Studio to inspect your data:

#### bun

```bash
bunx prisma studio
```

#### pnpm

```bash
pnpm prisma studio
```

#### yarn

```bash
yarn prisma studio
```

#### npm

```bash
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.

> \[!NOTE]
> 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`](https://svelte.dev/docs/kit/$env-static-private) namespace.

Set up the Prisma client like this:

```tsx title="src/lib/prisma.ts"
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;
```

> \[!WARNING]
> We recommend using a connection pooler (like [Prisma Accelerate](https://www.prisma.io/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:

```typescript title="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, 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:

```typescript title="src/routes/+page.server.ts"
import prisma from "$lib/prisma";

export async function load() {
  const users = await prisma.user.findMany({
    include: {
      // [!code ++]
      posts: true, // [!code ++]
    }, // [!code ++]
  });

  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:

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

<h1>SvelteKit + Prisma</h1>
```

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

```html title="src/routes/+page.svelte"
<script lang="ts">
  let { data } = $props(); // [!code ++]
</script>

<h1>SvelteKit + Prisma</h1>
```

With the data available, map through the users and their posts with Svelte's [`each`](https://svelte.dev/docs/svelte/each) block:

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

<h1>SvelteKit + Prisma</h1>

{#each data.users as user} // [!code ++]
<h2>{user.name}</h2>
// [!code ++] {#each user.posts as post} // [!code ++]
<ul>
  // [!code ++]
  <li><a href="{post.content}">{post.title}</a></li>
  // [!code ++]
</ul>
// [!code ++] {/each} // [!code ++] {/each} // [!code ++]
```

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

## 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

### More Info

- [Prisma Documentation](/guides/introduction-7-v7)
- [SvelteKit Documentation](https://svelte.dev/docs/kit)

## Related pages

- [`Astro`](/guides/guides-v7-frameworks-astro): Learn how to use Prisma ORM in an Astro app
- [`Elysia`](/guides/guides-v7-frameworks-elysia): Learn how to use Prisma ORM in an Elysia app
- [`Hono`](/guides/guides-v7-frameworks-hono): Learn how to use Prisma ORM in a Hono app
- [`NestJS`](/guides/guides-v7-frameworks-nestjs): Learn how to use Prisma ORM in a NestJS app
- [`Next.js`](/guides/guides-v7-frameworks-nextjs): Learn how to use Prisma ORM in a Next.js app and deploy it to Vercel

## Related pages

- [Authentication & Tools](./authentication-tools-index.md)
- [Build](./build-index.md)
- [Changelog](../changelog.md)
- [Concepts](./concepts-index.md)
- [Console commands](./console-commands-index.md)
- [Contract Authoring](./contract-authoring-index.md)
- [Core Concepts](./core-concepts-index.md)
- [Data Modeling](./data-modeling-index.md)
- [Database](./database-index.md)
- [DB commands](./db-commands-index.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.