molchanov-engineer/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 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!

Cloud version

Here is a cloud version of GraphQLEditor. Which also contains:

• cloud project management and versioning
• team libraries
• schema libraries
• live schema mock backend deployment
• frontend engine to play with mock backend
• live collaboration

How it works

Create GraphQL Schemas

[]

Explore Large GraphQL Schemas

[

Table of contents

• How it works
  • Create GraphQL Schemas
  • Explore Large GraphQL Schemas
• Table of contents
• Developer Docs
• License
• How It Works
• Develop or use standalone
• Support
• Contribute
• Team
• Underlying Diagram technology
• Underlying Parsing technology
• GraphQL Tutorials

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 monaco-editor

and if you are using webpack

npm i -D monaco-editor-webpack-plugin worker-loader css-loader file-loader

npm i graphql-editor

import React from 'react';
import { render } from 'react-dom';
import { Editor } from 'graphql-editor';
export const App = () => {
  const [mySchema, setMySchema] = useState<PassedSchema>({
    code: `type Person{ 
      """
      very description of name
      """
      name: String
     }
     
     extend type User{
       password: String!
     }
     `,
    libraries: `
     type User{
       name: String
     }
     `,
  });
  return (
    <div className={UiDiagram}>
      <Editor
        onSchemaChange={(props) => {
          setMySchema(props);
        }}
        initialSizeOfSidebar={'25vw'}
        schema={mySchema}
      />
    </div>
  );
};

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

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

My Video Blog Tutorials here