Brings xterm.js to Blazor

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

• XtermBlazor.Demo.Server (Blazor Server)
• XtermBlazor.Demo.Wasm (Blazor WebAssembly)

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.

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

dotnet add package XtermBlazor

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

@using XtermBlazor

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>

<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");
    }
}

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

<!-- Add addon-fit.min.js before blazor.webassembly.js and XtermBlazor.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@xterm/[email protected]/lib/addon-fit.min.js"></script>

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

<!-- Load the XtermBlazor library and register addons -->
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>

Blazor Server _Host.cshtml

<!-- Add addon-fit.min.js before blazor.server.js and XtermBlazor.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@@xterm/[email protected]/lib/addon-fit.min.js"></script>

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

<!-- Load the XtermBlazor library and register addons -->
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script>
<script>XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});</script>

<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");
    }
}

• Moonlight: The next generation hosting panel
• LANCommander: LANCommander is an open-source digital game platform.
• KubeUI: Kubernetes User Interface
• blazork8s: About manage k8s using c# blazor enhance by chatgpt, try something new！使用blazor技术开发的内置OpenAI GPT的k8s 管理界面
• And much more...

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

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