feat(core): Form Devtools

[harry-whorlow]

No description provided.

[harry-whorlow]

Some spoilers you those of you following, if any of you have any suggestions drop them here. 🤘

Screen.Recording.2025-09-04.at.14.46.10.mov

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 41985c8

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	34s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-09-17 13:11:50 UTC

[beaussan]

Some spoilers you those of you following, if any of you have any suggestions drop them here. 🤘

IMO, it's a great start!

I would say the fields value / states are more important than the forms options or such. I'm biased, since we use react-hook-form devtools quite a lot, but having a view grouped by fields is what we get the most value of the react hook form devtools. Usually, what we are trying to answer is questions like:

• what's the form's internal value for this element ?
• is it dirty or not ?

With the current demo, I have to scroll quite a lot, and the value is not colocated with the state.

The form submit history is amazing ! :D

So I would say, definitely useful in the curent state, but ux could be improved a bit to get useful info quicker

[harry-whorlow]

@beaussan thats good to hear!

I was planning on getting neoDrag involved, since were going to be using it shortly in the devtools for split panels, that way you can drag to order of the info sections to whatever you like, then I'll store it in something like local so it stays.

But thank you for the feedback, I definitely see your point about the fields being the important part. I might re-order it for now, then when neoDrag is added swap it back for sake of order.

[codecov]

Codecov Report

❌ Patch coverage is 68.96552% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.35%. Comparing base (dc88df0) to head (41985c8).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/FormApi.ts	65.38%	6 Missing and 3 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1692      +/-   ##
==========================================
- Coverage   90.73%   90.35%   -0.39%     
==========================================
  Files          37       38       +1     
  Lines        1727     1752      +25     
  Branches      440      444       +4     
==========================================
+ Hits         1567     1583      +16     
- Misses        143      149       +6     
- Partials       17       20       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[AlemTuzlak]

@beaussan react-hook-form has devtools???? oh my how did I not know about this

[AlemTuzlak]

I left thoughts/comments on everything, feel free to do with the feedback as you see fit!

[AlemTuzlak]

Some minor things

[AlemTuzlak]

LGTM 🚀