@apollographql/graphql-playground-html

What is @apollographql/graphql-playground-html?

@apollographql/graphql-playground-html is a package that provides a way to embed GraphQL Playground, an interactive, in-browser GraphQL IDE, into your web applications. It allows developers to test and document their GraphQL APIs with ease.

What are @apollographql/graphql-playground-html's main functionalities?

Embedding GraphQL Playground

This feature allows you to embed the GraphQL Playground into your web application. The code sample demonstrates how to include the necessary script and initialize the playground with a specified GraphQL endpoint.

<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-html@latest/build/static/js/middleware.js"></script>
<div id="playground"></div>
<script>
  window.addEventListener('load', function (event) {
    GraphQLPlayground.init(document.getElementById('playground'), {
      endpoint: '/graphql'
    })
  })
</script>

Custom Configuration

This feature allows you to customize the configuration of the GraphQL Playground. The code sample shows how to set custom settings such as the editor theme and cursor shape.

<script src="https://cdn.jsdelivr.net/npm/@apollographql/graphql-playground-html@latest/build/static/js/middleware.js"></script>
<div id="playground"></div>
<script>
  window.addEventListener('load', function (event) {
    GraphQLPlayground.init(document.getElementById('playground'), {
      endpoint: '/graphql',
      settings: {
        'editor.theme': 'dark',
        'editor.cursorShape': 'line'
      }
    })
  })
</script>

Other packages similar to @apollographql/graphql-playground-html

graphql-playground

graphql-playground is a standalone GraphQL IDE that can be used as a desktop application or embedded in web applications. It offers similar functionalities to @apollographql/graphql-playground-html, including an interactive interface for testing and documenting GraphQL APIs. However, it is more versatile as it can be used both as a desktop app and an embedded tool.

graphiql

graphiql is another popular in-browser IDE for exploring GraphQL. It provides a simple and clean interface for running queries and mutations against a GraphQL endpoint. While it offers similar core functionalities, graphiql is known for its extensibility and integration capabilities with various GraphQL tools and libraries.

altair

altair is a feature-rich GraphQL client that provides an interactive interface for testing GraphQL queries and mutations. It offers advanced features such as query history, environment management, and support for multiple tabs. Compared to @apollographql/graphql-playground-html, altair provides a more comprehensive set of tools for managing and testing GraphQL APIs.

README

graphql-playground-html

This package is being used by the GraphQL Playground middlewares.

For local development, you can yarn link this package, then use yarn link graphql-playground-html in the middleware you want to develop.