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

  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾61%Overall
    • 3,568
    • 2.2 days
    • 🕩136
    • 👥1

    GraphQL Editor

    npm Commitizen friendly 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.


    Full docs are available here. How to use in your project, develop etc.



    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 (
              width: '100%',
              height: '100%',
              display: 'grid',
              gridTemplateColumns: this.state.editorVisible ? `auto 1fr` : '1fr',
              gridTemplateRows: '1fr'
            <Editor editorVisible={this.state.editorVisible} />
    render(<App />, document.getElementById('root'));

    Basic Operations

    Create Type

    GraphQLEditor Editor

    Tag root query, mutation, operation


    List and non-null types

    List and non-null

    Connecting nodes

    Connecting nodes


    Ask the community on Spectrum

    or Join our Slack Channel


    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!

    Show All