DEV Community

Jack Green
Jack Green

Posted on Originally published at tools.jackgreen.top

GraphQL Schema Diff & Visualizer: Free Browser-Based Tool

GraphQL Schema Diff & Visualizer: Free Browser-Based Tool

Compare two GraphQL schemas and instantly see what changed — added, removed, and modified types and fields.

Why Another Diff Tool?

GraphQL schemas evolve constantly. Whether you're versioning your API, reviewing a PR, or documenting breaking changes, you need to see the diff clearly. Most online tools:

  • Upload your schema to their server (privacy risk)
  • Require signup or payment for full features
  • Don't work offline
  • Track your data

This tool solves all three problems with a single-page app that runs entirely in your browser.

Key Features

Visual Diff Tree — Collapsible tree view with color-coded badges. Green for added, red for removed, yellow for changed.

Pure Client-Side — No API calls. Your schemas never leave your device.

Zero Dependencies — No npm packages, no build step. Just paste, diff, copy.

Free Forever — No signup, no credit card, no trial. Just works.

Try It

https://tools.jackgreen.top/graphql-schema-diff-visualizer-as-a-graphql-inspector/

How It Works

  1. Paste your original GraphQL schema in the left panel
  2. Paste your updated schema in the right panel
  3. Click "Diff Schemas"
  4. Review the visual diff or copy/download the JSON result

Handles: types, interfaces, enums, unions, input types, list/non-null types, and directives.

Built for developers who value their privacy and time.

Top comments (0)