BlazorTUI 0.8.0

BlazorTUI

BlazorTUI is a Razor Class Library for building retro text user interfaces in Blazor Server applications. It provides a fixed-size character grid with keyboard and mouse interaction, nested layouts, menus, dialogs, colors, and animated controls.

Features

• Character-cell rendering with foreground and background colors.
• Nested frames with relative coordinates and z-order.
• Keyboard focus, Tab/Shift+Tab navigation, and mouse interaction.
• Menu bars with shortcuts and keyboard navigation.
• Modal dialogs and configurable message boxes.
• Responsive terminal scaling.

Requirements

• A Blazor Server application.
• The .NET 10 SDK.

Installation

Install BlazorTUI from NuGet:

dotnet add package BlazorTUI

Quick start

Add the BlazorTUI namespace to a Razor page, create a Screen, and render it with the component:

@page "/terminal"
@using BlazorTUI.TUI
@using Color = System.Drawing.Color

<BlazorTUI.BlazorTUI screen="@screen" />

@code {
    private readonly Screen screen = CreateScreen();

    private static Screen CreateScreen()
    {
        var screen = new Screen(80, 40);

        var frame = new Frame(
            "mainFrame",
            "CUSTOMER",
            12,
            5,
            56,
            12,
            Frame.BorderStyle.line,
            Color.Yellow,
            Color.DarkBlue);

        screen.topContainer.AddContainer(frame);

        frame.AddControl(new Label(
            "nameLabel", "Name:", 2, 2, 12, Color.White, Color.DarkBlue));

        frame.AddControl(new TextBox(
            "nameInput", "", 14, 2, 24, Color.Yellow, Color.Black));

        var saveButton = new Button(
            "saveButton", "Save", 14, 5, 10, Color.White, Color.DarkGreen);

        saveButton.OnClick = _ =>
        {
            var message = new MessageBox(
                "Saved",
                "Result",
                MessageBox.Buttons.OKOnly,
                BorderStyle.line,
                Color.White,
                Color.DarkGreen,
                screen);

            message.Show();
        };

        frame.AddControl(saveButton);
        screen.SetFocus("nameInput");

        return screen;
    }
}

Click inside the terminal before using the keyboard so the screen element receives browser focus.

Screen and layout

A Screen defines the terminal dimensions. Character cells use a 1:2 width-to-height ratio, so the screen width should be twice its height—for example, 80 × 40. The built-in responsive styles support screen heights from 1 to 40 rows.

Coordinates are zero-based. Controls use coordinates relative to their parent container, which makes it possible to move a complete group by repositioning its Frame.

Every control must have a non-empty, unique name. Add elements through:

• AddContainer for nested frames and containers.
• AddControl for controls inside a container.

These methods initialize parent references, tab order, and z-order. Use screen.SetFocus("controlName") to select the initial control.

Available controls

Control constructors accept System.Drawing.Color values for foreground and background colors. Interactive controls expose callbacks such as OnClick, OnFocus, and OnLostFocus.

Keyboard and mouse interaction

• Tab: move to the next focusable control.
• Shift+Tab: move to the previous focusable control.
• Enter or Space: activate buttons and selection controls.
• Arrow keys: navigate text, lists, grids, color pickers, and menus where applicable.
• Alt: show menu shortcut keys.
• Mouse click: focus or activate the control under the selected cell.

When a dialog is open, it receives input until it is closed.

Images

PictureBox accepts encoded image bytes. The default constructor treats the data as PNG:

byte[] imageData = File.ReadAllBytes("logo.png");

var picture = new PictureBox(
    "logo",
    imageData,
    47,
    17,
    10,
    5,
    Color.White,
    Color.Black);

frame.AddControl(picture);

For another browser-supported format, provide its MIME type after the byte array:

var picture = new PictureBox(
    "photo",
    jpegData,
    "image/jpeg",
    47,
    17,
    10,
    5,
    Color.White,
    Color.Black);

BlazorTUI displays the encoded image without resizing or converting the source data. If you are upgrading from an earlier version, replace the previous System.Drawing.Image constructor with one of the byte-array constructors above.

Complete example

The sample page demonstrates all controls, nested frames, menu shortcuts, message-box variants, callbacks, and an animated progress bar.

License

BlazorTUI is available under the MIT License.