- Notifications
You must be signed in to change notification settings - Fork285
📺 Visual Editor & GraphQL IDE.
License
graphql-editor/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 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!
GraphQL Editor is a GraphQL visualizer and designer. It allows you to create and display GraphQL schemas as a visual graph.
- How it works
- 💡 What is GraphQL Editor?
- 🚀 Features
- Table of contents
- License
- Installation
- GraphQL SDL Editor
- GraphQL Gql Editor
- Support
- Team
- Underlying Parsing technology
- GraphQL Tutorials
- Authors
Create GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation
- Visual GraphQL Editing.
- GraphQL Monaco based IDE
- Selection observer. When node is clicked in visual Graph it automatically scrolls the code to the same node. When cursor is moved in code space
- Automatically bound interfaces. When interface is implemented on type fields of the interface add to the type. If it is already implemented editing interface edits all implementing nodes
- Writing,generating and displaying GraphQL Documentation in markdown. Generating GraphQL docs out of GraphQL descriptions in markdown
- Comparing different versions of GraphQL schemas with special node-sort sorting nodes and its fields to show the real difference in GraphQL Schema on AST omitting line numbers
npm i -D worker-loader css-loader file-loader webpacknpm i graphql-editor react react-dom monaco-editor @monaco-editor/reactimportReact,{useState}from'react';import{render}from'react-dom';import{GraphQLEditor,PassedSchema}from'graphql-editor';constschemas={pizza:`type Query{pizzas: [Pizza!]}`,pizzaLibrary:`type Pizza{ name:String;}`,};exportconstApp=()=>{const[mySchema,setMySchema]=useState<PassedSchema>({code:schemas.pizza,libraries:schemas.pizzaLibrary,});return(<divstyle={{flex:1,width:'100%',height:'100%',alignSelf:'stretch',display:'flex',position:'relative',}}><GraphQLEditorsetSchema={(props)=>{setMySchema(props);}}schema={mySchema}/></div>);};render(<App/>,document.getElementById('root'));
GraphQLEditor
| property | type | description | required | default |
|---|---|---|---|---|
| schema | PassedSchema | value of the schema | true | |
| setSchema | (props: PassedSchema, isInvalid?: boolean) => void; | Function to be called when schema is set by the editor | true | |
| readonly | boolean | lock editing | false | false |
| diffSchemas | Record<string, string> | Record containing graphql schemas with "name" as a key and graphql schema as a "value" | false | |
| theme | EditorTheme | current theme | MainTheme | |
| routeState | EditorRoutes | listen to route changes. Don't bind it with routeState though! | false | |
| onStateChange | ( r: EditorRoutes ) => void; | on route state changed | false | |
| onTreeChange | (tree: ParserTree) => void | Function that could be fired if tree changes | false | |
| placeholder | string | placeholder - empty editor | false |
PassedSchema
| property | type | description |
|---|---|---|
| code | string | value of the schema code |
| libraries | string | value of the current libraries |
ActivePane
"relation" | "diagram" | "diff"
importReact,{useState}from'react';import{render}from'react-dom';import{GraphQLEditor,PassedSchema}from'graphql-editor';constschema=`type Query{pizzas: [Pizza!]}`;exportconstApp=()=>{const[gql,setGql]=useState('');return(||<divstyle={{flex:1,width:'100%',height:'100%',alignSelf:'stretch',display:'flex',position:'relative',}}><GraphQLGqlEditorgql={gql}setGql={(gqlString)=>setGql(gqlString)}schema={{code:schema}}/></div>);};render(<App/>,document.getElementById('root'));
GraphQLEditor
| property | type | description | required | default |
|---|---|---|---|---|
| schema | PassedSchema | value of the schema | true | |
| gql | string | value of the gql | true | |
| placeholder | string | placeholder - empty editor | false | undefined |
| setGql | (props: PassedSchema, isInvalid?: boolean) => void; | set value of the gql | true | undefined |
| readonly | boolean | lock editing | false | false |
| theme | EditorTheme | current theme | false | MainTheme |
If you only want to view the schema and embed it somewhere in your app you can use our embedded editor for that reason
importReactfrom'react';import{EmbeddedGraphQLEditor}from'graphql-editor';import*asschemasfrom'../schema';exportconstembeddedEditor=()=>{return(<divstyle={{flex:1,width:'100%',height:'100%',alignSelf:'stretch',display:'flex',position:'relative',}}><EmbeddedGraphQLEditorschema={{code:schemas.googleDirectionsNew,libraries:'',}}/></div>);};
For support and help, join ourDiscord Channel.
We are devs and contributors to the GraphQL ecosystem with a lot of experience. We want to enter Vendure to create developer-friendly e-commerce solutions that don't rely on clunky and outdated stuff like Shopify's Liquid wrapped with JavaScript.
Authors:
GraphQL-Editor parsing is based on underlyingZeus technology.
To learn more about how to use GraphQL, we recommend:
About
📺 Visual Editor & GraphQL IDE.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.