← Blog
Feature· 4 min read

PromptUI Visual Editor: Click, Select, and Refine Generated Apps

PromptUI visual editing lets users select rendered UI elements in preview and send scoped change requests back to the generated source.

The visual editor is the bridge between looking at a generated app and improving it without hunting through every file first. Users can inspect the rendered preview, choose the element they mean, and send a targeted edit request back into the Builder loop.

Why visual editing matters

Generated apps often need human taste: a section needs more space, a card needs clearer hierarchy, a CTA needs different wording, or a dashboard needs a calmer layout. Visual editing makes those refinements easier to describe because the selected element carries context.

Current preview coverage

The visual edit protocol now targets PromptUI's active preview runtimes: WebContainer for React SPA sessions, E2B cloud preview for Next.js and heavier app paths, and Sandpack fallback. Generated UI files receive stable PromptUI source markers so selected elements can map back to source more reliably.

What it is not yet

This is not a full Figma-style canvas replacement. The current goal is focused source-aware refinement inside generated app previews. Richer polish such as selected-element breadcrumbs, keyboard escape handling, mobile inspect affordances, and screenshot proof across every runtime remains product follow-through.

How it fits the Builder

Visual editing is most useful after the first generated app exists. PromptUI builds the page, the user selects the part that needs work, and the Builder applies a narrower change instead of guessing which component the user meant.