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 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 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 https://graphql-editor.github.io/graphql-editor/

License

MIT

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!

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.

 

Hi,

We will try to differentiate them somehow later. Thanks!

Classic DEV Post from Aug 22

Where in the world do you DEV?

Show off where in the world you DEV from!

GraphQL Editor profile image

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

Sore eyes?

dev.to now has dark mode.

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