# Lovable — How we built the Visual Edits feature

- Company: Lovable (lovable.dev)
- Announced: 2025-03-13T12:01:00+00:00
- Category: capability-change
- Coverage: not counted
- Announcement: no
- Group: routine
- Source: https://lovable.dev/blog/visual-edits
- Record: https://forck.live/items/12145-how-we-built-the-visual-edits-feature
- Subject: Lovable / AI app builder

Lovable launched Visual Edits, a Figma-like visual editor integrated into its AI-powered app-building platform. The feature allows users to select, edit, and save frontend changes directly in their applications without requiring AI regeneration, reducing costs and iteration time. The engineering approach uses stable JSX tagging, cloud dev servers, and client-side AST parsing to maintain a bi-directional connection between visual edits and source code.

## Evidence

Verbatim from https://lovable.dev/blog/visual-edits:

> We decided to move part of the code layer closer to the visualization layer within the browser, creating a WYSIWYG editor. Unlike traditional WYSIWYG tools that abstract away code entirely, our approach maintains a direct, bi-directional connection between visual edits and the underlying source code.

---

Record: https://forck.live/items/12145-how-we-built-the-visual-edits-feature
Catalogue: https://forck.live/llms.txt
Current issue: https://forck.live/feed.md