Build a useful terminal application before reading the reference.

Step 1

Create a .NET console project

TermBlade.Razor adds Razor components and a terminal host to a .NET application. Create the project, install the package, then enable Razor compilation in the project SDK.

dotnet new console -n MyTerminalApp
cd MyTerminalApp
dotnet add package TermBlade.Razor

<Project Sdk="Microsoft.NET.Sdk.Razor">

Keep the remaining project content, including the versioned TermBlade.Razor package reference generated by dotnet add package.

Step 2

Compose a screen with Razor

Create _Imports.razor and Dashboard.razor beside Program.cs. Imports make the layout types and TermBlade components available to every Razor file.

@using TermBlade.Core.Ansi
@using TermBlade.Core.Layout
@using TermBlade.Core.Renderables
@using TermBlade.Razor.Components

<Box Width="100%" Height="100%" PaddingLeft="2" PaddingTop="1"
     BackgroundColor="#0d1117" FlexDirection="FlexDirection.Column">
  <Text Content="TermBlade dashboard" Fg="#58a6ff" Attributes="TextAttributes.Bold" />
  <Text Content="Press ↑ or ↓ to change the selected item." Fg="#8b949e" />
  <Box MarginTop="1" Border="true" BorderColor="#30363d" PaddingLeft="1" PaddingTop="1">
    <Text Content="@Items[SelectedIndex].Name" Fg="#ffffff" />
  </Box>
</Box>

@code {
  private static readonly List<SelectOption> Items =
  [
    new() { Name = "Build", Description = "Compile the application", Value = "build" },
    new() { Name = "Test", Description = "Run the test suite", Value = "test" },
    new() { Name = "Ship", Description = "Create a release", Value = "ship" },
  ];
  private int SelectedIndex { get; set; }
}

The component is deliberately small. You can replace the final Text with a Select, Table, or any gallery component later.

Step 3

Start the terminal host

Replace Program.cs with the host setup. It manages terminal mode, rendering, resizing, and component lifecycle.

using Microsoft.Extensions.Hosting;
using MyTerminalApp;
using TermBlade.Razor.Hosting;

var host = Host.CreateDefaultBuilder(args)
    .UseTermBladeRazor<Dashboard>()
    .Build();

await host.RunAsync();

dotnet run

Step 4

Add keyboard interaction

For focused controls, use their supplied callbacks. Replace the final Text in the previous step with a real selection control; TermBlade handles focus and arrow-key navigation.

<Select Width="30" Height="5" Options="@Items" SelectedIndex="@SelectedIndex"
        SelectedIndexChanged="@OnSelectionChanged" AutoFocus="true" />

@code {
  private static readonly List<SelectOption> Items =
  [
    new() { Name = "Build", Description = "Compile the application", Value = "build" },
    new() { Name = "Test", Description = "Run the test suite", Value = "test" },
    new() { Name = "Ship", Description = "Create a release", Value = "ship" },
  ];
  private int SelectedIndex { get; set; }

  private Task OnSelectionChanged(int index)
  {
    SelectedIndex = index;
    return Task.CompletedTask;
  }
}

Step 5

Choose your next building block

• Run the existing samples to see complete applications.
• Browse the component gallery for live visual previews and source code.
• Use a how-to guide for editors, tables, tools, and terminal behavior.
• Consult the API reference once you know the type you need.