curl -X POST https://api.northwind.dev/v1/payments \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{"amount":4900,"currency":"eur","customer":"cus_8f3kZq","description":"Studio plan, October"}'
Show your API working
before anyone signs up
API Playground is a console for your landing page. Visitors pick an endpoint, read the request in their own language, press Run and watch the answer come back. Nothing is called for real. You type in the endpoints and what they return.
Write the endpoint once, get four snippets
Method, path, body and headers go in once. cURL, JavaScript, Python and Go come out, kept in sync when you edit. Pick which tabs to show, in which order, and which one it opens on.
- +Auth header with your own key format, or off
- +Copy button puts the current snippet on the clipboard
- +Light and dark, window, card or bare frame
const res = await fetch("https://api.northwind.dev/v1/payments", { method: "POST", headers: { "Authorization": "Bearer YOUR_API_KEY", "Content-Type": "application/json" }, body: JSON.stringify({ "amount": 4900, "currency": "eur", "customer": "cus_8f3kZq", "description": "Studio plan, October" })});const data = await res.json();
Every answer, including the bad ones
Each endpoint carries its own status and latency. 2xx goes green, 4xx and 5xx go red, and the code gets its text: 201 Created, 404 Not Found, 429 Too Many Requests. A 204 shows an empty body, as it should.
Latency is yours to set per endpoint, with a little jitter on every run so it never reads like a recording.
curl -X POST https://api.northwind.dev/v1/keys \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{"workspace":"ws_42","scopes":["read","write"]}'
Three frames, your colours
The same component in a sidebar, a card and bare on the page. Under 620px wide it folds the endpoint list into a row of pills by itself, so it fits a column as well as a hero.
curl -X POST https://api.northwind.dev/v1/messages \ -H "Content-Type: application/json" \ -d '{"to":"+31612345678","text":"Your table is ready."}'
curl -X POST https://api.northwind.dev/v1/messages \ -H "Content-Type: application/json" \ -d '{"to":"+31612345678","text":"Your table is ready."}'
How it works
Three steps and the console runs. No plugins, no API keys, no backend.
Drag API Playground from Assets onto your hero or docs page. Set the base URL and the title in the panel.
Each endpoint has a name, method, path, request body, response, status and latency. The four samples stay until you add your own.
Choose which tabs to show and the one it opens on. Switch on Auto run if you want the first request to send as the visitor scrolls in.
