MAUI-Designer

What the designer can do

MAUI Designer is a web based visual designer for creating MAUI layouts with drag and drop functionality, built as an Angular application that runs in the browser and is also deployed to GitHub Pages from the main branch. The visual design tools include a drag and drop interface, an element toolbox of MAUI controls and layouts, a properties panel with real time editing, and a hierarchy panel that shows the element tree. Multi selection supports shift and ctrl click, marquee selection across the canvas, select all, and bulk editing of shared width, height, background colour, and visibility. Alignment tools cover align, distribute, snap to grid, smart guides, and rulers. A clipboard, component templates, and starter pages for login, list, profile, and settings let you move quickly. Live preview offers device presets, zoom and pan, fit to window, a dark mode preview, and persisted view settings. A notable feature is lossless XAML round trip: attributes the designer does not model are preserved rather than dropped, so hand written XAML survives a trip through the tool. Custom controls from NuGet packages are described in a small JSON manifest and then appear in the toolbox, properties panel, and canvas, with a learning parser that infers unknown controls from the XAML itself. The whole app is client side and can be hosted as a static site.

XAML integration and supported elements

The XAML story is central to the tool. There is a full featured code editor with syntax support, real time preview that updates as you type, generation of clean XAML from the visual design, and parsing of existing XAML files back into visual elements. You can import a dot xaml file or convert an svg icon into MAUI Path elements, and grid row and column definitions size the canvas tracks and round trip through XAML with row span and column span. The supported element set is broad. Controls include Label, Button, Image, ProgressBar, ActivityIndicator, and CollectionView with an editable item template. Inputs cover Entry, Editor, SearchBar, CheckBox, Switch, Slider, Stepper, and DatePicker. Layouts include StackLayout for vertical or horizontal stacking, Grid with row and column spanning, and AbsoluteLayout for coordinate based positioning. Views include Frame, Border, and ScrollView. The properties panel exposes layout, visual, content, grid, control, and data binding properties, and any supported property can be bound to a view model path so the generated XAML emits a Binding instead of a literal value. Accessibility is handled through SemanticProperties editing plus a live WCAG AA contrast check, and z order can be rearranged with bring to front, send to back, and single step restacking. This breadth makes the designer useful for real layout work rather than only toy examples.

Extending and running the project

Running the project locally needs Node.js 16 or newer, npm 8 or newer, and the Angular CLI 18. After cloning, npm install and npm start bring up the dev server on localhost 4200 with live reload, and npm run build produces the production artifacts in the dist directory. Tests use Karma and Jasmine for unit tests, with a headless single run for continuous integration, and Playwright drives end to end tests in headless Chromium against the dev server or a production build. The specs cover the shell, toolbox, canvas, hierarchy, properties panel, grid editing, undo and redo, persistence, and the XAML editor. Deploying to GitHub Pages is handled by a workflow that builds with the correct base href, adds a single page application fallback, and publishes. The architecture follows Angular standalone components with injectable services such as ElementService, LayoutDesignerService, XamlGeneratorService, XamlParserService, DragDropService, AlignmentService, ViewportService, and ClipboardService. Adding a new MAUI element means defining it in the model, adding a toolbox entry, implementing creation in the element service, and updating the generator and parser. A Visual Studio 2022 extension is also provided that registers the designer as an alternative editor for dot xaml files and shares the same text buffer with the built in editor. The license is the PolyForm Noncommercial License 1.0.0.

Editorial conclusion

MAUI Designer is built with TypeScript and carries the PolyForm Noncommercial License 1.0.0, with 177 stars recorded on GitHub as of its last update on 2026-08-24.