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.

How It Works

Live mode (emulator running):

1. You run your MAUI app on iOS Simulator or Android Emulator as normal
2. The extension captures screenshots from the running emulator every 500ms
3. The screenshot is displayed in VS Code alongside your XAML
4. Click any element → the extension maps the click through an approximate XAML layout → jumps to the source

Design mode (no emulator needed):

• The XAML is parsed and laid out by a built-in measure/arrange engine (StackLayouts, Grids with Auto/*/absolute rows & columns, margins, padding, alignment)
• Colors, text and {StaticResource} / {AppThemeBinding} values are resolved from your workspace resource dictionaries and drawn on a canvas
• Custom controls (e.g. <controls:DashboardCard>) are measured and rendered from their own .xaml file
• Updates live as you type (debounced)

iOS: Uses xcrun simctl io booted screenshot Android: Uses adb exec-out screencap -p

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 (Developer Mode — No Marketplace)

Method 1: F5 Developer Extension Host (easiest for testing)

1. Extract the zip → you get a folder called maui-xaml-preview
2. Open VS Code
3. File → Open Folder → select the maui-xaml-preview folder
4. Press F5 — a new Extension Development Host window opens
5. In that new window, open your MAUI project
6. Open any .xaml file
7. Right-click the .xaml file in Explorer → "MAUI: Open XAML Preview" OR click the 📱 icon in the editor title bar (top right)

Method 2: Package as .vsix and install permanently

Requires Node.js installed on your Mac:

# Install vsce packaging tool
npm install -g @vscode/vsce

# Go into the extension folder
cd maui-xaml-preview

# Create a fake node_modules (vsce needs this)
mkdir -p node_modules

# Package
vsce package --no-dependencies

This creates maui-xaml-preview-1.0.0.vsix.

Then in VS Code:

• Open Extensions panel (Cmd+Shift+X)
• Click ... menu → Install from VSIX…
• Select the .vsix file

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

Toolbar

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

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

Project Structure

maui-xaml-preview/
├── package.json              # Extension manifest
├── tsconfig.json
├── README.md
├── src/                      # TypeScript source (for reference)
│   └── ...
└── out/                      # Compiled JS — this is what VS Code loads
    ├── extension.js          # Entry point
    ├── previewPanel.js       # WebView panel (UI + message handling)
    ├── emulatorConnector.js  # iOS simctl + Android adb screenshot capture
    ├── xamlParser.js         # XAML → element tree + resource resolution
    └── layoutEngine.js       # Element tree → screen coordinate mapping

Author

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