---

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.

:hammer: 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):

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