MAUI XAML Preview - VS Code Extension

Live XAML preview for .NET MAUI projects. Mirrors your running iOS Simulator, Android Emulator, or MAUI desktop app window directly inside VS Code, with element inspection, live property editing, binding inspection, accessibility checks, 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 - with theme, orientation, and device-size toggles.

Features

Live mirror

• Adaptive streaming: frames are captured back-to-back (not on a fixed timer) and unchanged frames are skipped, so the mirror is as fast as your machine allows. The current frame rate shows in the toolbar
• Device picker: when several simulators/emulators/devices are connected, a dropdown in the toolbar lets you choose which one to mirror
• Interactive mode: forward preview clicks as real taps - Android via adb, iOS Simulator via fb-idb (see prerequisites)
• Desktop mirroring (experimental): mirror a running Mac Catalyst or Windows MAUI app window via the mauiXaml.desktopAppName setting

Design-time preview (no emulator needed)

• Theme toggle: switch light/dark - {AppThemeBinding} values resolve to their Light=/Dark= variants
• Orientation toggle: portrait/landscape re-layout
• Device profiles: render at iPhone SE / iPhone 15 / Pro Max / Pixel 8 / iPad / tablet sizes without any device
• Snapshot export: MAUI: Export Design Snapshots (PNG) renders every page in the workspace to .maui-snapshots/ - diff them in CI or review layout changes at a glance

Inspection & editing

• Element tree + click-to-inspect: click any element in the preview or tree to inspect it; double-click jumps to its XAML line
• Live property editing: edit any attribute value in the Inspector and press Enter - it writes straight back into the XAML file (color values get a native color picker)
• Binding inspection: a Bindings section lists each {Binding} with its path, mode, converter, and string format, plus the nearest x:DataType / BindingContext so you can see what the binding is hitting
• Resource tracing: {StaticResource} / {DynamicResource} / {AppThemeBinding} resolve to their definitions with jump-to-source badges

Diagnostics

• Problems panel: XAML parse errors (mismatched/unclosed tags) and unresolved StaticResource keys appear at the bottom of the element tree - click a problem to jump to its line
• Accessibility checks: touch targets under 44×44, Image/ImageButton without SemanticProperties.Description, and text contrast below WCAG ratios are flagged in the Problems panel and in a per-element Accessibility section in the Inspector
• Debug panel: click 🔧 in the Inspector header for connection status, platform, interact availability, and a timestamped activity log

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
• Optional, for Interact mode on iOS: brew install idb-companion && pip3 install fb-idb

For Android Emulator

• Android Studio installed with adb in your PATH (or set mauiXaml.adbPath)
• Your MAUI app running: dotnet run -f net9.0-android
• Verify with: adb devices

For desktop mirroring (experimental)

• Set mauiXaml.desktopAppName to your app's process name (e.g. MyApp)
• macOS (Mac Catalyst): VS Code needs Accessibility permission (to find the window) and Screen Recording permission (to capture it) in System Settings → Privacy & Security
• Windows (WinUI): PowerShell must be available (it is by default)
• Interact mode is not available for desktop windows

Installation

1. Open VS Code
2. Go to Extensions panel (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux)
3. Search for "MAUI XAML Preview"
4. 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
• Command Palette: MAUI: Export Design Snapshots (PNG) to render all pages to .maui-snapshots/

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         │
│                 │  └──────────────────┘   │  Attributes ✏️   │
│  ⚠ Problems (2) │                          │  Bindings       │
│                 │                          │  Accessibility  │
└─────────────────┴──────────────────────────┴─────────────────┘

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
• Click a Problems row -> jumps to the offending line and selects the element

Editing properties

1. Select any element
2. In the Inspector's Attributes section, change a value
3. Press Enter - the value is written back into your XAML file (undo with Cmd+Z in the editor)
4. Hex colors show a color swatch - pick a new color and it writes through immediately

Inspector actions

Toolbar

Design banner (Design mode only)

Settings

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

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, and open the 🔧 debug panel or diagnostics log for details

Interact button is disabled

• Open the 🔧 debug panel - the Interact row explains why
• Android: requires a connected device visible to adb
• iOS: requires fb-idb (brew install idb-companion && pip3 install fb-idb), then Reconnect
• Desktop: tap forwarding is not supported

Screenshot is frozen or slow

• Click ⟳ Reconnect
• Raise mauiXaml.screenshotInterval to reduce CPU load (frames already skip when nothing changes)

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 flagged as "not found" in Problems

• The scanner reads every .xaml in the workspace; resources merged from NuGet packages or created in C# can't be seen and may be flagged - treat those as hints, not errors

Desktop mirroring shows nothing (macOS)

• Grant VS Code Accessibility and Screen Recording permissions in System Settings → Privacy & Security, then Reconnect

Known limits

• Binding values are static: the Bindings section shows paths, modes, and converters parsed from XAML. Live runtime values would require instrumentation inside the running app and are not yet supported
• Design render is approximate: it is a measure/arrange estimate, not the real MAUI renderer
• Snapshot export renders the design-time approximation (it does not need a device, which is what makes it CI-friendly)

Author

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