> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ResponseExample

Pin response code examples in the right-side panel beneath request examples.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the ResponseExample playground on holydocs.com](https://holydocs.com/components/response-example).

## When to use

Use this component when endpoint documentation needs explicit request, response, schema, or lifecycle metadata.

This component is designed for the right-hand panel on endpoint pages. On narrow layouts it stacks later in the page, so verify both desktop and mobile behavior.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Basic

A JSON response example.

```json
{
  "id": "proj_abc123",
  "name": "My Docs",
  "status": "active",
  "created_at": "2024-03-15T10:30:00Z"
}
```

~~~mdx
<ResponseExample>
```json
{
  "id": "proj_abc123",
  "name": "My Docs",
  "status": "active",
  "created_at": "2024-03-15T10:30:00Z"
}
```
</ResponseExample>
~~~

### Status Badge

Response example with a status code badge.

**Created**

```json
{
  "id": "proj_abc123",
  "status": "active"
}
```

~~~mdx
<ResponseExample title="Created" statusCode="201">
```json
{
  "id": "proj_abc123",
  "status": "active"
}
```
</ResponseExample>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `--` | Optional label shown above the example. |
| `statusCode` | `string` | `--` | Optional HTTP status badge shown above the example. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<ResponseExample>
```json
{
  "id": "proj_abc123",
  "name": "My Docs",
  "status": "active",
  "created_at": "2024-03-15T10:30:00Z"
}
```
</ResponseExample>
~~~

## Tips

- Show a realistic successful payload first, then link or follow with edge cases so readers can anchor on the happy path quickly.
- Keep naming and ordering consistent across fields, examples, and lifecycle notes so readers do not have to re-parse the endpoint surface on every page.
- Document the happy path and the sharp edges together. Request shape alone is not enough without auth, errors, and retry guidance.

## Related Components

**[ParamField](/components/param-field)**

Documents a request parameter — path, query, or body — with type, requirement status, and description.
**[ResponseField](/components/response-field)**

Documents a field in an API response body with its name, type, and description.
**[Expandable](/components/expandable)**

Collapsible section for nested API fields, keeping complex response shapes readable.

## More

- Interactive playground: [ResponseExample on holydocs.com](https://holydocs.com/components/response-example)
- Component library index: [/components](/components)