Registry / devops / graphql-playground-html

graphql-playground-html

library1.6.30jsnpmunverified

A package that renders the HTML for the GraphQL Playground IDE, used by middleware integrations (Express, Koa, etc.). Current stable version is 1.6.30. Low release cadence (maintenance mode). Key differentiator: provides an interactive GraphQL IDE with subscriptions, docs, and collaboration features. Security: severe XSS vulnerability in versions before 1.6.22 requires sanitization of user input passed to renderPlaygroundPage().

devops testing

npm install graphql-playground-html

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-PLAYGROUND

graphql-playground-html

devopsjavascriptv1.6.30

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

renderPlaygroundPage

✓ import { renderPlaygroundPage } from 'graphql-playground-html'

✗ const renderPlaygroundPage = require('graphql-playground-html')

Package ships TypeScript types; ESM and CJS both supported.

Generates the GraphQL Playground HTML page with endpoint, subscription, and configuration options.

import { renderPlaygroundPage } from 'graphql-playground-html'; const html = renderPlaygroundPage({ endpoint: process.env.GRAPHQL_ENDPOINT || '/graphql', subscriptionEndpoint: process.env.GRAPHQL_SUBSCRIPTIONS || '/graphql', workspaceName: 'My API', config: { schema: { data: null }, settings: { 'editor.cursorShape': 'line', 'editor.theme': 'dark', 'editor.reuseHeaders': true, 'tracing.hideTracingResponse': true, 'editor.fontSize': 14, 'editor.fontFamily': 'Fira Code', 'request.credentials': 'omit', 'schema.polling.enable': true, 'schema.polling.endpointFilter': '*', 'schema.polling.interval': 2000 } }, tabs: [ { endpoint: process.env.GRAPHQL_ENDPOINT || '/graphql', query: 'query { __typename }', variables: '{}' } ] }); console.log(html); // HTML string to serve

Debug

Known issues

breakingXSS Reflection Attack Vulnerability in renderPlaygroundPage: user input values must be sanitized.

fix

Update to >=1.6.22 and sanitize any user input passed to renderPlaygroundPage (package includes built-in sanitization via xss).

affects: <1.6.22

gotcharenderPlaygroundPage throws if endpoint is not a string (must be provided).

fix

Ensure endpoint option is a string. If omitted, it defaults to undefined, which may cause issues.

affects: >=1.0.0

gotchaConfig option 'schema.data' must be null (or omitted) for introspection; providing an object may break the UI.

fix

Set schema.data to null unless using a static schema.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read property 'stringify' of undefined

Missing or invalid 'endpoint' option in renderPlaygroundPage options.

fix

Provide a valid string endpoint in the options object.

XSS vulnerability: User input reflected in playground page

Passing unsanitized user input to renderPlaygroundPage before version 1.6.22.

fix

Update to >=1.6.22 which uses xss library to sanitize inputs.

Upgrade

Version history

1.6.30latest on npm

Audit

Dependencies

xssrequiredUsed for sanitizing user input to prevent XSS attacks

Agent activity

8 hits · last 30 days

node

Resources

githubssh://git@github.com/graphcool/graphql-playground ↗

packagegraphql-playground-html ↗

homepagehttps://github.com/graphcool/graphql-playground/tree/main/packages/graphql-playground-html ↗