- Notifications
You must be signed in to change notification settings - Fork0
📺 Visual Editor for GraphQL. Draw GraphQL schemas using visual 🔷 nodes. Even 🐒 can do that!
License
Sondro/graphql-editor
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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!
Here is alive demo example of GraphQLEditor.
If you wish to contribute docs fromtypedoc are availble onhttps://graphql-editor.github.io/graphql-editor/
MIT
Create GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation
npm i graphql-editorimport*asReactfrom'react';import{render}from'react-dom';import{Editor}from'../src/index';classAppextendsReact.Component<{},{editorVisible:boolean;}>{state={editorVisible:true};render(){return(<divstyle={{width:'100%',height:'100%',display:'grid',gridTemplateColumns:this.state.editorVisible ?`auto 1fr` :'1fr',gridTemplateRows:'1fr'}}><EditoreditorVisible={this.state.editorVisible}/></div>);}}render(<App/>,document.getElementById('root'));
import*asReactfrom'react';import{render}from'react-dom';import{Editor}from'../src/index';constschema=`type Query{ hello: String!}schema{ query: Query}`classAppextendsReact.Component<{},{editorVisible:boolean;}>{state={editorVisible:true};render(){return(<divstyle={{width:'100%',height:'100%',display:'grid',gridTemplateColumns:this.state.editorVisible ?`auto 1fr` :'1fr',gridTemplateRows:'1fr'}}><EditoreditorVisible={false}readonly={true}schema={schema}/></div>);}}
Same as in preceeding example buteditorVisible is true
<EditoreditorVisible={true}readonly={true}schema={schema}/>
For a complete guide to contributing to GraphQL Editor, see theContribution 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
Whole graphql-editor is based on underlyingdiagram technology. We need much more help there feel free to contribute!
Whole graphql-editor parsing stuff is based on underlyingzeus technology. We need much more help there feel free to contribute!
Best GraphQL tutorialshere
About
📺 Visual Editor for GraphQL. Draw GraphQL schemas using visual 🔷 nodes. Even 🐒 can do that!
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- TypeScript99.6%
- HTML0.4%