GraphQL Editor
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.
Live Demo 
Here is a live demo example of GraphQLEditor.
Docs
Full docs are available here. How to use in your project, develop etc.
https://docs.graphqleditor.com
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
GraphiQL in Cloud
live demo also provides GraphiQL in cloud and faker based GraphQL mock backend
Develop or use standalone
npm i graphql-editor
import * as React from 'react';
import { render } from 'react-dom';
import { Editor } from '../src/index';
class App extends React.Component<
{},
{
editorVisible: boolean;
}
> {
state = {
editorVisible: true
};
render() {
return (
<div
style={{
width: '100%',
height: '100%',
display: 'grid',
gridTemplateColumns: this.state.editorVisible ? `auto 1fr` : '1fr',
gridTemplateRows: '1fr'
}}
>
<Editor editorVisible={this.state.editorVisible} />
</div>
);
}
}
render(<App />, document.getElementById('root'));
Basic Operations
Create Type
Tag root query, mutation, operation
List and non-null types
Connecting nodes
Support
Ask the community on Spectrum
Contribute
For a complete guide to contributing to GraphQL Editor, see the Contribution Guide.
- Fork this repo
- Create your feature branch: git checkout -b feature-name
- Commit your changes: git commit -am 'Add some feature'
- Push to the branch: git push origin my-new-feature
- Submit a pull request
Cloud Backend
As cloud backend is coming soon, please do subscribe on our website to stay tuned.
Underlying Diagram technology
Whole graphql-editor is based on underlying diagram technology. We need much more help there feel free to contribute!