mcbetancourt / graphql-editor

GraphQL Visual Node Editor

GraphQL 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

Here is a live demo example of GraphQLEditor.

Docs

Full docs are available here. How to use in your project, develop etc.

https://docs.graphqleditor.com

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

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<
  {},
  {
    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'));

Basic Operations

Create Type

Tag root query, mutation, operation

List and non-null types

Connecting nodes

Support

Ask the community on Spectrum

or 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

Cloud Backend

GraphQL Editor Website

As cloud backend is coming soon, please do subscribe on our website to stay tuned.

Underlying Diagram technology

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