chronsyn / graphql-editor Goto Github PK

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.

Here is a live demo example of GraphQLEditor.

GraphQL Editor Website

As cloud backend is coming soon, please do subscribe on our website to stay tuned.

Clone the repository

$ git clone https://github.com/slothking-online/graphql-editor
$ cd graphql-editor

Install with npm package manager

$ npm install

$ npm run start

After that the editor should be running on localhost:

http://localhost:1569

Create GraphQL nodes and connect them to generate a database schema.

To create nodes press and hold spacebar, then hover mouse button on chosen category. Click the mouse button on node to create it. Connect nodes with each other.

• Create - Press and hold spacebar and choose category » node and Left Mouse Button click
• Pan - Press and hold Left Mouse Button and move mouse
• Move - Press and hold Left Mouse Button on node
• Rename - To rename node simply start typing when one node is selected
• Connect - Click and hold desired node output and move it to other node's output then release mouse button IMPORTANT: Every node is connectable only if it creates a valid schema. Experiment to test it.
• Node Properties - Click right mouse button on node
• ⌘/Ctrl + Left Mouse Button click - select multiple nodes
• Delete - Click delete button when node/nodes are selected or right click » delete

1. Create graph » type node
2. Rename it to "Cat"
3. Create fields » "String" node
4. Rename it to "name"
5. Connect "name"

Feel free to contact us and contribute in this GraphQL Editor project. [email protected]

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