Skip to main content

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.

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

1

Press C

Enters Comment mode. The cursor turns into a crosshair. Every iframe on the canvas listens for clicks.
2

Click an element

Click any text, button, image, container. A composer appears at the click position.
3

Drop a note

“Make this bolder” · “Replace with our real product name” · “Use brand teal”. Hit Enter.
4

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.
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:
FieldWhat it is
vfIdA stable selector the agent uses to find this exact element.
outerHTMLThe element’s HTML (truncated if huge).
Ancestor chainThe four or five enclosing tags, for context.
Frame idWhich 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.
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.

​
Direct edit vs inline edit

The canvas has two ways to change a frame. They are not the same thing.
Direct editInline edit (AI Pointer)
TriggerDouble-click a framePress C, click an element
EditsText content, simple layoutAnything you can describe
Who does itYou, by typingThe agent, given your note
PersistenceWrites to frame HTML immediatelyGoes through a chat turn
Brand contractNot enforcedEnforced (design system applies)
CostFree1+ 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

Click the headline. “Tighter. 5 words max.”
Click the CTA. “Use the dark variant from the design system.”
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.
Click a card. “This is too dense. Show only title and CTA. Drop the metadata row.”
Click two cards in two frames. “These should match. Use the cleaner of the two as the source of truth.”

​
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

Editor overview

The full editor UI map. Toolbar, sidebars, chat, viewport.

Keyboard shortcuts

The complete cheat sheet. The pointer is one of many.