Proxy Setup

The proxy approach runs a lightweight server that forwards requests to your dev server while injecting the JSX Tool client script automatically.

Reference example: Next.js with Proxy

Consider Manual Setup First

The proxy can cause routing and redirect issues with some frameworks. Manual setup is simpler and more reliable for most projects.

How It Works

The proxy server sits between your browser and dev server:

Your dev server runs on serverPort (e.g., 4000)
The JSX Tool proxy runs on proxyPort (e.g., 3000)
You access your app through the proxy at proxyPort
The proxy injects JSX Tool's client script into HTML responses
All other requests are forwarded transparently to your dev server

Install

Add the package to your project:

npm install @jsx-tool/jsx-tool

Configure

Create a .jsxtool/ directory next to your package.json with a config.json file:

.jsxtool/config.json

{
  "noProxy": false,             // Enable proxy mode
  "wsPort": 12021,              // WebSocket port
  "wsHost": "localhost",
  "wsProtocol": "ws",
  "serverPort": 4000,           // Your dev server port
  "serverHost": "localhost",
  "serverProtocol": "http",
  "proxyPort": 3000,            // Port for JSX Tool proxy
  "proxyHost": "localhost",
  "proxyProtocol": "http",
  "logging": false
}

Key settings:

noProxy: false - Enables proxy mode
serverPort - Your actual dev server's port (where it runs)
proxyPort - The JSX Tool proxy port (where you'll access your app)

Update Scripts

Modify your package.json scripts to run both the proxy and your dev server:

package.json

{
  "scripts": {
    "dev": "your-dev-server --port 4000",
    "jsx-tool": "jsx-tool",
    "dev:jsx-tool": "npm run jsx-tool & npm run dev"
  }
}

Important: Make sure your dev server's port matches serverPort in the config. The --port 4000 flag should match "serverPort": 4000.

Run

Start both servers:
```
npm run dev:jsx-tool
```
Open your app through the proxy:
Visit http://localhost:3000 (the proxyPort), not your dev server's direct port.
Use the JSX Tool browser extension to inspect components and apply edits.

What to Expect

JSX Tool proxy intercepts requests and injects the client script automatically
WebSocket server runs for file-system operations
Your dev server runs normally on serverPort, unaware of the proxy
Live edits from the extension write to your local files

Drawbacks

Redirect/Routing issues — Some frameworks may have problems with redirects and absolute URLs through the proxy
Additional layer — The proxy adds complexity and a potential point of failure
Port management — Need to manage two separate ports for dev server and proxy

Project Structure

package.json
.jsxtool/
├── config.json   # Proxy configuration
└── rules.md      # Custom prompting rules (optional)

Switch to Manual Setup

Avoid proxy complications with the simpler, more reliable manual approach.