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
replies(1):
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.
We haven't gotten much further than just launching and praying.
> Is this sponsored by yc?
I mean we're a YC portfolio company, so sort of I guess. I used to work at YC, so I suppose YC has been sponsoring me for a while now.
> Who are the target audience?
React developers
> Are the target audience companies or businesses or individuals?
Both, I hope. We definitely went more along the lines of supporting individual developers spiritually but there is no reason it shouldn't work if you have colleagues.
> Congratulations
<3 Thanks so much!
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?
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!
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!
I think if you're building something that is targeting designers that is the way to go.
Thanks for checking it out though!
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!
If you can implement some Vim-style navigation and key-bindings into this, that would be awesome!
I'm excited for you to try it out too! Please let me know how it goes
I haven't really been developing with React recently, but will definitely check this out!
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.
What I meant to say is, I can't see this competing with the current state of the art as it comes to local development. As for remote development, we are quite lacking there IMO, and this seems to be a great potential candidate to solve that problem.
I do a large portion of my development locally, it's great, I love it. This product is trying to get me to change my workflow there and asking me to do it from the browser only. Why would I work on a browser only if I have a full suite of tools locally, terminals, IDEs, text-editors, rich LSP / plugins / Agents / etc.
It may be all a pipe dream and not pan out, but I bet they pitched a path to more broader optionality. That's all you really need, momentum and optionality.
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.
It seems to leverage some official chrome devtools workspaces concept.
To be clear, I fully expect Vercel to launch something and for them to have the best distribution in the world. I don’t think they will ever support Vite or things that aren’t Next but que sera sera.
> 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.
I hope there’s a right click, “edit JSX” button.
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.
Thanks for the comment man!
I have been using Cursor + Claude (Composer) in production code base with some success. Integrations with live React DevTools in the browser could make UI debugging and iterative development much faster. But you also need to think outside of the box of IDE. It is never about IDE. It is about high quality workflow.
That's my entire thesis. I think it's a long long road. But I think you've actually done a great job of pretty much seeing the whole vision.