Code drawer
2 min
Code drawer blocks display request examples and response samples in the right column of a two-column layout. Use them to build interactive API documentation.
Syntax
You can add this component using either Markdown or MDX.
::::CodeDrawer{title="Endpoint Name"}
:::CodeblockTabsExamples
(Code blocks with request examples)
:::
:::CodeblockTabsResponses
(Code blocks with response examples)
:::
::::A code drawer consists of two sections:
- CodeblockTabsExamples for request examples.
- CodeblockTabsResponses for response samples.
Each section can contain one or more fenced code blocks. When multiple code blocks are present, they are automatically grouped into language tabs.
Code drawers are rendered in the right column when used inside a two-column layout.
MDX example
The following example creates a code drawer with request examples in JavaScript, Python, and Bash, along with successful and error responses.
<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: '[email protected]',
role: 'admin'
})
})
const user = await response.json()
```
```python
import requests
response = requests.post('https://api.example.com/users', json={
'name': 'Jane Doe',
'email': '[email protected]',
'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":"[email protected]","role":"admin"}'
```
</CodeblockTabsExamples>
<CodeblockTabsResponses>
```json
{
"id": "usr_abc123",
"name": "Jane Doe",
"email": "[email protected]",
"role": "admin",
"createdAt": "2026-04-01T10:00:00Z"
}
```
```json
{
"error": "Validation failed",
"message": "Email already exists",
"code": 409
}
```
</CodeblockTabsResponses>
</CodeDrawer>Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.