Product for GraphiQL
We designed a GraphQL standard. Years later, we got to redesign it.
GraphQL / Open Source
Berlin
GraphiQL is the leading in-browser IDE for GraphQL, clocking well over a million npm downloads every week.
Back in 2017, Graphcool, now Prisma, wanted a better way to work with GraphQL. We designed one from scratch: GraphQL Playground.
The old PlaygroundMeant to work seamlessly with Graphcool’s backend-as-a-service, we already had a modular design with tabs and tools.
Years later, Playground and GraphiQL became one. We returned to rethink the experience, introducing richer autocomplete, custom variable displays and a completely reworked docs panel.
Revisited docsThe docs and input editor used to be disconnected. We brought them together, letting users build queries directly from the docs, guided by iconography and color coding.
Dark modeDark mode was important too of course.
A tool used across countless setups can't prescribe just one. We designed GraphiQL to adapt, giving teams the flexibility to customize and integrate it around their own needs.
ExpandabilityInfinitely modular and themeable, GraphiQL is now embedded in thousands of products
A lot changed around GraphiQL over the years. Our job was to make sure the experience could change with it.
- Product Design
- Julian Bauer
- System Design & Direction
- Tim Suchanek, Orta Therox
- Implementation
- Thomas Heyenbrock, Rikki Schulte, @jonathanawesome, @stonexer, Dimitry Postolov, Laurin Quast
GraphiQL x Overnice
We go back to the very first version of GraphiQL, designed alongside the team at Graphcool. Years later, the relationship came full circle when we were brought back to redesign it for its next chapter.
