{"id":13452563,"url":"https://github.com/graphql-editor/graphql-editor","last_synced_at":"2025-05-07T11:50:09.126Z","repository":{"id":38355884,"uuid":"149310214","full_name":"graphql-editor/graphql-editor","owner":"graphql-editor","description":"📺 Visual Editor \u0026 GraphQL IDE. ","archived":false,"fork":false,"pushed_at":"2025-01-13T09:10:23.000Z","size":32378,"stargazers_count":6026,"open_issues_count":20,"forks_count":283,"subscribers_count":87,"default_branch":"master","last_synced_at":"2025-04-27T19:59:59.959Z","etag":null,"topics":["graphql","ide","playground","tool","tools","visualisation"],"latest_commit_sha":null,"homepage":"https://graphqleditor.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphql-editor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-18T15:22:58.000Z","updated_at":"2025-04-27T10:40:28.000Z","dependencies_parsed_at":"2023-02-19T08:30:35.640Z","dependency_job_id":"97b5adbf-3e18-4ff3-94eb-9aab5db63ff1","html_url":"https://github.com/graphql-editor/graphql-editor","commit_stats":{"total_commits":963,"total_committers":22,"mean_commits":43.77272727272727,"dds":0.1443406022845275,"last_synced_commit":"394be812452c0eb163cb5891746cd5cb46441cd5"},"previous_names":[],"tags_count":324,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphql-editor%2Fgraphql-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphql-editor","download_url":"https://codeload.github.com/graphql-editor/graphql-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252873951,"owners_count":21817708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","ide","playground","tool","tools","visualisation"],"created_at":"2024-07-31T07:01:27.623Z","updated_at":"2025-05-07T11:50:09.063Z","avatar_url":"https://github.com/graphql-editor.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/logo.gif\"\u003e\n\u003c/p\u003e\n\u003ch3 align=\"center\"\u003eGraph sorcery, that makes reading GraphQL schemas easier!\u003c/h3\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\u0026label=license)](https://www.apache.org/licenses/LICENSE-2.0.html)\n[![stars](https://img.shields.io/github/stars/graphql-editor/graphql-editor?style=for-the-badge\u0026label=stars)](https://github.com/apache/incubator-streampark/stargazers)\n[![npm](https://img.shields.io/npm/v/graphql-editor.svg?style=for-the-badge)](https://www.npmjs.com/package/graphql-editor)\n[![npm downloads](https://img.shields.io/npm/dt/graphql-editor.svg?style=for-the-badge)](https://www.npmjs.com/package/graphql-editor)\n[![Twitter](https://img.shields.io/twitter/follow/GraphQLEditor?label=follow\u0026logo=twitter\u0026style=for-the-badge)](https://twitter.com/GraphQLEditor)\n\n**[Website](https://graphqleditor.com)**\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;**[Documentation](https://graphqleditor.com/docs)**\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;**[Discord](https://discord.gg/wVcZdmd)**\n\n![graphql-editor-gif](https://user-images.githubusercontent.com/779748/217845783-0f3c5cc3-d74d-4589-bfcb-79b49664935c.gif)\n\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\nGraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code.\n\nWith GraphQL Editor you can create visual diagrams without writing any code or present your schema in a nice way!\n\n\u003ch4\u003eGraphQL Editor is Graph based system for reading and designing the GraphQL schema\u003c/h4\u003e\n\n\u003e GraphQL Editor is a GraphQL visualizer and designer. It allows you to create and display GraphQL schemas as a visual graph.\n\n\u003cbr /\u003e\n\n## Table of contents\n\n- [How it works](#how-it-works)\n- [💡 What is GraphQL Editor?](#-what-is-graphql-editor)\n- [🚀 Features](#-features)\n- [Table of contents](#table-of-contents)\n- [License](#license)\n- [Installation](#installation)\n- [GraphQL SDL Editor](#graphql-sdl-editor)\n  - [Usage](#usage)\n  - [GraphQLEditor component props](#graphqleditor-component-props)\n- [GraphQL Gql Editor](#graphql-gql-editor)\n  - [Usage](#usage-1)\n  - [GraphQLGqlEditor component props](#graphqlgqleditor-component-props)\n  - [GraphQL Embedded Readonly Editor](#graphql-embedded-readonly-editor)\n- [Support](#support)\n- [Team](#team)\n- [Underlying Parsing technology](#underlying-parsing-technology)\n- [GraphQL Tutorials](#graphql-tutorials)\n- [Authors](#authors)\n\n\u003cbr /\u003e\n\n## How It Works\n\nCreate GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation\n\n\u003cbr /\u003e\n\n## 🚀 Features\n\n- Visual GraphQL Editing.\n- GraphQL Monaco based IDE\n- 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\n- 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\n- Writing,generating and displaying GraphQL Documentation in markdown. Generating GraphQL docs out of GraphQL descriptions in markdown\n- 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\n\n\u003cbr /\u003e\n\n## Installation\n\n```\nnpm i -D worker-loader css-loader file-loader webpack\n```\n\n```\nnpm i  graphql-editor react react-dom monaco-editor @monaco-editor/react\n```\n\n\u003cbr /\u003e\n\n## GraphQL SDL Editor\n\n### Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { render } from 'react-dom';\nimport { GraphQLEditor, PassedSchema } from 'graphql-editor';\n\nconst schemas = {\n  pizza: `\ntype Query{\n\tpizzas: [Pizza!]\n}\n`,\n  pizzaLibrary: `\ntype Pizza{\n  name:String;\n}\n`,\n};\n\nexport const App = () =\u003e {\n  const [mySchema, setMySchema] = useState\u003cPassedSchema\u003e({\n    code: schemas.pizza,\n    libraries: schemas.pizzaLibrary,\n  });\n  return (\n    \u003cdiv\n      style={{\n        flex: 1,\n        width: '100%',\n        height: '100%',\n        alignSelf: 'stretch',\n        display: 'flex',\n        position: 'relative',\n      }}\n    \u003e\n      \u003cGraphQLEditor\n        setSchema={(props) =\u003e {\n          setMySchema(props);\n        }}\n        schema={mySchema}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n\u003cbr /\u003e\n\n### GraphQLEditor Component Props\n\n**GraphQLEditor**\n\n| property      | type                                                  | description                                                                            | required | default   |\n| ------------- | ----------------------------------------------------- | -------------------------------------------------------------------------------------- | -------- | --------- |\n| schema        | `PassedSchema`                                        | value of the schema                                                                    | true     |           |\n| setSchema     | `(props: PassedSchema, isInvalid?: boolean) =\u003e void;` | Function to be called when schema is set by the editor                                 | true     |           |\n| readonly      | `boolean`                                             | lock editing                                                                           | false    | false     |\n| diffSchemas   | `Record\u003cstring, string\u003e`                              | Record containing graphql schemas with \"name\" as a key and graphql schema as a \"value\" | false    |           |\n| theme         | `EditorTheme`                                         | current theme                                                                          |          | MainTheme |\n| routeState    | `EditorRoutes`                                        | listen to route changes. Don't bind it with routeState though!                         | false    |           |\n| onStateChange | `( r: EditorRoutes ) =\u003e void;`                        | on route state changed                                                                 | false    |           |\n| onTreeChange  | `(tree: ParserTree) =\u003e void`                          | Function that could be fired if tree changes                                           | false    |           |\n| placeholder   | `string`                                              | placeholder - empty editor                                                             | false    |           |\n\n\n\u003cbr /\u003e\n\n\n**PassedSchema**\n\n| property  | type     | description                    |\n| --------- | -------- | ------------------------------ |\n| code      | `string` | value of the schema code       |\n| libraries | `string` | value of the current libraries |\n\n\u003cbr /\u003e\n\n**ActivePane**\n\n`\"relation\" | \"diagram\" | \"diff\"`\n\n\u003cbr /\u003e\n\n## GraphQL Gql Editor\n\n### Usage\n\n```tsx\nimport React, { useState } from 'react';\nimport { render } from 'react-dom';\nimport { GraphQLEditor, PassedSchema } from 'graphql-editor';\n\nconst schema = `\ntype Query{\n\tpizzas: [Pizza!]\n}\n`;\n\nexport const App = () =\u003e {\n  const [gql, setGql] = useState('');\n  return ( ||\n    \u003cdiv\n      style={{\n        flex: 1,\n        width: '100%',\n        height: '100%',\n        alignSelf: 'stretch',\n        display: 'flex',\n        position: 'relative',\n      }}\n    \u003e\n      \u003cGraphQLGqlEditor\n        gql={gql}\n        setGql={(gqlString) =\u003e setGql(gqlString)}\n        schema={{ code: schema }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n\u003cbr /\u003e\n\n### GraphQLGqlEditor Component Props\n\n**GraphQLEditor**\n\n| property    | type                                                  | description                | required | default   |\n| ----------- | ----------------------------------------------------- | -------------------------- | -------- | --------- |\n| schema      | `PassedSchema`                                        | value of the schema        | true     |           |\n| gql         | `string`                                              | value of the gql           | true     |           |\n| placeholder | `string`                                              | placeholder - empty editor | false    | undefined |\n| setGql      | `(props: PassedSchema, isInvalid?: boolean) =\u003e void;` | set value of the gql       | true     | undefined |\n| readonly    | `boolean`                                             | lock editing               | false    | false     |\n| theme       | `EditorTheme`                                         | current theme              | false    | MainTheme |\n\n\n\u003cbr /\u003e\n\n\n### GraphQL Embedded Readonly Editor\n\nIf you only want to view the schema and embed it somewhere in your app you can use our embedded editor for that reason\n\n```tsx\nimport React from 'react';\nimport { EmbeddedGraphQLEditor } from 'graphql-editor';\nimport * as schemas from '../schema';\n\nexport const embeddedEditor = () =\u003e {\n  return (\n    \u003cdiv\n      style={{\n        flex: 1,\n        width: '100%',\n        height: '100%',\n        alignSelf: 'stretch',\n        display: 'flex',\n        position: 'relative',\n      }}\n    \u003e\n      \u003cEmbeddedGraphQLEditor\n        schema={{\n          code: schemas.googleDirectionsNew,\n          libraries: '',\n        }}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n\u003cbr /\u003e\n\n## MORE INFO\n\n## Support\n\nFor support and help, join our [Discord Channel](https://discord.gg/wVcZdmd).\n\n## \u003cspan\u003e\u003cimg src=\"https://github.com/user-attachments/assets/3a9c2be0-99dc-4a91-a506-834022adccae\" width=24px\u003e\u003c/span\u003e\u0026nbsp;\u0026nbsp;About Us\n\nWe 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.\n\n**Authors:**\n\n- [Artur Czemiel](https://github.com/aexol)\n- [GraphQL Editor](https://graphqleditor.com)\n- [Aexol](https://aexol.com)\n\n\u003cbr /\u003e\n\n## Underlying Parsing Technology\n\nGraphQL-Editor parsing is based on underlying [Zeus](https://github.com/graphql-editor/graphql-zeus) technology.\n\n\u003cbr /\u003e\n\n## GraphQL Tutorials\n\nTo learn more about how to use GraphQL, we recommend:\n\n- [Interactive GraphQL Tutorial](https://app.graphqleditor.com/?step=intro)\n- [GraphQL Blog](https://blog.graphqleditor.com/)\n\n\u003cbr /\u003e\n","funding_links":[],"categories":["TypeScript","graphql","⚙️ Backend \u0026 APIs","HarmonyOS","tools","Tools","\u003ca name=\"TypeScript\"\u003e\u003c/a\u003eTypeScript"],"sub_categories":["Windows Manager","Tools - Editors \u0026 IDEs \u0026 Explorers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphql-editor%2Fgraphql-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphql-editor%2Fgraphql-editor/lists"}