---
title: 'MDX components'
metaTitle: 'MDX components in the Prisma docs'
metaDescription: 'MDX components components available on the Prisma documentation site.'
sidebar_label: 'MDX components'
search: false
---

<TopBlock>

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

Components not listed here are part of the [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features)

</TopBlock>

## `TopBlock`

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

```md
<TopBlock>

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

Components not listed here are part of the [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features)

</TopBlock>
```

## Code blocks

Example:

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

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

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

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

````
```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 no copy option

By default, all the code blocks will have a `copy` icon for copying the code. If you want to disable the `copy` option in the code block, please use `no-copy` property.

Example:

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

Code:

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

### Code block without line numbers

Example:

```js no-lines
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)
}
```
````

### Terminal styled code block

Example:

```terminal
npm run dev
```

Code:

````
```terminal
npm run dev
```
````

### Code block wrapped

For code blocks where we _don't_ want to have a scrollable box.

Example with `wrap`:

```code wrap
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
```

Example without `wrap`:

```code
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
```

Code:

````
```code wrap
$ this is a single, really long line of code that shouldn't need to be scrollable to check what it says and simply wraps over to the next line, making it all visible in the same box
```
````

### Code block with highlighted code

Example:

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

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

## Expand/Collapse section

Example:

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

Here's more!

</details>

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

Here's more!

</details>
```

## Code with result

Example:

<CodeWithResult expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy wrap
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/Desktop/tsdf/node_modules/.bin/prisma init

Initialized Prisma in your project

  prisma/
    schema.prisma
  prisma.config.ts

Next, choose how you want to set up your database:

CONNECT EXISTING DATABASE:
  1. Configure your DATABASE_URL in `prisma.config.ts` 
  2. Run `npx prisma db pull` to introspect your database.

CREATE NEW DATABASE:
  Local: npx prisma dev (runs Postgres locally in your terminal)
  Cloud: npx create-db (creates a free Prisma Postgres database)

  Then, define your models in `prisma/schema.prisma` and run `npx prisma migrate dev` to apply your schema.

Learn more: https://pris.ly/getting-started
```

</cmdResult>

</CodeWithResult>

Code:

````
<CodeWithResult expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy wrap
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/Desktop/tsdf/node_modules/.bin/prisma init

Initialized Prisma in your project

  prisma/
    schema.prisma
  prisma.config.ts

Next, choose how you want to set up your database:

CONNECT EXISTING DATABASE:
  1. Configure your DATABASE_URL in `prisma.config.ts` 
  2. Run `npx prisma db pull` to introspect your database.

CREATE NEW DATABASE:
  Local: npx prisma dev (runs Postgres locally in your terminal)
  Cloud: npx create-db (creates a free Prisma Postgres database)

  Then, define your models in `prisma/schema.prisma` and run `npx prisma migrate dev` to apply your schema.

Learn more: https://pris.ly/getting-started
```

</cmdResult>

</CodeWithResult>
````

Example with custom output text

<CodeWithResult outputResultText="some output" expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy wrap
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/Desktop/tsdf/node_modules/.bin/prisma init


Initialized Prisma in your project

  prisma/
    schema.prisma
  prisma.config.ts

Next, choose how you want to set up your database:

CONNECT EXISTING DATABASE:
  1. Configure your DATABASE_URL in `prisma.config.ts` 
  2. Run `npx prisma db pull` to introspect your database.

CREATE NEW DATABASE:
  Local: npx prisma dev (runs Postgres locally in your terminal)
  Cloud: npx create-db (creates a free Prisma Postgres database)

  Then, define your models in `prisma/schema.prisma` and run `npx prisma migrate dev` to apply your schema.

Learn more: https://pris.ly/getting-started
```

</cmdResult>

</CodeWithResult>

Code:

````
<CodeWithResult outputResultText="some output" expanded={true}>

<cmd>

```
yarn prisma init
```

</cmd>

<cmdResult>

```code no-copy wrap
$ yarn prisma init
yarn run v1.22.0
warning package.json: No license field
$ /Users/janedoe/Desktop/tsdf/node_modules/.bin/prisma init

Initialized Prisma in your project

  prisma/
    schema.prisma
  prisma.config.ts

Next, choose how you want to set up your database:

CONNECT EXISTING DATABASE:
  1. Configure your DATABASE_URL in `prisma.config.ts` 
  2. Run `npx prisma db pull` to introspect your database.

CREATE NEW DATABASE:
  Local: npx prisma dev (runs Postgres locally in your terminal)
  Cloud: npx create-db (creates a free Prisma Postgres database)

  Then, define your models in `prisma/schema.prisma` and run `npx prisma migrate dev` to apply your schema.

Learn more: https://pris.ly/getting-started
```

</cmdResult>

</CodeWithResult>
````

## Parallel blocks

Example:

<ParallelBlocks>

<block content="Prisma">

```ts
const posts = await postRepository.find({
  where: {
    title: 'Hello World',
  },
})
```

</block>

<block content="TypeORM">

```ts
const posts = await postRepository.find({
  where: {
    title: ILike('Hello World'),
  },
})
```

</block>

</ParallelBlocks>

Code:

````

  <ParallelBlocks>

  <block content="Prisma">

  ```ts
  const posts = await postRepository.find({
    where: {
      title: 'Hello World',
    },
  })
  ```

  </block>

  <block content="TypeORM">

  ```ts
  const posts = await postRepository.find({
    where: {
      title: ILike('Hello World'),
    },
  })
  ```

  </block>

  </ParallelBlocks>

````
