explaingit

yomguithereal/react-blessed

4,499JavaScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

TLDR

A library that lets you build terminal command-line apps using React components and JSX, write your terminal UI the same way you write a website, and it renders into the terminal window instead of a browser.

Mindmap

mindmap
  root((react-blessed))
    What it does
      React for terminals
      JSX in command line
      Blessed widgets as components
    Components
      Box and list
      Progress bar
      Text and form inputs
    Features
      Event listeners via props
      Class-based styling
      React DevTools support
    Tech Stack
      React 17 or later
      Node.js
      blessed library
    Audience
      JavaScript developers
      CLI tool builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a terminal dashboard with live-updating panels, progress bars, and lists using familiar React components.

USE CASE 2

Create an interactive CLI tool where users navigate menus and forms in the terminal using keyboard and mouse.

USE CASE 3

Reuse existing React knowledge to write command-line apps without learning terminal drawing APIs.

Tech stack

JavaScriptReactNode.jsblessed

Getting it running

Difficulty · moderate Time to first run · 30min

Requires React 17+ and the blessed package, blessed is unmaintained so you may need a community fork via createBlessedRenderer.

Use freely for any purpose including commercial projects, as long as you keep the copyright notice.

In plain English

react-blessed lets you build terminal applications using the same component model that web developers use to build websites with React. Normally React renders buttons, divs, and text into a browser window. This library redirects that rendering into a terminal screen instead, using a Node.js library called blessed that knows how to draw boxes, lists, progress bars, and other widgets inside a command-line window. The practical result is that you write your terminal UI in JSX, the same HTML-like syntax React developers already know. A tag like box or progressbar maps to a blessed widget. You set colors, borders, and positioning through props on those tags rather than through manual terminal drawing code. Events from the terminal, like a key press or mouse click on a widget, come back through event listener props on your components, following the same on-prefixed pattern that browser React uses. Class-based styling, similar to how React Native handles styles, is also supported, letting you define reusable style objects and attach them to components. The library requires React 17 or later and the blessed package installed alongside it. Because the original blessed library has not been actively maintained for some time, react-blessed also supports blessed forks through a createBlessedRenderer function, letting you swap in an alternative implementation if needed. The project describes itself as experimental and subject to change. It does work with React's own developer tools, so you can inspect the component tree in the same Electron-based devtools panel used for browser apps. The README includes several working code examples. The license is MIT.

Copy-paste prompts

Prompt 1
Using react-blessed, build a terminal dashboard that shows a top panel with a title, a middle panel with a scrollable log list, and a bottom panel with a progress bar that updates every second.
Prompt 2
How do I handle keyboard input in react-blessed? Show a component that listens for arrow key presses and moves a selection highlight up and down a list.
Prompt 3
Create a react-blessed component that shows a two-column layout: a file list on the left and a file preview on the right. Wire up a key press to switch focus between panels.
Prompt 4
I want to swap the blessed library for a maintained fork in my react-blessed app. Show how to use createBlessedRenderer to plug in a custom blessed implementation.
Open on GitHub → Explain another repo

← yomguithereal on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.