Components

API Playground

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

Props

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

Examples

Zuplo Echo

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

Open in Playground

<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"
/>
tsx

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.

Test Photos Endpoint

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

---