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

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

Graphql Editor

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

Graphql Editor Info

⭐ Stars 5526
🔗 Homepage graphqleditor.com
🔗 Source Code github.com
🕒 Last Update 8 months ago
🕒 Created 4 years ago
🐞 Open Issues 25
➗ Star-Issue Ratio 221
😎 Author graphql-editor