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:
-
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):
This project follows the all-contributors specification. Contributions of any kind welcome!