JSX Tool is a Chrome extension that overlays a full‑featured IDE onto live React pages, allowing developers to select JSX components, edit source code and CSS in‑memory, and see instant visual updates. The extension syncs changes back to the local file system through a dev server that offers LSP integration, Vim‑style keybindings, linting, fast code search, AI‑assisted styling, and supports Vite, Next.js, monorepos, and enterprise SSO/SAML.
Funding
Funding not disclosed
Founders
Product
Problem
React developers often need to toggle between the browser’s element inspector and their IDE to adjust component styles, which slows iteration and makes it hard to map DOM changes back to the original JSX source. This fragmented workflow hampers rapid UI refinement, especially in large codebases or monorepo setups.
Solution
JSX Tool delivers a Chrome extension that overlays a full‑featured IDE directly onto the live browser page, letting developers select any JSX component, edit its source code, and tweak CSS in‑memory without leaving the browser. Changes are instantly rendered against the current DOM, and when ready, the extension writes the updates back to the local file system via a lightweight dev server. The dev server provides language‑server protocol (LSP) support, Vim‑style keybindings, auto‑linting, and fast code search across the project. Integrated AI assistance enables screenshot‑based prompts and up to 1,500 monthly AI credits on paid plans, streamlining complex styling decisions. The tool works with Vite, Next.js, and other frameworks, and includes support for monorepos, component navigation, and SSO/SAML for enterprise teams.
Target Audience
The primary users are front‑end engineers, UI developers, and design‑tech teams building React applications, ranging from solo developers to enterprise engineering groups that require integrated styling workflows.
Features
- Chrome extension with component selector that maps rendered DOM elements back to their original JSX source files
- In‑memory CSS editor with live preview, allowing pixel‑perfect adjustments without reloading the page
- Dev server daemon offering LSP integration, Vim bindings, auto‑lint, and fast ripgrep‑based code search
- AI‑powered styling assistant: screenshot prompts, context‑aware suggestions, and configurable API key usage
- Support for Vite, Next.js, and generic React setups, plus monorepo detection and automatic configuration
- Enterprise‑grade features: SSO/SAML single sign‑on, member management, and role‑based access controls
- Exportable component navigation tools and searchable JSX/prop explorer for large codebases