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.
To install xterm-svelte, use the following npm command:
Once installed, you can easily integrate xterm-svelte into your project. Here's a sample code snippet to get you started:
<script lang="ts">
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);
}
</script>
<Xterm bind:terminal {options} {onLoad} {onData} {onKey} />
For more details and advanced usage, please refer to the xterm-svelte Github README.md. Happy coding!