JavaScripting

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


  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾66%Overall
    • 5,269
    • 3.8 days
    • 🕩242
    • 👥2

    GraphQLEditor Editor

    npm Commitizen friendly npm downloads

    GraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code. With GraphQL Editor 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 GraphQL Editor.

    Docs

    Here is a guide for GraphQL Editor.

    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

    demo

    Table of contents

    License

    MIT

    Develop or use standalone

    To use standalone you have to use webpack right now. If you want to use it without webpack you need to handle monaco editor workers yourself.

    Install dependencies

    npm i react react-dom monaco-editor
    
    npm i -D worker-loader css-loader file-loader
    
    npm i graphql-editor
    
    import React, { useState } from 'react';
    import { render } from 'react-dom';
    import { GraphQLEditor, PassedSchema } from 'graphql-editor';
    
    const schemas = {
      pizza: `
    type Query{
        pizzas: [Pizza!]
    }
    `,
      pizzaLibrary: `
    type Pizza{
      name:String;
    }
    `,
    };
    
    export const App = () => {
      const [mySchema, setMySchema] = useState<PassedSchema>({
        code: schemas.pizza,
        libraries: schemas.pizzaLibrary,
      });
      return (
        <div
          style={{
            flex: 1,
            width: '100%',
            height: '100%',
            alignSelf: 'stretch',
            display: 'flex',
            position: 'relative',
          }}
        >
          <GraphQLEditor
            onSchemaChange={(props) => {
              setMySchema(props);
            }}
            schema={mySchema}
          />
        </div>
      );
    };
    
    render(<App />, document.getElementById('root'));
    

    Support

    Join our Discord Channel

    Team

    GraphQL Editor Website

    Underlying Parsing technology

    Whole graphql-editor parsing stuff is based on underlying zeus technology.

    GraphQL Tutorials

    Interactive GraphQL Tutorial here

    GraphQL Editor Guide here

    GraphQL Blog here

    Show All