XtermBlazor 1.3.0

.NET 5.0
There is a newer version of this package available.
See the version list below for details.
dotnet add package XtermBlazor --version 1.3.0
NuGet\Install-Package XtermBlazor -Version 1.3.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="XtermBlazor" Version="1.3.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add XtermBlazor --version 1.3.0
#r "nuget: XtermBlazor, 1.3.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install XtermBlazor as a Cake Addin
#addin nuget:?package=XtermBlazor&version=1.3.0

// Install XtermBlazor as a Cake Tool
#tool nuget:?package=XtermBlazor&version=1.3.0

XtermBlazor

Brings xterm.js to Blazor

Live Demo: https://xtermblazor.project.tatlead.com

Demo

Prerequisites

Installation

1. Install the package

Find the package through NuGet Package Manager or install it with following command.

dotnet add package XtermBlazor

2. Add Imports

After the package is added, you need to add the following in your _Imports.razor

@using XtermBlazor

3. Add CSS & Font references

Add the following to your HTML head section, it's either index.html or _Host.cshtml depending on whether you're running WebAssembly or Server.

<link href="_content/XtermBlazor/XtermBlazor.css" rel="stylesheet" />

In the HTML body section of either index.html or _Host.cshtml add this:

<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>

Basic Usage

<Xterm @ref="_terminal" Options="_options" OnFirstRender="@OnFirstRender" />

@code {
    private Xterm _terminal;

    private TerminalOptions _options = new TerminalOptions
    {
        CursorBlink = true,
        CursorStyle = CursorStyle.Bar,
        Theme =
        {
            Background = "#17615e",
        },
    };
    
    private async Task OnFirstRender()
    {
        await _terminal.WriteLine("Hello World");
    }
}

Addons

Xterm supports Addons

To use xterm-addon-fit addon, you need to add the following to your HTML body section either index.html or _Host.cshtml.


<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>


<script>window.XtermBlazor.registerAddon("xterm-addon-fit", new window.FitAddon.FitAddon());</script>

Usage with addons

<Xterm @ref="_terminal" Options="_options" AddonIds="_addonIds" OnFirstRender="@OnFirstRender" />

@code {
    private Xterm _terminal;

    private TerminalOptions _options = new TerminalOptions
    {
        CursorBlink = true,
        CursorStyle = CursorStyle.Bar,
    };
    
    private string[] _addonIds = new string[]
    {
        "xterm-addon-fit",
    };
    
    private async Task OnFirstRender()
    {
        // Invoke fit() function
        await _terminal.InvokeAddonFunctionVoidAsync("xterm-addon-fit", "fit");
        
        await _terminal.WriteLine("Hello World");
    }
}
Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows net7.0 net7.0-android net7.0-ios net7.0-maccatalyst net7.0-macos net7.0-tvos net7.0-windows
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.6.1 1,769 9/20/2022
1.6.0 177 9/18/2022
1.5.2 295 9/7/2022
1.5.1 183 9/2/2022
1.5.0 548 4/13/2022
1.4.0 231 2/22/2022
1.3.2 178 2/21/2022
1.3.1 180 2/16/2022
1.3.0 210 1/19/2022
1.2.0 206 1/14/2022
1.1.0 284 11/1/2021
1.0.2 232 6/14/2021
1.0.1 215 6/13/2021
1.0.0 294 6/13/2021