[feat] StyleX Dev Tools Extension

[nmn]

What changed / motivation ?

A work-in-progress implementation of a devtools extension for StyleX and atomic styles in general.

Features:

• Use data-style-src to list the sources of styles in order
  • Preview the relevant StyleX style objects inline
  • One click action to show the original styles in the original file in the sources tab.
  • Detect which style properties from each object are overridden
• List all atomic styles that are actually applied by className
• Ability to edit/override styles
• Ensure it works without runtime injection
• Good styles with light and dark mode
• Good styles for editing styles
• Show computed values on hover

Additional Context

Current Status:
(hovering on a property shows the computed style)

Pre-flight checklist

• I have read the contributing guidelines
  Contribution Guidelines
• Performed a self-review of my code

[github-actions]

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.CbNrVxEyzI /tmp/tmp.xxOtYTslSt

Results	Base	Patch	Ratio
babel-plugin: stylex.create
· basic create	513	511	1.00	-
· complex create	61	61	1.00
babel-plugin: stylex.createTheme
· basic themes	409	400	0.98	-
· complex themes	32	32	1.00
Done in 0.11s.
Done in 0.40s.

[github-actions]

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.p4oknnZvXZ /tmp/tmp.DyCq2Rp7b0

Results	Base	Patch	Ratio
@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,447	1,447	1.00
· minified	4,558	4,558	1.00
@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,793	1,793	1.00
· minified	4,915	4,915	1.00
benchmarks/size/.build/bundle.js
· compressed	496,650	496,650	1.00
· minified	4,847,840	4,847,840	1.00
benchmarks/size/.build/stylex.css
· compressed	99,653	99,653	1.00
· minified	747,850	747,850	1.00
Done in 0.08s.
Done in 0.33s.

[henryqdineen]

I'm curious how resource-matching works when things are bundled in dev mode like in webpack/rspack. In my experimentation I found that getResources() only returns the actual resources that are loaded over the network. So if the styles are in Button.tsx and bundled into app.js how do you make that connection?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
stylex	Ready	Preview, Comment	Mar 23, 2026 2:37am