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. You can just use it directly without any imports:

Code(tsx)
 
<OpenPlaygroundButton {...props} />

Props

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

Examples

Zuplo Echo

In this example, we're using the Zuplo Echo API to test the POST /hello-world/{name} endpoint.

Code(tsx)
 
<OpenPlaygroundButton
  server="https://echo.zuplo.io/"
  url="/hello-world/{name}"
  headers={[
    {
      name: "X-Zudoku-Playground",
      defaultValue: "Hello World",
    },
  ]}
  pathParams={[{ name: "name", defaultValue: "John" }]}
  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(tsx)
 
<OpenPlaygroundButton
  server="https://jsonplaceholder.typicode.com"
  url="/photos"
  method="GET"
>
  Test Photos Endpoint
</OpenPlaygroundButton>