A modern registry for JavaScript and TypeScript
Building the next generation package registry with first-class TypeScript support and cross-runtime compatibility.
- Open Source
- Frontend Design
Background
JSR is a modern package registry built to address the evolving needs of the JavaScript ecosystem. Unlike traditional registries, JSR was designed with TypeScript as a first-class citizen, providing automatic type generation and documentation from source code.
During my time working on JSR, I focused on the frontend experience for package discovery, documentation browsing, and the publishing workflow. The goal was to create a developer experience that feels intuitive while surfacing the rich metadata that JSR generates automatically.
Screenshots
Designing in public
JSR was developed in the open from the start, which meant designing in public alongside an engaged community. This approach required treating unfinished work as an opportunity for collaboration rather than a liability.
A key interface decision was treating package pages as potential project homepages, maintaining consistent brand identity from the homepage through documentation so users get a unified experience regardless of their entry point. For the color system, we extracted yellow and cyan from the logo and used custom tooling to generate complete color scales that could be used to build out the rest of the interface.
Generative design
One of the unique challenges of JSR is that package documentation is generated
HTML produced by deno doc,
which then needs to be styled to fit the JSR interface. This means designing
systems flexible enough to accommodate whatever documentation styles package
authors choose to use.
The result is a component system that can gracefully handle varied outputs: code blocks, type signatures, nested interfaces, and markdown of all shapes and sizes. Rather than imposing strict constraints, the design adapts to the content while maintaining visual consistency across thousands of packages.
Project Resources
Sites
jsr.io – The main registry site where developers can discover, publish, and browse packages with auto-generated documentation.
deno doc – The documentation generator that powers JSR's auto-generated package documentation.
Writing
Designing JSR – A deep dive into the design process, from logo development to building the interface in public.