Welcome to Xterm Svelte

Node.js Build NPM Type Definitions NPM Version NPM Downloads NPM Downloads NPM License

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.

Getting Started

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!