Demo Video: https://www.youtube.com/watch?v=JIIXvN7vhrs
I’ve been writing React code for almost a decade. Since I first saw source maps back in the days of Babel and Redux, I’ve always wanted to be able to edit my code from source maps. I’ve always wanted to be able to inspect my JSX as if it were HTML.
Last year, I found that my first real use of AI was to take ad-hoc CSS changes in the Chrome Element Inspector, paste them into ChatGPT, and ask for the equivalent in Tailwind. I will then paste those changes into my React TSX files.
I wanted to streamline this process but came to the conclusion that to do this I needed to create a JSX inspector. I had to write a custom AST parser to create the mapping between JSX and HTML. So I hacked together an inspector for a few months that connected JSX to the DOM in both directions.
The next feature was adding a CSS editor, like in browser inspectors but for JSX. As opposed to styling a single piece of HTML, I decided that any edits to the in-memory style in React Fiber should be applied globally, as if you changed that line of code in your codebase.
In the end, I was able to add the two AI features I really wanted: (1) prompts for in-memory styles when I was making pixel tweaks, and (2) save those temporary changes back to my codebase in the conventions of the codebase I was working on.
To get a Chrome extension to talk to the file system I created a small 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 it “Dev Server”. (Note: You can use us as JSX Inspector completely without installing this server.)
After all that, I found that I needed a fully functional IDE to convert myself into a user. 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. Luckily we were able to take advantage of the dev-server architecture we worked on to connect the LSP server and rip grep. At this point, after months of feeding the dog, I use JSX tools for almost all of my website edits.
We’re still in a tough spot with mobile, but we’re working on it.
All IDE stuff that doesn’t involve AI is free and works fine even without AI. We let you enjoy the content for free but impose some rate limits.
The extension itself is not open source but the dev server with LSP is. It’s a great base if you want to build any kind of in-browser IDE and it’s almost React agnostic. Building the dev server was a big undertaking so I’d love to see someone fork it and find value in it.
In the future we want to start adding things that we’re in a position to take advantage of more than something like a cursor, like letting AI give you code suggestions for runtime exceptions or working with network logs. We believe that having your IDE in the dev panel puts us forward in terms of convenience and workflow.
Anyway, no matter how you feel about AI coding, I wanted to create something that would be useful with or without AI. We’d love it if you considered it and we’d love to share anything about the technical side of the product that you might find interesting.