{"id":47917,"library":"graphql-playground-html","title":"GraphQL Playground HTML","description":"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().","status":"maintenance","version":"1.6.30","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/graphcool/graphql-playground","tags":["javascript","graphql","graphiql","playground","graphcool","typescript"],"install":[{"cmd":"npm install graphql-playground-html","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-playground-html","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-playground-html","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for sanitizing user input to prevent XSS attacks","package":"xss","optional":false}],"imports":[{"note":"Package ships TypeScript types; ESM and CJS both supported.","wrong":"const renderPlaygroundPage = require('graphql-playground-html')","symbol":"renderPlaygroundPage","correct":"import { renderPlaygroundPage } from 'graphql-playground-html'"}],"quickstart":{"code":"import { renderPlaygroundPage } from 'graphql-playground-html';\n\nconst html = renderPlaygroundPage({\n  endpoint: process.env.GRAPHQL_ENDPOINT || '/graphql',\n  subscriptionEndpoint: process.env.GRAPHQL_SUBSCRIPTIONS || '/graphql',\n  workspaceName: 'My API',\n  config: {\n    schema: {\n      data: null\n    },\n    settings: {\n      'editor.cursorShape': 'line',\n      'editor.theme': 'dark',\n      'editor.reuseHeaders': true,\n      'tracing.hideTracingResponse': true,\n      'editor.fontSize': 14,\n      'editor.fontFamily': 'Fira Code',\n      'request.credentials': 'omit',\n      'schema.polling.enable': true,\n      'schema.polling.endpointFilter': '*',\n      'schema.polling.interval': 2000\n    }\n  },\n  tabs: [\n    {\n      endpoint: process.env.GRAPHQL_ENDPOINT || '/graphql',\n      query: 'query { __typename }',\n      variables: '{}'\n    }\n  ]\n});\n\nconsole.log(html); // HTML string to serve","lang":"typescript","description":"Generates the GraphQL Playground HTML page with endpoint, subscription, and configuration options."},"warnings":[{"fix":"Update to >=1.6.22 and sanitize any user input passed to renderPlaygroundPage (package includes built-in sanitization via xss).","message":"XSS Reflection Attack Vulnerability in renderPlaygroundPage: user input values must be sanitized.","severity":"breaking","affected_versions":"<1.6.22"},{"fix":"Ensure endpoint option is a string. If omitted, it defaults to undefined, which may cause issues.","message":"renderPlaygroundPage throws if endpoint is not a string (must be provided).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set schema.data to null unless using a static schema.","message":"Config option 'schema.data' must be null (or omitted) for introspection; providing an object may break the UI.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.6.22':52 '1.6.30':26 'cadenc':29 'collabor':43 'current':22 'differenti':33 'doc':41 'etc':21 'express':19 'featur':44 'graphcool':65 'graphiql':63 'graphql':1,12,37,62 'html':3,9 'ide':14,38 'input':57 'integr':18 'interact':36 'javascript':61 'key':32 'koa':20 'low':27 'mainten':30 'middlewar':17 'mode':31 'packag':5 'pass':58 'playground':2,13,64 'provid':34 'releas':28 'render':7 'renderplaygroundpag':60 'requir':53 'sanit':54 'secur':45 'sever':46 'stabl':23 'subscript':40 'typescript':66 'use':15 'user':56 'version':24,50 'vulner':48 'xss':47","created_at":"2026-06-07T16:53:59.803310+00:00","updated_at":"2026-06-07T16:53:59.803310+00:00","problems":[{"fix":"Provide a valid string endpoint in the options object.","cause":"Missing or invalid 'endpoint' option in renderPlaygroundPage options.","error":"Uncaught TypeError: Cannot read property 'stringify' of undefined"},{"fix":"Update to >=1.6.22 which uses xss library to sanitize inputs.","cause":"Passing unsanitized user input to renderPlaygroundPage before version 1.6.22.","error":"XSS vulnerability: User input reflected in playground page"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/graphcool/graphql-playground/tree/main/packages/graphql-playground-html","github":"ssh://git@github.com/graphcool/graphql-playground","docs":null,"changelog":null,"pypi":null,"npm":"graphql-playground-html","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops","testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}