MDX components in the Prisma docs

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

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

id	email	name
`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:

Expand if you want to view more

Here's more!

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

Here's more!

</details>

Button link

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

Was this helpful?

Edit this page on GitHub

MDX components

TopBlock

Code blocks

Prisma schema

Code block with file icon

Code block with copy

Code block without line numbers

Code block with highlighted code

File icons

Tabbed blocks

Subsections

Expand/Collapse section

Button link

Code with output

Was this helpful?

Products

Resources

Prisma With

Community

Company

Newsletter

Find Us