API Playground

The <APIPlayground> component embeds a fully interactive HTTP client inside your documentation. Readers can test API endpoints with real requests without leaving the page.

Live Demo#

Try it now — this makes a real HTTP request to a public API:

POST Request with Body#

Authenticated Endpoint#

Usage in MDX#

MDX

<APIPlayground
  method="GET"
  url="https://api.example.com/users"
  title="List Users"
  description="Returns a paginated list of users."
  parameters={[
    {
      name: "page",
      type: "number",
      required: false,
      description: "Page number (1-indexed).",
      defaultValue: "1"
    },
    {
      name: "limit",
      type: "number",
      required: false,
      description: "Items per page.",
      defaultValue: "20"
    }
  ]}
  headers={{
    "Accept": "application/json"
  }}
  authType="bearer"
/>

Features#

Query Parameters

Add, edit, and remove URL query parameters with a visual editor.

Request Headers

Set custom headers including Content-Type, Accept, and custom headers.

Request Body

Edit JSON request body with syntax highlighting.

Authentication

Supports Bearer token, API key, Basic auth, and no auth.

Multiple Servers

Switch between server environments (production, staging, etc.).

Response Display

Shows status code, response time, response headers, and formatted body.

Authentication Types#

`authType`	Description	Fields
`none`	No authentication	—
`bearer`	Bearer token	Token field
`apiKey`	API key in header	Key name + value
`basic`	HTTP Basic auth	Username + password

Props Reference#

Prop	Type	Required	Description
`method`	`'GET' \| 'POST' \| 'PUT' \| 'DELETE'`	Yes	HTTP method.
`url`	`string`	Yes	Endpoint URL.
`title`	`string`	No	Display title.
`description`	`string`	No	Description shown above the playground.
`parameters`	`Parameter[]`	No	Pre-populated query parameters.
`headers`	`Record<string, string>`	No	Pre-populated request headers.
`body`	`object`	No	Pre-populated JSON request body.
`authType`	`'bearer' \| 'apiKey' \| 'basic' \| 'none'`	No	Authentication method.
`servers`	`Array<{ url, description }>`	No	Server environment options.

Parameter Object

Field	Type	Description
`name`	`string`	Parameter name.
`type`	`string`	Type hint (e.g. `"string"`, `"number"`).
`required`	`boolean`	Whether the parameter is required.
`description`	`string`	Parameter description.
`defaultValue`	`string`	Pre-populated value.

Was this page helpful?