Contributing to React DevTools Plus

December 7, 2025 · View on GitHub

Thank you for your interest in contributing to React DevTools Plus! This guide will help you get started.

🌟 Ways to Contribute

Report bugs - Open an issue describing the problem
Request features - Open an issue describing your use case
Fix bugs - Submit a PR with the fix
Add features - Discuss in an issue first, then submit a PR
Improve documentation - Fix typos, add examples, clarify explanations
Share feedback - Tell us about your stack and pain points

🛠️ Development Setup

Prerequisites

Node.js >= 16.0.0
pnpm >= 10.0.0

Getting Started

Fork the repository

Click the "Fork" button at the top right of the repository page.

Clone your fork

git clone https://github.com/YOUR_USERNAME/react-devtools-plus.git
cd react-devtools-plus

Install dependencies
```
pnpm install
```
Start development mode
```
pnpm dev
```

Run the playground

# Vite playground
pnpm play

# Webpack playground
pnpm play:webpack

📁 Project Structure

packages/
├── react-devtools/           # Main Vite/Webpack plugin (entry point)
├── react-devtools-client/    # DevTools client UI
├── react-devtools-core/      # Core functionality & plugin system
├── react-devtools-kit/       # State management & messaging
├── react-devtools-overlay/   # Floating overlay component
├── react-devtools-scan/      # Render scanning utilities
├── react-devtools-ui/        # Shared UI components
├── shared/                   # Shared utilities
└── playground/               # Example projects

Key Packages

Package	Description
`react-devtools`	The main package users install. Contains Vite/Webpack plugins.
`react-devtools-core`	Core functionality, plugin system, and RPC communication.
`react-devtools-kit`	State management using Zustand-like stores.
`react-devtools-client`	The DevTools UI that runs at `/__react_devtools__/`.
`react-devtools-overlay`	The floating overlay toggled with keyboard shortcut.

🔄 Development Workflow

Building Packages

# Build all packages
pnpm build

# Build specific package
pnpm build:core    # react-devtools-core
pnpm build:ui      # react-devtools-ui
pnpm build:kit     # react-devtools-kit
pnpm build:client  # react-devtools-client
pnpm build:overlay # react-devtools-overlay

Running Tests

pnpm test

Linting

# Check for lint errors
pnpm lint

# Auto-fix lint errors
pnpm lint:fix

📝 Submitting Changes

Commit Messages

We follow Conventional Commits:

<type>(<scope>): <description>

[optional body]

[optional footer]

Types:

feat: New feature
fix: Bug fix
docs: Documentation changes
style: Code style changes (formatting, etc.)
refactor: Code refactoring
perf: Performance improvements
test: Adding or updating tests
chore: Maintenance tasks

Examples:

feat(overlay): add keyboard shortcut customization
fix(core): resolve fiber scanning memory leak
docs: update installation guide

Pull Request Process

Create a branch
```
git checkout -b feat/my-feature
```
Make your changes
- Write clear, documented code
- Add tests if applicable
- Update documentation if needed
Run checks
```
pnpm lint
pnpm test
pnpm build
```

Commit your changes

git add .
git commit -m "feat(scope): description"

Push and create PR
```
git push origin feat/my-feature
```
Then open a Pull Request on GitHub.

PR Guidelines

Title: Use conventional commit format
Description: Explain what, why, and how
Screenshots: Include for UI changes
Testing: Describe how to test your changes

🐛 Reporting Bugs

When reporting bugs, please include:

Environment
- Node.js version
- pnpm version
- React version
- Vite/Webpack version
- Browser and version
Steps to reproduce
- Minimal code example
- Expected behavior
- Actual behavior
Screenshots/Videos (if applicable)

💡 Feature Requests

When requesting features:

Describe the problem - What pain point does this solve?
Describe the solution - How would this feature work?
Alternatives - What alternatives have you considered?
Context - Share your use case and stack

🔒 Security

If you discover a security vulnerability, please email the maintainers directly instead of opening a public issue.

📄 License

By contributing, you agree that your contributions will be licensed under the MIT License.

🙏 Thank You!

Every contribution, no matter how small, helps make React DevTools Plus better. Thank you for being part of our community!