A dev tool that lets you rearrange your UI visually in the browser—then turns those changes into prompts for AI to implement in code.
Weevar is development-only: it runs as an overlay in your React app while you work locally. Nothing ships to production by until you push.
npm install weevarMount in your app root:
import { Weevar } from "weevar/react";
export function Root() {
return (
<>
<App />
<Weevar />
</>
);
}import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { weevar } from "weevar/vite";
export default defineConfig({
plugins: [weevar(), react()],
});Run your dev server and press ⌘⇧E (Mac) or Ctrl+Shift+E (Windows/Linux) to toggle the overlay.
- Node.js
>= 18.18 - A React app (
react/react-dom>= 17) - Development mode (run your usual dev server—e.g. Vite, Next dev—not a production build)
- Bundler integration is recommended for the best experience (see Vite below); other setups may need extra configuration—see the Install guide.
- Run your app in dev mode.
- Turn on the overlay (shortcut below).
- Click and drag elements to rearrange them.
- See the layout update instantly.
When you’re done, the tool generates a prompt.
Paste that into your AI coding tool, and it updates your code.
- Reorder elements within a layout.
- Move elements between sections.
- Experiment with layout structure visually.
This version is focused on layout and structure only.
Explaining layout changes is harder than it sounds:
- “Put this under that.”
- “Move this to the right but keep it aligned.”
- “Reorder these cards.”
Instead of describing it, you move things directly and let Weevar translate that into a structured prompt.
Full guides live in the repository:
© 2026 Gideon Adeyemi. All rights reserved.
licensed under the MIT License.