Vite

Integrate JSX Tool into any Vite project with a small plugin that starts the dev WebSocket server, injects the required client script, and handles configuration automatically. No proxy or manual HTML injection required. Learn more about the dev server.

Reference example: React Router + Vite

AI-Assisted Setup (Vite)

Paste this prompt into your coding assistant

Init

Run the init command from your project root (next to your package.json). This creates your config.json and rules.md:

npx @jsx-tool/jsx-tool init

Install

Add the package to your Vite app, also run this from your project root:

npm install @jsx-tool/jsx-tool

Configure Vite

Add the plugin to your vite.config.ts.

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { jsxToolDevServer } from "@jsx-tool/jsx-tool/vite";

export default defineConfig({
  plugins: [
    react(),
    jsxToolDevServer(), // That's it!
  ],
});

Monorepos: add the plugin in the vite.config.ts of the app package that runs your dev server (not the monorepo root). Install @jsx-tool/jsx-tool in that app's package.json.

Run

Start Vite:
```
npm run dev
```
Open your app:
Visit http://localhost:5173 (or whatever port Vite assigns).
Use the JSX Tool browser extension to inspect components and apply edits.

What to Expect

WebSocket server starts automatically with your dev server
Client script is injected during vite dev only
Live edits from the extension write to your local files

Optional: JSX Tool Rules

You can add project-specific prompting rules by creating a .jsxtool/ directory next to your package.json:

package.json
.jsxtool/
└── rules.md   # Custom prompting rules

Troubleshooting

"Cannot find module @jsx-tool/jsx-tool/vite" — ensure @jsx-tool/jsx-tool is installed in the same workspace/package as your vite.config.ts.
Extension can't connect — confirm your Vite dev server is running and the JSX Tool extension is enabled.

Not using Vite?

See the non-Vite manual setup guide.