Curiosity

Hello World recipe

Source: 01_HelloWorld/ · the smallest meaningful Curiosity Workspace page.

What it teaches

Registering a route with Router.Register("#/recipe/hello-world", state => App.ShowDefault(new HelloWorldView(state))) — see App.cs.
Wrapping content in HubStack(HubTitle(...), parentRoute) so the page inherits the workspace's title bar and back-navigation behaviour.
Stacking Tesserae components (VStack, HStack, TextBlock, Button, Icon) with the fluent style.
Triggering navigation between recipes with Router.Navigate(...).

View skeleton

public sealed class HelloWorldView : IComponent
{
    private readonly IComponent _container;

    public HelloWorldView(Parameters state)
    {
        var body = VStack().WS().Children(
            TextBlock("Welcome to the recipes").Large().SemiBold(),
            TextBlock("Each page in this front-end is a single component returned from a route.")
                .Secondary(),
            HStack().Children(
                Button("Open SearchArea recipe").Primary().SetIcon(UIcons.Search)
                    .OnClick(() => Router.Navigate("#/recipe/search-area")),
                Button("Back to recipe catalog").SetIcon(UIcons.Home)
                    .OnClick(() => Router.Navigate(DefaultRoutes.Home))
            ).PT(16)
        ).P(16);

        _container = HubStack(HubTitle("Hello World", "#/recipe/hello-world"), DefaultRoutes.Home)
                        .Section(body, grow: true);
    }

    public HTMLElement Render() => _container.Render();
}

Reuse notes

The same shape is used by every other recipe — they all return an IComponent from a factory registered in App.cs.
For data-driven pages, swap the static body for a Defer(async () => ...) block — see the Dashboards recipe.
For richer page chrome (multiple sections, command buttons in the title), see Mosaik.FrontEnd.LicenseServer/src/LicensesView.cs in the Mosaik repo.