Nifty XAML

Format XAML like XAML Styler, go to StaticResource definitions, rename keys, jump to code-behind handlers, pick #AARRGGBB colors and see Grid rows on hover, for WPF, WinUI, MAUI and Avalonia.

Maintained. No sign-in. No telemetry. Works in VS Code, Cursor, Windsurf, VSCodium and other editors that use Open VSX.

Features

A WPF window formatted like XAML Styler: attributes ordered and lined up one per line, empty elements collapsed

Hovering Grid.Row="2" shows the RowDefinition it lands in

Completing a StaticResource key with the brushes and styles defined in the workspace's resource dictionaries

The XAML help that Visual Studio and Rider have, in VS Code, VSCodium, Cursor and the other forks. It works for WPF, WinUI, UWP, .NET MAUI, Xamarin.Forms and Avalonia (.axaml). No language server and no .NET install are needed.

Format like XAML Styler. Format Document orders attributes (x:Class, then namespaces, then x:Key/x:Name, then Grid position and size, then layout, then everything else, with designer attributes last). Elements with more than two attributes get one attribute per line, lined up under the first. Empty elements collapse to <Grid />. Blank lines you left between elements stay, text content keeps its exact whitespace, and xml:space="preserve" is left alone. Broken XAML is never touched.
Go to definition for resources. Ctrl+click {StaticResource PrimaryButton}, {DynamicResource} or {ThemeResource} to jump to its x:Key, in any XAML file in the workspace. ElementName= and {x:Reference} go to the x:Name.
Event handlers. Ctrl+click Click="OnSave" to open the method in the C#, VB or F# code-behind. F7 switches between MainWindow.xaml and MainWindow.xaml.cs.
Complete resource keys after {StaticResource , showing where each one is defined, and element names after ElementName=. Keys that fit the property come first: brushes for Background or Foreground, styles for Style (styles for that very element on top), control templates for Template, data templates for ItemTemplate, thicknesses for Margin, and so on, also inside a Setter. The other keys are still listed, further down.
Hover a resource to see its definition and file. Hover Grid.Row="2" to see which RowDefinition it lands in, including Avalonia's RowDefinitions="Auto,*", and a note when the row doesn't exist.
Rename a key or name (F2) and every {StaticResource} that uses it is updated across the workspace. Find All References works too.
Color picker for XAML colors. XAML puts alpha first (#80FF0000 is half-transparent red), and the swatches and picker do the same.
Outline and breadcrumbs show the element tree with each element's x:Name or x:Key.
Unknown resource keys (optional): report {StaticResource} keys that no file in the workspace defines.
Works in the browser on vscode.dev and github.dev.

Commands

Command	Key	What it does
`Nifty XAML: Switch Between XAML and Code-Behind`	`F7`	Open `.xaml.cs` from `.xaml`, and back

Formatting, go to definition, rename and references use the editor's usual commands and keys.

Settings

Setting	Default	What it does
`nifty.xaml.format.enable`	`true`	Format XAML files
`nifty.xaml.format.maxAttributesOnOneLine`	`2`	Wrap attributes when an element has more
`nifty.xaml.format.maxLineLength`	`0`	Also wrap when a start tag is longer than this (0 = off)
`nifty.xaml.format.firstAttributeOnSameLine`	`true`	Keep the first attribute next to the element name
`nifty.xaml.format.sortAttributes`	`true`	Order attributes
`nifty.xaml.format.attributeOrder`	XAML Styler's groups	Groups of attribute names; `*` is everything else
`nifty.xaml.format.collapseEmptyElements`	`true`	Write `<Grid></Grid>` as `<Grid />`
`nifty.xaml.colorPicker`	`true`	Color swatches for `#AARRGGBB`
`nifty.xaml.unknownResources`	`off`	`information`, `warning` or `error` for undefined keys
`nifty.xaml.ignoredResourceKeys`	`[]`	Keys from the framework or packages, e.g. `MaterialDesign*`
`nifty.xaml.exclude`	`bin`, `obj`, `node_modules`	Files left out of the resource index

If you also use another XML formatter, pick Nifty XAML for XAML files with Format Document With… → Configure Default Formatter.

Install

VS Code: search for "Nifty XAML" in the Extensions view, or install from the Visual Studio Marketplace.
Cursor, Windsurf, VSCodium, Kiro, Antigravity: install from Open VSX.

Privacy

This extension collects no telemetry and needs no account.

More Nifty tools

Nifty Markdown: TOC, Lists, Shortcuts & Paste: Markdown editing that keeps up: table of contents, section numbers, smart lists and task toggles, formatting keys, image paste, link checks and completions, and math in the preview. (Open VSX)
Nifty SQL: SQL Formatter for 20 Dialects: Format SQL in 20 dialects, including dbt and Jinja templates, with your team's settings. (Open VSX)
Nifty Templates: Jinja, Twig & Nunjucks: Jinja, Twig and Nunjucks: highlighting in HTML, YAML and any file, block formatting, outline and folding, unclosed-tag errors, completion with docs, snippets, and go to definition for templates. (Open VSX)
Nifty TOML: Format, Validate & Schemas: TOML support: highlighting, errors, a formatter that keeps comments, outline, folding, and JSON Schema validation, completion and hover (Cargo.toml, pyproject.toml via SchemaStore). TOML to JSON/YAML. (Open VSX)
Nifty XML: XPath, Formatter & XML to JSON: Evaluate XPath with namespaces, copy the XPath of any element, format, minify, check well-formedness and convert XML to JSON. (Open VSX)
Nifty YAML: Formatter, Validator & Converter: Format YAML without losing comments (Kubernetes-style indents), sort keys, lint with yamllint, copy the key path, and convert to and from JSON. (Open VSX)

See all 100+ Nifty extensions and web tools at https://getnifty.dev

Nifty XAML: XAML Formatter & Resource Navigation

Nifty