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 shouto

pnpm add charsm

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

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

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

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

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

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());

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

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

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

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);

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);

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

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

Related Posts

Code Feeds for GitHub - AI Generated Instagram-styled f...

Jan 15, 2025

HashiCorp Vault Setup Guide for NEAR Protocol Accounts

Jan 14, 2025

A Complete Beginner’s Guide to Python Training Course

Jan 15, 2025