GitHub
Schema Planner
Internal visual GraphQL schema editor built beyond the original spec. Org-restricted GitHub OAuth, full branch management, immutable AST mutations via graphql-js, CodeMirror 6 query sandbox with autocomplete and inline validation, OpenSearch field suggestions, full Git commit/PR workflow with stale detection, 3-panel resizable UI, field explorer, and query skeleton builder.
React
TypeScript
GraphQL
CodeMirror 6
graphql-js
Overview
Schema Planner was scoped as a simple schema viewer. I built it into a full visual GraphQL editor — a tool complex enough that the team uses it daily to manage production schemas without touching raw SDL files. The scope grew because the problem demanded it: schema changes touch everything downstream, and the existing workflow was error-prone.
The editor runs as a 3-panel resizable UI — field explorer on the left, schema editor in the center, and a CodeMirror 6 query sandbox on the right with full autocomplete and inline validation. Under the hood, every schema mutation is an immutable AST transformation via graphql-js, keeping the undo stack clean and diffs predictable. OpenSearch powers field suggestions. The entire Git workflow is built in: org-restricted GitHub OAuth, branch creation and switching, commit history, pull request creation with stale detection, and merge controls.
Screenshots
3-Panel Editor — Schema Tree · Field Selector · Query Sandbox
Architecture
┌──────────────────────────────────────────────┐
│ 3-PANEL RESIZABLE UI │
│ Field Explorer │ Editor │ Query Sandbox │
└──────────────────────┬───────────────────────┘
│
┌──────────┬───────────┴───────────┬───────────┐
│ GRAPHQL │ CODEMIRROR 6 │ OPENSEARCH│
│ AST │ Autocomplete │ Field │
│ (graphql │ Validation │ Suggest- │
│ -js) │ │ ions │
└────┬─────┘────────────────────────┘───┬──────┘
│ │
┌────┴──────────────────────────────────┴──────┐
│ GIT WORKFLOW │
│ GitHub OAuth · Branches · PRs · Commits │
└──────────────────────────────────────────────┘
3-panel UI backed by immutable AST mutations, CodeMirror 6, OpenSearch suggestions, and a full Git workflow layer.
Capabilities
AST Mutations
Immutable schema modifications via graphql-js — every edit produces a new AST node, keeping undo history clean and diffs predictable.
Query Sandbox
CodeMirror 6 editor with full GraphQL autocomplete and inline validation, providing real-time feedback as queries are composed.
Branch Management
Create, switch, and manage schema branches with full isolation — parallel development without conflicts.
PR Workflow
Full Git commit and pull request flow with stale detection, ensuring schema changes go through proper review before merge.
Field Explorer
Browse and search all schema fields across types with OpenSearch-powered suggestions and hierarchical navigation.
Query Builder
Generate query skeletons from schema types — select fields, set arguments, and get a runnable query without writing a line.
Stack
React
TypeScript
graphql-js
CodeMirror 6
OpenSearch
GitHub OAuth
Git API