{"id":47922,"library":"graphql-playground","title":"GraphQL Playground","description":"GraphQL Playground is a powerful GraphQL IDE for better development workflows, featuring context-aware autocompletion, interactive multi-column schema documentation, real-time GraphQL Subscriptions support, query history, HTTP header configuration, tabs, and schema reloading. Current stable version is 1.3.17 (released 2018). It is built on top of GraphiQL but adds significant features like subscription support, automatic schema reloading, and a desktop app with graphql-config integration. The package provides a React component and server middleware for Express, Hapi, Koa, and AWS Lambda. It requires React 16 and includes TypeScript type definitions. Note: This package is deprecated in favor of GraphiQL 2.x or newer alternatives like Apollo Studio Explorer or GraphQL IDE.","status":"deprecated","version":"1.3.17","language":"javascript","source_language":"en","source_url":"http://github.com/graphcool/graphql-playground","tags":["javascript","typescript"],"install":[{"cmd":"npm install graphql-playground","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-playground","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-playground","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React component; requires React 16","package":"react","optional":false},{"reason":"peer dependency for rendering React component","package":"react-dom","optional":false}],"imports":[{"note":"Default export only; named import will fail.","wrong":"import { Playground } from 'graphql-playground'","symbol":"Playground","correct":"import Playground from 'graphql-playground'"},{"note":"The middleware packages export a default function.","wrong":"import { expressPlayground } from 'graphql-playground-middleware-express'","symbol":"expressMiddleware","correct":"import expressPlayground from 'graphql-playground-middleware-express'"},{"note":"CSS must be imported as a side-effect; named import is incorrect.","wrong":"import style from 'graphql-playground/playground.css'","symbol":"CSS import","correct":"import 'graphql-playground/playground.css'"}],"quickstart":{"code":"// Install: yarn add graphql-playground react react-dom\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Playground from 'graphql-playground';\nimport 'graphql-playground/playground.css';\n\nconst App = () => (\n  <Playground\n    endpoint=\"https://api.example.com/graphql\"\n    subscriptionEndpoint=\"wss://api.example.com/graphql\"\n    setTitle={true}\n  />\n);\n\nReactDOM.render(<App />, document.getElementById('root'));","lang":"typescript","description":"Renders the GraphQL Playground React component with endpoint and subscription endpoint, including required CSS import."},"warnings":[{"fix":"Migrate to @graphiql/react or Apollo Studio Explorer.","message":"graphql-playground is deprecated; consider using GraphiQL 2.x, Apollo Studio Explorer, or other modern GraphQL IDEs.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use with React 16 or wrap in compatibility layer.","message":"Requires React 16; incompatible with React 17+ strict mode or React 18 without changes.","severity":"breaking","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Set subscriptionEndpoint prop explicitly using wss:// or ws://.","message":"Subscription endpoint must be explicitly provided; autodetection may fail with non-standard WebSocket protocols.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add import 'graphql-playground/playground.css' to your entry point.","message":"CSS import is mandatory; without it the UI is broken or unstyled.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install the appropriate middleware package (e.g., graphql-playground-middleware-express).","message":"Middlewares require separate packages (express, hapi, koa, lambda); the base 'graphql-playground' is only the React component.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.3.17':44 '16':92 '2':107 '2018':46 'add':55 'altern':111 'apollo':113 'app':67 'autocomplet':18 'automat':61 'aw':87 'awar':17 'better':11 'built':49 'column':22 'compon':78 'config':71 'configur':35 'context':16 'context-awar':15 'current':40 'definit':97 'deprec':102 'desktop':66 'develop':12 'document':24 'explor':115 'express':83 'favor':104 'featur':14,57 'graphiql':53,106 'graphql':1,3,8,28,70,117 'graphql-config':69 'hapi':84 'header':34 'histori':32 'http':33 'ide':9,118 'includ':94 'integr':72 'interact':19 'javascript':119 'koa':85 'lambda':88 'like':58,112 'middlewar':81 'multi':21 'multi-column':20 'newer':110 'note':98 'packag':74,100 'playground':2,4 'power':7 'provid':75 'queri':31 'react':77,91 'real':26 'real-tim':25 'releas':45 'reload':39,63 'requir':90 'schema':23,38,62 'server':80 'signific':56 'stabl':41 'studio':114 'subscript':29,59 'support':30,60 'tab':36 'time':27 'top':51 'type':96 'typescript':95,120 'version':42 'workflow':13 'x':108","created_at":"2026-06-07T16:54:00.876501+00:00","updated_at":"2026-06-07T16:54:00.876501+00:00","problems":[{"fix":"Ensure import 'graphql-playground/playground.css' is in your code.","cause":"CSS file not imported or path incorrect.","error":"Module not found: Can't resolve 'graphql-playground/playground.css'"},{"fix":"Install React 16: npm install react@16 react-dom@16.","cause":"React version mismatch (requires React 16).","error":"Cannot read property 'render' of undefined"},{"fix":"Pass endpoint prop to Playground component. Example: <Playground endpoint=\"https://example.com/graphql\" />","cause":"Missing or incorrect endpoint prop.","error":"Could not find a valid GraphQL endpoint"},{"fix":"Set subscriptionEndpoint prop with wss:// URL. Example: subscriptionEndpoint=\"wss://example.com/graphql\"","cause":"Subscription endpoint not provided or mismatched protocol.","error":"Subscription endpoint not working"}],"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":"http://github.com/graphcool/graphql-playground","github":"http://github.com/graphcool/graphql-playground","docs":null,"changelog":null,"pypi":null,"npm":"graphql-playground","openapi_spec":null,"status_page":null,"smithery":null,"categories":["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}}