Feature request: Visual live preview and visual-edit mode for AI Code Assist (lovable.dev style) #1

[Hoisi]

Select Topic Area

General

Body

Summary

It would be highly beneficial if GitHub AI Code Assist provided features closely matching lovable.dev:

• Visual live preview: See UI changes of your code in real time, just like lovable.dev.
• Visual-edit mode: Do WYSIWYG style changes directly in a preview pane, with auto-generated, previewable code patches for review/merge (e.g., "Visual edit in Lovable").

Inspiration

The lovable.dev workflow combines:

• Left-side: conversational and workflow timeline (AI suggestions, edit proposals, chat box, buttons for preview/apply/edit/update, and status/tagging of changes),
• Right-side: a persistent live preview pane, interactive UI, and visual edit actions (with toolbar for Preview, Code, etc.).
• Each suggestion or visual edit can be previewed, reverted, committed, and produces readable code diffs.

Motivation / Use Cases

• Rapid, high-trust UI iteration inside this repo (TypeScript/React, CSS) using a familiar productized interaction model already shown to work in lovable.dev.
• Lower the technical skill required to experiment with UI adjustments, empowering designers and PMs to propose or preview code changes directly.
• AI-assisted pipeline: show the history, generate commit/diff, and always preview results live alongside chat/co-edit history.

Acceptance Criteria

• Main workflow matches lovable.dev: left timeline shows AI/visual edit proposals with preview/apply/code buttons; right pane is a live, sandboxed visual preview (iframe).
• Preview supports editing current component/page, inspecting elements, and making simple visual/copy/style/layout changes.
• Visual edits produce named versions/branches (e.g., "Update GX3 location to San Jose") that translate to readable code diffs, which can be reviewed/applied/reverted.
• The preview is always in sync with proposed changes; updates are rapid (HMR/refresh where possible).
• Visual-edit UI is accessible, safe, and minimally disruptive - sandboxed, no leaking secrets/API keys.
• Clear visual feedback for each version/proposal with ability to switch/backtrack.

Implementation Notes

• Reference lovable.dev’s UI/UX for specifics; image above provides a visual guide to layout and workflows.
• Use DOM–JSX mapping and source maps for accurate code linkage; generate human-friendly code diffs via AST transformation (e.g., ts-morph, recast).
• All history/actions in the conversation timeline should map to code/preview interactions.
• Attach audit log to each proposed diff/action for traceability.
• Provide a documented way to add to other TypeScript/React/CSS codebases (integration notes and setup docs).

Risks & Open Questions

• DOM↔JSX coherence for complex React apps and dynamic state.
• Security and sandboxing (especially for previews/frames).
• Matching lovable.dev’s high engagement/workflow standards for productized AI UI.
• Correctness/revertibility of AI-generated suggestions and edit application.

Labels

• enhancement, ux, lovable.dev-style, visual-edit, live-preview

[Nishanth-nishu]

Maintainer / Technical Response

This is a strong and well-articulated request, and you are correctly identifying a gap between conversational AI assistance and productized visual workflows like lovable.dev.

From a technical and product standpoint, what you’re proposing is feasible, but it requires GitHub AI Code Assist to cross several architectural boundaries that lovable.dev was designed around from day one.

Below is a breakdown of feasibility, implementation approach, and constraints.

1. Why lovable.dev Can Do This (and GitHub Currently Can’t)

lovable.dev controls:

The runtime (sandboxed Vite/Next environment)

The preview server (HMR-enabled)

The DOM ↔ source mapping layer

The AI proposal lifecycle (preview → diff → commit)

GitHub AI Code Assist, today:

Operates primarily on static diffs

Is repo-hosted, not runtime-hosted

Lacks a persistent, sandboxed preview environment per suggestion

Treats UI edits as code-first, not visual-first

So this is not just a UI feature — it is a workflow and infrastructure shift.

2. How This Could Be Implemented (Concrete Proposal)

Your acceptance criteria are reasonable and align with modern tooling. A viable architecture would look like this:

A. Live Preview (Right Pane)

Spin up an ephemeral preview runtime per proposal:

Vite / Next.js dev server

Sandboxed iframe

Environment variable stripping / secret masking

Use HMR or fast refresh to sync AI-generated patches instantly

B. Visual Edit Mode

DOM inspection overlay (similar to Storybook + Playwright Inspector)

DOM → JSX mapping via:

Source maps

AST correlation (ts-morph / recast)

Limit scope initially:

Text content

Inline styles / CSS classes

Layout primitives (margin, padding, flex/grid)

Each visual action generates:

A named proposal

A readable AST-based diff

A reversible patch

3. Proposal Lifecycle (Matching lovable.dev)

Your requested workflow maps cleanly to a proposal-based model:

Left pane:

Timeline of AI suggestions + visual edits

Each entry = immutable proposal

Buttons: Preview | View Diff | Apply | Revert

Right pane:

Always-live preview

Switch proposals instantly

Inspect/edit UI elements visually

Each proposal:

Lives on a temporary branch

Has an audit log

Can be promoted to a PR

This aligns well with GitHub’s existing PR and Checks model.

4. Security & Sandbox Considerations (Critical)

You correctly call this out as a risk. Minimum safeguards would include:

Iframe sandboxing (no top-level navigation)

No access to repo secrets

Network egress restrictions

Explicit allowlist for preview commands

Clear “preview-only” execution mode

Without this, GitHub cannot safely offer live previews across arbitrary repos.

5. Incremental Path (Most Realistic)

Rather than full lovable.dev parity immediately, a staged rollout would make sense:

Phase 1: Read-only live preview per PR / suggestion. No visual editing yet.

Phase 2: Simple visual edits (text, spacing, colors). AST-backed diffs only.

Phase 3: Full WYSIWYG-style editing. Proposal history + branching. Designer/PM-friendly access.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐