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

I’m obsessed with TUIs—maybe you are too! If not yet, I hope you will be, because they’re not just fun but incredibly useful!

About two months ago, I ported Lipgloss from Go to WebAssembly. That was the first article in this series! My next plan was to port forms, but—long story short—some features couldn’t make the jump to WASM. Native features and runtime limitations threw up roadblocks, so I went a step lower: DLLs and SO files (shared libraries). And finally, we have forms!

Note: To use shared libraries in JavaScript, you’ll need Node.js with native module support and node-gyp for the C bindings.

The simplest way? Reinstall Node.js and select the native modules option during setup:

Prefer manual installation? Follow this README.

---

Why DLLs and SO files?

They’re much smaller compared to WASM, and I might end up rewriting everything to take advantage of that!

If you’re ready to dive in, set up a new JavaScript project and install charsm:

pnpm add charsm

---

Forms in the CLI

1. Theme Customization

To customize your forms’ appearance, use themes:

import { huh } from "charsm";
huh.SetTheme("dracula");

All components defined afterward will use the Dracula theme. You can override the theme anytime:

huh.SetTheme("dracula"); 
// Components here use Dracula
huh.SetTheme("Catppuccin");
// Components here use Catppuccin

// Available themes: default, Charm, Base16, Dracula, Catppuccin

---

2. Create a Confirmation Dialog

A simple confirmation dialog with customizable Yes (affirmative) and No (negative) buttons:

const m = huh.Confirm("Do you want to proceed?", "Yes", "No");

When run, it returns "1" for Yes and "0" for No. pointer to strings in shared libraries are easy to return:

if (m.run() === "1") {
  console.log("User chose the affirmative option");
} else {
  console.log("User chose the negative option");
}

---

3. Create an Input Field

Example 1: Single Input

Define input fields with validation and placeholders:

const i = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required", 
  },
  0 // Mode: Single Input
);
i.load();
console.log(i.run());

Validators are defined as a comma-separated string. For example, "no_numbers,required" ensures the input meets all conditions before continuing.

Validators include:

• required
• email
• no_numbers
• alpha_only
• no_special_chars

Modes:

• 0: Single-line input
• 1: Multiline text area

Example 2: Multiline Input

const s = new huh.NewInput(
  {
    Title: "Search",
    Description: "Enter query",
    Placeholder: "Type something...",
    validators: "required",
  },
  1 // Mode: Multiline
);
s.load();
console.log(s.run());

---

4. Create a Selection Component

const c = huh.Select("Choose your favorite person", ["Opt1", "Opt2", "Opt3"]);
console.log(c.run()); // Returns the selected option

---

5. Add a Spinner

huh.Spinner(2, "Doing some work");

---

6. Creating Forms

Forms can hold multiple groups, rendering them sequentially. Here’s an example:

const m = huh.Confirm("All your codebase are belong to us?", "Yes", "No");

const single_ = new huh.NewInput(
  {
    Title: "Username",
    Description: "Enter your name",
    Placeholder: "e.g., John Doe",
    validators: "no_numbers,required",
  },
  0
);
single_.load();

const multiline_ = new huh.NewInput(
  {
    Title: "Search",
    Description: "Enter query",
    Placeholder: "Type something...",
    validators: "required",
  },
  1
);
multiline_.load();

const s = huh.Select("Choose your favorite person", ["Opt1", "Opt2", "Opt3"]);

const group = huh.CreateGroup(`${m.id},${single_.id},${multiline_.id},${s.id}`);
huh.CreateForm(group);

Values from the form are stored in each component’s value property:

if (m.value === "1") {
  console.log("The user knows the Zig reference!");
} else {
  console.log(":(");
}

console.log("Name: ", single_.value);
console.log("Query: ", multiline_.value);
console.log("Favorite person: ", s.value);

---

Validators can be a bit buggy on Linux for forms (I might’ve skipped building updated .so files—oops!). If you’re curious or want to lend a hand, check out these repos for updates—or even better, contribute!

• Charsm: Good first issue – Remove the load method in inputs so it’s automatically called in huh.NewInput.

• Huh Shared Lib Code: Two good first issues – Fix the incorrect README documentation and add a build file for macOS support.

Now, let’s talk groups. You can create multiple groups and pass them to a single form like this:

const group = huh.CreateGroup(`${m.id},${single_.id}`);
const group2 = huh.CreateGroup(`${multiline_.id},${s.id}`);

huh.CreateForm(`${group},${group2}`);

When you do this, Huh will render the groups in a staggered order:

Pretty cool, right? Huge shoutout to Charm for their amazing tools! This is just the tip of the iceberg. I’ll keep updating and refining this tool to make it even more useful.

Want a complete example? Check out Building a Terminal Coffee Shop.

For something lighter but in the same spirit as DLLs, read my article on Loading a Go Process in Node.js.

If you’re into deep-dive, non-blog-friendly content—think long series and unpolished gems designed to level up your dev skills—follow me on Substack you can also find me on x .

Upcoming Articles and Series on Substack:

• P2P Series: Building Livescribe, an open-source peer-to-peer writing app (desktop and mobile) in Go.
• Custom Template Engine: Crafting one from scratch.
• Low-Level Libuv Server: Exploring custom protocols and server building.
• Windows Universal Meets WebView: Stylish domination.
• RAG Apps: Delving into retrieval-augmented generation.
• Custom Node.js C/C++ Modules: Pushing Node.js to its limits.

Thanks for reading—here’s to a fantastic 2025! 🚀

Comments

[Sk]

Once again Shout-out to the Charm team, for these tools, you can check them out from the following links:

Site: charm.sh
Youtube: youtube.com/@charmcli
Repo: github.com/charmbracelet

w/o them this would not be possible!