> ## Documentation Index
> Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Inline edit

> The AI Pointer. Click any element on any frame, drop a one-line note, ship.

The inline-edit flow is the fastest path from *"this is almost right"* to *"this is right"*. It replaces every awkward *"in the third frame, change the orange button to ink black, keep everything else"* with two clicks and three words.

## The shape of it

<Steps>
  <Step title="Press C">
    Enters **Comment** mode. The cursor turns into a crosshair. Every iframe on the canvas listens for clicks.
  </Step>

  <Step title="Click an element">
    Click any text, button, image, container. A composer appears at the click position.
  </Step>

  <Step title="Drop a note">
    *"Make this bolder"* · *"Replace with our real product name"* · *"Use brand teal"*. Hit Enter.
  </Step>

  <Step title="Send the message">
    The element becomes a chip in the chat with your note pre-filled. Click send. The agent edits exactly that element via `update_element`. Nothing else changes.
  </Step>
</Steps>

You can stack multiple element chips in one message. *"Make all three of these buttons match the primary style"* with three chips attached.

***

## What gets captured

When you click an element, the canvas captures four things to send to the agent:

| Field              | What it is                                                   |
| ------------------ | ------------------------------------------------------------ |
| **vfId**           | A stable selector the agent uses to find this exact element. |
| **outerHTML**      | The element's HTML (truncated if huge).                      |
| **Ancestor chain** | The four or five enclosing tags, for context.                |
| **Frame id**       | Which frame the element belongs to.                          |

Together, this is enough for the agent to make a surgical edit. It does not need to re-render the whole frame.

<Tip>
  The element chip is **in-memory for that turn**. If you reload the tab before sending, the chip is gone. The chat history persists, but pointers do not.
</Tip>

***

## Direct edit vs inline edit

The canvas has two ways to change a frame. They are not the same thing.

|                | Direct edit                      | Inline edit (AI Pointer)         |
| -------------- | -------------------------------- | -------------------------------- |
| Trigger        | Double-click a frame             | Press **C**, click an element    |
| Edits          | Text content, simple layout      | Anything you can describe        |
| Who does it    | You, by typing                   | The agent, given your note       |
| Persistence    | Writes to frame HTML immediately | Goes through a chat turn         |
| Brand contract | Not enforced                     | Enforced (design system applies) |
| Cost           | Free                             | 1+ credits per turn              |

Use **direct edit** for typo fixes and trivial copy swaps. Use **inline edit** for anything that needs taste or brand discipline.

***

## Patterns

<AccordionGroup>
  <Accordion title="Tighten one sentence">
    Click the headline. *"Tighter. 5 words max."*
  </Accordion>

  <Accordion title="Recolor without breaking the system">
    Click the CTA. *"Use the dark variant from the design system."*
  </Accordion>

  <Accordion title="Replace a placeholder image">
    Click the hero image. *"Generate an editorial photo of a desk with brass accents and warm light."* The agent runs `generate_image`, uploads it, and swaps.
  </Accordion>

  <Accordion title="Re-spec a component">
    Click a card. *"This is too dense. Show only title and CTA. Drop the metadata row."*
  </Accordion>

  <Accordion title="Compare two elements">
    Click two cards in two frames. *"These should match. Use the cleaner of the two as the source of truth."*
  </Accordion>
</AccordionGroup>

***

## Why it's surgical

Under the hood the agent uses `update_element` instead of regenerating the frame. The tool takes the element's `vfId` and a target patch (new HTML, new styles, new text). It writes only that node.

This matters because:

* **Brand stays stable.** Surrounding components don't get re-rolled.
* **You don't lose hand-edits.** Anything you typed directly in the frame survives.
* **It's cheap.** A single element edit is a fraction of a full-frame regeneration.

When you want the whole frame re-rolled, **don't** use the comment tool. Reference the frame from the chat instead.

## Next

<CardGroup cols={2}>
  <Card title="Editor overview" icon="window" href="/editor/overview">
    The full editor UI map. Toolbar, sidebars, chat, viewport.
  </Card>

  <Card title="Keyboard shortcuts" icon="keyboard" href="/editor/keyboard-shortcuts">
    The complete cheat sheet. The pointer is one of many.
  </Card>
</CardGroup>