This page describes how to use MDX components (e.g. code blocks) in the Prisma docs.

TopBlock

Required at the top of the page to avoid styling issues:

<TopBlock>
This page describes how to use [MDX](https://mdxjs.com/) components (e.g. code blocks) in the Prisma docs.
</TopBlock>

Code blocks

Example:

async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}

Code:

```js
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```

Prisma schema

Example:

datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}

Code:

```prisma
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
```

Code block with file icon

Example:

schema.prisma
1datasource db {
2 provider = "sqlite"
3 url = env("DATABASE_URL")
4}
5
6generator client {
7 provider = "prisma-client-js"
8}
9
10model Post {
11 id Int @id @default(autoincrement())
12 title String
13 content String?
14 published Boolean @default(false)
15 author User? @relation(fields: [authorId], references: [id])
16 authorId Int?
17}
18
19model User {
20 id Int @id @default(autoincrement())
21 email String @unique
22 name String?
23 posts Post[]
24}

Code:

```prisma file=schema.prisma
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Post {
id Int @id @default(autoincrement())
title String
content String?
published Boolean @default(false)
author User? @relation(fields: [authorId], references: [id])
authorId Int?
}
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
posts Post[]
}
```

Code block with copy

Example:

async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}

Code:

```js copy
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```

Code block without line numbers

Example:

async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}

Code:

```js no-lines
async function main() {
const allUsers = await prisma.user.findMany()
console.log(allUsers)
}
```

Code block with highlighted code

Example:

test.ts
1async function main() {
+ added code
3
- deleted code
5
edited
code
8
9 highlights
10 over multiple
11 lines can be done by using
12 a hyphen
13}

Code:

```js file=test.ts highlight=2;add|4;delete|6,7;edit|9-12;normal
async function main() {
added code
deleted code
edited
code
highlights
over multiple
lines can be done by using
a hyphen
}
```

File icons

There are 4 icons available:

  • file.pdf
  • dev.db
  • Windows
  • schema.ts
  • prisma.schema
<FileWithIcon text="file.pdf" icon="file"/>
<FileWithIcon text="dev.db" icon="database"/>
<FileWithIcon text="Windows" icon="display"/>
<FileWithIcon text="schema.ts" icon="code"/>
<FileWithIcon text="prisma.schema" icon="prisma"/>

Tabbed blocks

Example:

schema.ts
dev.db
idemailname
1"sarah@prisma.io""Sarah"
2"maria@prisma.io""Maria"

Code:

<TabbedContent tabs={[<FileWithIcon text="schema.ts" icon="file"/>, <FileWithIcon text="dev.db" icon="database"/>]}>
<tab>
**id** | **email** | **name** |
:----- | :------------------ | :-------- |
`1` | `"sarah@prisma.io"` | `"Sarah"` |
`2` | `"maria@prisma.io"` | `"Maria"` |
</tab>
<tab>
```copy bash-symbol
npm run dev
```
</tab>
</TabbedContent>

Subsections

Lists all child pages of the current page to the specified depth:

<Subsections depth="3" />

Expand/Collapse section

Example:

Here's more!

<details><summary>Expand if you want to view more</summary>
Here's more!
</details>

Example:

Button text

Code:

<ButtonLink color="dark" type="primary" href="https://www.prisma.io/docs">
Button text
</ButtonLink>

Code with output

Example:

yarn prisma init
Hide CLI results
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started

Code:

<CodeWithResult expanded={true}>
<cmd>
```
yarn prisma init
```
</cmd>
<cmdResult>
```
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started
```
</cmdResult>
</CodeWithResult>

Example with custom output text

yarn prisma init
Hide some output results
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started

Code:

<CodeWithResult outputResultText="some output" expanded={true}>
<cmd>
```
yarn prisma init
```
</cmd>
<cmdResult>
```
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/nikolasburk/Desktop/tsdf/node_modules/.bin/prisma init
✔ Your Prisma schema was created at prisma/schema.prisma.
You can now open it in your favorite editor.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started.
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql or sqlite.
3. Run prisma db pull to turn your database schema into a Prisma data model.
4. Run prisma generate to install Prisma Client. You can then start querying your database.
More information in our documentation:
https://pris.ly/d/getting-started
```
</cmdResult>
</CodeWithResult>

Quiz component

Example:

Can Prisma be used with Node.js?

Code:

<Quiz
question="Can Prisma be used with Node.js?"
answerOptions={[
{
answer: 'It only works with potatoes',
isCorrect: true,
},
{
answer: 'It can be used with any Java backend!',
isCorrect: false,
},
{
answer: 'It can be used with any Node.js or TypeScript backend!',
isCorrect: false,
},
{
answer: 'It can be used with a Python backend!',
isCorrect: false,
},
]}
/>

Tip component

Example:

To find out if Prisma is the right fit for your project, head on over to What is Prisma and read all about what makes Prisma, Prisma!

Code:

<Tip>
To find out if Prisma is the right fit for your project, head on over to [What is Prisma](/concepts/overview/what-is-prisma) and read all about what makes Prisma, Prisma!
</Tip>

Admonition component

The Admonition shows a message to the user with different levels of priority.

  • info: The message is informational.
  • warning: The message is a warning.
  • alert: The message is an alert.

Info Example

This is some information that might be of use to the reader

Warning Example

This is some information we want to warn the user about, maybe they should know this before they start using a feature.

Alert Example

This is some information we want to alert the user to, maybe they should be aware of some breaking changes

<Admonition type="info">
This is some information that might be of use to the reader
</Admonition>
<Admonition type="warning">
This is some information we want to warn the user about, maybe they should know this before they start using a feature.
</Admonition>
<Admonition type="alert">
This is some information we want to alert the user to, maybe they should be aware of some **breaking changes**
</Admonition>
Edit this page on GitHub