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

Design-time preview (no emulator needed)

• Real styling: implicit and explicit Styles (including BasedOn and ApplyToDerivedTypes), {StaticResource} / {DynamicResource}, {AppThemeBinding}, {OnPlatform} / {OnIdiom} (attribute and element forms), and {x:Static} strings from C# constants or .resx files
• Resource lookup order like MAUI: page resources → App.xaml → MergedDictionaries (the last merged dictionary wins). Each .csproj folder is its own project, so mono-repos and multi-root workspaces don't mix resources
• Templates: CollectionView / ListView / CarouselView item templates (header, footer, groups, grid and horizontal layouts), BindableLayout, ControlTemplate + ContentPresenter, and custom controls rendered from their own XAML. {TemplateBinding} and {Binding X, Source={x:Reference self}} show the value set on the control
• Visuals: linear/radial gradients, Shadow, StrokeShape (per-corner radii, ellipse), Opacity, Rotation, Scale, Translation, FormattedText spans, real images from Resources/Images (logo.png → logo.svg), FontImageSource glyphs, and your custom fonts (MauiFont / AddFont)
• Design-time data: d:Text, d:IsVisible, … override values in the preview only. Bindings show their path as placeholder text
• Device chrome: status bar, Shell navigation bar (with back button for registered routes), Shell tab bar with the active tab, home indicator and safe-area insets (SafeAreaEdges, IgnoreSafeArea)
• Design bar: theme, orientation, device size (presets, custom sizes, mauiXaml.customDeviceProfiles), platform look, text size (85-200 %), right-to-left, culture / pseudo-localization, visual state (Normal, Disabled, Pressed…) and Compare (Light | Dark, iOS | Android, phone | tablet, LTR | RTL, 100 % | 200 % text, culture) side by side
• View options: layout bounds with margin (orange) / padding (green) bands, 8pt grid, rulers, Alt + hover to measure distances, colour-blindness simulation
• Triggers: property triggers apply automatically. DataTriggers / MultiTriggers can be toggled from the Inspector

Live mirror

• Adaptive streaming with a speed selector and an fps counter. Device picker when several simulators / emulators / devices are connected (physical iPhones via libimobiledevice, best effort)
• 👆 Interact: click to tap and drag to swipe (Android via adb, iOS via fb-idb)
• Device bar: 📸 screenshot, ⏺ screen recording (MP4), Home / Back / App switch, rotate, device dark / light mode, volume, ⌨ type text, 📜 device logs (logcat / simctl log) streamed to the Output panel
• 🎯 Exact inspect: clicks resolve through the real native view tree (uiautomator / idb) and are matched back to XAML by text, AutomationId or semantic description, falling back to the estimated layout
• ◐ Compare design: overlays the design render on the live screen (opacity slider) to spot layout drift
• 🧭 Follow navigation: switches the preview to the page on screen (now also matches {x:Static} / .resx strings)
• ▶ Run: dotnet build -t:Run for the chosen target framework, targeted at the connected simulator / emulator
• Live binding values (experimental): run MAUI: Add Live Binding Reporter to Project once. A DEBUG-only helper then sends the current page's BindingContext values, and the Inspector shows = value next to each binding
• Desktop mirroring (experimental): mirror a running Mac Catalyst or Windows MAUI app window via mauiXaml.desktopAppName

Inspection & editing

• Element tree including template content (ItemTemplate, Header, ControlTemplate …). Moving the editor cursor selects the matching element, and double-clicking an element jumps to its XAML
• Tree context menu / shortcuts: move up / down (Alt+↑/↓), duplicate (Ctrl/Cmd+D), delete (Del), wrap in Grid / StackLayout / Border / ScrollView, unwrap, extract to Style, copy XAML, copy as C# Markup
• Inspector: enum and boolean dropdowns, a Margin / Padding editor, colour picker, + Add property with suggestions for the control type, ✕ remove, ⇪ extract value to a resource, computed styles with their source (inline, style, implicit style, state, d:), visual states, triggers, bindings (flagged when missing on the view model) and accessibility
• Toolbox: click or drag controls, layouts, collections and shapes into the tree or the preview
• Resources tab: every colour (with swatches), style and resource in lookup order, with usage counts, go-to-definition and find usages
• Navigation: page picker, open code-behind, open view model (x:DataType or naming convention), and MAUI: Show Navigation Map, a clickable graph of Shell tabs, routes and GoToAsync / PushAsync calls

Diagnostics (VS Code Problems panel + quick fixes)

• XAML parse errors, missing resources (quick fix: create the Colour / Style), duplicate x:Name / x:Key
• Bindings: {Binding} without x:DataType (compiled bindings), paths not found on the view model (including CommunityToolkit [ObservableProperty] / [RelayCommand] and base classes)
• Performance / modernization: Frame → Border and legacy StackLayout (quick fixes), ListView → CollectionView, *AndExpand (quick fix), collections inside ScrollView or stack layouts, deep nesting, single-child layouts
• Accessibility: touch targets (44 / 48), image descriptions, contrast (WCAG, gradients and semi-transparent colours included), heading levels, input labels, very small text
• MAUI: Find Unused Resources across XAML and C#

📚 MAUI docs & recipes (offline, built in)

• 600+ recipes from 75 topics in 15 categories (layouts, XAML, styling, MVVM, navigation, data, networking, essentials, controls, testing, deployment…). They ship inside the extension, with no website or network needed
• Recipes tab in the preview: search, filter chips for XAML / C# / Other (hide what you don't need), a live rendered thumbnail of every XAML recipe in your app's theme, and ＋ Insert into the selected element (or drag a card onto the tree or preview)
• Inspector → 📚 Docs & recipes shows the description and one-click recipes for the element you selected
• MAUI Docs panel (Ctrl/Cmd+Alt+D): full documentation pages with property tables, tips, highlighted code and live previews, plus actions on every example
• In the editor:
  • hover an element name (<Grid>) for its docs, properties and recipe links
  • XAML recipes appear in IntelliSense at element positions, with tab stops for texts; in C#, type maui…
  • MAUI: Insert MAUI Recipe… (Ctrl/Cmd+Alt+R) opens a searchable picker
• Smart insert:
  • missing xmlns (toolkit:, local:, vm:…) is added automatically
  • page recipes become a new .xaml + .xaml.cs (New Page from Recipe…)
  • styles go into your Styles.xaml
  • C# goes into your last C# editor
  • dotnet commands are typed into a terminal for you to review
  • .csproj / AndroidManifest.xml / Info.plist snippets open the right file

Snapshots & CI

• MAUI: Export Design Snapshots writes PNGs into mauiXaml.snapshotFolder and keeps the folder structure (Views/TodayPage.png), for every page × mauiXaml.snapshotMatrix (devices × themes × orientations × platforms)
• MAUI: Compare Snapshots with Baseline compares pixels against <folder>/baseline, writes red-highlighted diff images and a report.html. Accept as baseline updates the reference
• Headless CLI (no VS Code, no browser) for CI:

  node cli.js snapshot path/to/MyApp --out .maui-snapshots --theme both --embed-fonts
  node cli.js compare  path/to/MyApp --baseline .maui-snapshots/baseline   # exit code 1 when pages changed
  

  It renders SVGs (text-diffable) and a report.html with side-by-side and difference views

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 + Follow mode on iOS: brew install idb-companion && pip3 install fb-idb (Follow can alternatively use VS Code's Accessibility permission: System Settings → Privacy & Security → Accessibility)

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
• Keyboard: Ctrl/Cmd+K V in a .xaml editor, or turn on mauiXaml.autoOpenPreview
• Getting started walkthrough: Help → Get Started → Get started with MAUI XAML Preview

Other commands (Command Palette, category MAUI): Open MAUI Docs, Search MAUI Docs & Recipes, Insert MAUI Recipe, New Page from Recipe, Switch Previewed Page, Export / Compare Snapshots, Accept Snapshot Baseline, Open View Model, Extract Inline Properties to Style, Find Unused Resources, Show Navigation Map, Build & Run App, Start/Stop Device Logs, Save Device Screenshot, Start/Stop Screen Recording, Type Text on Device, Add Live Binding Reporter (experimental), Show Extension Log.

The 3-panel layout

┌─────────────────┬──────────────────────────┬─────────────────┐
│ Elements │ Res. │   Emulator Screenshot    │   Inspector     │
│ │ Toolbox       │   or design render       │                 │
│                 │   (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
• Move the cursor in the XAML editor -> the element under the cursor is selected in the preview
• Right-click a tree node -> move / duplicate / delete / wrap / unwrap / extract style / copy XAML or C#

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
5. Enums and booleans are dropdowns, Margin / Padding have a 4-field editor, + Add property suggests properties for the control, ✕ removes an attribute and ⇪ extracts a literal into a resource dictionary

Inspector actions

Toolbar

The Device bar (shown when connected) holds screenshot, record, hardware keys, rotation, appearance, volume, typing, logs, ◐ compare design and 🎯 exact inspect.

Design bar (Design mode)

The left panel has four tabs: Elements, Resources, Toolbox and Recipes.

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

• In live mode turn on 🎯 Exact (needs adb or fb-idb): clicks are resolved through the real view tree
• Without it, the mapping is based on the XAML layout estimate - most accurate for StackLayout / Grid / simple layouts
• Setting AutomationId on important controls makes exact matching reliable

No live binding values

• Run MAUI: Add Live Binding Reporter to Project (experimental), rebuild in Debug and run
• Android: the extension runs adb reverse tcp:5199 tcp:5199 automatically when it connects - click ↻ Reconnect if the app started first
• Only the current page's BindingContext is reported (not items inside templates)

Extension log

• MAUI: Show Extension Log opens the "MAUI XAML Preview" output channel - include it in bug reports

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

• Live binding values need the DEBUG-only reporter inside the app and cover page-level BindingContext properties only
• iOS without fb-idb: taps, swipes, typing, hardware keys and exact inspection are unavailable (screenshots, recording, appearance and logs work). Simulator rotation uses System Events and needs VS Code Accessibility permission
• 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