liliang8858 / graphql-editor

📺 Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual 🔷 nodes and explore GraphQL API with beautiful UI. Even 🐒 can do that!

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

Relations

Table of contents

• Docs
• How it works
  • Creator/Editor
  • Relations
• Table of contents
• License
  • Installation
  • Usage
  • GraphQLEditor component props
• Support
• Team
• Underlying Parsing technology
• GraphQL Tutorials

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

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

PassedSchema

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

ActivePane

"relation" | "diagram" | "hierarchy"

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