--- title: "Lovable Ships a Preview Toolbar So You Click Instead of Describe" subtitle: "Lovable's new preview toolbar replaces its old visual editor with four direct-manipulation modes, including free inline text edits and team comments pinned to your live app." url: "https://alphasignal.ai/news/lovable-ships-a-preview-toolbar-so-you-click-instead-of-describe" author: "AlphaSignal Newsroom" author_url: "https://alphasignal.ai/editorial-team" company: "Lovable" company_url: "https://alphasignal.ai/company/lovable" published: "2026-06-15T14:59:58.000Z" updated: "2026-06-15T15:59:31.783Z" type: "News" topics: - "Vibe Coding" - "Development" subtopics: - "App Builders" - "Ui Generation" upvotes: 675 read_time: "5 min" source_url: "https://x.com/lovable/status/2066536196788957198" comments: 0 --- # Lovable Ships a Preview Toolbar So You Click Instead of Describe > Lovable's new preview toolbar replaces its old visual editor with four direct-manipulation modes, including free inline text edits and team comments pinned to your live app. [Lovable](https://lovable.dev), the AI app-builder that has grown to over 8 million users and a $6.6 billion valuation, just shipped a significant quality-of-life upgrade for everyone building inside its platform. The new **preview toolbar** puts four interaction modes directly on top of your live app preview, replacing the old "Visual edits" panel that required switching contexts to make changes. ## The old way was too slow Until now, making a visual tweak in Lovable meant opening a separate editing panel, describing the element you wanted to change in text, and hoping the AI understood what you were pointing at. The preview toolbar replaces the previous Visual edits experience. Instead of using a separate editing panel, you choose a toolbar mode, point at what you want to change, and describe the update in plain language. That shift from "describe the location" to "just click the thing" is the real unlock here. ## Four modes, one toolbar The preview toolbar lets you interact with your app while you build. Pick a mode, take an action on the page, and either edit directly, describe a change, draw an annotation, or leave a comment. Here is what each mode does: - **Select elements** (`S`): Click one or more UI elements to attach them as context to the chat input, then describe what should change. Hold Cmd (Mac) or Ctrl (Windows) and click additional elements to add them to your selection. Each selected element attaches to the main chat input as a reference, and your prompt applies to all of them. - **Edit text inline** (`T`): Click directly into any text on the page and change it without writing a prompt at all. Lovable also syncs the change to your backend database or cloud automatically. - **Draw annotation** (`D`): Sketch freehand or draw shapes directly on the preview. Rough shapes are auto-cleaned into crisp lines, arrows, rectangles, and circles. Lovable receives both your message and the annotated screenshot. - **Add a comment** (`C`): Pin a note to any part of the page. Teammates can reply in-thread, and you get a red badge when there are unread replies. You can also send an entire comment thread to Lovable as a prompt. ## The practical breakthrough: pointing beats describing The hardest part of working with any AI coding tool is bridging the gap between what you see and what the model understands. Spatial instructions like "move the card grid down a bit" or "remove everything in the top-right corner" are notoriously hard to express in text alone. Use the toolbar when pointing is faster than describing, when you want to make several small updates in a row, or when a visual annotation explains the change better than text. The annotation mode is particularly powerful for layout work. Instead of writing a paragraph describing a restructure, you circle the section, draw an arrow showing where it should go, and add a one-line note. The model sees the screenshot with your sketch overlaid, giving it the spatial context that text alone can't provide. ## What it costs Not everything burns credits equally. Select elements and Draw annotation are treated as standard chat usage and consume credits. Inline text edits are free up to a daily limit of 100 edits per user. After that, additional inline text edits use credits from your workspace. Adding comments is free. Sending a comment thread to Lovable is treated as standard chat usage and consumes credits. On the subscription side, Lovable's Free plan costs $0/month with 5 daily credits. The Pro plan starts at $25/month for 100 monthly credits, and the Business plan starts at $50/month with additional team features like SSO and data opt-out. Lovable doesn't charge per seat or per hour. It charges by credits, a variable-cost consumption unit where every message you send burns a different number of credits depending on how complex your request is. ## The collaboration angle The comment system quietly makes Lovable more of a team tool. Comments are pinned to specific elements in the live preview, not floating in a Slack thread or a Notion doc. A designer can leave a note on a button, a PM can reply with approval, and a developer can forward the whole thread to Lovable as a prompt. That loop, from feedback to code change, now happens entirely inside the product without copy-pasting context. Business and Enterprise workspaces can also share a project with everyone in the workspace as read-only, which means stakeholders can view and comment without accidentally triggering edits. ## Ergonomics that matter Small details add up. You do not have to wait for one change to finish before starting the next. Requests queue up and process in order, so you can keep annotating while the previous edit is still rendering. The toolbar itself is draggable, snaps to corners, can be minimized to a tab, or hidden entirely for a clean preview. It also adapts its color scheme to whatever is behind it so it stays readable against any background. The toolbar is available now to all Lovable users across every plan. For teams already using Lovable to ship products, this is the kind of friction reduction that compounds quickly, especially when iterating on UI with non-technical stakeholders in the loop. Check out the [official documentation](https://docs.lovable.dev/features/preview-toolbar) for the full breakdown of modes, keyboard shortcuts, and tips. ## Sources - [X post by @lovable](https://x.com/lovable/status/2066536196788957198) - [Edit from the preview – Lovable Documentation](https://docs.lovable.dev/features/preview-toolbar) - [Lovable Changelog & Updates 2026 – Changelogger](https://changelogger.live/tool/lovable) - [Lovable (company) – Wikipedia](https://en.wikipedia.org/wiki/Lovable_(company)) - [A complete guide to Lovable pricing in 2026 – eesel AI](https://www.eesel.ai/blog/lovable-pricing) - [Lovable Pricing, Credits, and Hidden Costs in 2026 – No Code MBA](https://www.nocode.mba/articles/lovable-pricing)