Monorepos

JSX Tool can work in monorepo setups with shared packages. The key feature is additionalDirectories, which gives JSX Tool access to multiple packages across your workspace so it can read and modify shared components and utilities.

Vite monorepo example Next.js monorepo example

Monorepo Support

Without additionalDirectories, JSX Tool can only access files in your app package. When you have shared components in separate packages, JSX Tool needs explicit permission to read those directories.

Typical Monorepo Structure

my-monorepo/
├── package.json              # Root workspace configuration
├── packages/
│   ├── app/                  # Your main application
│   │   ├── package.json      # App dependencies
│   │   ├── vite.config.ts    # (Vite) or
│   │   ├── .jsxtool/         # (Non-Vite)
│   │   └── ...
│   └── shared/               # Shared components/utilities
│       ├── src/
│       │   ├── components/
│       │   └── index.ts
│       └── package.json

Configuration

The setup depends on whether you're using Vite or not. The key configuration is the same: additionalDirectoriesarray that specifies relative paths to other packages.

For Vite Projects

Add the additionalDirectories option to your Vite plugin in packages/app/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({
      additionalDirectories: ['../shared']  // Relative to package.json of package
    })
  ],
});

Important: Your vite.config.ts must be in the same directory as your app's package.json. Paths in additionalDirectories are relative to this location.

packages/

├── app/

├── package.json ✅ (you are here)

└── vite.config.ts

additionalDirectories: ['../shared']

└── shared/ ← this directory

For complete Vite setup instructions, see the Vite setup guide.

For Non-Vite Projects

Add additionalDirectories to your .jsxtool/config.json in packages/app/.jsxtool/:

{
  "noProxy": true,
  "wsPort": 12124,
  "wsHost": "localhost",
  "wsProtocol": "ws",
  "additionalDirectories": ["../shared"]  // Relative to package.json
}

Important: The .jsxtool/ directory must be next to your app's package.json, not at the monorepo root. Paths in additionalDirectories are relative to your app package.

packages/

├── app/

├── package.json ✅ (you are here)

└── .jsxtool/

└── config.json

"additionalDirectories": ["../shared"]

└── shared/ ← this directory

For complete non-Vite setup instructions, see the manual setup guide or proxy setup guide.

How It Works

When you configure additionalDirectories:

JSX Tool scans your app package directory (where your config lives)
It also scans all directories listed in additionalDirectories
When you use the extension to inspect or modify components, JSX Tool can find and update files across all configured directories

Adding More Packages

To give JSX Tool access to additional packages, simply add more paths to the array:

Vite

jsxToolDevServer({
  additionalDirectories: [
    '../shared',
    '../ui-library',
    '../utils'
  ]
})

Non-Vite

{
  "additionalDirectories": [
    "../shared",
    "../ui-library",
    "../utils"
  ]
}

All paths are relative to where your configuration lives (next to package.json in your app package).