Monika

Monika is a lightweight and fast library to render React components inside your terminal.

It's using Bun's Markdown renderer to display the component beautifully (yes, it's translating the HTML generated by your components into markdown, then into ANSI characters).

You cannot use Monika without Bun (unfortunately other runtimes don't support the markdown renderer)!

Get started

Install the package using your favourite package manager.

Note: I will try to reclaim the monika package on NPM since it's maintainer is squatting and not maintaining it.

bun add @lucrbvi/monika

Also try to get familiar with the library by reading the example.tsx in the root of the repo. This example includes advances React 19.2 features like Activity, Suspense, use and more.

Features

Classic CLI or TUI

With Monika you can build Terminal User Interfaces, which uses your terminal like a screen and will delete everything on your terminal, or you can just use the classic "append" mode, it will not break the rerendering (use renderCLI or renderTUI to choose).

Inputs and click detection

Monika have custom hooks to listen to inputs and click events at each frames.

You can make your component mouse friendly by using the useClick hook and then adding the onClick field inside your tag.

If you use useClick you will not be able to select text with your mouse!

Example of a clickable counter:

import { useState } from "react";
import { renderCLI, useClick, useInput } from "@lucrbvi/monika";

export default function App() {
    const [count, setCount] = useState(0);

    useClick(); // uses `useMouse` behind

    useInput(({ ctrl, name }) => {
      if (ctrl && name === "c") process.exit(0);
    });

    return (
        <div>
          <hr/>
          <button onClick={() => setCount(count + 1)}>
            Click on me! {count}
          </button><br/>
          <hr/>
        </div>
    );
}

renderCLI(<App />); // change this to `renderTUI` to try the other mode

This example demonstrate the