MAUI XAML Preview - VS Code Extension

Live XAML preview for .NET MAUI projects on Mac. Mirrors your running iOS Simulator or Android Emulator screen directly inside VS Code, with element inspection, style tracing, and source navigation. When no emulator is running, it renders an approximate design-time preview straight from your XAML - like the Visual Studio 2022 XAML designer.

Features

Live Preview: Real-time mirror of your iOS Simulator or Android Emulator inside VS Code
Design-Time Preview: Render XAML without running the app - no emulator needed
Element Inspection: Click any element to see its properties and styles
Source Navigation: Jump directly to element definitions, code-behind, and resource dictionaries
Element Tree: Browse your XAML hierarchy visually
Interactive Mode: Send clicks directly to your running device (Android)
Resource Resolution: Traces {StaticResource} and {AppThemeBinding} to their definitions

Prerequisites

For iOS Simulator

Xcode installed (comes with xcrun and simctl)
Your MAUI app running: dotnet run -f net9.0-ios
Verify with: xcrun simctl list devices booted

For Android Emulator

Android Studio installed with adb in your PATH
Your MAUI app running: dotnet run -f net9.0-android
Verify with: adb devices

Installation

Open VS Code
Go to Extensions panel (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux)
Search for "MAUI XAML Preview"
Click Install

Usage

Opening the Preview

Editor title bar: Click the 📱 icon when a .xaml file is open
Right-click a .xaml file in Explorer -> "MAUI: Open XAML Preview"
Command Palette (Cmd+Shift+P): type MAUI: Open XAML Preview

The 3-panel layout

┌─────────────────┬──────────────────────────┬─────────────────┐
│  Element Tree   │   Emulator Screenshot    │   Inspector     │
│                 │   (live mirror)          │                 │
│  <ContentPage>  │  ┌──────────────────┐   │  <Button>       │
│   <Grid>        │  │                  │   │  #saveBtn       │
│    <Label>      │  │   Live screen    │   │  Line 42        │
│    <Button> ◀── │──│── click to select│   │                 │
│    <Entry>      │  │                  │   │  Styles:        │
│                 │  └──────────────────┘   │  BackgroundColor│
│                 │                          │  TextColor      │
│                 │                          │                 │
│                 │                          │  [-> Go to XAML] │
│                 │                          │  [-> Code-behind]│
│                 │                          │  [-> Styles.xaml]│
└─────────────────┴──────────────────────────┴─────────────────┘

Clicking elements

Click on the preview (screenshot or design render) -> finds the XAML element at that position -> shows in inspector
Click in the Element Tree -> highlights the node, shows inspector
Double-click a tree node -> jumps straight to its line in the XAML

Inspector actions

Button	What it does
-> Go to XAML definition	Opens `.xaml` file and jumps to that element's line
-> Open code-behind	Opens `YourPage.xaml.cs`
Resource badge (e.g. `PrimaryColor ↗`)	Jumps to `Styles.xaml` / `Colors.xaml` where that resource is defined

Control	What it does
Status dot (🟢/🟡/🔴)	Green = connected, Yellow = detecting, Red = no emulator
Live / Design	Switch between emulator mirror and XAML design render
Overlay	Toggles element highlight overlay on the preview
👆 Interact	Forwards preview clicks as real taps to the device (Android only)
− / + / Fit	Zoom the device preview (also Cmd/Ctrl + scroll wheel)
Fast / Slow	Screenshot polling speed (500ms vs 2s)
↻ Reconnect	Re-detects and reconnects to emulator

Settings

Open VS Code Settings (Cmd+,) and search for "MAUI":

Setting	Default	Description
`mauiXaml.screenshotInterval`	`500`	Polling interval in ms
`mauiXaml.preferredPlatform`	`auto`	`auto`, `ios`, or `android`
`mauiXaml.adbPath`	`adb`	Full path to adb if not in PATH

Troubleshooting

"No emulator found"

Make sure your MAUI app is actually running (not just the emulator sitting at home screen)
For iOS: run xcrun simctl list devices booted in terminal - should show a device
For Android: run adb devices in terminal - should show a device
Click ⟳ Reconnect

Screenshot is frozen

Click ⟳ Reconnect
Try switching to Slow polling mode (reduces CPU load)

Element click doesn't select the right element

The element mapping is based on XAML layout parsing, not the real rendered layout
It's most accurate for StackLayout / Grid / simple layouts
For complex data-bound or animated layouts, use the Element Tree panel instead

Code-behind not found

Make sure YourPage.xaml.cs is in the same folder as YourPage.xaml

Resource dictionary not resolving

The extension auto-scans for files named Styles.xaml, Colors.xaml, Resources.xaml, Theme.xaml
If your file has a different name, the resource badge will still show but the jump may not work

Author

Developed By: Kanaihya Kumar LinkedIn: linkedin.com/in/kanaihya-kumar Gmail: kanaihyakmr@gmail.com

MAUI XAML Live Preview

Kanaihya Kumar