kjatti/graphql-editor

📺 Visual Editor for GraphQL. Draw GraphQL schemas using visual 🔷 nodes. Even 🐒 can do that!

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

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<
  {},
  {
    editorVisible: boolean;
  }
> {
  state = {
    editorVisible: true
  };
  render() {
    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'grid',
          gridTemplateColumns: this.state.editorVisible ? `auto 1fr` : '1fr',
          gridTemplateRows: '1fr'
        }}
      >
        <Editor editorVisible={this.state.editorVisible} />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Use with schema and make readonly display of graph

import * as React from 'react';
import { render } from 'react-dom';
import { Editor } from '../src/index';

const schema = `
type Query{
  hello: String!
}
schema{
  query: Query
}
`

class App extends React.Component<
  {},
  {
    editorVisible: boolean;
  }
> {
  state = {
    editorVisible: true
  };
  render() {
    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'grid',
          gridTemplateColumns: this.state.editorVisible ? `auto 1fr` : '1fr',
          gridTemplateRows: '1fr'
        }}
      >
      <Editor editorVisible={false} readonly={true} schema={schema} />
      </div>
    );
  }
}

Use with schema and make readonly display of graph with code

Same as in preceeding example but editorVisible is true

<Editor editorVisible={true} readonly={true} schema={schema} />

Support

Join our Slack Channel

Contribute

For a complete guide to contributing to GraphQL Editor, see the Contribution Guide.

1. Fork this repo
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Team

GraphQL Editor Website

Underlying Diagram technology

Whole graphql-editor is based on underlying diagram technology. We need much more help there feel free to contribute!

Underlying Parsing technology

Whole graphql-editor parsing stuff is based on underlying zeus technology. We need much more help there feel free to contribute!

GraphQL Tutorials

Best GraphQL tutorials here