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:
< OpenPlaygroundButton { ... props} />
Hot tip The Playground can point to any API endpoint, even if it's not in the API catalog.
Props
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.
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"
/>
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 >
Last modified on June 23, 2025