JavaScripting

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


  • ×

    Graphql Editor

    GraphQL Visual Node Editor
    Filed under  › 

    • 🔾69%Overall
    • 5,929
    • 3.2 days
    • 🕩284
    • 👥4

    GraphQLEditor Editor

    Graph sorcery, that makes reading GraphQL schemas easier!

    License stars npm npm downloads Twitter Website  |   Docs graphql-editor-gif

    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!

    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

    💡 What is GraphQL Editor?

    GraphQL Editor is Graph based system for reading and designing the GraphQL schema

    GraphQL Editor is a GraphQL visualizer and designer. It allows you to create and display GraphQL schemas as a visual graph.

    🚀 Features

    • Visual GraphQL Editing.
    • GraphQL Monaco based IDE
    • Selection observer. When node is clicked in visual Graph it automatically scrolls the code to the same node. When cursor is moved in code space
    • Automatically bound interfaces. When interface is implemented on type fields of the interface add to the type. If it is already implemented editing interface edits all implementing nodes
    • Writing,generating and displaying GraphQL Documentation in markdown. Generating GraphQL docs out of GraphQL descriptions in markdown
    • Comparing different versions of GraphQL schemas with special node-sort sorting nodes and its fields to show the real difference in GraphQL Schema on AST omitting line numbers

    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
            setSchema={(props) => {
              setMySchema(props);
            }}
            schema={mySchema}
          />
        </div>
      );
    };
    
    render(<App />, document.getElementById('root'));
    

    GraphQLEditor component props

    GraphQLEditor

    property type description required default
    schema PassedSchema value of the schema true
    setSchema (props: PassedSchema, isInvalid?: boolean) => void; Function to be called when schema is set by the editor true
    readonly boolean lock editing false false
    diffSchemas Record<string, string> Record containing graphql schemas with "name" as a key and graphql schema as a "value" false
    theme EditorTheme current theme MainTheme
    routeState EditorRoutes listen to route changes. Don't bind it with routeState though! false
    onStateChange ( r: EditorRoutes ) => void; on route state changed false
    onTreeChange (tree: ParserTree) => void Function that could be fired if tree changes false
    placeholder string placeholder - empty editor false

    PassedSchema

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

    ActivePane

    "relation" | "diagram" | "diff"

    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 required default
    schema PassedSchema value of the schema true
    gql string value of the gql true
    placeholder string placeholder - empty editor false undefined
    setGql (props: PassedSchema, isInvalid?: boolean) => void; set value of the gql true undefined
    readonly boolean lock editing false false
    theme EditorTheme current theme false MainTheme

    GraphQL Embedded Readonly Editor

    If you only want to view the schema and embed it somewhere in your app you can use our embedded editor for that reason

    import React from 'react';
    import { EmbeddedGraphQLEditor } from 'graphql-editor';
    import * as schemas from '../schema';
    
    export const embeddedEditor = () => {
      return (
        <div
          style={{
            flex: 1,
            width: '100%',
            height: '100%',
            alignSelf: 'stretch',
            display: 'flex',
            position: 'relative',
          }}
        >
          <EmbeddedGraphQLEditor
            schema={{
              code: schemas.googleDirectionsNew,
              libraries: '',
            }}
          />
        </div>
      );
    };
    

    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

    GraphQL Blog

    Authors

    Show All