Skip to content

πŸ“Ί Visual Editor for GraphQL. Draw GraphQL schemas using visual πŸ”· nodes. Even πŸ’ can do that!

License

Notifications You must be signed in to change notification settings

Sondro/graphql-editor

Β 
Β 

Repository files navigation

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

GraphQLEditor Editor

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

About

πŸ“Ί Visual Editor for GraphQL. Draw GraphQL schemas using visual πŸ”· nodes. Even πŸ’ can do that!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 99.6%
  • HTML 0.4%