What is a visual editor for AI-built apps?
A visual editor for AI-built apps lets you select an element in the running interface, adjust it directly, and save the change to the project's source files. Prompting describes changes in words, browser DevTools change the page only until reload, and a source-aware visual editor aims to write the change to the code you own.
Three ways to change an AI-built interface
Prompting asks an AI coding tool to change the code from a written description. It works well for new behavior and for changes across several files. It is slower for small visual corrections, because each description of a pixel-level result has to be interpreted again.
Browser DevTools lets you edit the rendered page directly. The change is immediate and useful for diagnosis, but it lives in the browser. Reloading the page removes it, so the result must be copied to the stylesheet by hand.
A visual editor combines the two. You point at the element on the running app, adjust it, and the editor writes the change into the file that owns the element. The editor is useful only if the saved change is readable and reviewable in your own diff.
What a source-aware editor has to do
A source-aware editor must map a rendered element back to the component and style rule that produced it. If it cannot, a visual change cannot be saved reliably. Shared selectors and utility classes make this harder, because one edit can affect several screens.
It should write standard code in the framework you already use, rather than a private format. The result should be an ordinary diff you can review, test and revert like any other commit.
- Edits survive a reload and appear in the project files.
- The diff touches only the component and style rule that were selected.
- Written code uses your framework's conventions.
- Behavior such as validation and data requests is unchanged.
Choose the approach for each change
Use prompting to add or change behavior. Use DevTools to find the cause of a visual problem. Use a visual editor when the problem is visible, the fix is small, and the result has to be saved in source. Use tests for anything involving data, access or payments, whichever approach made the change.
Mello is an upcoming visual editor for AI-built apps and is not yet available. The principles above apply to any tool in this category, and you can apply them today with DevTools and your own editor. For a worked example, read the related guide on how to visually edit an AI-generated app.