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:
-
Clone the repo
git clone https://github.com/design-systems/devtools-ds.git cd devtools-ds -
Install dependencies
yarn -
Build
yarn build -
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!