Visual GraphQL Programming

twitter logo github logo ・1 min read

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

GraphQL Visual Node Editor

GraphQL Editor

npm Commitizen friendly GraphQLEditor Editor

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.

Live Demo Tweet

Here is a live demo example of GraphQLEditor.


Full docs are available here. How to use in your project, develop etc.



How It Works

Create GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation

GraphiQL in Cloud

live demo also provides GraphiQL in cloud and faker based GraphQL mock backend

Develop or use standalone

npm i graphql-editor
import * as React from 'react'
import { render } from 'react-dom'
import { Editor } from '../src/index'
class App extends React.Component&lt
    editorVisible: boolean;

Hope you gonna enjoy! Cheers!


twitter logo DISCUSS (2)
markdown guide

I like the idea.

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



We will try to differentiate them somehow later. Thanks!

Classic DEV Post from Jan 22

Self Care for Developers

Self care is a hot topic these days, and I’m not just talking about face masks. There is a growing movement that underscores the importance of taking time to take care of yourself (in addition to all the other things that you already take time for). You can prevent problems down the road by taking proactive steps to ensure your health and happiness.

Tomek Poniatowicz profile image
Pizza fanatic, Magic the Gathering addict, GraphQL enthusiast :)