---
uid: Uno.Workshop.Counter
---

<!-- markdownlint-disable MD001 -->

# Create a Counter App with Uno Platform

The Counter tutorial will walk you through creating a simple cross-platform counter application with Uno Platform.

<p align="center">
  <img src="Assets/counter-app.png" alt="Screenshot of an Uno Platform app showing a counter" />
</p>

There are four variants of the Counter tutorial, combining markup language (XAML or C# Markup) and presentation framework (MVVM or MVUX). Also, you can build the Counter tutorial using our visual designer, Hot Design.

<div class="row">

<div class="col-md-6 col-xs-12">
<a href="get-started-counter-xaml-mvux.md">
<div class="alert alert-info alert-hover">

#### XAML + MVUX

Use XAML for layout and MVUX for state management

</div>
</a>
</div>

<div class="col-md-6 col-xs-12">
<a href="get-started-counter-xaml-mvvm.md">
<div class="alert alert-info alert-hover">

#### XAML + MVVM

Use XAML for layout and MVVM for state management

</div>
</a>
</div>

<div class="col-md-6 col-xs-12">
<a href="get-started-counter-csharp-mvux.md">
<div class="alert alert-info alert-hover">

#### C# Markup + MVUX

Use C# Markup for layout and MVUX for state management

</div>
</a>
</div>

<div class="col-md-6 col-xs-12">
<a href="get-started-counter-csharp-mvvm.md">
<div class="alert alert-info alert-hover">

#### C# Markup + MVVM

Use C# Markup for layout and MVVM for state management

</div>
</a>
</div>

</div>

<!-- Centered last item -->
<div class="row" style="display: flex; justify-content: center; align-items: center;">
<div class="col-md-6 col-xs-12">
<a href="../../studio/Hot Design/hot-design-getstarted-counter-tutorial.md">
<div class="alert alert-info alert-hover">

#### Hot Design

Use a visual designer to design and develop the app

</div>
</a>
</div>
</div>

<br/>

---