[2025-02] GraphiQL/Playground differences

[martinbonnin]

At the February working group, we discussed the possibility of archiving GraphQL Playground.

As a more frequent user of Playground (Confetti uses Playground by default, see https://confetti-app.dev/playground/), this got me curious how much of a lift it would be to switch to GraphiQL.

Overall, switching to GraphiQL would feel like a step backward for my use case. The SDL/JSON download have been quite useful, same as "copy as curl" and schema polling.

Besides the feature list, I find Playground to be generally more polished in terms of UI/UX. For an example, the tabs seem to be a bit "jumpy" in GraphiQL and some icons render weirdly in the query tree explorer. Similarly, the settings editor in Playground feels more modern than the GraphiQL modal. That might reach into personal preferences though so I'm curious what you all think!

Main features

	GraphiQL	Playground
Tabs	✅	✅
Dark mode	✅	✅
Local history	✅	✅
Subscriptions	✅	✅
Schema polling	❓	✅
Copy as curl	🚫	✅
SDL/JSON download	🚫	✅
Editable endpoint url	🚫	✅
Multi column schema doc	🚫	✅
Search the docs	🚫	✅
Merge fragments into queries	✅	🚫
Query tree visualizer	✅	🚫
Settings	UI	Editor

Smaller issues

• The tabs do not have an icon for query/mutation/subscriptions.
• For anonymous operations, display the name of the first root field in the tab instead of <undefined>.
• While typing a field, the chars are red until the field is completed.
• The description of the field in the autocomplete popup doesn't show unless up or down is pressed.
• In the Query tree visualizer, some icons display badly.
• No organization of the doc by query/mutation/subscription.

Try them out

If you want to compare both by yourself, you can use the following instances (no subscriptions sadly):

• https://confetti-app.dev/playground/
• https://confetti-app.dev/graphiql/

Note those are created by cloning and hosting the sample index.html (playground, graphiql). None of those are customized in any way. It is very well possible that GraphiQL supports some of the features with some customization. If that's the case, please let me know and I will update.

[benjie]

Currently no-one is maintaining Playground; it hasn't had a release for 3 years. GraphiQL is being actively developed. Perhaps the best way forward is to file these missing features as feature requests against GraphiQL itself and maybe even put some TSC grant funds behind them to get the features ported? I don't think we need the Atom/VSCode situation where we have two different IDEs to accomplish the same goals; originally our intent was that most features would be ported into GraphiQL and then Playground would be re-written as a "preset" for GraphiQL that pulls in a number of plugins with the features you describe.

[martinbonnin]

Opened graphql/graphiql#3951 as a follow up.

[dimaMachina]

Currently, all efforts are focused on:

• Adding React 19 support to GraphiQL
• Replacing the hard-to-maintain state management based on React Context with the more flexible Zustand
• Replacing CodeMirror with Monaco Editor / Monaco GraphQL to bring GraphiQL closer to the experience of Apollo Studio 😉

You can track progress in my roadmap

Important

I’d be happy to continue contributing to GraphiQL, whether by porting existing features or adding new ones after the Monaco migration, especially if there’s grant funding or sponsorship support.