Result

When you copy from the Prompt tray, you get plain text formatted for the target tool you picked in Settings. This page shows what each combination produces.

Two prompt styles#

• Short — Short length. The element, its before/after position, the new sibling order, and the constraints. Good for fast iteration.
• Detailed — a structured breakdown with markdown headings: file, container, layout type, the move, the new child order with line numbers, and explicit constraints. Good when you want the agent to be careful or when you're working on something fragile.

The same change is described in both, just at different levels of detail. Switch between them in the Settings tray.

Three target tools#

Weevar tailors the prompt format to the AI tool you’re going to paste into:

• Claude Code - assumes the tool reads your codebase. Includes file paths.
• Codex - terser. Assumes the active editor already has the file open. Drops absolute paths in favor of line N references in the body.
• Generic - tool-agnostic.

Pick whichever matches your workflow. The internal LayoutChange is identical; only the formatting differs.

Reorder example (Short, Claude Code)#

You drag <SignInButton> from the second position in your nav to the last:

Reorder children of <NavBar> {src:src/components/NavBar.tsx:14; h:a3f9} in src/components/NavBar.tsx: move <SignInButton> {src:src/components/SignInButton.tsx:8; h:b21c} (line 18) from child index 1 (position 2) to child index 4 (position 5; last). Resulting order: 0: <Logo> | 1: <SearchInput> | 2: <NavLinks> | 3: <NotificationsBell> | 4: <SignInButton>. Preserve all props and styles.

Note what's there:

• A reference to the parent and the element with their source paths and content hashes
• The from-index, to-index, and a positional anchor ("last")
• The full new sibling order
• An explicit "preserve props and styles" constraint

Reorder example (Detailed, Claude Code)#

# Reorder within <NavBar>

**File:** src/components/NavBar.tsx
**Container:** <NavBar> at line 14 — `<nav className="flex gap-6 items-center">`
**Layout:** flex-row

## Move
<SignInButton /> (line 18)
From: index 1 (2nd child)
To:   index 4 (last child, after <NotificationsBell />)

## New child order
1. <Logo /> src/components/Logo.tsx:5
2. <SearchInput /> src/components/SearchInput.tsx:11
3. <NavLinks /> src/components/NavLinks.tsx:7
4. <NotificationsBell /> src/components/NotificationsBell.tsx:14
5. <SignInButton /> src/components/SignInButton.tsx:8   ← moved

## Constraints
- Preserve all props on <SignInButton>
- Don't modify the flex-row layout
- Don't introduce wrapper elements
- Don't touch other components in this file

Move example (Short, Claude Code)#

You drag <CTAButton> from the sidebar into the hero section:

Move <CTAButton> {src:src/components/CTAButton.tsx:4; h:c8e2} (line 22) from <Sidebar> {src:src/Sidebar.tsx:1; h:91d4} (src/Sidebar.tsx:1) (child index 0) into <Hero> {src:src/Hero.tsx:1; h:7af0} (src/Hero.tsx:1) at child index 2 (as the last child). Destination order after move: 0: <Headline> | 1: <Subheadline> | 2: <CTAButton>. Preserve all props.

Move example (Detailed, Claude Code)#

# Move <CTAButton> across containers

**Source:** <Sidebar> in src/Sidebar.tsx:1 (flex-column layout)
**Destination:** <Hero> in src/Hero.tsx:1 (flex-column layout)

## Move
<CTAButton /> at src/components/CTAButton.tsx:4
Remove from: <Sidebar>, index 0
Insert into: <Hero>, index 2 (last)

## Destination order after move
1. <Headline /> src/Headline.tsx:3
2. <Subheadline /> src/Subheadline.tsx:3
3. <CTAButton /> src/components/CTAButton.tsx:4   (moved)

## Constraints
- Preserve all props on <CTAButton>
- Don't modify <Sidebar> beyond removing the element
- Don't modify <Hero>'s layout or styling
- Don't introduce wrapper elements

Codex variant#

The Codex format drops absolute file paths inside the body and uses line N references instead. The header still names the file.

When source location is missing#

If the bundler plugin isn't installed, prompts fall back to:

• DOM tag references (<div.flex.gap-6>) instead of component names
• DOM path tails (nav[0]>ul[0]>li[3]) instead of file:line
• A friendly hint at the bottom: Tip: install weevar/vite for source-accurate prompts.

The prompt is still copy-pasteable; it's just less precise.

Tailwind classes inline#

When Tailwind is detected, the parent's className appears verbatim in Detailed prompts:

**Container:** <nav> at line 14 - `<nav className="flex gap-6 items-center">`

This matters because AI tools can pattern-match utility classes against the source directly.