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.

All of the IDE stuff not involving AI is free and works fine without AI. We let you get a taste of the prompting stuff for free but apply some rate limits.

The extension itself is not open source but the dev server with the LSP is. It’s a great foundation if you want to build any sort of in-browser IDE and it's nearly 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 are in a position to take advantage of over something like Cursor, such as letting AI give you code suggestions for runtime exceptions or work with the network logs. We think that the convenience of having your IDE in the dev panel gives us a leg up in convenience and workflow context.

Anyway, regardless of how you feel about AI coding, I wanted to make something that was useful with or without AI. We’d love it if you gave it a spin and we want to share anything we can about the technical side of the product that you might find interesting.

This looks awesome!

>I needed it to be a pretty fully functional IDE. I needed [IDE feature]...

I'm just curious, why didn't you make this as a VS Code plugin to benefit from all the features of an IDE? I'd imagine you could do something similar to the Live Server plugin. That way you could support any browser and not worry about maintaining the IDE features.

Congrats on the launch. Looks great! Do you envision this being used as the primary IDE or just for quick changes/tweaks while the main development is done on a standard IDE eg VSCode?

Excited to try this! I think you're really onto something w your insight about advantages of IDE in devtools context. I've been doing React about a decade too (and webdev since 1998), and this really resonates.

Congrats on the launch! I think this has a lot of potential in eliminating context-switching. DevTools has always felt unintuitive/unfamiliar coming from an IDE, so just bringing the IDE UX and vim keybindings over is already a big improvement. It also makes LLM prompting feel better contextualized.

As an aside, thinking back to learning React seven or eight years ago by watching a bunch of tutorial videos where they'd switch between IDE and browser views or awkward split screens, this seems like a way better format for explainers/walkthroughs of frontend code.

Wow, this looks really cool!!

Came here to say something critical because modern front-end dev is a self-inflicted hellscape.

I watched the video and "deving from the UI" makes sense! Instantly get the value. Pretty cool!

It's another hurdle as to whether I'm really going to pay the switching cost of changing my dev flow, but it is a very intuitive and compelling proposition. well done.

Although I gave up on it, I had a similar idea. I built "VimTools", which allowed you to navigate between different sources on a webpage (via dev tools) and edit them, vim-style. I didn't get beyond the navigation part, though.

If you can implement some Vim-style navigation and key-bindings into this, that would be awesome!

I think this is cool! Honestly it’s one less click back into an IDE. I think I’d still have to hop back to commit to git, but it’d save me all the copy+paste time (esp w/ css styles).

I hope there’s a right click, “edit JSX” button.

I'm a bit confused by the marketing verbiage and tool name. Is this going to target React only, or will it (eventually) support other solutions which use JSX, such as SolidJS?

Just a thought. Can you automate live UI development in your platform with Playwright? That will make agent integration easier.

Vue has one of these and the performance is pretty awful. I hope they make performance a priority.

Surprised by all the hostility in the comments: if this tool actually works as described in the video, you've created a whole new generation of dev tool with JSX Tool!

A lot of people use LLM subscriptions, they don't use API keys. Why devtool devs continue to ignore this? I mean, ok, you have your "pricing" reselling an access to LLM models, that's the only, probably, simple way to monetize it, but it's a bad way in 2025, seriously. Allow me to bring my oauth with claude max, and/or offload whatever you do to my local claude code (or if there's some magic behind orchestration use SDK). And, oops, there's nothing to monetize and the entire thing can be recreated with vibe coding within a few weeks (it's not so much there, let's be honest).

I apologize for the writing style, don't take it personally, just every devtool product I see on HN nowadays fails for this particular reason.

and it's not compatible with latest version of react?

> React 19 Memory Optimization Detected React has detected that this is a large page and is removing source information that is necessary for JSX Tool to run. This optimization helps improve performance but prevents JSX Tool from inspecting your React components. You can either navigate to a different page or override this limitation using the proxy setup.

finally! been waiting for someone to take this on.

Sorry, just trying to understand.

Are you saying you invented hot reload? And a dev tools css editor?

I am confused, because the ability to edit code and have the page update instantly exists with Vite, and next.js, and a bunch of other frameworks. It’s janky at times but good enough for most - and your edits are in your repo ready to commit. And browser CSS inspectors are really great. And there’s the React DevTools if you need to see props & component hierarchy.

Can you explain the value add over all these free things we already have?

Pretty cool project! I love to see progress on the UX of how we write and manage code.

My honest feedback to you here is, this isn’t very valuable by itself as a local dev tool. Make it so it can be run targeting a git repository with live preview and deployment to a real environment and you may have something much better!

Take a look at Theia IDE, maybe you could find a bridge to do that?

Good luck on the launch!

Astro does the same, or something similar, but without an extension i think — https://docs.astro.build/en/reference/experimental-flags/chr...

It seems to leverage some official chrome devtools workspaces concept.

is the ultimate plan to become like a "Cursor for React"?

Um, Firefox extension maybe?

Interesting that this is now a venture-scale company, according to YC.

How are you planning to acquire customers?

Is this sponsored by yc?

Who are the target audience?

Are the target audience companies or businesses or individuals?

Congratulations