Cover image for Visual GraphQL Programming
GraphQL Editor

Visual GraphQL Programming

tomekponiat profile image Tomek Poniatowicz ・Updated on ・1 min read

As GraphQL seems to enjoy interest of DEV.to 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 https://graphql-editor.github.io/graphql-editor/



How It Works

Create GraphQL nodes and connect them…

Hope you gonna enjoy! Cheers!



Editor guide
kayis profile image

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!