Visual GraphQL Programming

・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:

slothking-online / graphql-editor

GraphQL Visual Node Editor

GraphQL Editor

npm 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!



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 Aug 9 '18

What are some blockers for you on contributing to open source projects?

A discussion to understand some of the problems faced by the community on contributing to open source projects

GraphQL enthusiast, pizza lover, Magic the Gathering addict