System Design
JSX Tool can be integrated in a couple of different ways. Conceptually, all installations follow a similar pattern.
Architecture Overview (Non-Vite)
JSX Tool's dev server creates a bridge between your browser and filesystem, enabling the Chrome extension to read and modify your source code in real-time. The system is designed to be lightweight, framework-agnostic, and secure.
Components
Browser Extension
Receives the WebSocket address to connect to the JSX Tool dev server.
JSX Tool WebSocket Server (Dev Server)
A lightweight WebSocket server that is scoped to reads and writes from the base of your React project.
Your Project Web Server
You need to communicate the WebSocket server address by either manually setting the variable in the <head> tag yourself or by utilizing the proxy server.
JSX Tool Proxy Server
Intercepts document requests and attempts to inject the WebSocket address into the <head> tag.
Security Considerations
- File system scope — The server only accesses files within your project directory and configured additional directories.