Skip to main content
CodivDocs

ResponseExample

Multi-status-code response example block for API endpoint pages.

Usage

<ResponseExample> is the output twin of <RequestExample>. Wraps a <CodeGroup> with a "Response" eyebrow and uses status codes as tab labels.

<ResponseExample>
```json 200
{
  "id": "prj_abc123",
  "name": "My Docs",
  "status": "active",
  "created_at": "2026-04-10T09:30:00Z"
}
```

```json 400
{
  "error": "invalid_request",
  "message": "name is required"
}
```

```json 401
{
  "error": "unauthenticated",
  "message": "Bearer token missing or invalid"
}
```
</ResponseExample>

Response

{
  "id": "prj_abc123",
  "name": "My Docs",
  "status": "active",
  "created_at": "2026-04-10T09:30:00Z"
}

Convention: status code as tab label

The metastring after json becomes the tab label, so the canonical pattern is to use the HTTP status code:

```json 200
```

This makes the response shapes easy to scan at a glance — readers see "200, 400, 401" tabs and know exactly what they're looking at.

Pairing with RequestExample

The two components are designed to be used together. Place <RequestExample> first, then <ResponseExample> directly after:

<RequestExample>
  ...
</RequestExample>

<ResponseExample>
  ...
</ResponseExample>

Or, for a more compact page, both inside a single <Panel>:

<Panel>
  <RequestExample>...</RequestExample>
  <ResponseExample>...</ResponseExample>
</Panel>

Custom title

<ResponseExample title="Sample response">
  ...
</ResponseExample>

Auto-generation

In Phase 4, the OpenAPI parser auto-generates <ResponseExample> from the responses object in the spec. Every declared status code becomes a tab.

Props

PropTypeDefaultDescription
titlestring"Response"Eyebrow header text
childrenReactNoderequiredFenced code blocks (one per status code)

Last updated April 12, 2026