Need help with graphql-editor?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

graphql-editor
5.3K Stars 247 Forks MIT License 593 Commits 16 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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

demo

Table of contents

License

MIT

Develop or use standalone

To use standalone you have to use webpack right now. If you want to use it without webpack you need to handle monaco editor workers yourself.

Install dependencies

npm i react react-dom monaco-editor
npm i -D worker-loader css-loader file-loader
npm i graphql-editor
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({ code: schemas.pizza, libraries: schemas.pizzaLibrary, }); return (

{ setMySchema(props); }} schema={mySchema} />

); };

render(, document.getElementById('root'));

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.