Rendering React in the Terminal: Inside sedekahje-cli

How a lightweight TUI uses Bun, React hooks, and Unicode half-blocks to bring digital philanthropy to the command line.

5 min read • View on GitHub • More from khrnchn

A traditional mosque dome seamlessly morphing into a rigid grid of terminal blocks and QR code patterns, illustrating the blend of cultural philanthropy and command-line technology. — sedekahje-cli brings Malaysian donation QR codes directly to the developer workflow.

Key Takeaways

sedekahje-cli bypasses traditional C-based terminal libraries by rendering React components directly to standard output.
The application achieves high-resolution QR code rendering in text environments using calculated Unicode half-blocks.
Bun compiles the entire TypeScript and React ecosystem into a single dependency-free binary for instant execution.

The Half-Block Illusion

Building rich terminal user interfaces usually requires wrestling with low-level C libraries and manual memory buffers. sedekahje-cli flips this paradigm entirely. It proves that modern web paradigms can be seamlessly compiled into a blisteringly fast standalone terminal binary.

The project's most visually striking feature is its ability to render complex DuitNow and Touch 'n Go QR codes inside a text-only environment. It achieves this using calculated Unicode half-block characters to double the vertical resolution of standard terminal cells.

By using Unicode half-blocks, the CLI effectively doubles the vertical pixel density of the standard terminal grid.

Treating stdout like the DOM

Instead of manually concatenating strings to draw the interface, the developer utilized the @opentui/react framework. This allows the terminal application to be architected exactly like a browser DOM.

The interface relies on standard React hooks. The useState hook manages keyboard navigation states while custom windowing logic keeps the terminal buffer performant by only rendering visible list items. This ensures smooth scrolling even with hundreds of database entries.

A close-up of a mechanical loom weaving horizontal threads made of code into a rigid tapestry of square terminal blocks. — React components weave state and layout logic together before printing the final frame to standard output.

The Two-Tier Search Engine

The application employs a hybrid search strategy to eliminate latency. Broad queries are sent to the backend API via native fetch calls to retrieve the initial dataset.

Once data is loaded into the terminal window, a local implementation of Fuse.js takes over. This provides instant client-side fuzzy filtering without triggering additional network requests.

Compiled by Bun

Distributing Node-based CLI tools traditionally forces users to download massive dependency folders. sedekahje-cli solves this distribution bottleneck using Bun.

By leveraging the bun build --compile feature, the entire React ecosystem, TypeScript logic, and styling libraries are packaged into a single executable binary. Users simply run a native script to install the tool.

Feature	Traditional Node CLI	sedekahje-cli Approach
Rendering Engine	String concatenation	React Components (@opentui)
State Management	Global variables	React Hooks
Distribution	NPM Install + node_modules	Standalone Bun Binary
Search	Server-only	Hybrid (Server + Fuse.js)

Local Problems, Global Tools

An ink stipple portrait of khrnchn, the creator of sedekahje-cli.

The technical achievements of sedekahje-cli are grounded in a highly localized purpose. It serves as a terminal client for sedekah.je, a platform aggregating Malaysian donation QR codes for mosques, suraus, and welfare organizations.

It brings digital philanthropy directly into the developer workflow. By marrying cultural traditions with cutting-edge terminal architecture, the project showcases the versatility of modern JavaScript tooling.