# API playground

> Pick an endpoint, edit headers and body, send, and read the JSON response or cURL.

Block · Pro · https://lodeui.com/blocks/api-playground

## When to use

- API reference and developer portals.

## When not to use

- Production consoles that change data without confirmation.

## Installation

```bash
npx shadcn@latest add @lode/api-playground
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { ApiPlayground } from "@/components/blocks/api-playground";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <ApiPlayground />
    </main>
  );
}
```

Built from: Badge, Button, Code viewer, JSON viewer, Select, Tabs

## API reference

### ApiPlayground

Pick an endpoint, edit headers and body, send, and read the response with status, timing and a cURL snippet. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through endpoint, params and Send |
| ← / → | Switch request tabs |

## Accessibility

- Every field is labelled; the response is announced when it arrives.

## Motion

- The response panel fades in with its status.

## Responsive behavior

- Request and response stack below 1024px.

## Performance

- Responses are simulated locally; nothing is sent.

## Notes for AI

- Replace the simulated fetch with a proxy route so keys stay on the server.

## Related

- [Code viewer](https://lodeui.com/components/code-viewer) — File tabs, line numbers, highlighted lines, copy and expand, with a dependency-free highlighter.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.
- [Webhook logs](https://lodeui.com/blocks/webhook-logs) — Webhook deliveries with payload and response inspection, failure filter and retry.