JSX tooling for modern web development
Style your JSX like you used to style your HTML in the browser. Inspect, click, and tweak your JSX until it's pixel perfect.
The Missing React Extension
React DevTools is great for state and tree inspection, but not built for styling. JSX Tool bridges the gap between the Element Inspector and React's Component Selector to give you the best of both worlds.
Style JSX directly, without the back-and-forth in the inspector or fuzzy searching in your IDE. JSX Tool is like an IDE for styling React in your browser.
Work on the live page, not a mock. Preview CSS changes instantly with the current DOM as context, then save them back to your file system when you're ready.
Inspect JSX directly
Find any line of JSX in your codebase in under 5 seconds.
Tweak CSS in-memory
Pixel-push directly on JSX without the element inspector.
Save ad hoc changes
Call an LLM to save your CSS tweaks back to your file system, using your codebase's styling conventions.
See the Demo
Try it Out
Run Dev Server
Start the JSX Tool dev server.
The following command allows you to try out JSX Tool without having to integrate or change any code.
In a terminal session, cd to the same directory as your project's package.json
npx @jsx-tool/jsx-tool start --loggingAfter you run that (your project needs to be running too). Open http://localhost:4000