Skip to content
πŸ“Ί Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual πŸ”· nodes and explore GraphQL API with beautiful UI. Even πŸ’ can do that!
TypeScript HTML
Branch: master
Clone or download
Latest commit da93c30 Dec 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets docs(replace): gif Nov 13, 2019
docs docs(readme): gifs Nov 13, 2019
sandbox fix(null): value Dec 12, 2019
src fix(null): value Dec 12, 2019
.editorconfig initial commit Sep 18, 2018
.gitattributes chore(package): package May 28, 2019
.gitignore chore(cleaning): rsbuildinfo Jul 22, 2019
.gitlab-ci.yml feat(merge): add Sep 20, 2019
.npmignore fix(tests): moveout Jun 25, 2019
CONTRIBUTING.md readme Dec 28, 2018
Gruntfile.js new version from cloud Feb 22, 2019
LICENSE.md docs added Dec 27, 2018
README.md docs(readme): gifs Nov 13, 2019
_config.yml
commitlint.config.js fix(autosave): autosave fix Mar 5, 2019
jest.config.js test(tests32): tests32 May 24, 2019
package-lock.json
package.json Release 2.3.2 Dec 12, 2019
tsconfig.json feat(explorer): nodes Oct 31, 2019
tslint.json feat(comment): node Nov 12, 2019

README.md

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

Create GraphQL Schemas

GraphQLEditor Editor

Explore Large GraphQL Schemas

GraphQLEditor Editor

Live demo

Here is a live demo example of GraphQLEditor.

Table of contents

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
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

You can’t perform that action at this time.