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 slothking-online / 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 Apr 3

How do you feel about chasing internet points, badges and the gamification of everything?

I'll admit up front, I'm chasing the 16-week streak posting badge and am...

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

Sore eyes? now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️