# MAUI Designer: A Browser-Based XAML Editor with Drag-and-Drop and Lossless Round-Trip > MAUI Designer is an Angular web app that lets you build .NET MAUI XAML layouts visually in the browser. It offers drag-and-drop editing, a property panel, and a lossless XAML round-trip that preserves unknown attributes, making it a practical tool for prototyping and quick layout iteration. **GMPrakhar/MAUI-Designer** — UI Designer for MAUI Applications - Repository: https://github.com/GMPrakhar/MAUI-Designer - Stars: 201 · Forks: 19 - Language: TypeScript - License: GPL-3.0 - Published: 2026-08-24 · Updated: 2026-08-24 · Language: en - Canonical page: https://hysenlabs.com/projects/gmprakhar-maui-designer ## What MAUI Designer Solves and Who It Is For MAUI Designer addresses a specific pain: creating XAML layouts for .NET MAUI without leaving the browser. For developers who find Visual Studio's XAML designer heavy or who want to prototype a screen quickly, this Angular application offers a drag-and-drop canvas, a property panel, and a hierarchy tree. It targets MAUI developers, including those using third-party control libraries like Syncfusion or Telerik, because it supports custom control manifests. The tool is also useful for designers who prefer a visual approach over hand-writing XAML, as it generates clean XAML code that can be copied or downloaded. The live demo on GitHub Pages lowers the barrier to trying it without any local setup. ## How the Designer Works: Architecture and Data Flow The core mechanism is a browser-based editor that parses XAML into an in-memory model, allows manipulation through a visual canvas, and then serializes that model back to XAML. The README emphasizes a 'lossless XAML round trip,' meaning attributes the designer does not explicitly model are preserved rather than dropped. This is achieved by storing unknown attributes and property elements verbatim during parsing and regenerating them on export. The designer also includes a 'learning parser' that infers controls not present in any manifest from the XAML, including property types, and adds them to the toolbox automatically. This suggests a two-tier approach: a manifest-driven registry for known controls (like the bundled CommunityToolkit.Maui pack) and a fallback parser for anything else. The property panel edits attributes in real time, and the canvas updates immediately, giving visual feedback as you type. The hierarchy panel shows the element tree, and selection, alignment, and distribution operations act on the model, with undo/redo recording every change. ## Getting It Running: Commands and Configuration The README provides straightforward installation steps. You need Node.js 16.x or higher, npm 8.x or higher, and Angular CLI 18.x. After cloning the repository, run `npm install` to fetch dependencies. If Angular CLI is not installed globally, the README suggests `npm install -g @angular/cli`. To start the development server, run `npm start` or `ng serve`, then navigate to `http://localhost:4200/`. For production, `npm run build` or `ng build` outputs artifacts to `dist/`. Unit tests are run with `npm test` (watch mode) or `npm run test:he` (likely headless, though the README is truncated). There is no explicit configuration file mentioned; the app persists settings like zoom, theme, and grid in the browser's local storage, as noted in the features. The custom control registry is managed via JSON manifests that can be imported and exported, but the README does not give an example manifest, so you would need to inspect the repository for the schema. ## Limitations and Failure Modes The most obvious limitation is that MAUI Designer is a browser tool, not a full IDE. It does not compile or run your MAUI app; it only generates XAML. The generated XAML must be pasted into a real MAUI project, and there is no guarantee that the XAML will be valid for your specific MAUI version or that all runtime behaviors (like data binding or event handlers) are representable. The README mentions that unknown vendor tags are preserved verbatim, but this is a double-edged sword: if the parser encounters a construct it cannot infer, the learning parser may produce an incorrect control, and the raw attribute editor is the only way to fix it, which is cumbersome. Another failure mode is the reliance on browser persistence: designs are saved locally in the browser, so clearing site data loses work. There is no cloud sync or export to a project file. The project is in beta (vsix-v0.1.0-beta.1), so bugs are likely. The license is listed as 'NOASSERTION' in the repository metadata, which means you cannot assume a standard open-source license; you must contact the author before commercial use. ## Alternative: Visual Studio's Built-In XAML Designer The obvious alternative is the XAML designer built into Visual Studio, which is the native environment for MAUI development. Visual Studio's designer offers direct integration with your project: you can edit XAML and see the result, but it also compiles and runs the app, supports data binding previews, and has a toolbox that reflects NuGet packages automatically. In contrast, MAUI Designer is a standalone web app that requires manual manifest creation for third-party controls and does not compile or run your code. The key difference is that Visual Studio's designer is tightly coupled to the project system, whereas MAUI Designer is a lightweight, portable tool that works in any browser. If you need to iterate quickly on a layout without opening a full IDE, MAUI Designer is convenient, but for anything beyond static layout, Visual Studio is more reliable. Another alternative is to write XAML by hand in any text editor, but that lacks visual feedback. ## Maintenance and Upgrade Cost The project is actively maintained, with the last push and latest beta release both dated 2026-08-19, indicating ongoing development. However, the beta status means the API and feature set may change between releases. The README does not document a migration path or changelog, so upgrading from one beta to another might require re-reading the docs or testing manually. The use of Angular 18 and TypeScript means you need to keep Node.js and npm versions aligned; if you upgrade Node.js, you might need to update Angular CLI as well. The custom control manifests are a maintenance burden: if you add a new third-party control, you must write a manifest entry, and if the control's properties change, the manifest must be updated. The learning parser helps but is not a substitute for explicit definitions. The license being 'NOASSERTION' is a red flag for enterprise use; you cannot redistribute or modify the code without explicit permission, which could block adoption in some organizations. ## Who Should Adopt It and What to Verify First MAUI Designer is a useful tool for prototyping and learning MAUI layout concepts without the overhead of a full IDE. It is especially handy for designers who want to experiment with XAML and then hand the output to a developer. Developers who need to quickly mock up a screen for a client or team review will find the drag-and-drop and real-time preview valuable. However, it is not a replacement for a production workflow. Before adopting it, verify that the generated XAML is compatible with your MAUI version by exporting a sample and compiling it in a real project. Check that the custom control manifests cover the specific NuGet packages you use, and test the learning parser with your XAML to see if it correctly infers controls. Also, confirm the license terms with the author, since 'NOASSERTION' is not a recognized open-source license. If you are comfortable with these caveats, MAUI Designer can be a handy addition to your toolkit for quick layout design. ## Conclusion Adopt MAUI Designer if you need a quick, browser-based tool for prototyping MAUI layouts without installing Visual Studio or if you want to experiment with XAML structure before committing to a full IDE. Skip it if you require production-grade code generation, deep integration with your existing MAUI project, or if you rely on a formal support contract, since the license is not asserted and the project is in beta. Before using it, verify that the generated XAML matches your target MAUI version and that custom control manifests cover your specific NuGet packages, as the learning parser and raw attribute editor are best-effort and may not handle every XAML construct. ## FAQ ### What is MAUI-Designer and how is it different from a web based designer? It is a visual designer for .NET MAUI built with C# and WinUI whose canvas hosts real MAUI views rather than HTML or CSS approximations. You drag controls onto the canvas, edit properties, and generate XAML. ### What are the requirements for running MAUI-Designer? Windows 10 version 1809 or later, the .NET 10 SDK, and the MAUI Windows workload. The current desktop app lives in maui-designer-native/ and the Visual Studio extension additionally needs Visual Studio 2022 or 2026. ### What licence is MAUI-Designer under? GNU GPL v3 only, with dependencies retaining their own licences. Earlier README revisions stated MIT and then PolyForm Noncommercial, and the project states this does not retroactively withdraw rights granted under those statements. ### Do bindings and converters run in the MAUI-Designer preview? No. Runtime-only bindings, converters, commands and behaviors are preserved in the XAML but are not executed by the designer. Literal values and binding fallbacks drive the previews instead. ### How do I install the MAUI-Designer Visual Studio extension? Download MauiDesigner.vsix from the vsix-latest release, close Visual Studio, install it, then choose Open With and MAUI Designer on a .xaml file. It hosts the native designer in a document tab and syncs the existing XAML buffer, rather than using a WebView. ### What is the difference between the native app and the src/ folder? The current desktop app lives in maui-designer-native/ and targets Windows with .NET 10. The earlier Angular implementation remains in src/ as a separate implementation, and its HTML and CSS preview is not the native designer. ## Sources - [Official README](https://github.com/GMPrakhar/MAUI-Designer#readme) - [Project repository](https://github.com/GMPrakhar/MAUI-Designer) - [Release notes](https://github.com/GMPrakhar/MAUI-Designer/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/gmprakhar-maui-designer