Components
API Playground
This documentation is for the preview version of the Dev Portal. If you are not part of the preview program, please refer to the current Dev Portal docs.
You can use this component to allow users to test your API anywhere in your documentation.
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;
};tsExamples
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"
/>tsxJSON 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