# graphql-editor/graphql-editor

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/graphql-editor-graphql-editor).**

6,068 stars · 285 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/graphql-editor/graphql-editor
- Homepage: https://graphqleditor.com/
- awesome-repositories: https://awesome-repositories.com/repository/graphql-editor-graphql-editor.md

## Description

GraphQL Editor is a collaborative workspace platform for designing, editing, and managing GraphQL schemas. It provides an interactive graph-based visual editor that lets teams create and explore schemas without writing code, alongside a full-featured Monaco text IDE with real-time syntax validation. The platform supports AI-powered schema generation from natural language prompts, federated schema composition that visualizes type merging across subgraphs, and AST-level schema comparison that highlights structural differences between versions.

The platform distinguishes itself through its bidirectional navigation between visual graph nodes and code editor cursor positions, enabling seamless editing across both interfaces. It includes a tree-based visual query builder that constructs GraphQL queries through clickable forms, and automatically synchronizes interface fields to implementing types with propagated edits. Teams can manage projects within workspaces with role-based permissions (Owner, Admin, Editor, Viewer), invite members via email or shareable magic links, and import schemas from GitHub repositories or remote URLs with optional read-only sync.

The platform supports project creation from scratch, from pre-built library templates (neo4j, Apollo, Dgraph, AWS), or from existing schemas. It generates Markdown documentation from schema description fields, provides read-only schema viewer embedding for external applications, and includes mocking tools that return type-safe responses against the schema.

## Tags

### Business & Productivity Software

- [GraphQL Schema Workspaces](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-tools/workspace-collaboration/graphql-schema-workspaces.md) — Manages GraphQL schemas and projects within a team workspace with role-based permissions and member invitations.

### Data & Databases

- [Interactive Graph Designers](https://awesome-repositories.com/f/data-databases/structured-data-schemas/graph-based-schema-design/interactive-graph-designers.md) — Provides an interactive graph-based interface for designing and editing GraphQL schemas without writing code. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))
- [AST-Level Schema Comparisons](https://awesome-repositories.com/f/data-databases/data-schema-management/schema-versioning/ast-level-schema-comparisons.md) — Compares GraphQL schemas at the AST level to highlight structural differences between versions. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))
- [GraphQL Schema Version Comparisons](https://awesome-repositories.com/f/data-databases/schema-comparison-tools/graphql-schema-version-comparisons.md) — Shows AST-level differences between two GraphQL schema versions, ignoring formatting and line numbers. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))
- [Interactive Editors](https://awesome-repositories.com/f/data-databases/structured-data-schemas/graph-based-schema-design/interactive-editors.md) — Edits GraphQL schemas by manipulating nodes and edges in an interactive directed graph with bidirectional sync to text.
- [Interactive Graph Explorers](https://awesome-repositories.com/f/data-databases/structured-data-schemas/graph-based-schema-design/interactive-graph-explorers.md) — Enables creating and exploring GraphQL schemas through an interactive graph-based interface for rapid onboarding. ([source](https://graphqleditor.com/))
- [AI-Powered Generators](https://awesome-repositories.com/f/data-databases/database-schema-introspection-tools/graphql-schema-generators/ai-powered-generators.md) — Provides an AI prompt interface that produces an initial GraphQL schema when starting a blank or library-based project.
- [AI-Prompted Schema Generations](https://awesome-repositories.com/f/data-databases/database-schema-introspection-tools/graphql-schema-generators/ai-prompted-schema-generations.md) — Generates initial GraphQL schemas from natural language prompts using AI assistance. ([source](https://graphqleditor.com/docs/))
- [GraphQL Schema Comparators](https://awesome-repositories.com/f/data-databases/schema-comparison-tools/graphql-schema-comparators.md) — Compares two GraphQL schemas by sorting and diffing their abstract syntax trees, ignoring formatting differences.

### Development Tools & Productivity

- [Visual Editors](https://awesome-repositories.com/f/development-tools-productivity/graphql-schema-browsers/visual-editors.md) — Provides an interactive graph-based interface for designing, editing, and exploring GraphQL schemas without writing code.
- [Embedded Code Editors](https://awesome-repositories.com/f/development-tools-productivity/ide-real-time-feedback/embedded-code-editors.md) — Embeds a full-featured Monaco code editor with real-time GraphQL syntax validation and cursor-to-graph navigation.
- [Workspace Creation](https://awesome-repositories.com/f/development-tools-productivity/workspace-management/project-workspaces/workspace-creation.md) — Creates collaborative namespaces for teams to manage GraphQL schemas and projects together. ([source](https://graphqleditor.com/docs/))
- [Workspace Organization](https://awesome-repositories.com/f/development-tools-productivity/workspace-management/project-workspaces/workspace-organization.md) — Groups related projects and their members into a shared workspace for streamlined management and access control. ([source](https://graphqleditor.com/docs))
- [Visual-to-Code Navigators](https://awesome-repositories.com/f/development-tools-productivity/code-navigators/visual-to-code-navigators.md) — Links visual graph nodes to corresponding code editor positions for seamless bidirectional navigation. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))
- [Code-to-Graph Parsers](https://awesome-repositories.com/f/development-tools-productivity/visual-to-code-sync-engines/code-to-graph-parsers.md) — Parses code cursor positions into visual graph node highlights for navigation. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))

### Security & Cryptography

- [Role-Based Access Control](https://awesome-repositories.com/f/security-cryptography/role-based-access-control.md) — Controls project access with Owner, Admin, Editor, and Viewer roles for workspace members. ([source](https://graphqleditor.com/docs/))
- [Workspace Role Assignments](https://awesome-repositories.com/f/security-cryptography/role-based-access-control/workspace-role-assignments.md) — Controls project visibility and editing permissions through Owner, Admin, Editor, and Viewer roles per workspace.

### Software Engineering & Architecture

- [GraphQL](https://awesome-repositories.com/f/software-engineering-architecture/json-schema-validation/syntax-validations/graphql.md) — Provides a built-in Monaco code editor with real-time GraphQL syntax validation for schema editing. ([source](https://cdn.jsdelivr.net/gh/graphql-editor/graphql-editor@main/README.md))
- [GraphQL Schema Project Creations](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-management/open-source-governance/project-management/project-initializations/customer-linked-project-creations/environment-scoped-project-creations/graphql-schema-project-creations.md) — Provides multiple pathways to start GraphQL schema projects, including from scratch, URLs, GitHub, and library templates. ([source](https://graphqleditor.com/docs/))

### Web Development

- [Federation Engines](https://awesome-repositories.com/f/web-development/graphql-apis/federation-engines.md) — Composes multiple GraphQL subgraphs into a unified API and visualizes type merging across them. ([source](https://graphqleditor.com/))
- [Schema Explorers](https://awesome-repositories.com/f/web-development/graphql-schema-management/schema-explorers.md) — Provides an interactive graph-based visual explorer for browsing and onboarding large GraphQL schemas. ([source](https://graphqleditor.com/))
- [GraphQL Query Builders](https://awesome-repositories.com/f/web-development/graphql-query-builders.md) — Provides a tree-based query builder that lets users construct GraphQL queries through clickable forms instead of manual typing.
- [Federated Composers](https://awesome-repositories.com/f/web-development/graphql-schema-management/federated-composers.md) — Imports one GraphQL schema into another and visualizes how federated types merge in the graph view.
- [GitHub Schema Imports](https://awesome-repositories.com/f/web-development/graphql-schema-management/github-schema-imports.md) — Imports GraphQL schemas from GitHub repositories and supports committing changes back to the source. ([source](https://graphqleditor.com/docs))
- [Schema Comparators](https://awesome-repositories.com/f/web-development/graphql-schema-management/schema-comparators.md) — Compares two GraphQL schemas at the AST level to highlight structural differences between versions.
- [GraphQL Schema Library Templates](https://awesome-repositories.com/f/web-development/react-application-development/project-libraries/graphql-schema-library-templates.md) — Ships pre-built schema library templates for rapid project initialization with popular GraphQL backends. ([source](https://graphqleditor.com/docs))

### Part of an Awesome List

- [Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/development-tools.md) — Visual editor and IDE for GraphQL development.