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

[jsunderland323]

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.

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

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

[jsunderland323]

Aw thanks so much. I knew there had to be some folks whom this would resonate with.

I'm excited for you to try it out too! Please let me know how it goes

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

[jsunderland323]

Haha. I had the same thought. I told my mom if it doesn’t work out for developers I can always pitch it as a tool to teach people React.

Thanks for the comment man!

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

[jsunderland323]

Hey csomar. If you switch over to discord I can work through it with you there.

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

I agree our docs are totally lacking on the more advanced dns setups! I'm so sorry.

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

If you don't do the manual installation where you point to the web-socket server in your <head>, it will inject that tag into your <head> tag. The web socket it how the chrome extension communicates with your file system.

You don't need the proxy for most things. It's fine to continue to just use codeinput.com as long as you have a way of making the websocket url discoverable to the extension.

The only other use case for the proxy is if you are on a page that has over 10k react fibers and are not using vite. This comes up a lot in things like CRMs or Next projects with a lot of 3rd party dependencies. In that case we have to find and replace a part of the react source that limits the number of React Fibers with source maps from 10k to 1m.

I tried to give a system design overview here but I will be the first to admit that it's pretty lacking https://jsxtool.com/docs/dev-server/system-design

[polishdude20]

This is exactly what I was looking for the other day! I'm very happy you guys are working on this because I can see a lot of potential. My main use case is just finding which element in my code controls which element in the browser when I hover over it.

My current workflow is to be in the dev tools, find the element I want to edit, edit the CSS to see if it looks how I want, copy the classname and html to then search in my codebase and make the exact same change there.

[mundial2k2]

I first tried to install the chrome extension. Got things up and running with vite. Thought maybe i needed a subscription to be able to use the AI features - tried that. But still, no matter what i do everything works nicely, except for the submit button in the chrome extension for sending query to AI - no matter if i add own models or use existing. And now with credits as well, no joy.

Known thing?

Seen through documentation, tried all i can see. Even tried getting into the discord channel, but that was invalid as well..

[dahyman]

So sorry about your experience. There is a new link to the discord channel being deployed right now.

I'd recommend ensuring you're on the latest version, as we just deployed some bug fixes. If you continue to run into problems opening your app on a new tab and then opening the extension on that tab is usually the fix.

Hopefully chat with you soon on discord!

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

[jsunderland323]

We actually do have a VSCode plugin we built a couple of months ago. It's a sort of a gnarly install if you run our dev-server from a docker container (which we do), so we shelved it. We dog food everything before putting it out. There's some cleanup we need to do before we publish it but it's coming.

> I'm just curious, why didn't you make this as a VS Code plugin to benefit from all the features of an IDE?

What I was trying to articulate is that I want is to write code in my dev-panel. I don't want to switch panes to an IDE for frontend tweaking. Of course there are times that I do want to switch to my IDE, which is why we developed the VSCode extension that is coming.

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

This may turn out to be the right approach in the end. I've just explored the one avenue that you see today but I could be totally wrong and you might be right that the embedded browser in the IDE approach is the way to go.

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

[jsunderland323]

I walk into everything ready to be hyper critical, so thanks so much for saying that.

In my experience, I found the switching cost to be low for things like copy changes and css stuff (or lower than I expected). Obviously I am incentivized more than anyone else to use it but it’s actually painful to go to an IDE to make those small changes after you get used to it.

I don’t realistically expect anyone to use us as a full IDE yet. It’s got a ways to go but for simple things, it’s awesome. We’re going to keep chipping away though.

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

[jsunderland323]

It does! I'm an avid vim user so I made sure it had ctrl-p, ctrl-w (for window switching), (slash space for search), a nerd tree equivalent file tree explorer. I build all features to be vim compliant first. Just toggle enable vim mode in the settings.

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

[jsunderland323]

CMD k instead of right click. But you have to have the dev server installed. We can’t edit source maps, we can only edit your actual source code. But there’s a full IDE in there so you can easily update the jsx code from your browser.

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

[jsunderland323]

It's a bit of an aspirational name. For now it's just React, but we hope to get to support other frameworks that use JSX when we have more bandwidth!

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

[jsunderland323]

Me too. I know HN doesn't love YC companies but I was a little shocked.

I swear it isn't vaporware but there's only one way to find out.

There are definitely rough edges, we are after all a 2 man band but I don't ship things that don't work and it's admittedly not done great with older versions of React. You should try it though!

[dang]

The thread seems pretty positive at this point...I think this might be a case of the contrarian dynamic:

https://news.ycombinator.com/item?id=24215211

https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

[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

[ontouchstart]

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

[jsunderland323]

I would love to go there! All of our fire power is going into make the IDE great at this time. Once, we accomplish that I think we may earn ourselves the right to do more exotic agent stuff with things like Playwright. But that's the general direction I think all this stuff is going

[throwthrow0987]

Most big corporates have their own inner sourced css components library. So when you get design feedback you wouldn't be directly editing the style in one self contained web application, which is what this demo is assuming.

[jsunderland323]

We actually do support monorepos and it can do multi-file edits.

[kaeland]

Wow, this looks really cool!!

[jsunderland323]

Thanks so much!

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

[jsunderland323]

No it's all good and it's a fair point.

So from my vantage point we need some way to create revenue. We have tried to make as much of the tool free as we can. We do a 10% markup on tokens issued by us. That's better than cursor who does 25%. We support BYOK so you can use your own claude key, and vertex key. If you do that you are basically just paying us a flat troll tole of $16/month to use our entire frontend but you are free to be unbounded by a markup on your tokens. We actually prefer this because it's better unit economics for us. So please bring your own key!

[jcheng]

AFAIK, every tool out there that lets you do oauth with your Claude Max plan is doing so with the same copy-pasted client id/secret that are extracted from Claude Code. It's not clear at all that this is above board, and when I asked our Anthropic rep, they encouraged us not to do this.

If there's an official way for 3rd party devs to piggyback on Anthropic plans, someone please tell me how!

[swyx]

fyi sometimes its because anthropic may have disallowed it. oauthing with your plan to bring the anthropic subsidy to non anthropic products is understandably a tricky deal unless you're scaled enough to make it make sense for both sides.

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

[jsunderland323]

Thanks! I think we want to get good enough to take over the front end and your IDE is there for backend things but I think it’s a long road to get to that place. For now I feel comfortable promoting that it’s great for small tweaks and style changes but I think it would be pretty disingenuous to tell anyone to ditch their IDE at this point. With that said, we keep building features to make the full IDE dream a reality.

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

[jsunderland323]

It is. You need to setup the dev server to overcome this limit. That’s why we put that warning there. React 19 limits the number of fiber nodes with source maps to 10k. When you enable the proxy we update it to 1m but we have to do a find replace in the source for this limit, so you have to proxy through us or let our vite plugin transform the js file.

[marcelr]

finally! been waiting for someone to take this on.

[jsunderland323]

<3

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

[jsunderland323]

> Are you saying you invented hot reload?

I'm not saying that, no. We are super dependent upon HMR servers from Vite/Next.

We made the ability to write back from your dev panel to your filesystem and made a JSX inspector. As far as I know these are not things supported by either Next or Vite.

> And browser CSS inspectors are really great

I couldn't agree more. I agree so much that we wanted to make one so that you could do the same to JSX as you can do to HTML.

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

You should watch the demo video!