React API Explorer

Copy Page

Developers do not evaluate an API by reading about it — they call it. Put the console on the page itself: pick an endpoint, fill the parameters, see the response shape.

Installation

Props

Path parameters are substituted into path by name — declare {id} in the path and a param named id with in: "path". Query params append automatically, so the URL preview always matches what would actually be sent.

Simulated or live — say which

With no onSend, the console is a simulator: it waits ~400 ms and returns the endpoint's sampleResponse. That is a legitimate thing to ship on a marketing page — you get the response shape without exposing an unauthenticated endpoint — but the footer says so, and you should leave that notice in place.

A console that appears to make live calls while replaying canned data is the fastest way to lose a developer's trust, and they will find out: the first thing a curious engineer does is open the network tab.

To go live, pass onSend:

<ApiExplorer
baseUrl="https://api.example.com"
endpoints={endpoints}
onSend={async (endpoint, values) => {
  const res = await fetch(buildUrl(endpoint, values), {
    method: endpoint.method,
    headers: { Authorization: `Bearer ${demoToken}` },
  });
  return { status: res.status, body: await res.json() };
}}
/>

Use a scoped, rate-limited demo token for this, never a real one — anything the browser can send, a visitor can read and reuse.