GSOC 2025 : JSON Schema Visualization Tool - Interactive Graphical Viewer

[jagpreetrahi]

Project title JSON Schema Visualization Tool

Brief Description Understanding and working with JSON Schemas can become increasingly difficult as schemas grow in complexity, involving nested structures and numerous interdependencies. Developers and organizations often face challenges in comprehending, debugging, and effectively communicating the relationships between schema components, especially in large-scale projects. Existing tools lack the features needed to simplify the visualization and navigation of these schemas, leading to inefficiencies in schema development and maintenance. This project proposes an Interactive JSON Schema Visualization Tool to address these issues. The tool will offer a user-friendly graphical interface for visualizing and exploring JSON Schemas, making them more accessible and manageable for developers of all levels.

Expected Outcomes Intuitive Visualization : Represent JSON Schemas as graphs with nodes and edges, showing objects, properties, and references. Enhanced Developer Workflow : Enable schema debugging and editing directly within the visualization interface. Integration Capabilities : Offer an API or plugin to integrate the visualization tool with IDEs, CI/CD pipelines, or schema validation workflows. Accessibility Features : Include search and filtering options to locate specific elements in the schema quickly.

Skills Required JSON Schema Expertise : Proficiency in JSON Schema structure, dialects, and use cases.

Frontend Development: Experience with JavaScript frameworks (React, Vue.js) for interactive UI development , and skilled in visualization libraries like D3.js or Cytoscape.js.

Backend Development (Optional): Familiarity with backend technologies for API integration and handling large schemas.

Mentors @AgniveshChaubey

Expected Difficulty Medium.

Expected Time Commitment Approximately 175 hours, with significant time allocated to UI design, community feedback, and integration testing

[VishwapriyaVelumula]

Hello, I'm Vishwapriya, currently pursuing 3rd year of BTech. I didn't have any prior knowledge about JSON, but I'm interested in this idea, can anyone please tell me where to start and how to start.

[vishwajeet1729]

Hey @benjagm I am a bit confused. Since the backend is optional, are there any real advantages to implementing one?

Since this is primarily a frontend-based project, how would a local IDE connect to the frontend? Would this require developing an additional tool, like a lightweight extension for an IDE? However, such an extension wouldn't be widely applicable across different IDEs.

If the backend is not implemented, does that mean the integration part will be automatically skipped? Please clarify .

[jagpreetrahi]

Hey @vishwajeet1729 , this project aims to enhance the user experience when working with JSON schema by providing graphical visualization. There are multiple tools available for this, such as D3.js, Cytoscape.js, and vis.js. While the backend is optional, that doesn’t mean integration is automatically skipped—it depends on the use case. If backend functionality is required for data processing or storage, it can be implemented, but our primary focus remains on improving the experience. Regarding IDE integration, a lightweight extension could work, but its applicability across different IDEs would need consideration.

[gregsdennis]

Backends require server support and cost a fair amount of money to maintain: money that this project doesn't have.

[jagpreetrahi]

Yeah , this could also be the case

[vishwajeet1729]

@gregsdennis @jagpreetrahi do we have a community discussion link? I have some improvements that could be helpful.

[benjagm]

Hi everyone. Let's keep the discussion for ideas and improvements here. As of now, this is just an idea that needs to be ranked and needs a mentor. This means, depending on the idea's prioritization, this and other ideas could left out of the list of allocated slots.

[PRANJALRANA11]

hy pranal here looking forward to contribute to this issue

[ujjwaljha1]

I am interested to be mentor for this issue I have already desgined the visualizer for this issue or i am ready to be contributor.

[benjagm]

We appreciate your interest @ujjwaljha1 on becoming a mentor, but a JSON Schema mentor should have a solid track record as a JSON Schema Contributor and I think this is not the case.

[Pankajkumar7970]

Hey @jagpreetrahi, Regarding applicability across different IDEs, if we develop the tool as an extension it will be very difficult as we will have to create different extensions for different IDEs. So, to overcome this, can we develop our tool as a web app and develop an npm package along with it so that we can send our json file to our web app through terminal from any IDE. This approach saves a lot of time as we don't have make different extensions to target different IDEs and in future, upgrading and improving this tool would also be much easier.

[aialok]

Backends require server support and cost a fair amount of money to maintain: money that this project doesn't have.

If we build the backend on top of Cloudflare Workers, we might not need to pay extra, and it should work within our current plan.

[jagpreetrahi]

Hey @Pankajkumar7970 , we have already a platform for new learner as A Tour of Json Schema, so firstly we focusing on that only to improve the learning experience, if we get an chance for different IDEs then we think about it and totally depend on org members

[Pankajkumar7970]

@jagpreetrahi Sorry, but I didn't get what you want to say. Could you please elaborate it more?

[jagpreetrahi]

I wanna tell you that , we have already platform A tour of Json Schema , feel free to explore it

[peter-abhinav]

Really excited to contribute to this! Can't wait to get started! 🚀

[vidixha]

Regarding: Enhanced Developer Workflow : Enable schema debugging and editing directly within the visualization interface.

I think this requirement implicitly means we need a backend? Debugging would be easier and more straight-forward if the user can save checkpoints in case of complex schemas.

[jagpreetrahi]

Hey @AkshataABhat , due to the absence of a mentor, this project won't be part of GSoC 2025. You might want to explore other projects for your proposal or connect with members for any updates regarding this one

[Honyii]

Hurray! We have the amazing @AgniveshChaubey as a mentor for this project 🚀. In the following week, we will let all contributors know of next steps for this project.

[jagpreetrahi]

Hey @Honyii, I'm happy to have received this great information. Thanks!

[IVedantD]

Hi! I'm Vedant Damedhar and I'm interested in contributing to the JSON Schema Visualization Tool project (#868). I've reviewed the project details and would love to help build the interactive graphical viewer. Looking forward to working with the community! 👋

[jagpreetrahi]

Hey @AgniveshChaubey, As the proposal submission date is approaching, we haven’t received any qualification task yet. Could you please provide information regarding this? Having clarity on the task earlier would give us more time to complete it and prepare a well-structured proposal within the timeline.

Looking forward to your response. Thanks!

[AgniveshChaubey]

Hi everyone, thanks for your patience. As we are close to the proposal deadline, here are few points I'll be looking for in your proposals (which you can consider as qualifying tasks):

• Which tool you'll be using for schema visualization feature and why?
• Among the available schema validation tools, which one would you use for basic debugging feature and why?
• Apart from these, what other feature do you think could be added to this project and why?

Note: This project is relatively easy compared to others in the org. With the above points I'm mainly interested in seeing how you approach the 'WHY' behind your choices.

Good luck with your proposals!

[Pankajkumar7970]

Hey @AgniveshChaubey, thank you for the guidelines. Can't wait to start on the project 🤩

[jagpreetrahi]

Hey @AgniveshChaubey, I hope you're doing well. Should we consider editing the JSON schema as a core functionality or as an enhancement? Since our main focus is on representing the JSON schema as nodes and edges based on relationships, I wanted to clarify its priority.

[AgniveshChaubey]

@jagpreetrahi let's keep the 'editing' feature as an enhancement as we'll mainly focus on the Schema Visualization and basic debugging part.

[jagpreetrahi]

Alright sir

[ujjwaljha1]

1. Schema Visualization Tool – Cytoscape.js

   • Best for graph-based visualization (nodes = objects, edges = relationships).
   • Interactive, supports zoom/pan, and handles large schemas well.
   • Customizable, good performance. D3.js is an alternative but requires more setup.

2. Schema Validation Tool – Ajv

   • Fast, supports multiple JSON Schema drafts.
   • Provides detailed validation errors for debugging.
   • Extensible with custom keywords. JSON Schema Validator (JSV) is an alternative but outdated.

3. Additional Features:

   • Auto-generated docs – Convert schema into readable documentation.
   • Schema comparison – Show diffs between schema versions.
   • Live editing – Modify schema directly in the visualization.
   • Export options – Save schema as image/PDF.
   • Collaboration – Real-time editing with multiple users.

[saurabhcoded]

Hi @AgniveshChaubey ,

I came across this idea and found it closely aligned with my previous experience working on XML Schema and JSON Schema-based data conversion tools. I also have a strong foundation in JSON Schemas.

I propose a graphical representation using libraries such as @xyflow. Overall the best experience highly customisable Good community supported ( I have personally done 2 data conversion projects on this library for Workflow development and Json Schema Mappings)

If my experience aligns with the feature, I would be happy to contribute as a collaborator on this idea.

[saurabhcoded]

@AgniveshChaubey Regarding the Library and how we can implement a proper JSON Schema Visualizer:

• Framework: React
• Library: https://xyflow.com/ ( ReactFlow )
• Tree lib: DagreJs - built over D3.js and highly recommended with ReactFlow ( other options - ELkjs or direct D3.js )
• Main Feature: The library is built on Zustand, which enables direct context access in service functions without the need to rely solely on React-Redux or other state management solutions. This allows for more efficient state handling within the application.

How it can be implemented:

The overall Json schema visualizer and editor will be like this

Add Schema node button : This will add the child to the schema object

Select child type: Select box with available options also we can show textbox here with autocomplete suggestions

Add Search option to search node from the visualizer - This feature is must have with a graphical visualiser as it's hard to find the element in graphical view in general

---

Link to the tree visualiser using react flow

https://reactflow.dev/examples/layout/dagre