XtermBlazor 2.1.2

dotnet add package XtermBlazor --version 2.1.2                
NuGet\Install-Package XtermBlazor -Version 2.1.2                
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="2.1.2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add XtermBlazor --version 2.1.2                
#r "nuget: XtermBlazor, 2.1.2"                
#r directive can be used in F# Interactive and Polyglot Notebooks. 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=2.1.2

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

XtermBlazor

<img align="right" width="100" height="100" src="https://github.com/BattlefieldDuck/XtermBlazor/assets/29337428/244eb056-4bb1-43a2-85b4-1909034c3ddf">

Dotnet Package NuGet Version NuGet Downloads

Brings xterm.js to Blazor

Live Demo: https://xtermblazor.pages.dev

Demo Projects

Prerequisites

Before you get started with this project, make sure you have the following software installed on your system:

  • .NET: You will need .NET 6.0 or later for this project.
  • Node.js: This project also requires Node.js version 18 or later.

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.min.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.

Blazor WebAssembly index.html


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

<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>


<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>

Blazor Server _Host.cshtml


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

<script src="_framework/blazor.server.js"></script>


<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>

Usage with addons

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

@code {
    private Xterm _terminal;

    private TerminalOptions _options = new TerminalOptions
    {
        CursorBlink = true,
        CursorStyle = CursorStyle.Bar,
    };

    private HashSet<string> _addons = new HashSet<string>()
    {
        "addon-fit",
    };

    private async Task OnFirstRender()
    {
        // Invoke fit() function
        await _terminal.Addon("addon-fit").InvokeVoidAsync("fit");

        await _terminal.WriteLine("Hello World");
    }
}

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues.

https://github.com/BattlefieldDuck/XtermBlazor/graphs/contributors

License

XtermBlazor is licensed under the MIT License. See the LICENSE file for more details.

Stargazers over time

Stargazers over time

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (2)

Showing the top 2 NuGet packages that depend on XtermBlazor:

Package Downloads
Quick.Blazor.Bootstrap.Terminal

Quick.Blazor.Bootstrap.Terminal is a component library for Terminal built on top of Blazor and CSS frameworks Bootstrap.

MoonlightPluginBase

Use this package to install all dependencies a moonlight plugins needs

GitHub repositories (2)

Showing the top 2 popular GitHub repositories that depend on XtermBlazor:

Repository Stars
LANCommander/LANCommander
weibaohui/blazork8s
manage k8s using c# blazor enhance by chatgpt ,try something new !使用blazor技术开发的内置OpenAI GPT的k8s 管理界面
Version Downloads Last updated
2.1.2 1,221 9/18/2024
2.1.1 3,321 7/10/2024
2.1.0 2,846 4/16/2024
2.0.0 644 3/8/2024
1.10.2 6,023 2/5/2024
1.10.1 156 1/29/2024
1.10.0 2,355 9/27/2023
1.9.0 3,870 6/28/2023
1.8.1 1,920 3/22/2023
1.8.0 264 3/22/2023
1.7.0 506 2/19/2023
1.6.1 6,434 9/20/2022
1.6.0 538 9/18/2022
1.5.2 568 9/7/2022
1.5.1 449 9/2/2022
1.5.0 1,012 4/13/2022
1.4.0 510 2/22/2022
1.3.2 429 2/21/2022
1.3.1 462 2/16/2022
1.3.0 496 1/19/2022
1.2.0 508 1/14/2022
1.1.0 441 11/1/2021
1.0.2 365 6/14/2021
1.0.1 339 6/13/2021
1.0.0 467 6/13/2021