Capabilities

Activation#

When Weevar is off, the overlay is a single floating button in the bottom-right corner of your viewport. No banners, no toasts, no announcements.

To activate:

• Press ⌘⇧E (Mac) or Ctrl+Shift+E (Windows/Linux), or
• Click the floating trigger button.

The keybind is suppressed when you're typing in an <input>, <textarea>, or contenteditable element, so it won't fight your forms.

You can drag the trigger button to reposition it. Its location is preserved across reloads.

Tool dock#

Once activated, a vertical dock appears with the following controls:

• Overview (O) : open the session summary tray
• Pointer (W) : with the pointer selected, you can hover, select, and drag elements around valid containers
• Prompt (P) : generate or refresh the prompt for the current session
• Undo (U) : revert the last move
• Redo (R) : re-apply a reverted move
• Delete (D) : clear all session changes and selection
• Settings : open the settings tray (target tool, prompt style)
• Close (Esc) : collapse the overlay

The dock can be dragged anywhere on the screen. Its position persists.

Each tool button shows a tooltip with its keyboard shortcut.

Hover and select#

While the overlay is active, click on the pointer button or press (W) to use the pointer tool, then hover on any element on the page. You'll see:

• A selector highlight around the element's bounding box
• A small label tag in the corner showing its identity:

Click to select. The drag button appears, and the element becomes the focus of the next drag.

Drag and drop#

Drag any selected element to:

• A new position among its siblings (reorder), or
• Inside a different container entirely (move).

While dragging:

• The original element ghosts at reduced opacity in place, so you can see where it came from
• A small preview follows the cursor
• Valid drop containers gain a dashed outline
• An insertion bar appears between siblings to show exactly where the element will land
• For flex containers, the layout reflows in real time using CSS order (no DOM mutation during the drag, see Stable element identity)
• Page auto-scrolls when you drag towards the edges to a destination not in view.

Release to drop. Press Esc at any moment to cancel.

Reorder vs Move#

Weevar distinguishes two kinds of layout changes:

• Reorder : the element stays inside the same parent; only its index among siblings changes.
• Move : the element leaves one parent and lands inside a different parent.

Both are first-class. The generated prompt is shaped differently for each (see Result →).

Trays#

Weevar uses three slide-in trays, anchored to the right of the dock. Only one tray is visible at a time. Each tray has a "hide" affordance in its header to dismiss it without losing state.

Overview tray#

A live summary of the current session: how many elements have been moved and your target AI coding tool. Useful when you've made several adjustments and want to see the number of changes and the tool you are optimising your prompt for.

There's a "documentation" arrow in the Overview tray that opens this website in a new tab.

Selection tray#

When an element is selected using the pointer function, a selection tray appears showing the path and CSS properties of the selected element.

Prompt tray#

The output of the session. Shows:

• The generated prompt (Short or Detailed, depending on your Settings)
• Scrollable for longer prompts
• A Copy button

Settings tray#

• Target Tool — Here you can select the AI tool you use: Claude Code, Codex, or Generic. This tailor your prompt to fit your AI workflow
• Prompt Style — Choose the level of information included in your prompt between Short or Detailed.

Undo, redo, delete#

Every move is recorded in a session.

• Undo (U) reverts the most recent move and updates the prompt context.
• Redo (R) re-applies the previous un-done move.
• Delete (D) wipes all session moves and resets the view to original state.

Repeated moves of the same element collapse into a single effective change in the prompt. If you move the same card three times, the prompt only stores the original position of the card and the new (final) position, not the full journey of one element.

Refreshing the page also clears the session. Weevar never persists state to disk.

Keyboard shortcuts#

Single-letter shortcuts are suppressed when you’re typing in an input, textarea, or contenteditable element, and when modifier keys are held (so they don’t collide with browser/OS shortcuts).

Source location#

When the bundler plugin is installed (Vite, SWC, or Webpack), Weevar injects a data-wv-source="<file>:<line>:<col>" attribute onto every JSX element at build time. The runtime reads this and includes it in prompts.

Without the plugin, prompts fall back to DOM identity (selectors and class names). Still useful, less precise. The Prompt tray will show a hint if source location is missing.

See Vite plugin → and SWC plugin →.

Tailwind awareness#

If your project has a tailwind.config.{js,ts} or the tailwindcss package installed, Weevar's Vite plugin auto-detects it and switches on tailwindVerbatimClasses in the prompt config. With this on, prompts include the parent's actual utility classes verbatim instead of paraphrasing the layout in English.

Example prompt fragment with Tailwind awareness:

Container: <nav className="flex gap-6 items-center">

Without it:

Container: <nav> (flex-row layout)

The verbatim classes are easier for an AI to grep against your source code.

Stable element identity#

Weevar identifies elements with a four-layer scheme so that selection survives React re-renders and HMR:

1. React Fiber path — most stable when available
2. Source location — set by the bundler plugin
3. DOM path — nth-child segments from the document root
4. Content hash — text-content fingerprint, used for tie-breaking

If the element re-renders during a drag, Weevar tries each layer in turn to relocate it. If all four fail, selection is silently cleared.

Implementation detail: Weevar reads React's internal __reactFiber$… key from selected DOM nodes. This is unofficial but stable across React 17, 18, and 19.

Limitations#

• React only. Vue and Svelte adapters are planned but not in v1.
• Chromium-first. Firefox and Safari are best-effort, not parity-tested.
• Cross-origin iframes are opaque. Same-origin iframes will be supported in a future release.
• Custom elements with closed shadow DOM are treated as a single opaque node — you can't drag inside their internals.
• position: fixed and position: sticky elements can be selected and prompts can be generated, but flow-based reordering won't always produce the visual you expect.
• Production runtime is intentionally a no-op. Don't try to ship it; you can't.