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.

Install

Add the package to your Vite app:

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!
  ],
});

Run

1. Start Vite:

   npm run dev

   Copy
2. Open your app:

   Visit http://localhost:5173 (or whatever port Vite assigns).

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