graphql-playground VS graphiql

Compare graphql-playground vs graphiql and see what are their differences.

graphql-playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration) (by prisma-labs)

graphiql

GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools. (by graphql)
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
graphql-playground graphiql
16 41
8,666 15,610
0.2% 0.7%
0.0 9.0
16 days ago 6 days ago
TypeScript TypeScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

graphql-playground

Posts with mentions or reviews of graphql-playground. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-08-14.
  • Migrating Netflix to GraphQL Safely
    3 projects | news.ycombinator.com | 14 Aug 2023
    > FYI, GraphiQL is deprecated, GraphQL Playground is a good alternative.

    You have this backwards.

    https://github.com/graphql/graphql-playground/issues/1366#is...

    https://github.com/graphql/graphiql

  • Exploring GraphiQL 2 Updates and New Features
    2 projects | dev.to | 12 Dec 2022
    GraphiQL is a tool that was created to help developers explore GraphQL APIs, maintained by the GraphQL Foundation. But when GraphiQL became more and more popular, developers started to create additional GraphQL IDEs. A good example of this was GraphQL Playground, which quickly became the most popular GraphQL IDE. It was loosely based on GraphiQL, but had more features and a better UI.
  • GraphQL subscriptions at scale with NATS
    5 projects | dev.to | 9 Mar 2022
    Here, we'll create a simple GraphQL server and subscribe to a subject from our resolver. We'll use GraphQL playground to mock client side behavior. Once we're connected we'll use NATS CLI to send a payload to our subject and see the changes on the client.
  • GraphQL vs REST in .NET Core
    7 projects | dev.to | 16 Dec 2021
    Now we can consume created GraphQL API. In the GitHub Repo same functionality has been added with REST approach and GraphQL endpoint. Also widely used Swagger configured for Web API Endpoints as well as AltairUI added for GraphQL endpoint testing. Naturally, AltairUI it not a must for GraphQL, you can also use Swagger, GraphiQL, or GraphQL Playground.
  • Creating GraphQL Api Using NestJS For Multiple Databases
    2 projects | dev.to | 4 Nov 2021
    Navigate to http://localhost:3000/graphql. NestJS uses graphql playground by default. It's a lovely GraphQL IDE. We can check our schema here.
  • Keeping certain parts of your GraphQL schema hidden from Introspection
    2 projects | dev.to | 25 Jun 2021
    GraphQL is a popular and powerful way to build your APIs and power your website; we use it for most of our APIs at Anvil. One of the best things about GraphQL is that it provides an Introspection Query capability which allows users to explore and learn about what's possible in a given API. In that way, GraphQL is "self-documenting". Some great tools like Playground and Anvil's own SpectaQL leverage the Introspection Query.
  • Autogenerate GraphQL API documentation with SpectaQL
    7 projects | dev.to | 25 Apr 2021
    Traditionally, most of the above problems have been pretty unavoidable, but at Anvil most of our APIs are implemented in GraphQL. GraphQL requires the definition of a schema that describes all the types, fields, methods, arguments, return types, etc, and even allows for descriptions of most things to be included. In this way, GraphQL implementations are pretty self-describing, and great tools like GraphiQL or Playground already exist to leverage this attribute of the framework. Because of all this, I knew that there must be a better way to do documentation in GraphQL-land, and I sought out to find it.
  • Building a GraphQL API with Deno and gql
    8 projects | dev.to | 13 Apr 2021
    ⚡ GraphQL Playground integration (via graphiql: true)
  • Building a CRUD-backend with GraphQL, TypeScript and TypeGraphQL
    4 projects | dev.to | 26 Mar 2021
    We will be testing these using GraphQL playground from Prisma. Go to "localhost:4000/graphQL" in your browser. In the GraphQL playground, you can write out different queries. To try out over resolver, we will write in the window:
  • A web framework I desperately wish there was a Rust equivalent for: FastAPI
    6 projects | /r/rust | 7 Mar 2021
    Yes, as you build out your "schema", the documentation is generated automatically for the data structures. The "Playground" gives you a visual docs / schema view to see all of the parameters that are available for request at each nested layer, as well as all of the comments and documentation associated with each piece.

graphiql

Posts with mentions or reviews of graphiql. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2024-01-15.
  • FLaNK 15 Jan 2024
    21 projects | dev.to | 15 Jan 2024
  • Migrating Netflix to GraphQL Safely
    3 projects | news.ycombinator.com | 14 Aug 2023
    > FYI, GraphiQL is deprecated, GraphQL Playground is a good alternative.

    You have this backwards.

    https://github.com/graphql/graphql-playground/issues/1366#is...

    https://github.com/graphql/graphiql

  • Build Smarter, Not Harder: Simplifying Backend Workflows with Build-time GraphQL
    6 projects | dev.to | 26 Jun 2023
    GraphQL is declarative and self-documenting by nature. There’s a single endpoint, and all available data, relationships, and APIs can be explored and consumed by client teams (via the GraphiQL interface or just Introspection) without constantly going back and forth with backend teams.
  • GraphQL IDEs: GraphiQL vs Altair
    2 projects | dev.to | 21 Jun 2023
    GraphiQL is one of the most well-known GraphQL IDEs. Originally developed by Facebook, it is an in-browser tool that enables developers to write, validate, and test GraphQL queries. It is open-source and can be integrated into any project that uses GraphQL. Recently, GraphiQL has been revamped with a new UI and several new features as you can read in ths blog post I wrote earlier.
  • React.dev
    21 projects | news.ycombinator.com | 16 Mar 2023
    Nice! I think you might like it.

    Ah yeah, that does take a while to unpack. I think a lot of the complexity there is dealing with a non-react library and the dynamic import(s). Binding non-react libraries can be a bit rough.

    I do think it's a good example to show the big advantage of hooks, if you look at the use of the hook, super clean: https://github.com/graphql/graphiql/blob/50674292c55eadf0e61...

    Great way to contain complexity and make usage really clean and simple!

    21 projects | news.ycombinator.com | 16 Mar 2023
    So I spent some more time reading through using HOCs in React and I think I'll have to give functional components more of a try. The specific example I was thinking of is https://github.com/graphql/graphiql/blob/50674292c55eadf0e61... but this component will probably always be complex because of the Codemirror interaction.
  • Is there anything like a GraphQL playground for testing various features of GraphQL?
    2 projects | /r/graphql | 11 Jan 2023
    Graphiql: https://github.com/graphql/graphiql
  • Exploring GraphiQL 2 Updates and New Features
    2 projects | dev.to | 12 Dec 2022
    After GraphQL Playground became part of the GraphQL Foundation, the need for having just one GraphQL IDE became more important. So the GraphQL Foundation decided to merge GraphiQL and GraphQL Playground into one tool. GraphiQL 1 relied on major tech debt and multiple dependencies that were outdated and hard to maintain. With the merge of GraphiQL and GraphQL Playground, the GraphQL Foundation decided to create a new version of GraphiQL, which is now called GraphiQL 2. The design and creation of GraphiQL 2 was all documented in Github.
  • Vue3 + GraphQL : Best way to structure project & queries?
    2 projects | /r/vuejs | 3 Dec 2022
    #3: As I mentioned above, we use GraphQL Code Generator for generating TypeScript types and composables, as well as type checking our queries against the schema. This results in fully type-safe code from the back-end all the way to the front-end. As far as editor extensions go, the GraphQL: Language Feature Support VSCode extension should work fine, I use the language server part of that extension with Neovim. It provides autocompletion based on the schema and diagnostics. It looks like it might not work in .vue files though.
  • React Real Time Messaging With GraphQL
    3 projects | dev.to | 23 Oct 2022
    OneGraphiQL is a data explorer that allows us to build up our GraphQL queries and mutations. It is the OneGraph implementation of GraphiQL, which can be used with any GraphQL endpoint. GraphiQL is the perfect way to discover the different things we can request. It is generated from the GraphQL schema and provides helpful documentation for the graph's queries, mutations and types. Additionally, it can intelligently suggest options while we are building our queries and mutations.

What are some alternatives?

When comparing graphql-playground and graphiql you can also consider the following projects:

spectaql - Autogenerate static GraphQL API documentation

graphql-voyager - 🛰️ Represent any GraphQL API as an interactive graph

altair - ✨⚡️ A beautiful feature-rich GraphQL Client for all platforms.

prisma-dbml-generator - Prisma DBML Generator

nestjs-graphql-prisma-realworld-example-app - Example real world application built with NestJS, Prisma and GraphQL

dociql - A beautiful static documentation generator for GraphQL

gqlgen - go generate based graphql server library

apollo-server - 🌍  Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.

Hugo - The world’s fastest framework for building websites.

juniper - GraphQL server library for Rust