UI control for agent-driven builds.

Weevar tool moving UI elements on the web

Working with Weevar#

Run your app in dev mode (Vite, Next dev, anything that bundles React in development).
Press ⌘⇧E on Mac or Ctrl+Shift+E on Windows/Linux to activate the overlay. Or click the floating Weevar trigger in the corner.
Hover over an element. You'll see an outline and a label showing the component name or selector.
Click to select it. The Edit Tray opens, drag to reorder or move it within the layout, and use the tray controls to adjust its styles live.
Open the Prompt tray. Weevar gives you a structured prompt describing every layout change and style tweak you made in the session.
Copy. Paste it into Claude Code, Codex, or your preferred AI assistant.

Refresh the page, and everything snaps back. Weevar never writes to your source files; your prompt does.

Agent execution#

Plain prose loses precision. "Make the heading bigger and move the CTA below it" leaves the agent guessing which heading, which file, and how big. Weevar gives the agent what it actually needs to find and edit code:

Component name (<NavItem>, <SignInButton>) when React Fiber is available
Source location (src/components/Header.tsx:14) when the bundler plugin is installed
DOM path with index (nav[0]>ul[0]>li[3]) for grep fallback
Container layout (flex-row, grid, block) so the agent doesn't break the layout
Tailwind classes verbatim when Tailwind is detected; flex gap-6 items-center instead of "horizontal layout with medium spacing"
Sibling order before and after the move, so there's no ambiguity about where the element lands
Style property changes with before and after values; font-size 15px → 18px, color #333 → #000, so the agent makes the exact change you made, not a guess
Tailwind utility suggestions for style changes when Tailwind is detected
Constraints ("preserve all props", "don't introduce wrappers") to keep the diff narrow

The result is a prompt the agent can act on without extra clarification.

Weevar in action#

View Demo

What it’s for#

Weevar is for the moments where you know exactly what you want the layout to look like and how you want something styled, but writing it all down for an AI is harder than just doing it. It is for experimenting visually, moving things around, tweaking sizes, colours and spacing until you find what works, without having to do all that experimentation via prompting one after the other.

"Put the button under the cards on the left hand side" — drag it yourself.
"Reorder these cards in this order..." — just reorder them.
"Make this heading bigger and bolder" — dial it up in the Edit Tray.
"Change the background colour on this card" — pick it in the colour picker.
"Move this from the sidebar into the main column" — drag it across.

You're not writing a spec. You're showing the agent the answer.

Useful tips#

Few changes per session is fine. Multiple changes are also fine, Weevar batches them and generates a single prompt that explains them in order.
You can mix layout and style changes in one session. Drag elements around and tweak styles in the same session. Weevar batches everything into a single prompt that covers all your changes in order.
Pick the right target tool. Claude Code expects file paths. Codex expects line numbers. Generic gives you a tool-agnostic version. The dropdown is in Settings.
Use the bundler plugin. Without it, prompts fall back to DOM selectors. With it, you get component names and file:line anchors that AI tools can jump to directly.
Refresh to reset. If a session gets messy, refresh the page. Nothing was committed.

License information#

Weevar is MIT licensed. You can use it and ship it in your own projects, personal or commercial.

You are free to adapt it to your workflow or include it in your internal tools. If you redistribute Weevar as part of another product, the original license must be included in detail.

Weevar was created and is maintained by Gideon Adeyemi.