Help

General#

What is Weevar?#

A development overlay for React apps that lets you grab elements in your running UI, drag them into a new arrangement, and copy a structured prompt your AI assistant can act on. Show the change instead of describing it.

Why should i use this instead of DevTools?#

Browser DevTools lets you experiment visually but the experiment is throwaway. The intent doesn't survive into a prompt. Weevar captures the change in a structured form (component name, source location, before/after sibling order, layout type) that an AI agent can act on, so the experiment becomes the brief.

Is it free?#

Yes. MIT-licensed, free for personal and commercial use.

Setup#

How do I install it?#

npm install weevar, mount <Weevar /> once at your app root, and (recommended) add the Vite, SWC, or Webpack plugin. Full guide on Install →.

Does it work with Next.js?#

Yes for the runtime (<Weevar /> works out of the box in App Router and Pages). For source-accurate prompts on Next, the SWC plugin or the Webpack loader is the path until a first-class Next adapter ships.

Does it work with Create React App?#

Yes for the runtime. CRA's locked Webpack config makes the loader awkward; use CRACO to add the Webpack rule, or eject. Migrating to Vite is faster and cleaner.

Does it work with Astro / Remix / Tanstack Start?#

The runtime works wherever React 17+ runs. Source-injection plugins exist for Vite, SWC, and Webpack 5. If your stack uses one of those (Astro and Tanstack Start use Vite; Remix uses Vite in current versions), you’re set.

Using Weevar#

How do I activate it?#

Press ⌘⇧E (Mac) or Ctrl+Shift+E (Windows/Linux). Or click the floating Weevar trigger in the bottom-right.

Can I change the keybind?#

Yes. Pass a keybind prop to <Weevar />:

<Weevar keybind={{ key: "k", meta: true, shift: true }} />

Can I undo a move?#

Yes. Press U to undo the last move. R redoes. D clears the entire session.

Will my changes persist?#

No. Weevar never writes to disk and never persists state across page reloads. Refresh resets the layout to whatever your source code says.

How do I get the prompt?#

Press P or click the Prompt icon in the tool dock. Copy with the Copy button or ⌘C / Ctrl+C after selecting the text.

Which AI tools work with Weevar?#

The output is plain text, so any AI tool that accepts text input works; Claude Code, Codex, Cursor, Copilot, you name it. The Settings tray lets you pick a target format (Claude Code, Codex, Generic) that's tuned for the receiving tool.

Can I customize the prompt before pasting?#

Yes. The output is plain text, edit freely. Common edits: prepending intent, appending constraints, stripping the disambiguation block.

Technical#

How does it identify elements stably?#

A four-layer identity scheme: React Fiber path, source location (from the bundler plugin), DOM path with nth-child indices, and a content hash for tie-breaking. Whichever layer resolves first wins. Details on Schema →.

Does it modify my source code?#

No. Weevar generates a prompt; your AI assistant modifies the source. Weevar itself never writes to disk.

Will it slow down my dev server?#

Idle, no. When the overlay is off, no event listeners are attached and there's nothing to do. Active, the runtime targets <8ms per frame on a 1000-element page (frame budget is 16ms, half left for the host). Bundle size target: under 80KB gzipped for the dev runtime.

Does it work with Tailwind?#

Yes. The Vite plugin auto-detects Tailwind and switches on tailwindVerbatimClasses, which makes prompts include the parent's actual utility classes. See Capabilities → Tailwind awareness.

Does it work with shadcn/ui, Radix, Headless UI?#

Yes. Weevar's Fiber-aware identity scheme handles components that render through React portals correctly.

Is there any way it can ship to production?#

No, by design. The package's exports field uses a development condition; production builds resolve to a no-op stub. You can verify by grepping your production bundle for Weevar symbols.

Does it support cross-origin iframes?#

No. Browser security forbids it. Same-origin iframes are planned for a future release.

Does it touch my React tree?#

The overlay UI is rendered into a closed shadow root attached to document.body outside your React tree entirely. Weevar reads DOM and Fiber metadata but never re-renders, mounts, or unmounts your components.

How do I report a bug or request a feature?#

Open an issue on GitHub. PRs are welcome as long as you open an issue or discussion first.