StyleX DevTools — StyleX

DevTools extension that gives you a custom "Styles" panel while exploring various elements which is optimized for atomic styles.

Features for any kind of atomic Styles:

• Instead of organizing styles by selector, styles are organized by property
• Editing styles works reliability to only override styles on the current element. Avoid accidentally editing styles for elements globally.
• Editing styles suggests styles that already exist letting you easily swap classNames
• When using a new styles not in your CSS file, inline styles are used.
• Easily resent style overrides

Features specifically for StyleX:

• Detect the data-style-src attributes on elements in StyleX dev mode to see the source of styles
• Single click to jump to the relevant JS/TS file within dev tools
• See the style objects actually applied in the exact order they are applied