Awesome Open Source
Awesome Open Source

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



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (266,216
Reactjs (166,751
Learning (75,822
Editor (31,897
Tutorials (23,651
Graphql (15,971
Schema (14,674
Ide (8,975
Diagram (5,641