graphql-editor/graphql-editor

Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual nodes and explore GraphQL API with beautiful UI. 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

Create GraphQL Schemas

Explore Large GraphQL Schemas

Live demo

Here is a live demo example of GraphQLEditor.

Table of contents

• How it works
  • Create GraphQL Schemas
  • Explore Large GraphQL Schemas
  • Live demo
• Table of contents
• Developer Docs
• License
• How It Works
• Develop or use standalone
  • Use with schema and make readonly display of graph
  • Use with schema and make readonly display of graph with code
• Support
• Contribute
• Team
• Underlying Diagram technology
• Underlying Parsing technology
• GraphQL Tutorials

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

Install dependencies

npm i react react-dom monaco-editor

and if you are using webpack

npm i -D monaco-editor-webpack-plugin worker-loader css-loader file-loader

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