DEV Community

Cover image for Visual GraphQL Programming
Tomek Poniatowicz for GraphQL Editor

Posted on • Updated on


Visual GraphQL Programming

As GraphQL seems to enjoy interest of community I want to share with you a video showing how easy is creating a GraphQL Schema with GraphQL Editor.

You can play with the editor here or check out Github repo:

GitHub logo graphql-editor / graphql-editor

📺 Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual 🔷 nodes and explore GraphQL API with beautiful UI. Even 🐒 can do that!

GraphQLEditor Editor

npm Commitizen friendly npm downloads

GraphQLEditor makes it easier to understand GrapHQL schemas. Create a schema by joining visual blocks. GraphQLEditor will transform them into code. With GraphQLEditor you can create visual diagrams without writing any code or present your schema in a nice way!

Cloud version

Here is a cloud version of GraphQLEditor. Which also contains:

  • cloud project management and versioning
  • team libraries
  • schema libraries
  • live schema mock backend deployment
  • frontend engine to play with mock backend
  • live collaboration

How it works

Create GraphQL Schemas

[GraphQLEditor Editor]

Explore Large GraphQL Schemas

[GraphQLEditor Editor

Table of contents

Developer Docs

If you wish to contribute docs from typedoc are availble on



How It Works

Create GraphQL nodes and connect them…

Hope you gonna enjoy! Cheers!


Top comments (2)

kayis profile image
K (he/him)

I like the idea.

But I think giving attributes the same visual representation as the types they belong to is strange.

aexol profile image
Artur Czemiel


We will try to differentiate them somehow later. Thanks!

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.