Skip to main content
Visual edits let you customize your project visually and make quick, targeted changes to layouts, text, colors, and images without writing code or using credits.

​
Why use visual edits

Visual edits empower everyone - designers, marketers, and non-technical teammates - to make changes visually and move faster.

​
Key benefits

  • Faster iteration: Update layouts and text visually—no code or prompts required
  • Accessible editing: Non-technical users can make confident changes
  • Live preview: See every change in real time before publishing

​
Common use cases

  • Marketers launching new campaign pages quickly
  • Product managers refining layouts and copy directly
  • Teams quickly building prototypes and variants

​
Key capabilities

The Visual edit mode lets you change your project visually, right on the page. It’s designed for fast, intuitive adjustments with full control over layout and spacing.
  • Multi-select elements for batch edits by holding ⌘ Command(Mac) or ⊞ Win(Windows).
  • Layout controls for alignment and positioning
  • Adjust margins and padding on individual sides of containers
  • Edit text, colors, and fonts directly from the sidebar
  • Enhanced text formatting with line breaks and inline styling
  • Replace images by uploading files or adding image URLs
  • Generate AI images by editing images with prompts

​
Quick start

  1. Open Design view from the + button next to Preview.
  2. Select elements in the live preview and edit them visually using the left-hand panel.
    For quick access, use the Visual edits shortcut in the prompt box.
  3. Preview and save when you’re happy with the result.
Visual edits do not deduct credits, except when:
  • Making changes to dynamic elements.
  • Prompting the Lovable Agent to modify the design. Use visual edits instead.