Skip to content

TermDOM 0.1.0

Choose a tag to compare

View all tags
@brainkim brainkim released this 08 Aug 05:36
· 525 commits to main since this release
v0.1.0
790ba1f

The first release.

TermDOM is a JavaScript library that displays HTML and CSS in the terminal. It draws actual DOM nodes to terminal output and redraws the screen when they mutate, so TUIs and interactive CLIs can be written with vanilla JavaScript or any frontend web framework.

npm install @b9g/termdom
import {TermDOM} from "@b9g/termdom";

const term = new TermDOM();
term.attach();
term.document.body.innerHTML = `<div style="color: green; border: 1px solid">hello</div>`;

What's in it:

  • A real DOM document with a CSS cascade and a cell-based layout engine: box model, flexbox, tables, and inline layout. One cell is 1ch wide and 1px tall.
  • Stylesheets from <style> elements and style attributes, translated to ANSI color and text decoration.
  • Keyboard, mouse, focus, and paste events fired on elements, the document, and the window.
  • <input>, <textarea>, <select>, checkboxes, and radios as shadow-tree widgets with terminal-native looks, restylable with CSS. The caret is the real terminal cursor, so IMEs compose in the field.
  • CJK, emoji, and combining characters at their correct widths; Hebrew and Arabic in visual order with contextual shaping.
  • Scrolling with window.scrollTo() and element.scrollIntoView(); the alternate screen via element.requestFullscreen().
  • Web Components: customElements.define(), attachShadow(), <slot>, :host.
  • Drag selection styled with ::selection; navigator.clipboard over OSC 52.

Documentation: https://termdom.org
Guides: https://termdom.org/guides/getting-started/
Compatibility matrix: https://termdom.org/compatibility/
Examples: https://github.com/bikeshaving/termdom/tree/main/examples

Assets 2
Loading