API Playground

You can use this component to allow users to test your API anywhere in your documentation.

This component is only available in MDX files and you can use it directly without any imports:

Code
<OpenPlaygroundButton {...props} />

Props

Code
type PlaygroundProps = {
  server: string;
  url: string;
  method: string;
  headers?: Header[];
  pathParams?: PathParam[];
  queryParams?: QueryParam[];
  body?: string;
};

Examples

httpbin example

Example against httpbin POST /post:

Code
<OpenPlaygroundButton
  server="https://httpbin.org/"
  url="/post"
  headers={[
    {
      name: "X-APIToGo-Playground",
      defaultValue: "Hello World",
    },
  ]}
  queryParams={[
    { name: "age", defaultValue: "30" },
    { name: "city", defaultValue: "New York" },
  ]}
  body={JSON.stringify({ message: "Hello World" })}
  method="POST"
/>

JSON Placeholder

In this example, we're using the JSON Placeholder API to test the GET /photos endpoint. We can also change the Text on the button to something more specific to the API.

Code
<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
  Test Photos Endpoint
</OpenPlaygroundButton>