How To Build Beautiful Terminal UIs (TUIs) in JavaScript!

If you're like me and completely obsessed with CLIs and Terminal UIs, this post is for you!

Unfortunately, there isn’t a native way to build beautiful Terminal UIs in JavaScript—at least none that I know of! This was a problem I ran into myself, which eventually led me to port one of the most stunning TUI libraries out there: Lipgloss, created by the folks at

Gorgeous, right?

Here’s the catch: Lipgloss is written in Go. While I usually work in Go, I recently needed to write a web monitoring tool in Node.js. I wasn’t willing to give up my sleek, beautiful UIs, so I found myself in a classic developer challenge mode.

You know those magical moments when you’re deep in code, and something unexpected just clicks? That’s how I ended up porting parts of Lipgloss to WebAssembly (Wasm). And that’s how

const subtle = { Light: "#D9DCCF", Dark: "#383838" };

const special = { Light: "#43BF6D", Dark: "#73F59F" };



const list = lip.List({

  data: ["Grapefruit", "Yuzu", "Citron", "Pomelo", "Kumquat"],

  selected: [],

  listStyle: "alphabet",

  styles: {

    numeratorColor: special.Dark,

    itemColor: subtle.Dark,

    marginRight: 1,

  },

});

const combined = table + "\n\n" + list

console.log(combined);