❯_termy
DeveloperWeb terminal

Migrate from xterm.js

Replace @xterm/xterm with @termysh/xterm and keep your existing code.

@termysh/xterm implements the xterm.js Terminal API on top of @termysh/web. In most apps, migrating means changing imports.

npm uninstall @xterm/xterm @xterm/addon-fit @xterm/addon-web-links @xterm/addon-search
npm install @termysh/xterm
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
-import { WebLinksAddon } from '@xterm/addon-web-links'
-import '@xterm/xterm/css/xterm.css'
+import { Terminal, FitAddon, WebLinksAddon } from '@termysh/xterm'

 const term = new Terminal({ cursorBlink: true, fontSize: 13 })
 const fit = new FitAddon()
 term.loadAddon(fit)
 term.loadAddon(new WebLinksAddon())
 term.open(container)
 fit.fit()
 term.onData((data) => socket.send(data))

No stylesheet is needed. An unthemed terminal uses xterm.js's default colors, so it looks the same after the switch.

What carries over

  • Terminal options, including theme (ITheme), cursor, font, scrolling, input and link options. Options without a Termy equivalent (logLevel, windowsMode, tabStopWidth, smoothScrollDuration, ...) are accepted and ignored.
  • term.options.fontSize = 16 and term.options = { ... } update live.
  • Methods: open, write, writeln, paste, input, resize, focus, blur, clear, reset, scroll*, select*, getSelection, getSelectionPosition, attachCustomKeyEventHandler, attachCustomWheelEventHandler, registerMarker, loadAddon, dispose.
  • Events: onData, onBinary, onKey, onResize, onTitleChange, onBell, onScroll, onRender, onSelectionChange, onCursorMove, onLineFeed, onWriteParsed.
  • buffer.active with getLine(y).translateToString(), getCell(x) and cell attribute and color getters; modes.

Addons

xterm.js addonWith @termysh/xterm
@xterm/addon-fitFitAddon (same API)
@xterm/addon-web-linksWebLinksAddon (same API)
@xterm/addon-searchSearchAddon: findNext, findPrevious, onDidChangeResults
@xterm/addon-webgl, @xterm/addon-canvasWebglAddon, CanvasAddon no-ops; Termy has its own renderer
@xterm/addon-unicode11Unicode11Addon no-op; the engine measures widths
@xterm/addon-imageNot needed for kitty graphics, which are built in. Sixel is not supported yet

Third-party addons that reach into xterm.js internals (terminal._core) will not work.

Termy extras

The adapter accepts a few extra options:

OptionDescription
termyThemeStart from a bundled Termy theme; theme then overrides individual colors
imagesRender kitty graphics (default true)
allowClipboardWriteLet OSC 52 write the clipboard
autoFitFollow the container without FitAddon. Off by default, as in xterm.js
padding, copyOnSelectAs in @termysh/web

term.termy is the underlying @termysh/web terminal, and term.ready resolves once the engine is loaded.

Differences

  • Writes made before the WebAssembly module loads are queued; they render once it is ready.
  • Not supported yet: registerDecoration, custom registerLinkProvider providers and character joiners. They are accepted and do nothing.
  • There is no term.parser, so parser.register*Handler hooks are not available. Code that calls them throws; remove it, or use term.termy.onTitleChange, onCwdChange, onProgress and the other @termysh/web events for the common OSC sequences.
  • buffer.normal cannot read the main screen while a full-screen app is using the alternate screen.

On this page