Snippets are pre-assembled XAML building blocks you drag onto the Hot Design canvas – so you and your AI agent can stop rebuilding solved UI problems and spend your effort on what is unique to your app.
Every app ever built likely has a login form. And a search bar. And a tab bar, a product card, a navigation drawer.
You know exactly what they should look like. You’ve built them dozens of times. So why are we or our Agents still building them from scratch?
The problem
The reality is, a surprising amount of UI work isn’t design at all. It’s re-building solved problems.
The old way was to copy a login form from the last project, rename things, fix the bindings, and nudge the spacing until it matched the new theme. Slightly different every time, and a little drift creeps in with each copy.
The AI-assisted way isn’t much better. Ask an agent for a login form and you get a perfectly reasonable one. Ask again next week and you get a different perfectly reasonable one. You’re spending time and tokens on a pattern that already has a good answer, and the result still needs review.
Think of it as LEGO. You can build a house one 2x4 at a time – every builder has. But if you’ve ever snapped on a pre-assembled wall section, window already in and door frame already hung, you know exactly how much time the loose bricks were costing you.
Right now, most of us are still building every wall from scratch. By hand, or by asking an agent to stack the bricks for us – slightly differently each time. So where’s the pre-assembled section for XAML?
What Snippets bring to the table
That’s what Snippets are in Uno Platform Studio – pre-assembled sections of UI you snap onto the Hot Design canvas and customize in place. Not loose bricks, but a finished wall, a staircase, a whole floor plan – essentially, building blocks of your app UI.
Let’s unpack what’s on the shelf. Snippets live in the Hot Design Toolbox, at the bottom of the System tab, grouped into five categories:
| Category | What it holds |
|---|---|
| Components | Buttons, forms, search fields, chips, and lists for common interactions |
| Navigation | Menus, tabs, navigation bars, and drawers wired for app flow |
| Sections | Headers, footers, side panels, and content blocks that give a screen structure |
| Cards | Grouped-information layouts for feeds, dashboards, and detail views |
| Page Layouts | Full-screen responsive templates for common app screens |
If it helps, envision Snippets like so - small sub-assemblies (Components), staircases (Navigation), walls (Sections), rooms (Cards), and entire floor plans (Page Layouts).
A snippet isn’t a single control. It’s a pre-composed, multi-element starting point – a sign-in form, a card, a whole responsive page layout.
Here’s how it works in practice:
- 🖱️ Drag it onto the Canvas, or into the visual tree in the Elements panel
- 👆 Double-click it to add it as a child of whatever element you’ve selected
- 🎯 Apply it – Page Layouts can be applied to an element you already have, instead of being added as a new child
When a snippet lands, its XAML is written straight into your file as a single atomic change. No design-time copy, no black box. It’s clean, editable XAML in your project, it works with MVUX and MVVM, and the layouts are responsive by default.
And because it’s LEGO, nothing is glued down. Every snippet is plain XAML in your project, so you can pop it apart and rearrange it however you like.
One detail to appreciate: snippets carry design-time sample content, so a list snippet renders sample items instead of an empty box. That sample content is excluded from the XAML written to your file, so your source stays clean. The Elements panel marks anything still carrying design-time values with a yellow dot, so you know what to swap for real data.
Snippets do adapt to what your app references – if one needs an optional library like Uno Toolkit, Material theming, or reactive extensions and your app doesn’t reference it, it won’t show up in the Toolbox. And Snippets ship as part of Uno Platform Studio Business, so check that your license includes them.
How developers get to be more productive
The reality is, it simply doesn’t make sense to hand-write or hand-prompt a navigation drawer or a login page in 2026. So where does the time actually come back?
- You start with walls, not bricks. Apply a Page Layout, snap in a few Cards and a Navigation snippet, and you’re reviewing a real screen instead of staring at an empty Grid.
- Agents spend effort where it counts. Generation handles what’s specific to your application. Proven blocks handle what’s common to every application. Fewer tokens burned on boilerplate means more AI credits for the interesting problems.
- Consistency comes for free. The same search bar behaves the same way on every screen, instead of drifting a little with each regeneration.
- It slots into the Hot Design loop. Simple Theme sets the design constraints, Snippets supply the blocks that don’t need generating, Select-and-Prompt points the agent at the right element, and Previews let you check every state. Code, visual editing, or AI – the choice is yours, and Hot Design keeps them all in sync.
Pre-bundled app building blocks get you to a good starting point, to customize as needed – so creativity can be freed up for where it is needed. Applies to developers. Applies to AI agents.
Want to see Snippets in action? Here’s a walkthrough of building a custom login page for a travel app – fast:
Wrapup
Snippets are the pre-built sections Uno Platform developers have been missing – common UI patterns one drag away, so you and your AI agent can spend your time on the rooms nobody else has designed.
Open the Toolbox, scroll to the bottom of the System tab, and start snapping. We can’t wait to see what you build. Cheers developers!
