Getting Started

This guide walks you through scaffolding and running your first Miko app from the official templates.

Requirements

• .NET 10.0 SDK or later
• A platform supported by SkiaSharp (Windows, macOS, Linux, Android, or iOS)

For Android / iOS heads you also need the corresponding .NET workloads (dotnet workload install android ios).

Create an app from the template

The fastest way to start is the Razor app template:

# Install the templates
dotnet new install Miko.Templates

# Scaffold and run a new app
dotnet new miko-razor -o MyApp
cd MyApp
dotnet run

A window opens showing the home page (Pages/Home.razor). Add a page by dropping a new .razor file with a @page directive into Pages/ — routes are discovered automatically.

Choose a layout

The template accepts a --layout option to scaffold a starting UI. The default is blank; tabs and sidemenu scaffold Ionic-based layouts (and add the Miko.Ionic package):

dotnet new miko-razor --layout blank     -o MyApp   # empty page (default)
dotnet new miko-razor --layout tabs      -o MyApp   # Ionic bottom tab bar, 3 routed tabs
dotnet new miko-razor --layout sidemenu  -o MyApp   # Ionic side-menu drawer over a page

Cross-platform apps

For an app that targets Desktop + Android + iOS from one codebase, use the multiplatform template instead:

# Scaffold a shared app plus Desktop / Android / iOS startup projects
dotnet new miko-multiplatform -o MyApp
cd MyApp

# Run on the desktop
dotnet run --project MyApp.Desktop

This produces a shared Razor UI project plus one thin host project per platform. See Project Structure for the anatomy of a generated app.

Your first page

Pages are Razor components with a @page route directive:

@page "/about"
@namespace MyApp.Pages

<h1>About</h1>
<p>Hello from Miko!</p>

Configure the app

The app is wired up with a fluent builder. The generated template's App.cs looks like this:

using Miko.DevTools;
using Miko.Hosting;

public static class App
{
    public static MikoAppContext CreateContext()
    {
        var builder = MikoAppBuilder.CreateDefault();

        builder.UseTitle("Miko Razor App");
        builder.UseSize(1024, 768);

        builder.AddDevTools();
        builder.AddStyleSheet(GlobalStyles.Create());

        // Routes and the default layout are wired up by Miko.Razor.Compiler.
        builder.UseGeneratedRoutes();
        builder.UseDefaultLayout<MainLayout>();

        builder.EnableHotReload();

        return builder.Build();
    }
}

The desktop entry point (Program.cs) takes that context and runs it:

using Miko.Windowing;

public static class Program
{
    [STAThread]
    public static void Main(string[] args)
    {
        var context = App.CreateContext();

        // Initialize the hot reload handler generated by Miko.Razor.Compiler.
        MikoHotReloadHandler.Initialize(context.GetHotReloadService());

        context.RunDesktop();
    }
}

See Razor Components for the full builder API and the rest of the component model.

Next steps

• Project Structure — how a Miko app is organized.
• Styling — the CSS-like styling model.
• Examples — runnable sample apps in the repository.