GraphQL Editor profile image GraphQL Editor

Visual GraphQL Programming

twitter logo github logo Updated on ・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

πŸ“Ί Visual Editor for GraphQL. Draw GraphQL schemas using visual πŸ”· nodes. 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!

How it works

GraphQLEditor Editor

Here is a live demo example of GraphQLEditor.

Developer Docs

If you wish to contribute docs from typedoc are availble on



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

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;
> {
  state = {
    editorVisible: true
  render() {

Hope you gonna enjoy! Cheers!


twitter logo DISCUSS (2)
The GraphQL Editor is a supportive tool for both advanced GraphQL users as well as those making their first steps with GraphQL APIs.
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 Feb 20

Help build a list of awesome .dev sites

A growing list of awesome .dev sites

GraphQL Editor profile image

A Better Way To GraphQL!
Speed up schema design by at least 50%