Skip to content
Start building

Visual edits

Point, don’t describe

Select any element in your live preview and say what to change, fix text in place for free, sketch over the page, or pin a comment.

Start buildingRead the docs

Visual edits let you change a Vibely app by pointing at it. Select an element and describe the change, edit text inline for free, draw on the preview, or leave a comment. Vibely edits the exact place in the source code behind what you selected.

Four modes on one toolbar: Select (S), Text (T), Draw (D), Comment (C).

Try it on a real preview

This is a live page. Hover, click, edit or draw on it.

Prompt
Button · Hero.tsx:42 · make it the brand color
Hover and click any element.
friday-cafe.vibelyagent.comSelect (S)
Friday CaféMenuVisit

Slow coffee, fast mornings

Single-origin pour-overs and pastries baked at six. Order ahead and skip the line.

Order ahead
Flat white
Cardamom bun
Cold brew

How it works

  • Select elements

    The element and its place in your code go with your message, so Vibely changes the right line.

  • Edit text inline

    Fix a typo or rewrite a headline in the preview. It writes straight to your source and uses no credits.

  • Draw annotation

    Your sketch goes with a screenshot: marks say where, words say what.

  • Comment

    Pin feedback to a spot in the preview, discuss it, then send it to chat for Vibely to fix.
    Comments for teams

  • Style panel

    Adjust text, spacing, layout and borders at the exact source location.

Before the first build

  • Design directions

    On a first build with an open look, Vibely shows three mockups of your product to pick from.

  • Design systems

    Attach a fixed palette, type and components, like Editorial Monocle, Modern Minimal or Warm Craft. What a design system is
    Business plan

  • Build from a URL

    Point at a site you have rights to and Vibely pulls its images, tokens, layout and copy.

  • From Figma

    Connect Figma or upload a .fig and build from the design.

Read the design systems docsBuild from a URL, step by stepDesign directions in the docs

Frequently asked questions

No. Editing text inline writes straight to your source code and uses no credits.

No. Your sketch goes to Vibely with a screenshot: the marks say where, and your words say what to change.

Yes. Drag it to any corner of the preview, minimize it, or hide it.

Yes. Connect Figma or upload a .fig file and Vibely builds from it. See Figma to app.