---
title: Code Drawer
icon: code
---

Code drawers display request examples and response samples in the right column (two-column layout). They're the building blocks for API documentation.

<CodeDrawer title="Create a User">
<CodeblockTabsExamples>

```javascript
const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer sk_live_xxx'
  },
  body: JSON.stringify({
    name: 'Jane Doe',
    email: 'jane@example.com',
    role: 'admin'
  })
})
const user = await response.json()
```

```python
import requests

response = requests.post('https://api.example.com/users', json={
    'name': 'Jane Doe',
    'email': 'jane@example.com',
    'role': 'admin'
}, headers={
    'Authorization': 'Bearer sk_live_xxx'
})
user = response.json()
```

```bash
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer sk_live_xxx" \
  -d '{"name":"Jane Doe","email":"jane@example.com","role":"admin"}'
```

</CodeblockTabsExamples>

<CodeblockTabsResponses>

```json
{
  "id": "usr_abc123",
  "name": "Jane Doe",
  "email": "jane@example.com",
  "role": "admin",
  "createdAt": "2026-04-01T10:00:00Z"
}
```

```json
{
  "error": "Validation failed",
  "message": "Email already exists",
  "code": 409
}
```

</CodeblockTabsResponses>
</CodeDrawer>

## Syntax

<CodeblockTabs>

MDX

```html
<CodeDrawer title="Endpoint Name">
  <CodeblockTabsExamples>
    (code blocks with request examples)
  </CodeblockTabsExamples>
  <CodeblockTabsResponses>
    (code blocks with response examples)
  </CodeblockTabsResponses>
</CodeDrawer>
```

Markdown

```markdown
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(code blocks with request examples)
:::
:::CodeblockTabsResponses
(code blocks with response examples)
:::
::::
```

</CodeblockTabs>

Code drawers appear in the right column when using two-column layout.
