Introducing Devtools Design System

A year ago, my team at Intuit released Design Systems CLI, a set of tools we use to build design systems. Over time we’ve made major upgrades and released documentation components, but we have never released a full design system built using all of the tools — until today!

Meet the Devtools Design System.

Introduction

Devtools DS is a design system for recreating the “devtools” panel from popular browsers. You can recreate the browser console, DOM inspector, network inspector and other common patterns for debugging websites.

Devtools DS (Left) vs. FireFox DOM Inspector (Right)

Components

In this initial release we’re releasing nine React components, all of which:

• Are built using DS-CLI
• Are written in TypeScript + React
• Aim for keyboard and screen reader support
• Support themes for Chrome and Firefox, in light and dark mode

You can see the full list of components in our gallery!

Packages and Templates

In addition to design systems components, we’ve also built some utility packages and templates for fully-featured browser extensions. We found that building them from scratch could be a very confusing process, so hopefully this makes it easy to get started.

You can try out our TypeScript/React extension template using:

npm init @devtools-ds

Your Own Custom “Devtools”

In our work at Intuit, we’ve found it useful to build browser extensions that help us debug products like TurboTax. We wanted our extensions to look and behave similarly to the existing browser “devtools”, since developers are already familiar with how to use them.

Using the packages and components in devtools-ds, we’ve been able to build extensions for Intuit projects that are fast, keyboard navigable, and nearly indistinguishable from the browser implementations. Using the AutoThemeProvider, we can even automatically switch themes for people using Firefox vs. Chrome-based browsers.

We hope these tools enable others to build high-quality “devtools” for their projects!

What’s Next

This is just the start! We have some more components and templates already being developed, and we’re looking to integrate some of the components in open source projects we use.

If you want to help, we’d love to have you contribute! Some ideas for improvements include:

• New themes (Safari would be exciting)
• New frameworks (Vue, Svelte, etc)
• New templates for any kind of extension
• New components
• Improve documentation, features, and accessibility

Thanks

Devtools DS was primarily developed by Adam Dierkens and me. Shelby Cohen contributed the fantastic Diagnostic component, while simultaneously learning React and TypeScript. Kelly Harrop is our never ending source of amazing icons. Andrew Lisowski provided support through bug fixes and his contributions to all of the underlying tools for the project.

We’d also like to thank the Storybook team for continuing to improve their fantastic documentation tool. In addition, we thank React Inspector, which provided inspiration for some of the devtools-ds components.