Feat: Schema Diff Visualizer — side-by-side schema comparison with graph diff overlay

[rattnak]

Feature Details

Problem Statement

When iterating on a JSON Schema, it's hard to understand what structurally changed between two versions. You have to manually read both schemas side by side and mentally trace which $defs, properties, or types were added, removed, or modified. There's no visual way to compare them.

Proposed Solution

Add a "Diff" toggle button in the editor panel toolbar that switches Monaco into its native diff editor mode (splitting the editor into two panes). The left pane holds the current schema; the right pane accepts a second schema to compare against. The graph view updates to reflect both schemas simultaneously, with nodes color-coded by diff status:

• Green: added in the new schema
• Red: removed from the original
• Yellow: modified (e.g. type change, added/removed properties)
• Default: unchanged

Clicking a highlighted node in the graph scrolls the diff editor to the corresponding change.

Demo Video/Screenshots

N/A

Alternatives Considered

• Manual comparison: reading two schema files side by side in a text editor. Works but gives no structural overview and doesn't scale with schema complexity.
• External diff tools (e.g. jsondiff): produce textual diffs but have no graph context, so understanding the structural impact of a change still requires mental tracing.

Additional Context

Monaco's diff editor (monaco.editor.createDiffEditor) is already bundled as a dependency, so this requires no new packages. The graph diff layer can be built on top of the existing processAST pipeline by running it twice, once per schema, and matching nodes by URI fragment for stable identity comparison.

Good First Issue

• I believe this issue is a good first issue for new contributors.

Contribution

• I am willing to work on this feature.

[adityayadav-dev]

Hey @rattnak, I was thinking about this from a slightly different perspective — the primary goal of the JSON Schema Visualizer is to clearly visualize the schema, rather than focus heavily on diffing.

Since users may add, remove, or modify parts of the schema based on their use case, emphasizing visualization (with more space and clarity) might be more aligned with the core purpose.

That said, I’m happy to go with whatever @AgniveshChaubey prefers 👍

[rattnak]

That's a fair point. I'd see this as fully opt-in. The default experience stays unchanged; the diff mode only activates when the user clicks the "Diff" toggle, so it never competes with the core visualization. Does that address your concern?

[adityayadav-dev]

That makes sense 👍

If it’s opt-in via a toggle and doesn’t affect the default visualization experience, then it addresses my concern and works well.

[rattnak]

Hi @AgniveshChaubey, could you please share your thoughts on this? I’d be happy to start working on it once it’s assigned to me.

[AgniveshChaubey]

Can you come up with a rough design on how it would look visually?