# Tesserae Basics

Tesserae is the UI framework used for building Curiosity front-ends. It uses a fluent C# API to generate HTML elements.

# Components

All UI elements implement the IComponent interface.

public class MyComponent : IComponent
{
    public dom.HTMLElement Render() =>
        VStack().Children(
            TextBlock("Hello World").SemiBold(),
            Button("Click Me").OnClick(() => alert("Clicked!"))
        ).Render();
}

# Layouts

Use HStack and VStack for linear layouts, and Grid for more complex arrangements.

# Asynchronous Rendering

Tesserae supports async/await natively. Use the Defer component to render content that depends on an API call.

var content = Defer(async () => {
    var data = await Mosaik.API.Endpoints.CallAsync<string>("my-endpoint");
    return TextBlock(data);
});