Interactive XAML design
XamlPlayground
Write, run, and visually reshape Avalonia XAML in one immediate workspace.
Overview
An interactive Avalonia XAML editor, live previewer, and WYSIWYG designer with synchronized structure, properties, toolbox, diagnostics, and shareable gists.
XamlPlayground keeps source, runtime preview, and visual design synchronized. Run mode behaves like the real application; design mode adds structural hit testing, selection, movement, resizing, insertion, property editing, and XAML mutation.
Live XAML preview
WYSIWYG canvas editing
Toolbox, structure, and properties
Headless designer coverage
Built for
Where it fits.
- Avalonia developers learning or prototyping XAML
- Tool authors embedding live XAML editing
- Design-system teams testing controls and themes
Compatibility & status
Supported
Live site
Explicit
Designer coverage
In the work
Real output,
not a mockup.
Architecture
Clear layers.
Replaceable seams.
Editor
AvaloniaEdit provides source editing, diagnostics, selection, and optional minimap extensions.
Runtime
The preview loads XAML and preserves normal control interaction in run mode.
Designer
Visual hit testing, overlays, drag/resize, guides, and toolbox insertion operate in design mode.
Synchronization
Structural XAML paths keep source, preview, tree, and property selection aligned.
Quick start
From package
to first frame.
Choose the package workflow used by your repository, then start from the smallest working example. Replace VERSION with the current stable or prerelease version shown on NuGet.
dotnet add package XamlPlayground<PackageReference Include="XamlPlayground" Version="VERSION" /><PackageVersion Include="XamlPlayground" Version="VERSION" /><playground:XamlEditor Xaml="{Binding Document}" IsDesignMode="True" />Package surface
Start focused.
Compose as needed.
Source, docs, samples, and releases
The repository is the source of truth.
Use the current documentation and samples, inspect changes, report issues, or support continued open-source maintenance.