All Projects β†’ graphql-editor β†’ Graphql Editor

graphql-editor / Graphql Editor

Licence: mit
πŸ“Ί Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual πŸ”· nodes and explore GraphQL API with beautiful UI. Even πŸ’ can do that!

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Graphql Editor

Gistlyn
Run Roslyn Gists
Stars: ✭ 75 (-98.63%)
Mutual labels:  tutorial, playground, editor
Intellij Micropython
Plugin for MicroPython devices in PyCharm and IntelliJ
Stars: ✭ 312 (-94.31%)
Mutual labels:  ide, editor
Spacevim
A community-driven modular vim/neovim distribution - The ultimate vimrc
Stars: ✭ 17,558 (+220.11%)
Mutual labels:  ide, editor
Figma Graphql
The reimagined Figma API (super)powered by GraphQL
Stars: ✭ 354 (-93.55%)
Mutual labels:  graphql, tools
Cattle
🐺 Platform to Run and Share Code. It Supports PHP, Python, Ruby, Java, Go, Rust, C and C++.
Stars: ✭ 40 (-99.27%)
Mutual labels:  playground, sandbox
Dexed
IDE for the D programming language, its compilers, tools and libraries
Stars: ✭ 255 (-95.35%)
Mutual labels:  ide, editor
Gitpod
Gitpod automates the provisioning of ready-to-code development environments.
Stars: ✭ 6,261 (+14.15%)
Mutual labels:  ide, editor
Deploy Strapi On Aws
Deploying a Strapi API on AWS (EC2 & RDS & S3)
Stars: ✭ 121 (-97.79%)
Mutual labels:  graphql, tutorial
Luaperfect
A pure C++ Lua IDE project, aimed to be the fastest and lightest Lua IDE in the world.
Stars: ✭ 368 (-93.29%)
Mutual labels:  ide, editor
Phoenix Chat Example
πŸ’¬ A Step-by-Step Beginners Tutorial for Building, Testing & Deploying a Chat app in Phoenix 1.5.5 πŸš€
Stars: ✭ 452 (-91.76%)
Mutual labels:  tutorial, learn
Vim Practice
πŸ’˜ Vim is awesome! Here is my practice and study log.
Stars: ✭ 452 (-91.76%)
Mutual labels:  tutorial, editor
Graphql Ruby
GraphQL Ruby example for How To GraphQL
Stars: ✭ 231 (-95.79%)
Mutual labels:  graphql, tutorial
Modern Graphql Tutorial
πŸ“– A simple and easy GraphQL tutorial to get started with GraphQL.
Stars: ✭ 219 (-96.01%)
Mutual labels:  graphql, tutorial
Slingcode
personal computing platform
Stars: ✭ 277 (-94.95%)
Mutual labels:  ide, editor
Twitter Clone With Graphql Reactnative
Stars: ✭ 155 (-97.17%)
Mutual labels:  graphql, tutorial
Learn React App
Application that will help you learn React fundamentals. Install this application locally - there's tutorial, code snippets and exercises. The main objective of this project is to help you get off the ground with React!
Stars: ✭ 3,364 (-38.67%)
Mutual labels:  tutorial, learn
Cakeshop
An integrated development environment and SDK for Ethereum-like ledgers
Stars: ✭ 491 (-91.05%)
Mutual labels:  ide, editor
Omdb Graphql Wrapper
πŸš€ GraphQL wrapper for the OMDb API
Stars: ✭ 45 (-99.18%)
Mutual labels:  graphql, playground
Gatsbytutorials.com
A community-updated list of video, audio and written tutorials to help you learn GatsbyJS. πŸ‘©β€πŸ’»
Stars: ✭ 109 (-98.01%)
Mutual labels:  graphql, tutorial
Cope
A modern IDE for writing classical Chinese poetry 格律诗编辑程序
Stars: ✭ 362 (-93.4%)
Mutual labels:  ide, editor

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

Creator/Editor

GraphQL Editor

Relations

GraphQL Editor

Table of contents

License

MIT

Installation

npm i -D worker-loader css-loader file-loader webpack
npm i  graphql-editor react react-dom monaco-editor @monaco-editor/react

Usage

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<PassedSchema>({
    code: schemas.pizza,
    libraries: schemas.pizzaLibrary,
  });
  return (
    <div
      style={{
        flex: 1,
        width: '100%',
        height: '100%',
        alignSelf: 'stretch',
        display: 'flex',
        position: 'relative',
      }}
    >
      <GraphQLEditor
        onSchemaChange={(props) => {
          setMySchema(props);
        }}
        schema={mySchema}
      />
    </div>
  );
};

render(<App />, document.getElementById('root'));

GraphQLEditor component props

GraphQLEditor

property type description
schema PassedSchema value of the schema
setSchema (props: PassedSchema, isInvalid?: boolean) => void; set value of the schema
readonly boolean lock editing
diffSchemas { oldSchema: PassedSchema; newSchema: PassedSchema} view state
theme EditorTheme current theme
state { pane: ActivePane, code: boolean } view state
onStateChange ( state?:{ pane: ActivePane, code: boolean } ) => void; on state changed
onTreeChange (tree: ParserTree) => void on tree state changed

PassedSchema

property type description
code string value of the schema code
libraries string value of the current libraries

ActivePane

"relation" | "diagram" | "hierarchy"

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].