MDX components

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)
}
```

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[]
}

```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[]
}
```

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

```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[]
}
```

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

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

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

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

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}

```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:

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:

<details><summary>Expand if you want to view more</summary>

Here's more!

</details>

Button link

Example:

Code:

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

Code with output

Example:

yarn prisma init

$ 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 introspect 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 introspect 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:

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:

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>