JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾64%Overall
    • 3,907
    • 1.1 days
    • 🕩146
    • 👥3

    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

    Show All