JSX tooling for modern web development

Write React code in your developer panel. Find any file with just a click. Inspect, click, and tweak your JSX until it's pixel perfect.

Install Chrome Extension

The Missing React Extension

React DevTools is great for state and tree inspection, but not built for styling. JSX Tool bridges the gap between the Element Inspector and React's Component Selector to give you the best of both worlds.

Style JSX directly, without the back-and-forth in the inspector or fuzzy searching in your IDE. JSX Tool is an IDE for modifying React in a live browser setting.

Work on the live page, not a mock. Preview CSS changes instantly with the current DOM as context, then save them back to your file system when you're ready.

A full IDE in your browser

Find any line of JSX in your codebase and manually edit it without ever leaving your browser.

Tweak CSS in-memory

Pixel-push directly on JSX without the element inspector.

Prompt and pass Screenshots to LLMs

We give LLMs the full context of whatever style change you need to make. Both you and the LLM know exactly which line of code you're talking about.

See the Demo

Try it Out

Install Extension

Download JSX Tool from the Chrome Web Store

Install Extension

Run Dev Server

Configure and run the JSX Tool dev server. Learn more about manual configuration in our docs.

AI-Assisted Setup

Paste this prompt into your coding assistant (Cursor, Windsurf, etc.)

Or try it out with the following command without having to integrate or change any code:

To use JSX Tool with this temporary setup, access your app via the proxy port (http://localhost:4000), not 3000. Your app will still be accessible on the original port, but JSX Tool will not work there. This quick start guide is for testing only and is not the recommended way to install the dev server for long term use.

In a terminal session, cd to the same directory as your project's package.json

npx @jsx-tool/jsx-tool start --logging

After you run that (your project needs to be running too). Open http://localhost:4000

What port do you run your project from?

What port do you want us to proxy 3000 to?

The dev server needs to run a web socket server, is 12021 free?

Is this a mono-repo?

Create Account

Fork our Dev Server

Our Dev Server (Headless IDE Daemon), including the code needed to connect an extension to a local codebase and LSP server, Git Status checker, and Ripgrep wrapper is fully open source and MIT licensed.

It's mostly framework agnostic and could easily be reappropriated as a backend for any browser-extension frontend IDE.

View on GitHub