# 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](/dev-portal/zudoku/markdown/mdx)** and you can use it directly
without any imports:

```tsx
<OpenPlaygroundButton {...props} />
```

:::tip{title="Hot tip"}

The Playground can point to any API endpoint, even if it's not in the API catalog.

:::

## Props

```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.

<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
<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.

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

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