JavaScripting

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


  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾65%Overall
    • 4,622
    • 2.1 days
    • 🕩198
    • 👥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!

    Cloud version

    Here is a cloud version of GraphQLEditor. Which also contains:

    • cloud project management and versioning
    • team libraries
    • schema libraries
    • live schema mock backend deployment
    • frontend engine to play with mock backend
    • live collaboration

    How it works

    Create GraphQL Schemas

    [GraphQLEditor Editor]

    Explore Large GraphQL Schemas

    [GraphQLEditor Editor

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

    and if you are using webpack

    npm i -D monaco-editor-webpack-plugin worker-loader css-loader file-loader
    
    npm i graphql-editor
    
    import React from 'react';
    import { render } from 'react-dom';
    import { Editor } from 'graphql-editor';
    export const App = () => {
      const [mySchema, setMySchema] = useState<PassedSchema>({
        code: `type Person{ 
          """
          very description of name
          """
          name: String
         }
    
         extend type User{
           password: String!
         }
         `,
        libraries: `
         type User{
           name: String
         }
         `,
      });
      return (
        <div className={UiDiagram}>
          <Editor
            onSchemaChange={(props) => {
              setMySchema(props);
            }}
            initialSizeOfSidebar={'25vw'}
            schema={mySchema}
          />
        </div>
      );
    };
    
    render(<App />, document.getElementById('root'));
    

    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

    My Video Blog Tutorials here

    Show All