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.

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

<ul>
<li>
<span aria-hidden style={{ marginRight: 8 }}>
😍
</span>
Empower others to build high quality browser devtools experiences
</li>
<li>
<span aria-hidden style={{ marginRight: 8 }}>
🎓
</span>
Learn design system development
</li>
<li>
<span aria-hidden style={{ marginRight: 8 }}>
⏳
</span>
Help maintainers prioritize impactful work
</li>
</ul>

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

<table>
<tr>
<td align="center"><a href="https://github.com/tylerkrupicka">

<br />_{<b>Tyler Krupicka</b>}</a><br /><a href="#a11y-tylerkrupicka" title="Accessibility">️️️️♿️</a> <a href="https://github.com/design-systems/devtools-ds/issues?q=author%3Atylerkrupicka" title="Bug reports">🐛</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Code">💻</a> <a href="#design-tylerkrupicka" title="Design">🎨</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Documentation">📖</a> <a href="#example-tylerkrupicka" title="Examples">💡</a> <a href="#infra-tylerkrupicka" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-tylerkrupicka" title="Maintenance">🚧</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Tests">⚠️</a> <a href="#tool-tylerkrupicka" title="Tools">🔧</a></td>
<td align="center"><a href="https://github.com/adierkens">

<br />_{<b>Adam Dierkens</b>}</a><br /><a href="#a11y-adierkens" title="Accessibility">️️️️♿️</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=adierkens" title="Code">💻</a> <a href="#design-adierkens" title="Design">🎨</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=adierkens" title="Documentation">📖</a> <a href="#example-adierkens" title="Examples">💡</a> <a href="#infra-adierkens" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-adierkens" title="Maintenance">🚧</a> <a href="#platform-adierkens" title="Packaging/porting to new platform">📦</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=adierkens" title="Tests">⚠️</a> <a href="#tool-adierkens" title="Tools">🔧</a></td>
<td align="center"><a href="https://github.com/ShelbyCohen">

<br />_{<b>Shelby Cohen</b>}</a><br /><a href="#a11y-ShelbyCohen" title="Accessibility">️️️️♿️</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen" title="Code">💻</a> <a href="#design-ShelbyCohen" title="Design">🎨</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen" title="Documentation">📖</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=ShelbyCohen" title="Tests">⚠️</a></td>
<td align="center"><a href="https://github.com/kharrop">

<br />_{<b>Kelly Harrop</b>}</a><br /><a href="#design-kharrop" title="Design">🎨</a></td>
<td align="center"><a href="http://hipstersmoothie.com/">

<br />_{<b>Andrew Lisowski</b>}</a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=hipstersmoothie" title="Documentation">📖</a> <a href="#example-hipstersmoothie" title="Examples">💡</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=hipstersmoothie" title="Code">💻</a></td>
<td align="center"><a href="http://adrian.delarosab.me/">

<br />_{<b>Adrian de la Rosa</b>}</a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=mormubis" title="Code">💻</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=mormubis" title="Documentation">📖</a> <a href="#example-mormubis" title="Examples">💡</a></td>
</tr>
</table>

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