Skip to content

[GSoC 2026] Webpack's Documentation Redesign #7

@avivkeller

Description

@avivkeller

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 API documentation infrastructure by creating a pipeline that:

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 type definitions in types.d.ts describing hundreds of APIs, hooks, and plugin interfaces. However, this documentation is not currently exposed in a structured, searchable, or user-friendly format on the public documentation site.

This repository is a new toolchain that bridges this gap. It uses TypeDoc to extract structured data from webpack's type definitions, applies a custom doc-kit-compatible Markdown theme to shape the output, and then passes it to @node-core/doc-kit to generate a polished documentation website.

The @node-core/doc-kit tool is maintained by the Node.js Website Infrastructure Team (with which several webpack maintainers and mentors are involved). It was built to power Node.js's official API documentation, and is designed with accessibility, consistency, and long-term sustainability in mind.

Adopting this toolchain allows webpack to align structurally with the broader OpenJS Foundation ecosystem while significantly reducing documentation 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:

  • TypeDoc – API documentation generation from TypeScript
  • typedoc-plugin-markdown – Markdown rendering for TypeDoc output
  • JSDoc / TSDoc – inline documentation for JavaScript/TypeScript APIs
  • Markdown – structured documentation content
  • Node.js – runtime for tooling scripts
  • 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

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: Complete the Theme

This repository already has a working foundation: a TypeDoc pipeline with a custom doc-kit-compatible Markdown theme and a processor plugin that merges namespaces and generates a type map. However, several areas of the theme remain incomplete.

The goal of this milestone is to finish the TypeDoc theme so that generated output is correct, complete, and ready to be consumed by doc-kit. This includes addressing open issues such as:

  • Constructors #2: Class constructors should be rendered in the Node.js-style format (e.g., #### `new fs.Utf8Stream([options])`)
  • Type Map #3: The generated type map is incomplete, uses malformed URLs, and fails to resolve all types; a more robust implementation is needed
  • YAML #4: doc-kit supports structured YAML metadata blocks (e.g., added:, changes:); the theme should generate these from JSDoc/TSDoc tags where available
  • Examples #5: @example tags from JSDoc annotations should be appended to each member's output
  • Any other issues labeled "Milestone 1"

At this stage, the generated Markdown files do not need to be visually polished — they simply need to be correct and structurally valid for doc-kit consumption. Presentation improvements follow in Milestone 2.

Milestone 2: Customizing the Output

With a TypeScript to markdown pipeline in place, the next step is to style doc-kit's output to match webpack's unique theme. This milestone is likely to be done in close coordination with the webpack and Node.js design teams, and may not be completed in this order.

Regardless, a doc-kit configuration file needs to be made, referencing implemented style components for our documentation.

Milestone 3: CI/CD Integration

With a complete and correct theme in place, the next step is to automate the documentation pipeline end-to-end.

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

  • Runs the full build pipeline (TypeDoc extraction → Markdown generation → doc-kit site generation) on a schedule or on new webpack releases
  • Automatically opens pull requests against webpack/docs.webpack.js.org with the newly generated output, placed into a dedicated versioned folder such as docs/vX/api

Milestone 4: Core Pages

With automated API documentation flowing, several key non-API pages of the new documentation site will be implemented:

  • 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

Tip

Students are not expected to be professional technical writers. Content may be reused from existing documentation or left for maintainers to draft. That said, students who wish to write original content are more than welcome to do so.

Milestone 5: Expanding Automation

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

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

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions