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 tool 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. Click Visual edits in the prompt box.
  2. Select elements in the live preview and edit them visually using the left-hand panel.
  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 Lovable to modify the design. Use the visual edits tool instead.