Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/battlefieldduck/xtermblazor
Blazor library that integrates the xterm.js terminal emulator into Blazor applications. Over 22,000 downloads.
https://github.com/battlefieldduck/xtermblazor
blazor blazor-server blazor-wasm blazor-webassembly xterm xterm-js xtermblazor
Last synced: about 1 month ago
JSON representation
Blazor library that integrates the xterm.js terminal emulator into Blazor applications. Over 22,000 downloads.
- Host: GitHub
- URL: https://github.com/battlefieldduck/xtermblazor
- Owner: BattlefieldDuck
- License: mit
- Created: 2021-06-12T23:10:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T01:22:56.000Z (9 months ago)
- Last Synced: 2024-05-02T04:20:14.190Z (9 months ago)
- Topics: blazor, blazor-server, blazor-wasm, blazor-webassembly, xterm, xterm-js, xtermblazor
- Language: C#
- Homepage: https://xtermblazor.pages.dev
- Size: 3.73 MB
- Stars: 29
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# XtermBlazor
[](https://github.com/BattlefieldDuck/XtermBlazor/actions/workflows/dotnet-package.yml)
[](https://www.nuget.org/packages/XtermBlazor/)
[](https://www.nuget.org/packages/XtermBlazor/)
Brings [xterm.js](https://github.com/xtermjs/xterm.js) to Blazor
Live Demo: [https://xtermblazor.pages.dev](https://xtermblazor.pages.dev)
## Demo Projects
- [XtermBlazor.Demo.Server](/XtermBlazor.Demo.Server/Pages/Index.razor) (Blazor Server)
- [XtermBlazor.Demo.Wasm](/XtermBlazor.Demo.Wasm/Pages/Index.razor) (Blazor WebAssembly)
## 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.
```sh
dotnet add package XtermBlazor
```
### 2. Add Imports
After the package is added, you need to add the following in your `_Imports.razor`
```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.
```html
```
In the HTML body section of either `index.html` or `_Host.cshtml` add this:
```html
```
### Basic Usage
```razor
@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](https://github.com/xtermjs/xterm.js/tree/master/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`
```html
navigator.serviceWorker.register('service-worker.js');
XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});
```
Blazor Server `_Host.cshtml`
```html
XtermBlazor.registerAddons({"addon-fit": new FitAddon.FitAddon()});
```
### Usage with addons
```razor
@code {
private Xterm _terminal;
private TerminalOptions _options = new TerminalOptions
{
CursorBlink = true,
CursorStyle = CursorStyle.Bar,
};
private HashSet _addons = new HashSet()
{
"addon-fit",
};
private async Task OnFirstRender()
{
// Invoke fit() function
await _terminal.Addon("addon-fit").InvokeVoidAsync("fit");
await _terminal.WriteLine("Hello World");
}
}
```
## Real-world uses
- [**Moonlight Panel**](https://moonlightpanel.xyz): The next generation hosting panel
- [**blazork8s**](https://github.com/weibaohui/blazork8s): About manage k8s using c# blazor enhance by chatgpt, try something new！使用blazor技术开发的内置OpenAI GPT的k8s 管理界面
- [**KubeUI**](https://KubeUI.com): Kubernetes User Interface
- [And much more...](https://github.com/BattlefieldDuck/XtermBlazor/network/dependents)
## Contributing
Contributions are welcome! Please feel free to submit pull requests or open issues.
## License
XtermBlazor is licensed under the MIT License. See the `LICENSE` file for more details.
## Stargazers over time
[](https://starchart.cc/BattlefieldDuck/XtermBlazor)