effect-boxes

Compose rectangular text layouts for terminals and HTML with Effect. Place text beside other text, align it, add borders, and apply styling through annotations. All layout operations return new boxes without changing the originals.

Render your first box

Install the library and its Effect 4 peer dependency:

npm install effect-boxes "effect@^4"

import * as Box from "effect-boxes/Box";
 
const greeting = Box.text("Hello, World!");
console.log(Box.renderPlainSync(greeting));
// Hello, World!

Box.renderPlainSync returns a string without setting up an Effect runtime. For styled terminal output, use Box.renderPrettySync.

Choose where to start

• Build your first text layout. Read What is Box?, follow Getting started, and continue with Using Box. The Directory tree tutorial puts composition and styling together.
• Build an interactive terminal tool. After Rendering, read Using Cmd and build the Select prompt. Using Reactive explains position tracking.
• Render HTML. Start with Using Box and Using Annotation, then follow Using Html. Rendering explains how renderer layers select the output target.
• Look up an operation. Open the Box API reference, or choose a module under API reference in the sidebar. Architecture explains the internal tree and renderers.