probleme :
Before this change, developers couldn't inspect React components in the
Electron app's DevTools. The DevTools only showed the Elements tab
(DOM), not the ⚛️ React Components tab. This made debugging React
components much harder.

solution:
We added automatic loading of React DevTools extension when running in
development mode, so the React Components tab is available in Electron
DevTools.

Two simple files changed:

[main.ts]→ Added React DevTools extension loading code
[package.json] → Added npm run dev script

New script: "dev": "cross-env NODE_ENV=development npm start"
This sets [NODE_ENV=development]( so React DevTools loads


📝 Steps to Enable This Feature
For Developers Using Dyad
Step 1: Install React DevTools Extension in Chrome

Open Google Chrome
Go to:
[https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi]
Click "Add to Chrome"
Confirm the installation
Step 2: Run the App in Dev Mode





expected behavior
<img width="1591" height="870" alt="Capture d&#39;écran 2026-04-01
152857"
src="https://github.com/user-attachments/assets/341130e8-38ac-4d61-84cb-5415b248278d"
/>

<!-- devin-review-badge-begin -->

---







<a href="https://app.devin.ai/review/dyad-sh/dyad/pull/3112"
target="_blank">
  <picture>
<source media="(prefers-color-scheme: dark)"
srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1">
<img
src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1"
alt="Open with Devin">
  </picture>
</a>
<!-- devin-review-badge-end -->