An Introduction to XAML Studio

XAML Studio is a Microsoft Garage project to develop XAML UIs without the need for Visual Studio. This light-weight prototyping tool provides IntelliSense, real-time preview, data binding debugging and more. You can grab the latest version from the Microsoft Store.

Working with the Editor

The XAML Studio editor feels much like the Visual Studio one mixed with a bit of VS Code. On the left you have your files, data sources, debugging and toolbox.

The editor behaves just like you would expect. You can add controls to the XAML on the bottom and the top preview panel reacts to the updates.

The toolbox offers a list of controls that you can search for and then click on to insert into your XAML.

Unlike the Visual Studio XAML editor, the live preview does not offer any sort of drag and drop experience.

Working with Data

You can bind data to the XAML component through static JSON or a JSON REST API.

To bind to static JSON, you can click on the data source pane and then enter the JSON directly in the editor.

To bind to a REST API, you can click the two arrows at the top of the data source panel to open a text box where you can enter a REST API. After entering the REST API URI and then clicking the refresh button, the JSON will update and the XAML preview will too.

Debugging data bindings

The debugging feature allows you to see which data bindings are actually successful. Once you switch on the debug mode you’ll be able to see the current binding as well as a history of bindings that are available.

Great first start

I’m excited for this tool. There have been other non-Microsoft versions out there but nothing that has stood the test of time. This appears to be built on the VS Code\Monaco editor and provides some handy features. I would love to see binding that wasn’t just JSON data but this works for now. The binding debugging is very nice and not something I’m aware that existed in Visual Studio.