Skip to content
GraphQL Visual Node Editor
TypeScript JavaScript Other
Branch: master
Clone or download
Pull request Compare This branch is 192 commits behind graphql-editor:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
docs
sandbox
src
.editorconfig
.gitignore
.gitlab-ci.yml
.npmignore
.prettierrc
CONTRIBUTING.md
Gruntfile.js
LICENSE.md
README.md
_config.yml
cypress.json
deploy-docs.sh
deploy-toolkit.yaml
deploy.sh
doczrc.js
fromcloud.sh
jest.config.js
logo.png
logo@2x.png
logo@3x.png
package-lock.json
package.json
tsconfig.json

README.md

GraphQL Editor

npm GraphQLEditor 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 Tweet

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

GraphQLEditor Editor

Tag root query, mutation, operation

Operations

List and non-null types

List and non-null

Connecting nodes

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

GraphQLEditor Roadmap GraphQLEditor Roadmap Features: Generate Queries For Frontend, GraphQL To Backend, Ready To Use Fake Backend, Backend In One place

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!

You can’t perform that action at this time.