[GSoC 2026] Project Proposal: Webpack's Documentation Redesign

[ovflowd]

What?

webpack is an industry-standard JavaScript module bundler used by millions of developers to build modern web applications. It plays a foundational role in today’s frontend ecosystem and is commonly used in projects built with frameworks such as React, Vue, Angular, and many others.

Despite webpack’s continued relevance, active maintenance, and wide adoption, its primary user-facing surface, the webpack website and its accompanying documentation, has not evolved at the same pace as modern documentation platforms, design systems, or current developer experience expectations.

This Google Summer of Code (GSoC) 2026 project focuses on modernizing webpack’s website and documentation infrastructure by:

• Automating API documentation directly from webpack’s source code
• Migrating the website to a modern, maintainable component-based architecture
• Consolidating site content into a single, version-controlled codebase instead of relying on disparate runtime fetch scripts

This project is well suited for students interested in developer tooling, documentation systems, frontend architecture, and large-scale open-source collaboration within established ecosystems.

Why?

The webpack core repository (webpack/webpack) contains extensive inline documentation written using JSDoc. Core files such as Compiler.js alone contain hundreds of documented APIs, hooks, and internal abstractions.

However, much of this documentation is not currently exposed in a structured, searchable, or user-friendly format on the public documentation site.

In addition, the existing website (webpack/webpack.js.org):

• Uses React 17, which is now superseded by newer releases
• Renders documentation using MDX via custom webpack loaders
• Relies on a large number of bespoke UI components rather than a shared design system
• Is difficult to maintain, optimize, and evolve over time

Meanwhile, the Node.js Website Infrastructure Team (with which several webpack maintainers and mentors are involved) maintains a modern, reusable design system: @node-core/ui-components. This system is already used across official Node.js web properties and is designed with accessibility, consistency, and long-term sustainability in mind.

Adopting this design system allows webpack to align visually and structurally with the broader OpenJS Foundation ecosystem while significantly reducing maintenance overhead.

Who?

This project is suitable for students comfortable working with modern web technologies and established open-source workflows.

Applicants should have experience with, or a strong willingness to learn:

• React – component-based UI development for the web
• JSDoc – inline documentation for JavaScript APIs
• Markdown and MDX – Markdown extended with JSX
• Tailwind CSS – a utility-first CSS framework
• Git and GitHub – version control and collaboration workflows

Tip

Prior experience with webpack itself is not required. Curiosity about build tools, comfort reading large codebases, and an interest in developer experience will be particularly valuable.

During the program, students are expected to:

• Write clean, maintainable, and well-documented code
• Open draft pull requests early and iterate in public
• Communicate blockers, design trade-offs, and decisions proactively
• Follow webpack’s contribution guidelines and code of conduct
• Get familiar with Mintlify, since the new documentation website will be built on top of it
• Review Mintlify customization docs:
  • Themes
  • React components

Progress will be evaluated based on:

• Quality and maintainability of code contributions
• Consistency and clarity of communication
• Responsiveness to mentor and community feedback
• Understanding of project goals and constraints
• Completion of agreed-upon milestones

Mentors

Aviv Keller

@avivkeller

Aviv is an open-source maintainer and security researcher. He contributes to the webpack core and webpack security, and is a Node.js Core Collaborator.

He is also an Apache Software Foundation security expert and a recipient of the 2025 JavaScriptLandia “Outstanding Contribution from a Newcomer” Award.

Sebastian Beltran

@bjohansebas

Sebastian is an open-source maintainer involved in several influential projects across the JavaScript ecosystem. He maintains webpack-dev-server and webpack-dev-middleware.

He serves on the OpenJS Foundation’s Cross Project Council and participates in multiple Express.js working groups, including the Security WG and Performance WG.

Claudio Wunder

@ovflowd

Claudio is an open-source maintainer and Senior Software Engineer at HubSpot. They are a member of the webpack Technical Steering Committee.

Claudio is also a voting member of the OpenJS Foundation’s Cross Project Council and an administrator of the official Node.js website.

Tasks & Milestones

Milestone 1: JSDoc → MDX API Generation

webpack’s source code already contains extensive JSDoc annotations describing its internal APIs, hooks, and plugin interfaces.

The goal of this milestone is to build a CI/CD workflow that:

• Extracts JSDoc comments from the webpack/webpack repository
• Converts them into structured MDX documentation files
• Automatically opens pull requests against
  webpack/docs.webpack.js.org into a dedicated, versioned, folder, such as docs/vX/api

At this stage, the generated files do not need to be visually polished, they simply need to exist and be correct. Presentation improvements will follow in Milestone 2.

Milestone 2: Design System Integration

The existing website relies heavily on custom UI components and legacy React patterns. This milestone focuses on integrating the shared @node-core/ui-components design system into the documentation repository.

The objective is to align webpack’s documentation with the Node.js design language, improving accessibility, consistency, and maintainability. This includes styling the API documentation generated in Milestone 1.

Important

The Node.js design system is built on Tailwind CSS. Applicants should be comfortable with utility-first CSS concepts.

Milestone 3: Core Pages

With the design system in place, several key pages will be implemented or rewritten:

• Home

  • Introduces what webpack is, how it is used, and where it fits in the JavaScript ecosystem
  • Displays the current webpack release
  • Includes a prominent call-to-action linking to the Download page

• Download

  • Arguably the most important page on the site
  • Explains how to install webpack, official plugins, and related packages
  • Astro’s install page is a strong reference for structure and clarity

• Guides

  • Reorganize existing content from webpack concepts
  • Create a structured, progressive learning path for new users

• About

  • Consolidate governance, team, and project information
    (e.g. fetch-governance.mjs)

Tip

Students are not expected to be professional technical writers. Content may be reused from existing documentation or left for maintainers to draft. That being said, should a student wish to write, they are more than welcome to.

Milestone 4: Expanding Automation

Once the main site is complete and stable, additional documentation sources can be automated, such as:

• Loader and plugin README.md files fetched from their repositories
  (similar to existing tooling like
  fetch-package-readmes.mjs)
• Normalizing and integrating this content into the documentation site

The overarching goal is to minimize manual documentation maintenance while improving accuracy and freshness.

How to Apply

Applicants interested in this webpack GSoC project should submit their proposal via the official Google Summer of Code 2026 website.

The webpack project recommends using the provided application template, though it is not strictly required.