API Components
Reference for Request and Response components that automatically display in the right panel for API documentation.
const response = await fetch('/api/docs', {
method: 'POST',
headers: {
'Authorization': 'Bearer TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: 'Getting Started' })
});
const response = await fetch('/api/docs', {
method: 'POST',
headers: {
'Authorization': 'Bearer TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: 'Getting Started' })
});
const response = await fetch('/api/docs', {
method: 'POST',
headers: {
'Authorization': 'Bearer TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: 'Getting Started' })
});
const response = await fetch('/api/docs', {
method: 'POST',
headers: {
'Authorization': 'Bearer TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify({ title: 'Getting Started' })
});
curl -X POST https://api.example.com/docs \
-H "Authorization: Bearer TOKEN" \
-H "Content-Type: application/json" \
-d '{"title": "Getting Started"}'
{
"id": "doc-123",
"title": "Getting Started",
"status": "published",
"created_at": "2024-01-15T10:30:00Z"
}
{
"id": "doc-123",
"title": "Getting Started",
"status": "published",
"created_at": "2024-01-15T10:30:00Z"
}
{
"id": "doc-123",
"title": "Getting Started",
"status": "published",
"created_at": "2024-01-15T10:30:00Z"
}
{
"error": "Document not found",
"code": "DOC_NOT_FOUND",
"message": "The requested document does not exist"
}
Overview
Display code blocks in the right sidebar on desktop devices. The Request and Response components create a two-column layout that keeps examples visible while users scroll through your content.
Common use cases:
-
API endpoint documentation with request and response examples
-
Configuration examples alongside explanatory text
-
Code samples that users reference while following instructions
-
Before and after examples in tutorials
On mobile devices, components display as regular code blocks within the main content.
Request
Use Request to display API request examples in the right sidebar. This component works like CodeGroup but displays in the sidebar instead of inline.
<Request tabs="JavaScript,Python">
```javascript
const response = await fetch('/api/docs', {
method: 'POST',
headers: { 'Authorization': 'Bearer TOKEN' },
body: JSON.stringify({ title: 'Getting Started' })
});
```
```python
import requests
response = requests.post('/api/docs',
headers={'Authorization': 'Bearer TOKEN'},
json={'title': 'Getting Started'}
)
```
</Request>
Attributes
Comma-separated tab names. Overrides auto-detected languages.
Shows line numbers when set to "true". Request shows lines by default.
Default active tab index (1-based).
Response
Use Response to display API response examples in the right sidebar beneath any Request content on the same page.
<Response tabs="200,500">
```json
{
"id": "doc-123",
"status": "success"
}
```
```json
{
"error": "Internal server error",
"code": "INTERNAL_ERROR"
}
```
</Response>
Attributes
Comma-separated tab names. Commonly HTTP status codes or formats.
Shows line numbers when set to "true". Response hides lines by default.
Default active tab index (1-based).
Common patterns
-
API documentation - One Request and one Response component per endpoint page
-
Multi-language support - Request tabs for different programming languages (JavaScript, Python, cURL)
-
Status handling - Response tabs for HTTP status codes (200, 400, 500)
-
Two-column layout - Components automatically display in right sidebar on desktop