GSoC 2025: Adaption of component library in JSON Schema website

[DhairyaMajmudar]

Brief Description

The goal of this project is to adapt generalised UI components library for JSON Schema website.

1. JSON Schema website consists of several components, including.... different kinds of accordions, cards, buttons, banners, tables, etc.... All of these components are custom developed by this project we look forward to changing a modern UI component library. This will not only reduce the developers' hassle of creating new custom components from scratch or to debug/modify the existing components but will also give a new and modular look to our website.

2. (Nice to have just if we have time for it) JSON Schema docs section content is currently in markdown syntax which is rendered on the website pages. There are many instances where we need to have some custom markdown components to showcase particular kinda information. These custom markdown components currently lie in a single file StyledMarkdown.tsx. The components of these files can be segregated into different components files which makes it easy to debug/modify. Other than these common components such as tables, tab groups, etc... can be directly received from UI components library.

3. Completion of developing an enhanced test suite for the website. The task of creating a test suite was initialised last summer during GSoC'24 program. But later on, new components kept on adding as of which currently the website has partial test coverage of the components. By means of this project, we also aim to overall completion of the test suite. More information on the issue can be obtained here.

Expected Outcomes

By the completion of GSoC coding time period we expect all above tasks to be completed.

Skills Required
Familiarity with Nextjs, Typescript, test suite development using Cypress, a good overview and knowledge of JSON Schema website codebase.

Mentors
@benjagm

Expected Difficulty
Medium

Expected Time Commitment
90 hours

[Honyii]

Thanks a lot for your project idea submission Dhairya.

[Karan-Palan]

This seems like a great project and need of the hour. Great idea!

[rishabhknowss]

I really like this idea! If it gets accepted in GSoC, I would love to work on it. I suggest using ShadCN for the UI components, as it aligns well with modern, customizable design needs and is widely adopted by many open-source organizations. Additionally, improving the CI/CD pipeline, refining Docker configurations, and completing issue #806 would be great additions to this proposal

[Utkarsh-123github]

Hey @DhairyaMajmudar , @benjagm , and team,

This is a fantastic enhancement to JSON Schema! Having previously introduced major features like navigation throughout the JSON Schema's website, I am well-acquainted with the codebase. Additionally, my hands-on experience with Next.js and TypeScript enables me to contribute effectively. I would love the opportunity to work on this enhancement and make the most of it.

Looking forward to your thoughts!

[Adi-204]

Hi @benjagm , @DhairyaMajmudar and team
The project idea presents a fantastic opportunity to gain hands-on experience while contributing meaningfully to an open-source initiative that benefits a large developer community.
I have been an active contributor to open-source projects, including the JSON Schema website. Some of my notable contributions include: Solve a bug of URL color on homepage in dark-mode, Added 2 tools and currently working on Add Filter by Author in Blog Page waiting for approval from maintainers. This feature, once approved by the maintainers, will enhance user experience by enabling users to filter blogs more efficiently.
With my experience in web development—particularly in Next.js, TypeScript, and React—I am confident in my ability to contribute effectively and write efficient and maintainable code. I look forward to collaborating with the mentors and the community to bring these improvements to the project.

[Yashwanth1906]

Hi @DhairyaMajmudar @benjagm and team,

This seems like a great GSoC project idea. Currently, writing custom components can be time-consuming, so adopting a modern UI library like ShadCN would be highly beneficial. Since ShadCN provides flexible components in TypeScript, it will be easier for us to integrate them into our existing codebase.

Additionally, we could incorporate Acertinity UI for animated components, which would further enhance the user experience.

[idanidan29]

Hi @DhairyaMajmudar @benjagm and team,

This is an amazing project idea that will significantly improve maintainability and speed. I had one small question, though:

Given that the website currently has partial test coverage, will the new components be designed with testing in mind from the start?

I believe I'd be an excellent fit for this project due to my extensive experience in building Next.js applications and working with frontend component systems. Having developed multiple Next.js projects, I understand how to structure scalable and maintainable UI components.

Looking forward to contributing! 🚀

[Utkarsh-123github]

Hey @Honyii @benjagm @DhairyaMajmudar ,

Congratulations on our organization being selected for GSOC 2025! As I had previously expressed my interest in contributing to this enhancement, I would love the opportunity to work on it. Could you please let me know if there is any qualification task or prerequisite to get this issue assigned? Looking forward to your guidance.

Thanks!

[Karan-Palan]

Hello @Honyii ,@benjagm @DhairyaMajmudar , I've been involved in working with the website and have worked on some of the features mentioned and am currently working on unifying code editors. I'd love to work on this project, waiting for the qualification task!

[MadhavDhatrak]

Hello @DhairyaMajmudar @benjagm @Honyii

I have previously worked on website enhancements and am familiar with the JSON Schema website codebase I am excited to contribute to this project and interested in all aspects, including adapting the UI component library, improving custom markdown components, and completing the test suite If there is a qualification task available please let me know.

Looking forward to contributing!

[ShashGreninja]

@Honyii @benjagm @DhairyaMajmudar , hearty congratulations on being selected as one of the GSoC organisations this year!

Having been actively involved in several design improvement projects with this tech-stack and having the experience of using various 2d and 3d component libraries, I feel really excited to see this issue popping up here, which i would love to help decimate!
I've already gone through the codebase and am well acquainted with it. The test suite development is also the need of the hour to cover testing of all old and new components.

Excited for qualification tasks as and when they come!

[Santosh130602]

Hi @benjagm, @DhairyaMajmudar, and team,

I'm excited about the opportunity to work on this project and contribute to an open-source initiative that serves a vast developer community. I have been actively (not properly) involved in open-source contributions. Some of my key contributions include fixing a bug related to the URL color on the homepage in dark mode, adding two tools, and currently working on a "Filter by Author" feature for the blog page, which is awaiting approval from the maintainers. This feature aims to enhance user experience by making it easier to sort and find relevant blog posts.

With my background in web development, particularly using Node.js, TypeScript, and React, I am confident in my ability to deliver high-quality, maintainable code. I look forward to collaborating with the mentors and the community to implement these enhancements effectively.

[Yashwanth1906]

@DhairyaMajmudar who is the mentor for this project? 😀

[benjagm]

Hi everyone. As of now we don't have mentor for this project.

I was considering mentoring this but realistically I won't be able to mentor this effectively. We keep the call for mentors opened in case someone from the community steps up.

[benjagm]

Hi everyone. I am just confirming that I will be the mentor of this project, but with some considerations: We are reducing the scope to 90 hours, removing point 3 (testing), and leaving point 2 as (nice to have if we have enough time).

The reason why we remove point 3 is simple: more testing logic implies more code, and more code implies more maintainability efforts. This is not a critical system, this is just a website and we'd like to keep the codebase as easy to maintain as possible. This means, reduce code quantity and complexity. By standardizing the usage of a components library we hope to reduce the code quantity and complexity.

In this case, there will be no qualification tasks, so I will decide based on your application.

[Utkarsh-123github]

Thanks a lot @benjagm for your reconsideration 🚀🚀.
Your guidance will be invaluable, and I'm really looking forward to learning from you and build this project under your mentorship.

Thanks again for making this happen!

[ShashGreninja]

Completely understandable, @benjagm .
As i had previously mentioned, looking forward to a healthy competition and sorting out this issue right from its roots!
By the way, from the term "applications", I believe you meant the "proposals", right? If not, kindly shed some light on what applications you are expecting.
Good day!

[chidiadi01]

Interesting project!

[idanidan29]

Thanks for the clarification! I'm excited that this project got in as it's a very interesting one, and we also get to have you as a mentor 🎉. Looking forward to applying and contributing to the project!

[techmannih]

Thanks a lot for your reconsideration 🚀🚀. I’m really excited about this project! Looking forward to collaborating and contributing to the success of this project!

[tanmay-12-ctrl]

Hi @benjagm and team,

This project looks really interesting! I’m eager to contribute and learn more about improving the JSON Schema website. While I’m still building my skills, I’d love to help wherever possible—whether it's with UI enhancements, documentation, or general improvements.

Looking forward to collaborating and learning from the community!

[GAVARA-PRABHAS-RAM]

Hi, I came across this issue and I'm really interested in contributing. I believe I can help and would love to assist in any way I can. Please let me know how I can get started!
@GAVARA-PRABHAS-RAM

[Honyii]

@GAVARA-PRABHAS-RAM, as stated by the mentor, to move forward with this project you only need to create a good proposal and apply. Lastly, we've dropped a proposal guide here.

Hi everyone. I am just confirming that I will be the mentor of this project, but with some considerations: We are reducing the scope to 90 hours, removing point 3 (testing), and leaving point 2 as (nice to have if we have enough time).

The reason why we remove point 3 is simple: more testing logic implies more code, and more code implies more maintainability efforts. This is not a critical system, this is just a website and we'd like to keep the codebase as easy to maintain as possible. This means, reduce code quantity and complexity. By standardizing the usage of a components library we hope to reduce the code quantity and complexity.

In this case, there will be no qualification tasks, so I will decide based on your application.

[chidiadi01]

Hi @benjagm and team,
Interesting project. I look forward to working on it!

[Hovering-Ace]

Hi, @benjagm I’m already exploring the project structure and UI components, and I can’t wait for the application period to submit my proposal! Looking forward to learning, collaborating, and contributing to this amazing project in Gsoc2025.

[benjagm]

Hi everyone. For all of you interested on this project idea submission, a part of the typical structure and planning approach, I am specially looking to find an assessment of why using your library of choice over others, expressing the reasons of your recommendation over others libraries, as well as the expected benefits for the project.

Good luck!

[Utkarsh-123github]

Thank you @benjagm for sharing your expectations for the project idea submission. I appreciate the emphasis on evaluating and justifying the choice of libraries, as it ensures well-informed decisions that align with the project's goals.

I will make sure to provide a thorough assessment of the chosen library, comparing it with alternatives and highlighting the key benefits it brings to the project. Looking forward to contributing to this initiative!

[mokshupadhyay]

Hi @benjagm,

This project looks incredibly exciting, and I’m eager to contribute! The idea of integrating a modern UI component library into the JSON Schema website is something I find both valuable and interesting. Not only will this improve the website’s maintainability, but it will also enhance the overall developer experience and visual appeal.

Looking forward to collaborating and learning from the community!

Thanks again for sharing this opportunity.

[bilalsadiq03]

Hi @benjagm,

I like the idea of integrating a modern modern UI component library into the JSON schema website, It seems interesting.

I would like to collaborate to this project!

[TulsiLukhi1]

Hey, @benjagm , @DhairyaMajmudar

I’m excited about this project! Based on the current structure, I believe adopting ShadCN would be a great choice due to its flexibility, lightweight nature, and seamless TailwindCSS integration. Additionally, for the markdown component refactoring, following Atomic Design Principles would ensure better modularity and maintainability.

Would love to contribute!

[rahulc0dy]

Hey, @benjagm , @DhairyaMajmudar

I’m excited about this project! Based on the current structure, I believe adopting ShadCN would be a great choice due to its flexibility, lightweight nature, and seamless TailwindCSS integration. Additionally, for the markdown component refactoring, following Atomic Design Principles would ensure better modularity and maintainability.

Would love to contribute!

I agree, ShadCN will be a great choice as it now supports the latest versions of TailwindCSS too. Looking forward to it.