UIFoxy
UIFoxy vs LocatorJS
Last updated: October 4, 2026
Both start with a click on a component in the browser, but the click goes to different places. LocatorJS opens the component's code in your editor, for you to change by hand. UIFoxy copies a prompt with the file and line, your written request and the element's DOM context, for a coding agent to act on.
Side by side
| Aspect | UIFoxy | LocatorJS |
|---|---|---|
| Installation | A Chrome extension. Nothing is added to the project. | A browser extension, or a library in the project (@locator/runtime) so the whole team has it. For Next.js 15+ with Turbopack or SWC, its docs point to @locator/webpack-loader. |
| How you select | Click the toolbar icon, then click the elements. Esc leaves. | Hold Option or Alt, move the cursor and click a component’s box. |
| What a click does | Adds the element to a prompt you copy: where it is written and where its component is used, each with a confidence label, your request, and DOM context. | Opens the component’s code in your editor. |
| Made for | Handing a UI change to a coding agent. | Jumping to a component’s code in your IDE. |
| Frameworks | React 18 and 19 in development mode, with Vite and Next.js (file and line on React 19 need 19.1 or later; details). Other pages get selector, structure and text. | React, Preact and SolidJS. Vue and Svelte are marked experimental. |
| Browsers | Chrome and other Chromium-based browsers. | Chrome, Edge, Brave, Opera and Firefox. |
| Price | Free: 5 copied prompts a day. Pro: $10 once, no subscription. | Open source, MIT license. |
When to pick LocatorJS
- You want to open the code yourself, in your editor, and make the change by hand.
- You work with Preact or SolidJS, or want to try it with Vue or Svelte, which it marks as experimental.
- You use Firefox.
- You want it installed as a library in the project so everyone on the team has it, or you need its data-id approach, which its docs say can also run in production-like environments.
- You want an open-source tool under the MIT license.
When to pick UIFoxy
- The next step after the click is a prompt, not a manual edit. The agent gets the file:line where the element is written and where its component is used, on separate lines.
- You want the prompt to say how sure it is (
exact,mapped,name-only,dom-only), so the agent checks a guess before editing. - You change several things at once: select several elements, write a request on each, and copy one prompt.
- You don't want to touch the project: no dependency, no loader, no change to the dev server, on Vite or on Next.js. See how it works for what each setup gives you.