JavaScripting

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


  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾68%Overall
    • 5,619
    • 3.2 days
    • 🕩266
    • 👥3

    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

    Creator/Editor

    GraphQL Editor

    Relations

    GraphQL Editor

    Table of contents

    License

    MIT

    Installation

    npm i -D worker-loader css-loader file-loader webpack
    
    npm i  graphql-editor react react-dom monaco-editor @monaco-editor/react
    

    GraphQL SDL Editor

    Usage

    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'));
    

    GraphQLEditor component props

    GraphQLEditor

    property type description
    schema PassedSchema value of the schema
    setSchema (props: PassedSchema, isInvalid?: boolean) => void; set value of the schema
    readonly boolean lock editing
    diffSchemas { oldSchema: PassedSchema; newSchema: PassedSchema} view state
    theme EditorTheme current theme
    state { pane: ActivePane, code: boolean } view state
    onStateChange ( state?:{ pane: ActivePane, code: boolean } ) => void; on state changed
    onTreeChange (tree: ParserTree) => void on tree state changed
    placeholder string placeholder - empty editor

    PassedSchema

    property type description
    code string value of the schema code
    libraries string value of the current libraries

    ActivePane

    "relation" | "diagram" | "hierarchy"

    GraphQL Gql Editor

    Usage

    import React, { useState } from 'react';
    import { render } from 'react-dom';
    import { GraphQLEditor, PassedSchema } from 'graphql-editor';
    
    const schema = `
    type Query{
        pizzas: [Pizza!]
    }
    `;
    
    export const App = () => {
      const [gql, setGql] = useState('');
      return (
        <div
          style={{
            flex: 1,
            width: '100%',
            height: '100%',
            alignSelf: 'stretch',
            display: 'flex',
            position: 'relative',
          }}
        >
          <GraphQLGqlEditor
            gql={gql}
            setGql={(gqlString) => setGql(gqlString)}
            schema={{ code: schema }}
          />
        </div>
      );
    };
    
    render(<App />, document.getElementById('root'));
    

    GraphQLGqlEditor component props

    GraphQLEditor

    property type description
    schema PassedSchema value of the schema
    gql string value of the gql
    placeholder string placeholder - empty editor
    setGql (props: PassedSchema, isInvalid?: boolean) => void; set value of the gql
    readonly boolean lock editing
    theme EditorTheme current theme

    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