Vercel wterm: DOM-Based Terminal Emulation
Better Stackgo watch the original →
the gist
wterm replaces canvas-based terminal rendering with DOM elements, enabling native browser features like text selection and find while maintaining efficiency through partial row updates.
The Breakthrough
wterm shifts terminal emulation from canvas-based rendering to direct DOM manipulation, allowing developers to leverage native browser text selection, search, and accessibility features without reimplementing them from scratch.
DOM-Based Rendering and Efficiency
Unlike xterm.js, which renders terminal output to a canvas element, wterm treats terminal output as standard HTML. This architecture allows the browser to handle text selection and find-in-page functionality natively. To maintain performance, the core—written in Zig and compiled to a 12KB WebAssembly binary—implements a differential rendering strategy. Instead of re-rendering the entire terminal buffer, it identifies specific changed rows and updates only those elements in the DOM.
Implementation and Integration
To function as a remote terminal, wterm requires a backend to handle pseudo-terminal (PTY) processes. The client-side implementation connects to this backend via WebSockets. The data flow involves sending keystrokes to the server, which executes them in a PTY and streams the output back to the client. Developers can integrate wterm into frameworks like React or Vue by passing the terminal dimensions and handling the data stream through the provided WebSocket transform. For high-fidelity terminal compatibility, users can swap the default Zig core for the libghostty engine, which provides superior color rendering and complex text support at the cost of a larger binary size (approximately 400KB compared to the 12KB Zig core).