TermDOM is a JavaScript and TypeScript library designed to bridge the gap between web development and terminal interfaces by enabling developers to build interactive terminal applications using familiar web technologies such as HTML, CSS, and the DOM. Created by the team at bikeshaving, this library provides a spec-compliant DOM and CSSOM API that renders directly to terminal character cells using ANSI escape sequences. By treating the terminal screen as a structured document, TermDOM allows developers to leverage existing frontend paradigms to create complex command-line interfaces and terminal user interfaces (TUIs) without needing to learn proprietary widget APIs.

The core functionality of TermDOM revolves around its ability to observe DOM mutations and automatically redraw the screen on the next frame, mimicking the behavior of a standard web browser. It handles the translation of CSS properties, layout algorithms like Flexbox and Grid, and event dispatching within the terminal environment. This allows for the creation of interactive, responsive layouts that react to terminal window resizing, all while utilizing native DOM methods and standard web styling techniques.

Some of the key features are:

• Full DOM Support: Implements a spec-compliant DOM API, allowing developers to create, manipulate, and style elements as they would in a browser.
• CSS Cascade & Layout: Supports CSS styling, including the cascade, Flexbox, and CSS Grid, which are rendered to character cells.
• Event Handling: Decodes terminal input into standard DOM events, such as keydown, click, and paste, enabling interactive applications.
• Native Framework Compatibility: Works with various frontend frameworks like React, Vue, and Svelte by providing the necessary document and window globals.
• Hardware Independence: Operates across Node.js, Bun, and Deno without requiring native or WebAssembly dependencies.
• System Clipboard Integration: Supports copy and paste functionality through the OSC 52 sequence, allowing seamless interaction with the system clipboard.
• Responsive Design: Includes support for media queries and resize listeners, enabling layouts to adjust dynamically to changes in terminal dimensions.

TermDOM is used by initializing the library and attaching it to a process transport, which puts the terminal into raw mode and begins the rendering loop. Developers can define their application UI by creating elements and appending them to the document body, setting styles via CSS, and adding event listeners to handle user interaction. The library handles the complexity of calculating screen geometry and ANSI color resolution, ensuring that the visual output remains consistent with the declared styles and layout requirements.

Some common use cases include:

• Interactive CLIs: Building command-line tools that require complex menus, form inputs, or interactive dashboards.
• Terminal-based Games: Creating games like solitaire that require precise positioning and graphical rendering within the constraints of a character grid.
• Data Visualizations: Developing live-updating charts, graphs, and monitors that reflect real-time backend process status.
• Utility Dashboards: Crafting customized system monitoring panels or development tools that benefit from a graphical UI within a terminal session.
• Educational Demos: Demonstrating web development concepts, such as CSS layout or syntax highlighting, directly inside a terminal.