What script types are available?

Three types: pre-flight scripts run globally before any request across all tabs; pre-operation scripts run per-tab before the request; post-operation scripts run per-tab after the response.

How do I inject a token into request headers?

In a pre-flight script, call playground.env.set("token", value) after fetching the token. In the headers panel, use {{token}} as the header value. The playground substitutes the variable before sending the request.

Where are environment variables stored?

Environment variables are stored locally in your browser and are not included in shared playground links. A value you reference in a header with {{key}} is substituted and sent to the router when the operation runs.

What APIs are available inside scripts?

Scripts have access to playground.env.get and playground.env.set for environment variables, playground.request.body for the outgoing request, playground.response.body for the response, playground.CryptoJS for cryptographic operations, and the browser fetch API for external requests.

Can scripts call external APIs?

Yes. The browser fetch API is available inside scripts, so you can call OAuth endpoints, REST APIs, or any URL accessible from the browser.

Is CryptoJS available for token handling?

Yes. The playground.CryptoJS object provides encryption, decryption, HMAC, and other cryptographic operations for secure token handling.

Are scripts shared across the organization?

Scripts are stored at the organization level in Cosmo Studio. Environment variables are browser-local and are not shared.

Custom Playground Scripts for GraphQL | Cosmo by WunderGraph

The problem

Testing authenticated APIs is repetitive

Token expiry, response validation, and secure secret storage are unsolved problems in a standard GraphQL playground.

Manual token management kills flow

Bearer tokens expire. Every expiry means leaving the playground, fetching a new token, pasting it into the headers panel, and resuming. The interruption compounds across a team.

Response validation requires tool-switching

Checking that a response contains expected fields means copying the JSON into a separate script, a REST client, or a test file. There is no way to validate inline.

Secrets end up hardcoded in headers

Client IDs and secrets stored directly in header fields are visible in session history and accidentally shared. Teams need a safe place to store them.

Our solution

Programmable request lifecycle

Custom Scripts add a JavaScript execution layer at three points in the request lifecycle. Pre-flight handles auth globally. Pre-operation and post-operation scripts give each tab its own setup and validation logic.

Request lifecycle with scripts

Pre-flight scripts run first, globally across all playground tabs. Use them for authentication — fetch a token, store it with playground.env.set, and inject it via the {{token}} header syntax.
Pre-operation scripts run per tab, after the pre-flight but before the request. Use them for tab-specific header injection or variable setup.
Post-operation scripts run per tab after the response arrives. Use them to validate that expected fields are present or to transform data.
Scripts access the playground API object: playground.env.get and set for environment variables, playground.request.body for the request, playground.response.body for the response.
The built-in CryptoJS library is available for encryption, decryption, and HMAC token handling.
External fetch is supported, so scripts can call OAuth endpoints or any REST API accessible from the browser.

Authenticate once. Test without interruption.

Custom scripts

Before & After

Before Cosmo	With Cosmo
Manually copy/paste tokens when they expire	Pre-flight script fetches a fresh token on every request
Switch to external tools to validate responses	Post-operation script checks the response inline
Secrets hardcoded in header fields	Secrets stored in browser-local environment variables
Complex workflows require multiple tools	Complete workflows run inside the playground

Playground API

Available APIs in scripts

playground.env.get / set: Read and write browser-local environment variables.
playground.request.body: Inspect the outgoing request.
playground.response.body: Inspect the response after execution.
playground.CryptoJS: Encryption, HMAC, and token operations.
fetch: Call external OAuth endpoints or any browser-accessible API.

How custom scripts run in the playground

01

Global auth for all tabs.

Pre-flight

A global script runs before any request in any tab. Authenticate here: call the OAuth endpoint, receive a token, and store it in an environment variable. All tabs share the result.

02

Per-tab setup before the request.

Pre-operation

A per-tab script runs after pre-flight and before the request. Set tab-specific headers or variables using values from the environment.

03

Headers injected safely.

Execute

The request runs with headers injected via the {{variable}} syntax. Environment variables keep secrets out of the header panel.

04

Validation and transformation inline.

Post-operation

A per-tab script runs after the response. Validate that expected fields exist in playground.response.body, transform data, or log results to the console.

Capabilities

What custom scripts provide

Automated authentication

Pre-flight scripts fetch tokens and store them in environment variables. The {{token}} header syntax injects the current value into every request.

Inline response validation

Post-operation scripts check that required fields exist in the response and log failures to the console. No external test runner required.

Secure secret management

Environment variables are stored in the browser locally, not inside scripts, and are not shared in playground links. When you reference one in a header with {{key}}, the playground substitutes the value and sends it to the router with the request.

CryptoJS and external fetch

The built-in CryptoJS library supports HMAC, encryption, and decryption. The browser fetch API lets scripts call OAuth providers or any accessible REST endpoint.

Stop managing tokens manually

Write a pre-flight script once. Token refresh happens automatically on every request across all tabs.

Start Free Read the Docs

Automate authentication and workflows in the Cosmo Playground