Open-source Playground

GraphiQL product close up

Years ago we created a bit of a GraphQL industry standard: The Playground. After merging with GraphiQL, it was time for a redesign.

Graphcool (now Prisma) wanted to create a dev tool for exploring GraphQL APIs – an interface to talk to your data, ask it questions and get answers right away. We went to work on UX and UI, conceiving the GraphQL Playground.

GraphQL Playground Interface

The community loved the new way of engaging with a database. It wasn’t the only option, though. The GraphQL foundation’s own GraphiQL was similar, albeit more focused on customization than usability.

Ultimately, Prisma donated the Playground to the foundation. Both tools were merged and in collaboration with our client Stellate, it was once more up to us to provide UX and UI.

  • Autocomplete
  • Variables
  • Dark mode

Combining the learnings and proven patterns of not one but two IDEs, we had a lot to build upon. Better, richer inline autocompletion, custom variable displays and the mandatory dark mode are some examples. The big play button had to stay of course.

GraphiQL component breakdown

As an open source app with such legacy, usage and possible future use cases, flexibility and adaptability were key. The new GraphiQL can be customized and integrated into all sort of scenarios.

GraphiQL embedded into Stellate product

Stellate’s UI is a great example and served as an applied testing ground for GraphiQL’s new capabilities. Easily included as a package and tweaked for Stellate’s style, it pretty much looks and feels like a native feature.

GraphiQL with docs explorer

In the old GraphiQL, docs and editor were completely disconnected. Inspired by Apollo Studio, we went for a design that connects docs with editor, while maintaining overview and essential documentation functionality. Quite the challenge but as a result, users can now build their query in the docs.

More case studies

    Website for Stellate
    Website for Nimiq
    Website for Tangany
    Logo for Prisma