https://github.com/battlefieldduck/xterm-svelte
A SvelteKit wrapper for Xterm.js, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless updates with the latest SvelteKit and Xterm.js versions.
https://github.com/battlefieldduck/xterm-svelte
svelte svelte4 svelte5 sveltekit xterm xterm-js xterm-svelte xtermjs
Last synced: about 1 month ago
JSON representation
A SvelteKit wrapper for Xterm.js, enabling terminal embedding in SvelteKit apps, managing Xterm addons, and providing seamless updates with the latest SvelteKit and Xterm.js versions.
- Host: GitHub
- URL: https://github.com/battlefieldduck/xterm-svelte
- Owner: BattlefieldDuck
- License: mit
- Created: 2024-04-18T18:29:40.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T15:54:09.000Z (3 months ago)
- Last Synced: 2025-04-03T23:34:00.472Z (about 2 months ago)
- Topics: svelte, svelte4, svelte5, sveltekit, xterm, xterm-js, xterm-svelte, xtermjs
- Language: Svelte
- Homepage: https://xterm-svelte.pages.dev
- Size: 351 KB
- Stars: 30
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
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
# Xterm Svelte
[](https://github.com/BattlefieldDuck/xterm-svelte/actions/workflows/node-build.yml)
[](https://www.npmjs.com/package/@battlefieldduck/xterm-svelte)
xterm-svelte is a wrapper for the [xterm.js](https://github.com/xtermjs/xterm.js) library, designed to work seamlessly with SvelteKit. This library allows you to embed a fully functional terminal in your SvelteKit application.
Check it out: https://xterm-svelte.pages.dev
## Version Compatibility
| Version | Svelte Version | Branch | Demonstration |
| ------- | -------------- | ------------------------------------------------------------------------- | -------------------------------------- |
| 2.x.x | Svelte 5 | [`main`](https://github.com/BattlefieldDuck/xterm-svelte) | https://xterm-svelte.pages.dev |
| 1.x.x | Svelte 4 | [`svelte4`](https://github.com/BattlefieldDuck/xterm-svelte/tree/svelte4) | https://svelte4.xterm-svelte.pages.dev |
For details on migrating from version 1.x.x to 2.x.x, refer to the [Migration Guide](https://github.com/BattlefieldDuck/xterm-svelte/releases/tag/2.0.0).
## Features
- **Full integration with SvelteKit**
Xterm-Svelte is designed to work seamlessly with SvelteKit, allowing you to easily incorporate terminal functionality into your SvelteKit projects.
- **Xterm addons management**
Xterm addons are managed within Xterm-Svelte, providing a unified and consistent interface for working with Xterm and its addons.
- **Continuous package updates**
Xterm-Svelte is regularly updated to ensure compatibility with the latest versions of SvelteKit and Xterm.js. This means you can always use the latest features and improvements from these libraries in your projects.
## Installation
To install Xterm-Svelte, run the following command in your project directory:
```bash
npm install @battlefieldduck/xterm-svelte
```
## Usage
Here's a basic example of how to use xterm-svelte in your SvelteKit application:
```svelte
import { Xterm, XtermAddon } from '@battlefieldduck/xterm-svelte';
import type {
ITerminalOptions,
ITerminalInitOnlyOptions,
Terminal
} from '@battlefieldduck/xterm-svelte';
let terminal: Terminal;
let options: ITerminalOptions & ITerminalInitOnlyOptions = {
fontFamily: 'Consolas'
};
async function onLoad() {
console.log('Child component has loaded');
// FitAddon Usage
const fitAddon = new (await XtermAddon.FitAddon()).FitAddon();
terminal.loadAddon(fitAddon);
fitAddon.fit();
terminal.write('Hello World');
}
function onData(data: string) {
console.log('onData()', data);
}
function onKey(data: { key: string; domEvent: KeyboardEvent }) {
console.log('onKey()', data);
}
```
## FAQ
### When should I use `onLoad()`?
The `onLoad()` function fires when the xterm terminal is first initialized. You can use this function to perform actions such as initializing xterm addons.
### Why is the `terminal` undefined?
One possible cause is that you called the `terminal` function before it was initialized. For example, if you run the `terminal` function in the `onMount` function without wrapping it with `if (terminal !== undefined)`, it can lead to this issue.
## Real-world uses
- [Thymis](https://thymis.io): Thymis is an open-source project that aims to provide a seamless and secure IoT device management solution.
With Thymis, users can easily configure and manage their devices running on the NixOS operating system.
- [And much more...](https://github.com/BattlefieldDuck/xterm-svelte/network/dependents)
## Contributing
Contributions are welcome! Please feel free to submit pull requests or open issues.
## License
xterm-svelte is licensed under the MIT License. See the `LICENSE` file for more details.
## Stargazers over time
[](https://starchart.cc/BattlefieldDuck/xterm-svelte)