Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GSOC 2025 : JSON Schema Visualization Tool - Interactive Graphical Viewer #868

Open
jagpreetrahi opened this issue Jan 25, 2025 · 35 comments
Labels
gsoc Google Summer of Code Project Idea

Comments

@jagpreetrahi
Copy link

jagpreetrahi commented Jan 25, 2025

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

@benjagm benjagm added the gsoc Google Summer of Code Project Idea label Feb 4, 2025
@VishwapriyaVelumula
Copy link

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
Copy link

vishwajeet1729 commented Feb 19, 2025

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
Copy link
Author

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
Copy link
Member

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

@jagpreetrahi
Copy link
Author

Yeah , this could also be the case

@vishwajeet1729
Copy link

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

@benjagm
Copy link
Collaborator

benjagm commented Feb 20, 2025

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
Copy link

hy pranal here looking forward to contribute to this issue

@ujjwaljha1
Copy link

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
Copy link
Collaborator

benjagm commented Feb 28, 2025

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
Copy link

Pankajkumar7970 commented Mar 2, 2025

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
Copy link
Member

aialok commented Mar 2, 2025

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
Copy link
Author

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
Copy link

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

@jagpreetrahi
Copy link
Author

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

@davidldennison
Copy link

Looking forward to contributing!

@Hello-Ship-Code
Copy link

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

@AkshataABhat
Copy link

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
Copy link
Author

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
Copy link
Contributor

Honyii commented Mar 18, 2025

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
Copy link
Author

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

@IVedantD
Copy link

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
Copy link
Author

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
Copy link

AgniveshChaubey commented Mar 22, 2025

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
Copy link

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

@jagpreetrahi
Copy link
Author

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
Copy link

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

@jagpreetrahi
Copy link
Author

Alright sir

@ujjwaljha1
Copy link

  1. Schema Visualization ToolCytoscape.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 ToolAjv

    • 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
Copy link

saurabhcoded commented Mar 27, 2025

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
Copy link

saurabhcoded commented Mar 28, 2025

@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
Image

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

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

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

@AgniveshChaubey
Copy link

Hi @saurabhcoded and others, please avoid tagging Benjamin and other mentors regarding this project unless absolutely necessary, as they might already be busy with their work and project ideas.

I propose a graphical representation using libraries such as @xyflow.

As far as GSoC proposal is concerned, it's up to you to choose which visualization tool/library you'll use. You just have to justify your choice in the proposal. We'll have a discussion on which visualization tool to finalize for this project once the GSoC contribution period starts.

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

If you meant to join in as a GSoC contributor, then you'll have to go through the selection process. However, if you are looking to collaborate in general, you are most welcome.

@AgniveshChaubey
Copy link

Hi, @ujjwaljha1, it's great that you shared your work here, but you'll also have to include it in your proposal as well.

@saurabhcoded
Copy link

Hi @AgniveshChaubey thanks for the info , I’m eager to contribute in general as well. Should I wait until the GSoC proposal selection before contributing to this idea specifically, or can I start working on other issues in the meantime?

@AgniveshChaubey
Copy link

@saurabhcoded the repository for this project will be set up when GSoC contribution period starts. You can chime in when the project kicks off.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gsoc Google Summer of Code Project Idea
Projects
None yet
Development

No branches or pull requests