HN Explorer

Launch HN: JSX Tool (YC F25) – A Browser Dev-Panel IDE for React

111 points by jsunderland323 ↗ HN
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.

30 comments

[ 4.5 ms ] story [ 61.0 ms ] thread
imvetri
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

cadamsdotcom
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?

tnolet
Interesting that this is now a venture-scale company, according to YC.
hmokiguess
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!

ARussell
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?
hungryhobbit
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!
allisdust
There was barely any hostility and all the comments even remotely critical are downvoted to oblivion

What is the point of posting here if anything critical is just a downvoted down

I thought these posts are for feedback

whatamidoingyo
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!

chrisweekly
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.
apsurd
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.

[deleted]
(comment deleted)
swyx
is the ultimate plan to become like a "Cursor for React"?
ontouchstart
Just a thought. Can you automate live UI development in your platform with Playwright? That will make agent integration easier.
marcelr
finally! been waiting for someone to take this on.
cyberdrunk2
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.

catchmeifyoucan
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.

zaksingh
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.

leobuskin
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.

Pufferbo
Um, Firefox extension maybe?
dmix
Vue has one of these and the performance is pretty awful. I hope they make performance a priority.
kaeland
Wow, this looks really cool!!
copypaper
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.

mrafiee
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?
csomar
I am failing to get it work on a "custom" setup. I run my own server with localhost pointed to the domain, with HTTPS on locally generated certificates.

I tried

    npx @jsx-tool/jsx-tool start --logging --server-host codeinput.com --server-protocol https --server-port 443 --insecure
but got

    [jsx-tool] Proxy server running at http://localhost:4000
    [jsx-tool] Forwarding to https://codeinput.com:443
    [jsx-tool] WebSocket server listening on ws://localhost:12021
    [jsx-tool] LSP worker exited with code 1
    [jsx-tool] Restarting LSP worker...
    [jsx-tool] LSP worker already started
    (node:7881) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
    (Use `node --trace-deprecation ...` to show where the warning was created)
    [jsx-tool] Proxy error: unable to verify the first certificate; if the root CA is installed locally, try running Node.js with --use-system-ca
    [jsx-tool] Proxy error: unable to verify the first certificate; if the root CA is installed locally, try running Node.js with --use-system-ca
Maybe you should explain a bit what the server does and what it needs to connect to? why does it need some kind of a "proxy"? I understand you are trying to make a simple one click/command solution but some setups are more complicated than the standard yarn dev nextjs app.
onion2k
I have no doubt this could be a useful tool given the nice looking UX, but everything it does is already in Devtools.

If you open Devtools, then click "Sources", there are two options in the left panel 'Page' and 'Workspace'. Change to workspace and add the folder where your project lives. Now you can edit the code for your React (or anything else) project in Devtools and it'll save to your filesystem. You can make this a part of the project if you want to - https://chromium.googlesource.com/devtools/devtools-frontend...

Gemini is integrated into the Sources panel, so I just opened a JSX file and asked what classes I'd use in Tailwind to replace my CSS and it told me the right answer. It didn't update the code though. That 'Apply Edits' feature in jsxtool would be useful for a non-dev user.