I spent 3 weeks building the Figma-like Visual Edits feature at @lovable_dev which lets you visually edit almost anything in Lovable, for faster and more precise edits. Technical background of what went into building this feature: //1

Every time someone creates a project in Lovable, spin up a dev server hosted in the cloud. This enables complex applications that can be instantly edited with AI Chat and Visual Edits. Every JSX element gets tagged with a unique, stable ID that persists between edits. When you click a DOM element, it matches back to the exact JSX responsible for rendering it. //2

The code is synced to the frontend, and the entire AST lives in your browser. When you make changes in the visual editor, it modifies the AST directly. Instead of waiting for the backend to implement a change, I run a tailwind generator on the client to make sure not-yet-saved changes are applied optimistically. I also parse the user's Tailwind config to make sure all the custom classes are available to choose from directly in the UI. //3

Clicking save, this happens: - It generates clean code from the AST - Diffs the changes - Pushes the changes to the server, - Which triggers an HMR update to the client, updating the preview with the latest code+changes //4

All of this goes into making a great editing experience where AI and visual design comes together. This also opens the opportunity for other cool things, like a near-instant code editor, app-wide theming options, and more. //5

AI isn’t a 'set it and forget it' deal. 🤖 It’s a workflow glow-up. @EY_US gets it: adapting processes is key to unlocking AI’s full power. So, are you transforming your operations—or just hoping for magic? ✨ #AIAdoption #BusinessTransformation #FutureOfWork

@lovable_dev What did you use to make the video?

@lovable_dev Plus... zero tokens 🤘

@lovable_dev Great write up! Thanks for sharing!

@lovable_dev very useful feature, man.

@lovable_dev Next, let people import existing github projects to lovable.

@lovable_dev my favorite feature hands down