Hi HN, We’re Jamie & Dan, building JSX Tool ( https://jsxtool.com ) a new inspector/dev panel IDE that allows you to navigate to any line of your React project’s JSX with just a click and a command click to explore your render stack.
Demo video: https://www.youtube.com/watch?v=JIIXvN7vhrs
I’ve been writing React code for nearly a decade. Since I first saw source maps in the days of Babel and Redux, I’ve always wanted to be able to edit my code from the source maps. I’ve also always wanted to be able to inspect my JSX like it was HTML.
Last year, I found my first real use of AI was taking ad-hoc CSS changes in the Chrome element inspector, pasting them into ChatGPT, and asking for the equivalent in Tailwind. I’d then paste those changes into my React TSX files.
I wanted to streamline this process but came to the conclusion that to do so I needed to build a JSX inspector. I had to write a custom AST parser to create a mapping between the JSX and HTML. So I hacked on an inspector for a couple of months that connected JSX to the DOM in both directions.
The next feature was adding a CSS editor, like the one in the browser inspectors but for JSX. Unlike styling a piece of HTML I decided that any in memory style edits to a React fiber should be globally applied, as if you had tweaked that line of code in your codebase.
Finally, I was able to add the two AI features I really wanted: (1) prompt for in-memory styles for when I was pixel tweaking, and (2) save those temporary changes back to my codebase in the convention of the codebase I was working in.
To accomplish talking to the filesystem from the Chrome extension I built a little local server that mounts from the root of your project and allows the extension to send file-system commands back to your project root. We named this the “Dev Server”. (Note: You can fully use us as a JSX inspector without this server installed.)
After all that, I found that to convert myself as a user I needed it to be a pretty fully functional IDE. I needed vim bindings, I needed a typechecker, I needed auto-complete, I needed a linter, I needed code search and I needed a proper file explorer. Fortunately we were able to take advantage of the dev-server architecture we had stumbled onto in order to add an LSP server and Rip Grep. At this point, after months of dog fooding, I use JSX Tool for almost all of my website edits.
We’re still rough around the edges for mobile but we’re working on that.
... continue reading