Options
All
  • Public
  • Public/Protected
  • All
Menu

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!

How it works

Create GraphQL Schemas

GraphQLEditor Editor

Explore Large GraphQL Schemas

GraphQLEditor Editor

Live demo

Here is a live demo example of GraphQLEditor.

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

render(<App />, document.getElementById('root'));

Use with schema and make readonly display of graph

import * as React from 'react';
import { render } from 'react-dom';
import { Editor } from '../src/index';

const schema = `
type Query{
  hello: String!
}
schema{
  query: Query
}
`

class App extends React.Component<
  {},
  {
    editorVisible: boolean;
  }
> {
  state = {
    editorVisible: true
  };
  render() {
    return (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'grid',
          gridTemplateColumns: this.state.editorVisible ? `auto 1fr` : '1fr',
          gridTemplateRows: '1fr'
        }}
      >
      <Editor editorVisible={false} readonly={true} schema={schema} />
      </div>
    );
  }
}

Use with schema and make readonly display of graph with code

Same as in preceeding example but editorVisible is true

<Editor editorVisible={true} readonly={true} schema={schema} />

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

Index

Type aliases

AcceptedEditorNodeDefinition

AcceptedEditorNodeDefinition: AcceptedNodeDefinition<GraphQLNodeParams>

AceEditorInstance

AceEditorInstance: Component<IAceEditorProps, __type> & object

CodeEditorProps

CodeEditorProps: object & CodeEditorOuterProps

CodePaneProps

CodePaneProps: object & CodePaneOuterProps

EditorNodeDefinition

EditorNodeDefinition: NodeDefinition<GraphQLNodeParams>

EditorProps

EditorProps: object & CodeEditorOuterProps

HexaDecimal

HexaDecimal: string

Variables

Const Background

Background: string = style({background: mix(Colors.grey[9], Colors.grey[10]),height: '100%',font: `12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`})

Const CodeContainer

CodeContainer: string = style({flex: 1,overflowY: 'hidden',overflowX: 'hidden',display: 'flex',flexFlow: 'column'})

Const Colors

Colors: object = {grey: ['#FFFFFF','#E5E5E5','#CCCCCC','#B2B2B2','#999999','#808080','#666666','#4D4D4D','#333333','#1A1A1A','#000000'],main: ['#FF59C5','#E550B1','#CC479E','#B23E8A','#993676','#802D62','#66244F','#4D1B3B','#331227','#1A0914'],green: ['#30FFC8', '#2CE6B4', '#27CCA0', '#22B38C', '#188064', '#0F4D3C', '#0A3328'],yellow: ['#FED531', '#E6C02C', '#CCAB27', '#B39622', '#806B18', '#4D400F', '#332B0A'],red: ['#FF306B', '#E62C60', '#CC2756', '#B3224B', '#801835', '#4D0F20', '#330A15'],blue: ['#30C1FF', '#2BAEE5', '#269ACC', '#2287B3', '#1D7499', '#186080', '#134D66', '#0E3A4D']} as const

Type declaration

  • blue: ["#30C1FF", "#2BAEE5", "#269ACC", "#2287B3", "#1D7499", "#186080", "#134D66", "#0E3A4D"]
  • green: ["#30FFC8", "#2CE6B4", "#27CCA0", "#22B38C", "#188064", "#0F4D3C", "#0A3328"]
  • grey: ["#FFFFFF", "#E5E5E5", "#CCCCCC", "#B2B2B2", "#999999", "#808080", "#666666", "#4D4D4D", "#333333", "#1A1A1A", "#000000"]
  • main: ["#FF59C5", "#E550B1", "#CC479E", "#B23E8A", "#993676", "#802D62", "#66244F", "#4D1B3B", "#331227", "#1A0914"]
  • red: ["#FF306B", "#E62C60", "#CC2756", "#B3224B", "#801835", "#4D0F20", "#330A15"]
  • yellow: ["#FED531", "#E6C02C", "#CCAB27", "#B39622", "#806B18", "#4D400F", "#332B0A"]

Const DiagramContainer

DiagramContainer: string = style({flex: 1,alignSelf: 'stretch'})

Const ErrorContainer

ErrorContainer: string = style({position: 'absolute',right: 280,width: 300,padding: 20,color: Colors.red[0],background: `${Colors.grey[9]}dd`,marginTop: 10,fontSize: 12,letterSpacing: 1})

Const ErrorLonger

ErrorLonger: string = style({position: 'absolute',background: Colors.red[0],color: Colors.grey[0],padding: 10,fontSize: 10,maxWidth: 200,margin: 5,borderRadius: 5,right: 0,letterSpacing: 1,zIndex: 3})

Const FilterIcon

FilterIcon: string = style({padding: 15,display: 'flex',alignItems: 'center',cursor: 'pointer',background: Colors.grey[9],color: Colors.grey[1],transition,$nest: {'&:hover': {color: Colors.grey[0],background: Colors.grey[10]},'&.active': {color: Colors.green[0]}}})

Const FilterTable

FilterTable: string = style({display: 'flex',flexFlow: 'row wrap',padding: 15,paddingBottom: 5,paddingRight: 5,background: Colors.grey[10]})

Const FullScreenIcon

FullScreenIcon: string = style({cursor: 'pointer',display: 'flex',color: Colors.grey[0],transition: vars.transition,padding: `0 10px`,$nest: {'&:hover,&.active': {color: Colors.green[0]}}})

Const Generate

Generate: string = style({marginLeft: 'auto',color: Colors.green[3],padding: `2px 6px`,cursor: 'pointer',display: 'flex',alignItems: 'center',fontSize: 10,textTransform: 'lowercase',borderRadius: 3,fontWeight: 'bold',transition: vars.transition,$nest: {'&.disabled': {color: Colors.grey[6]},'&.ready': {color: Colors.grey[0],$nest: {'&:hover': {color: Colors.green[0],$nest: {svg: {animationName,animationDuration: '1s',animationIterationCount: 'infinite',animationTimingFunction: 'linear'}}}}}}})

Const Hider

Hider: string = style({width: 24,height: 24,marginBottom: 3,display: 'flex',alignItems: 'center',justifyContent: 'center',userSelect: 'none',cursor: 'pointer',$nest: {'&:hover': {background: Colors.grey[10]},'&.active': {color: Colors.green[0]}}})

Const HiderPanel

HiderPanel: string = style({width: 30,background: Colors.grey[9],color: Colors.grey[2],fontSize: 12,padding: 3})

Const Marker

Marker: string = style({background: 'red'})

Const Node

Node: string = style({display: 'flex',flexFlow: 'nowrap',alignItems: 'center',color: Colors.grey[3]})

Const NodeIcon

NodeIcon: string = style({cursor: 'pointer',padding: 5,display: 'flex',alignItems: 'center',transition,$nest: {'&:hover': {color: Colors.grey[0]}}})

Const NodeList

NodeList: string = style({padding: 10,overflowY: 'auto',height: '100%'})

Const NodeSpacer

NodeSpacer: string = style({borderBottom: `1px solid ${Colors.grey[0]}11`,margin: `10px 20px`})

Const NodeTitle

NodeTitle: string = style({fontSize: 12,cursor: 'pointer',userSelect: 'none',['-moz-user-select']: '-moz-none',padding: 5,transition,$nest: {'&:hover, &.active': {color: Colors.green[0]}}})

Const NodeType

NodeType: string = style({fontSize: 8})

Const NodeTypeHoverable

NodeTypeHoverable: string = style({cursor: 'pointer',transition,$nest: {'&:hover': {color: Colors.grey[0]}}})

Const Resizer

Resizer: string = style({width: 20,height: '100%',alignSelf: 'stretch',justifySelf: 'flex-end',zIndex: 6,cursor: 'ew-resize',position: 'absolute',right: -10,top: 0,bottom: 0,$nest: {[`&.drag`]: {position: 'fixed',width: '100vw',height: '100vh',left: 0,top: 0}}})

Const SearchInput

SearchInput: string = style({padding: 15,color: Colors.grey[1],fontSize: 12,flex: 1,background: Colors.grey[9],border: 0,outline: 0,fontFamily,$nest: {'&::placeholder': {color: Colors.grey[5]}}})

Const Sidebar

Sidebar: string = style({flexBasis: sizeSidebar,width: sizeSidebar,alignSelf: 'stretch',zIndex: 2,display: 'flex',flexDirection: 'column',background: Colors.grey[8],position: 'relative'})

Const TempSchema

TempSchema: "type Team{"""Team name"""name : String!"""type object node"""members : [Member!]"""ID object node"""ID : ID}"""type object node"""type Member{"""String object node"""nickname : String!"""ID object node"""ID : ID}"""input object node"""input createTeam{"""String object node"""name : String!}"""input object node"""input updateTeam{"""String object node"""name : String"""String object node"""teamId : String!}"""input object node"""input addTeamMember{"""String object node"""nickname : String!"""String object node"""teamId : String!"""enum object node"""role : role!}"""enum object node"""enum role{"""EnumValue object node"""OWNER,"""EnumValue object node"""ADMIN,"""EnumValue object node"""EDITOR,"""EnumValue object node"""VIEWER}"""input object node"""input removeTeamMember{"""String object node"""nickname : String!"""String object node"""teamId : String!}"""input object node"""input removeTeam{"""String object node"""teamId : String!}"""input object node"""input updateTeamMember{"""String object node"""teamId : String!"""enum object node"""role : role"""String object node"""nickname : String}"""type object node"""type TeamOps{"""type object node"""addMember(member:addTeamMember) : Member"""type object node"""updateMember(member:updateTeamMember) : Member"""Boolean object node"""removeMember(member:removeTeamMember) : Boolean"""type object node"""updateTeam(team:updateTeam) : Team"""Boolean object node"""removeTeam(team:removeTeam) : Boolean}" = `type Team{"""Team name"""name : String!"""type object node"""members : [Member!]"""ID object node"""ID : ID}"""type object node"""type Member{"""String object node"""nickname : String!"""ID object node"""ID : ID}"""input object node"""input createTeam{"""String object node"""name : String!}"""input object node"""input updateTeam{"""String object node"""name : String"""String object node"""teamId : String!}"""input object node"""input addTeamMember{"""String object node"""nickname : String!"""String object node"""teamId : String!"""enum object node"""role : role!}"""enum object node"""enum role{"""EnumValue object node"""OWNER,"""EnumValue object node"""ADMIN,"""EnumValue object node"""EDITOR,"""EnumValue object node"""VIEWER}"""input object node"""input removeTeamMember{"""String object node"""nickname : String!"""String object node"""teamId : String!}"""input object node"""input removeTeam{"""String object node"""teamId : String!}"""input object node"""input updateTeamMember{"""String object node"""teamId : String!"""enum object node"""role : role"""String object node"""nickname : String}"""type object node"""type TeamOps{"""type object node"""addMember(member:addTeamMember) : Member"""type object node"""updateMember(member:updateTeamMember) : Member"""Boolean object node"""removeMember(member:removeTeamMember) : Boolean"""type object node"""updateTeam(team:updateTeam) : Team"""Boolean object node"""removeTeam(team:removeTeam) : Boolean}`

Const Title

Title: string = style({display: 'flex',flexFlow: 'row nowrap',width: '100%'})

Const animationName

animationName: string = keyframes({['0%']: {transform: `rotate(0deg)`},['100%']: {transform: `rotate(360deg)`}})

Const fontFamily

fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace" = `'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace`

Const mapFromTheme

mapFromTheme: string = Object.keys(theme.colors.node.types).reduce<string>((a, b) => {const css = `\n.ace_${b}{color: ${theme.colors.node.types[b]}}`;return a + css;}, ``)

Const sizeSidebar

sizeSidebar: 350 = 350

Const transition

transition: ".25s all" = ".25s all"

Functions

Const Code

Const CodeEditor

Const CodePane

Const Explorer

  • Explorer(__namedParameters: object): Element

Const ExtensionInstance

  • ExtensionInstance(__namedParameters: object, extensionType: TypeExtension): object
  • Parameters

    • __namedParameters: object
      • acceptsInputs: undefined | function
      • options: undefined | NodeOption[]
    • extensionType: TypeExtension

    Returns object

    • acceptsInputs: undefined | function
    • instances: undefined
    • options: undefined | NodeOption[]
    • root: false
    • data: object
      • for: Extend[]
      • type: TypeExtension
    • node: object
      • name: undefined
      • notEditable: true
      • outputs: never[]

Const Eye

Const EyeOff

Const Filter

Const FilterBlock

  • FilterBlock(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • active: undefined | false | true
      • color: string
      • name: string
      • onClick: function
          • (): void
          • Returns void

    Returns Element

Const FullScreen

Const Hide

Const Layers

Const Minus

Const NodeComponent

  • NodeComponent(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • centerNode: function
          • (id: string): void
          • Parameters

            • id: string

            Returns void

      • centerType: function
          • (parentDefition: NodeDefinition): void
          • Parameters

            • parentDefition: NodeDefinition

            Returns void

      • indentLevel: number
      • node: Node<__type>
      • relatives: undefined | Node<__type>[]
      • selectedNodeIds: string[]
      • unfoldMaster: boolean

    Returns Element

Const Play

Const Plus

Const Settings

Const Show

Const StatusDot

  • StatusDot(__namedParameters: object): Element

Const TitleOfPane

  • TitleOfPane(__namedParameters: object): Element
  • Parameters

    • __namedParameters: object
      • children: undefined | null | string | number | false | true | __type | ReactElement<any, string | function | object> | ReactNodeArray | ReactPortal

    Returns Element

Const ToggleOff

Const ToggleOn

Const Trash

Const X

Const deprecated

Const generateTypeDefinition

  • generateTypeDefinition(__namedParameters: object): NodeDefinition<GraphQLNodeParams>
  • Parameters

    • __namedParameters: object
      • acceptsInputs: undefined | function
      • dataType: ScalarTypeDefinition | ObjectTypeDefinition | InterfaceTypeDefinition | UnionTypeDefinition | EnumTypeDefinition | InputObjectTypeDefinition | SchemaDefinition | TypeDefinition | DirectiveDefinition | FieldDefinition | UnionMemberDefinition
      • help: string
      • instances: object[]
      • node: object
      • options: undefined | NodeOption[]
      • type: type | enum | interface | input | scalar | union | directive | SchemaDefinition | TypeDefinition | DirectiveDefinition | FieldDefinition | UnionMemberDefinition | directive | schema | definition | field | member

    Returns NodeDefinition<GraphQLNodeParams>

Const isHexa

  • isHexa(s: string): s is HexaDecimal
  • Parameters

    • s: string

    Returns s is HexaDecimal

Const mix

Const reason

Const resizeCodePaneAce

  • resizeCodePaneAce(editor: AceEditor, width: number): void

Object literals

Const ArgumentInstance

ArgumentInstance: object

options

options: object[] = [{name: Options.array,help: help.array}]

data

data: object

type

type: Argument = Instances.Argument

node

node: object

name

name: undefined = undefined

notEditable

notEditable: true = true

Const ExtensionDefinition

ExtensionDefinition: object

help

help: string = help.extend

root

root: true = true

type

type: Helpers = Helpers.Extend

acceptsInputs

  • acceptsInputs(d: NodeDefinition<GraphQLNodeParams>, defs: NodeDefinition<GraphQLNodeParams>[], _: undefined | NodeDefinition<GraphQLNodeParams>): AcceptedNodeDefinition<GraphQLNodeParams>[]
  • Parameters

    • d: NodeDefinition<GraphQLNodeParams>
    • defs: NodeDefinition<GraphQLNodeParams>[]
    • _: undefined | NodeDefinition<GraphQLNodeParams>

    Returns AcceptedNodeDefinition<GraphQLNodeParams>[]

data

data: object

type

type: Extend = Helpers.Extend

node

node: object

name

name: undefined = undefined

notEditable

notEditable: true = true

Const FieldInstance

FieldInstance: object

instances

instances: undefined = undefined

options

options: NodeOption[] = Utils.ArrayNonNullOptions

acceptsInputs

  • acceptsInputs(d: NodeDefinition<GraphQLNodeParams>, defs: NodeDefinition<GraphQLNodeParams>[]): AcceptedNodeDefinition<GraphQLNodeParams>[]
  • Parameters

    • d: NodeDefinition<GraphQLNodeParams>
    • defs: NodeDefinition<GraphQLNodeParams>[]

    Returns AcceptedNodeDefinition<GraphQLNodeParams>[]

data

data: object

for

for: (ObjectTypeDefinition | InterfaceTypeDefinition)[] = [TypeDefinition.InterfaceTypeDefinition, TypeDefinition.ObjectTypeDefinition]

type

type: FieldDefinition = TypeSystemDefinition.FieldDefinition

node

node: object

outputs

outputs: never[] = []

Const ImplementsInstance

ImplementsInstance: object

acceptsInputs

acceptsInputs: undefined = undefined

instances

instances: undefined = undefined

options

options: NodeOption[] = Utils.ArrayNonNullOptions

data

data: object

for

for: Implements[] = [Helpers.Implements]

type

type: Implement = Instances.Implement

node

node: object

inputs

inputs: null = null

name

name: undefined = undefined

notEditable

notEditable: true = true

outputs

outputs: never[] = []

Const InputValueInstance

InputValueInstance: object

options

options: NodeOption[] = Utils.ArrayNonNullOptions

data

data: object

for

for: (ObjectValue | InputObjectTypeDefinition | DirectiveDefinition | FieldDefinition)[] = [TypeDefinition.InputObjectTypeDefinition,TypeSystemDefinition.FieldDefinition,TypeSystemDefinition.DirectiveDefinition,Value.ObjectValue]

type

type: InputValueDefinition = ValueDefinition.InputValueDefinition

node

node: object

outputs

outputs: never[] = []

Const help

help: object

Boolean

Boolean: string = "true or false value"

EnumValue

EnumValue: string = "Value of Enum"

Float

Float: string = "Floating point value like 2.345, 3334.1, -11.2, 0, 1.0"

ID

ID: string = "The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, defining it as an ID signifies that it is not intended to be human‐readable"

Int

Int: string = "Integer value like 1 or -2 or 0 or 1234"

String

String: string = "Character sequence like 'Hello' or 'person' etc."

array

array: string = "Check this if you want a list here for example 'Hello' is a String however ['Hello', 'Me', 'World', 'Sloth'] its an array of strings"

arrayRequired

arrayRequired: string = "Check this if you want a list here and you dont want null"

directive

directive: string = "A GraphQL schema describes directives which are used to annotate various parts of a GraphQL document as an indicator that they should be evaluated differently by a validator, executor, or client tool such as a code generator."

directives

directives: string = "Connect directives to use them"

enum

enum: string = "Enumeration types are a special kind of scalar that is restricted to a particular set of allowed string values"

extend

extend: string = "Extend type,input,union,interface,enum with this node"

implements

implements: string = "Connect interface nodes to make type implements them"

input

input: string = "This is particularly valuable in the case of mutations, where you might want to pass in a whole object to be created. In the GraphQL schema language, input types look exactly the same as regular object types, but with the keyword input instead of type."

interface

interface: string = "Like many type systems, GraphQL supports interfaces. An Interface is an abstract type that includes a certain set of fields that a type must include to implement the interface."

mutation

mutation: string = "Mutation is the same as query but here you also mutate data in your database"

query

query: string = "This is your endpoint where you serve your data out of your server."

required

required: string = "Check this if this node is required for creation of the type or is required in input | interface"

scalar

scalar: string = "Custom scalar type"

subscription

subscription: string = "Subscribe to some real-time event in your database"

type

type: string = "The most basic components of a GraphQL schema are object types, which just represent a kind of object you can fetch from your service, and what fields it has. "

union

union: string = "Union is a field which says this is type A, type B or type C. Union nodes can have only type instance inputs"

Const theme

theme: object

fontFamily

fontFamily: string

colors

colors: object

background

background: string = mix(Colors.grey[8], Colors.grey[9])

help

help: object

title

title: "#FED531" = Colors.yellow[0]

link

link: object

main

main: "#CCCCCC" = Colors.grey[2]

node

node: object

background

background: string = mix(Colors.grey[7], Colors.grey[8])

type

type: "#CCCCCC" = Colors.grey[2]

hover

hover: object

type

type: "#FFFFFF" = Colors.grey[0]

options

options: object

array

array: "#FED531" = Colors.yellow[0]

required

required: "#FF306B" = Colors.red[0]

types

types: object

Boolean

Boolean: "#30FFC8" = Colors.green[0]

Float

Float: "#30FFC8" = Colors.green[0]

ID

ID: "#30FFC8" = Colors.green[0]

Int

Int: "#30FFC8" = Colors.green[0]

String

String: "#30FFC8" = Colors.green[0]

directive

directive: string = mix(Colors.main[0], Colors.grey[0])

enum

enum: string = mix(Colors.blue[0], Colors.main[0])

extend

extend: "#FED531" = Colors.yellow[0]

input

input: "#30C1FF" = Colors.blue[0]

interface

interface: string = mix(Colors.blue[0], Colors.grey[0])

scalar

scalar: "#30FFC8" = Colors.green[0]

type

type: "#FF59C5" = Colors.main[0]

union

union: "#FF59C5" = Colors.main[0]

port

port: object

background

background: string = mix(Colors.grey[6], Colors.grey[7])

description

description: object

help

help: object

menu

menu: object

category

category: object

fontSize

fontSize: string = "12px"

node

node: object

nameSize

nameSize: number = 23

typeSize

typeSize: number = 20

width

width: number = 210

spacing

spacing: object

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc