config.json

Configure JSX Tool's dev server settings with a config.json file. This file controls server ports, proxy behavior, WebSocket configuration, and more for non-Vite projects. If you are using Vite, you do not need this file.

Vite Users

If you're using Vite, you don't need config.json. Configuration is handled through the Vite plugin instead.

Quick Start

Initialize JSX Tool in your project to create the configuration files:

npx @jsx-tool/jsx-tool init

This interactive command will:

Prompt if you're using Vite (and skip config.json if so)
Prompt you for server and proxy configuration
Create .jsxtool/config.json with your settings
Create .jsxtool/rules.md for custom prompting rules

File Structure

The .jsxtool/ directory should be placed next to your package.json:

.jsxtool/
├── config.json    # Dev server configuration
└── rules.md       # Custom prompting rules

Monorepos: Place the .jsxtool/ directory in your app package directory (where your dev server runs), not at the monorepo root.

Complete Configuration

Here's a complete config.json with all available options and their defaults:

{
  "serverPort": 3000,
  "serverHost": "localhost",
  "serverProtocol": "http",
  "noProxy": false,
  "proxyPort": 4000,
  "proxyHost": "localhost",
  "proxyProtocol": "http",
  "wsPort": 12021,
  "wsHost": "localhost",
  "wsProtocol": "ws",
  "injectAt": "</head>"
}

Configuration Options

Target Server Settings

These settings configure the server that's running your application (e.g., Next.js, Create React App, custom server):

`serverPort`

The port your application server runs on.

Type: number

Default: 3000

`serverHost`

The hostname your application server runs on.

Type: string

Default: "localhost"

`serverProtocol`

The protocol your application server uses.

Type: "http" | "https"

Default: "http"

Proxy Settings

Control whether JSX Tool runs a proxy server to inject the WebSocket script:

`noProxy`

When true, JSX Tool won't start a proxy server. You'll need to manually inject the WebSocket script into your HTML.

Type: boolean

Default: false

`proxyPort`

The port the proxy server will run on. This is where you'll access your app when the proxy is enabled.

Type: number

Default: 4000

`proxyHost`

The hostname the proxy server will bind to.

Type: string

Default: "localhost"

`proxyProtocol`

The protocol the proxy server will use.

Type: "http" | "https"

Default: "http"

`injectAt`

The HTML string to search for when injecting the WebSocket script. The script is inserted right before this string.

Type: string

Default: "</head>"

WebSocket Settings

Configure the WebSocket server that communicates with the browser extension:

`wsPort`

The port the WebSocket server will run on.

Type: number

Default: 12021

`wsHost`

The hostname the WebSocket server will bind to.

Type: string

Default: "localhost"

`wsProtocol`

The WebSocket protocol to use. Use "wss" for secure connections.

Type: "ws" | "wss"

Default: "ws"

Monorepo Support

`additionalDirectories`

Array of relative paths to additional directories (like shared packages) that JSX Tool should have access to. Paths are relative to the location of your package.json.

Type: string[]

Default: []

See the Monorepos guide for detailed setup instructions.

Common Configurations

Minimal Setup (No Proxy)

If you're manually injecting the WebSocket script or using a custom setup:

{
  "serverPort": 8080,
  "noProxy": true
}

Monorepo with Shared Packages

Grant JSX Tool access to shared component libraries:

{
  "serverPort": 3000,
  "noProxy": false,
  "additionalDirectories": ["../shared", "../ui-components"]
}

HTTPS Setup

For secure connections:

{
  "serverPort": 3000,
  "serverProtocol": "https",
  "wsProtocol": "wss",
  "noProxy": false
}

Configuration Priority

Configuration values are resolved in the following order (highest to lowest priority):

CLI options — Options passed to npx @jsx-tool/jsx-tool start
config.json — Values in your .jsxtool/config.json file
Defaults — Built-in default values

Troubleshooting

"Config file not found" — Ensure .jsxtool/config.json exists next to your package.json, not at the monorepo root.
"Port already in use" — Another process is using one of your configured ports. Either stop that process or change the port in your config.
Proxy not forwarding requests — Verify serverPort matches your application's actual port, and that your app server is running.

Manual Setup

Learn how to manually inject the WebSocket script without a proxy

Monorepo Setup

Configure JSX Tool for monorepos with shared packages