GraphQL Playground as a HTML Page
To use GraphQL Playground as a html page, you can simply render the Playground HTML in a simple html page or in a html page with full loading animation by a CDN. You can add the GraphQL Playground to your html file by adding
<link href=" https://cdn.jsdelivr.net/npm/graphql-playground-react@1.7.28/build/static/css/index.min.css " rel="stylesheet">
or a script link
<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-react@1.7.42/build/static/js/middleware.min.js"></script>
inside the head of your html file.
GraphQL Playground
GraphQL Playground is a powerful GraphQL IDE which is a graphical, interactive, and in-browser, that enables development workflows and increases developer productivity. It is a form of user interface that visualizes your GraphQL queries and requests. It allows you to get data by a request to the URL you have provided, understand the response of the query you’ve written, and use many features to ease your job related to GraphQL requests other than just writing GraphQL queries. These features will be told in this article later.