Components and tools for building browser devtools extensions, built on DS-CLI and PostCSS Themed.

---

Ever wanted to build your own browser extension or devtools panel? This project can help! We've built out a set of utilities and React components that let you mirror the functionality of the Chrome/FireFox developer tools.

Each component:

• Supports themes for multiple browsers
• Is fully written in TypeScript
• Aims to be keyboard accessible and screen-reader friendly
• Uses minimal external dependencies

Read more in our Storybook documentation site.

🔨 Developer Set-up

Access source files and and make contributions using the following setup steps:

1. Clone the repo

   git clone https://github.com/design-systems/devtools-ds.git
   cd devtools-ds

2. Install dependencies

   yarn

3. Build

   yarn build

4. Start Storybook

   yarn storybook

🤝 Contributing

Whether it's improving documentation, adding a new component, or suggesting an issue that will help us improve, all contributions are welcome!

Top reasons to contribute:

• 😍 Empower others to build high quality browser devtools experiences
• 🎓 Learn design system development
• ⏳ Help maintainers prioritize impactful work

Here are some ideas for contributions:

• New components
• New themes (We'd love to see some Safari themes eventually)
• Accessibility improvements
• New browser extension templates
• Support for frameworks like Vue, Angular, or Svelte

For more information about contributing, read our contributing guide and code of conduct.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tyler Krupicka ️️️️♿️ 🐛 💻 🎨 📖 💡 🚇 🚧 ⚠️ 🔧

Adam Dierkens ️️️️♿️ 💻 🎨 📖 💡 🚇 🚧 📦 ⚠️ 🔧

Shelby Cohen ️️️️♿️ 💻 🎨 📖 ⚠️

Kelly Harrop 🎨

Andrew Lisowski 📖 💡 💻

Adrian de la Rosa 💻 📖 💡

This project follows the all-contributors specification. Contributions of any kind welcome!