{"id":47862,"library":"graphql-editor","title":"GraphQL Editor","description":"GraphQL Editor is a visual node editor for GraphQL that allows developers to design, build, and manage GraphQL schemas using a drag-and-drop interface. Current stable version is 7.3.1. It is actively maintained with frequent releases. Key differentiators include real-time visualization, support for resolver binding, and integration with Monaco Editor for code editing. It requires React 18 and other peer dependencies.","status":"active","version":"7.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/graphql-editor/graphql-editor","tags":["javascript","typescript"],"install":[{"cmd":"npm install graphql-editor","lang":"bash","label":"npm"},{"cmd":"yarn add graphql-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add graphql-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the Monaco code editor component for editing GraphQL schemas and resolvers.","package":"@monaco-editor/react","optional":false},{"reason":"Underlying editor core required by @monaco-editor/react.","package":"monaco-editor","optional":false},{"reason":"UI framework dependency (React 18+).","package":"react","optional":false},{"reason":"React DOM renderer.","package":"react-dom","optional":false},{"reason":"Required for bundling; graphql-editor uses webpack worker-loader.","package":"webpack","optional":false},{"reason":"Webpack loader for web workers used by Monaco Editor.","package":"worker-loader","optional":false},{"reason":"Webpack loader for CSS files.","package":"css-loader","optional":true},{"reason":"Webpack loader for font files used by Monaco Editor.","package":"file-loader","optional":true}],"imports":[{"note":"Named export, not default. ESM-only since v7.","wrong":"import GraphQLDocumentor from 'graphql-editor'","symbol":"GraphQLDocumentor","correct":"import { GraphQLDocumentor } from 'graphql-editor'"},{"note":"Named export. CJS require works only with default export, but this is a named export.","wrong":"const GraphQLEditor = require('graphql-editor')","symbol":"GraphQLEditor","correct":"import { GraphQLEditor } from 'graphql-editor'"},{"note":"Typo error in the symbol name.","wrong":"import { GrapqhQLEditorProvider } from 'graphql-editor'","symbol":"GraphQLEditorProvider","correct":"import { GraphQLEditorProvider } from 'graphql-editor'"},{"note":"React hook, should be used inside a component wrapped in GraphQLEditorProvider.","wrong":null,"symbol":"useGraphQLEditor","correct":"import { useGraphQLEditor } from 'graphql-editor'"}],"quickstart":{"code":"import React from 'react';\nimport { GraphQLEditor } from 'graphql-editor';\nimport '@monaco-editor/react';\n\nfunction App() {\n  const schema = `type Query { hello: String }`;\n  return (\n    <div style={{ height: '100vh' }}>\n      <GraphQLEditor\n        schema={schema}\n        setSchema={(s) => console.log(s)}\n        onSave={() => console.log('Saved')}\n        defaultLanguage=\"en\"\n      />\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Renders a GraphQL editor component with a basic schema and save handler. Shows the minimal setup with React 18."},"warnings":[{"fix":"Change 'import GraphQLEditor from ...' to 'import { GraphQLEditor } from ...'","message":"GraphQLEditor is now a named export instead of a default export. Old imports will break.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Upgrade to React 18","message":"Requires React 18+. Older versions of React are not supported.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Use 'onChange' instead of 'onSave'","message":"The 'GraphQLDocumentor' component's 'onSave' prop has been deprecated in favor of 'onChange'.","severity":"deprecated","affected_versions":">=7.1.0"},{"fix":"Ensure webpack config includes worker-loader for .worker.ts files and file-loader for fonts.","message":"Monaco Editor and worker-loader must be correctly configured in webpack. If not, the editor may fail silently.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Pass schema as a string, not as a GraphQLSchema object.","message":"The editor's schema prop is a string; using a parsed GraphQLSchema object will break.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"search_vec":"'18':63 '7.3.1':33 'activ':36 'allow':13 'bind':51 'build':17 'code':58 'current':29 'depend':67 'design':16 'develop':14 'differenti':42 'drag':25 'drag-and-drop':24 'drop':27 'edit':59 'editor':2,4,9,56 'frequent':39 'graphql':1,3,11,20 'includ':43 'integr':53 'interfac':28 'javascript':68 'key':41 'maintain':37 'manag':19 'monaco':55 'node':8 'peer':66 'react':62 'real':45 'real-tim':44 'releas':40 'requir':61 'resolv':50 'schema':21 'stabl':30 'support':48 'time':46 'typescript':69 'use':22 'version':31 'visual':7,47","created_at":"2026-06-07T16:53:41.982239+00:00","updated_at":"2026-06-07T16:53:41.982239+00:00","problems":[{"fix":"Run 'npm install graphql-editor' and ensure import is correct: 'import { GraphQLEditor } from 'graphql-editor''","cause":"Package not installed or import path incorrect.","error":"Module not found: Can't resolve 'graphql-editor'"},{"fix":"Wrap your component with <GraphQLEditorProvider> before using useGraphQLEditor.","cause":"useGraphQLEditor hook used outside of a GraphQLEditorProvider.","error":"Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Add 'worker-loader' to webpack config: { test: /\\.worker\\.ts$/, use: 'worker-loader' }","cause":"Missing or misconfigured worker-loader for Monaco Editor workers.","error":"Monaco Editor not loading. Check your webpack configuration for worker-loader."},{"fix":"Ensure the 'schema' prop is a non-null string.","cause":"The GraphQLEditor component is not receiving a schema string prop.","error":"TypeError: Cannot destructure property 'schema' of 'undefined' or 'null'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://graphqleditor.com","github":"https://github.com/graphql-editor/graphql-editor","docs":null,"changelog":null,"pypi":null,"npm":"graphql-editor","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}