Convert Figma logo to code with AI

sindresorhus logoboxen

Create boxes in the terminal

1,526
57
1,526
6

Top Related Projects

21,793

🖍 Terminal string styling done right

get colors in your node.js console

🌈Easily set your terminal text color & styles

A FIG Driver written in JavaScript which aims to fully implement the FIGfont spec.

Quick Overview

Boxen is a Node.js library that creates boxes around text in the terminal. It provides a simple and customizable way to add visual emphasis to console output, making it useful for creating eye-catching CLI applications or improving the readability of terminal messages.

Pros

  • Easy to use with a simple API
  • Highly customizable with various border styles and padding options
  • Supports multi-line text and automatic text wrapping
  • Compatible with CLI color libraries like chalk

Cons

  • Limited to terminal/console applications
  • May not work well in all terminal environments or with certain fonts
  • Potential performance impact for large amounts of boxed text
  • Requires Node.js, which may not be suitable for all projects

Code Examples

Creating a simple box:

import boxen from 'boxen';

console.log(boxen('Hello, World!', {padding: 1}));

Customizing the box style:

import boxen from 'boxen';

console.log(boxen('Customized Box', {
  padding: 1,
  margin: 1,
  borderStyle: 'double',
  borderColor: 'green'
}));

Using with chalk for colored text:

import boxen from 'boxen';
import chalk from 'chalk';

console.log(boxen(chalk.blue('Colored Text in a Box'), {
  padding: 1,
  borderColor: 'yellow'
}));

Getting Started

To use Boxen in your project, follow these steps:

  1. Install the package:

    npm install boxen
    
  2. Import and use in your code:

    import boxen from 'boxen';
    
    console.log(boxen('Your text here', {
      padding: 1,
      borderStyle: 'round',
      borderColor: 'green'
    }));
    
  3. Customize the options as needed. Refer to the documentation for all available options.

Competitor Comparisons

21,793

🖍 Terminal string styling done right

Pros of Chalk

  • More focused on text styling and coloring
  • Simpler API for basic color and style operations
  • Wider range of color support, including 256-color and TrueColor

Cons of Chalk

  • Limited to text styling, lacks box-drawing capabilities
  • Doesn't provide padding or alignment features
  • No built-in support for creating bordered or boxed content

Code Comparison

Chalk example:

import chalk from 'chalk';

console.log(chalk.blue('Hello') + ' World' + chalk.red('!'));
console.log(chalk.blue.bgRed.bold('Hello world!'));

Boxen example:

import boxen from 'boxen';

console.log(boxen('Hello World', {padding: 1, borderColor: 'blue'}));
console.log(boxen('Boxen', {
  padding: 1,
  margin: 1,
  borderStyle: 'double',
  borderColor: 'green'
}));

Summary

Chalk excels in text styling and coloring with a simple API, while Boxen specializes in creating box-drawn content with various border styles and padding options. Chalk offers more extensive color support, but Boxen provides unique features for creating visually appealing boxed content in the console. The choice between the two depends on whether the primary need is for text styling (Chalk) or creating boxed content (Boxen).

get colors in your node.js console

Pros of colors.js

  • Focused specifically on adding colors and styles to console output
  • Supports a wider range of color and style options
  • Simpler API for basic color application

Cons of colors.js

  • Limited to text styling, unlike boxen's ability to create boxes
  • Less actively maintained compared to boxen
  • Doesn't provide layout or positioning features

Code Comparison

colors.js:

const colors = require('colors');
console.log('Hello'.green); // outputs green text
console.log('World'.underline.red); // red underlined text

boxen:

const boxen = require('boxen');
console.log(boxen('Hello World', {padding: 1, borderColor: 'green'}));
// outputs a green box with padding containing "Hello World"

Key Differences

  • Purpose: colors.js focuses on text coloring and styling, while boxen creates bordered boxes in the terminal
  • Functionality: colors.js offers more color options, but boxen provides layout and positioning features
  • Maintenance: boxen is more actively maintained and updated
  • Ecosystem: boxen is part of the larger sindresorhus ecosystem of tools, potentially offering better integration with other packages

Use Cases

  • Choose colors.js for simple text coloring and styling in console output
  • Opt for boxen when you need to create visually distinct boxed content in the terminal, especially if you're already using other sindresorhus packages

🌈Easily set your terminal text color & styles

Pros of Colorette

  • Lightweight and minimalistic, with a smaller package size
  • No dependencies, reducing potential vulnerabilities
  • Simpler API, focusing solely on color output

Cons of Colorette

  • Limited functionality compared to Boxen's broader feature set
  • Lacks box-drawing capabilities and border customization options
  • No support for padding or alignment within colored text

Code Comparison

Colorette:

import { red, bold } from 'colorette';

console.log(red(bold('Hello, World!')));

Boxen:

import boxen from 'boxen';

console.log(boxen('Hello, World!', {
  padding: 1,
  borderColor: 'red',
  borderStyle: 'double'
}));

Summary

Colorette is a lightweight, dependency-free library focused on adding color to console output. It offers a simple API for basic color manipulation but lacks advanced features. Boxen, on the other hand, provides a more comprehensive set of tools for creating and customizing boxed content in the terminal, including border styles, padding, and alignment options. While Colorette excels in simplicity and minimal overhead, Boxen offers greater flexibility for creating visually appealing console output with boxed content.

A FIG Driver written in JavaScript which aims to fully implement the FIGfont spec.

Pros of figlet.js

  • Specializes in creating ASCII art text, offering a wide range of font styles
  • Provides both synchronous and asynchronous methods for text generation
  • Includes a built-in font loader for custom font support

Cons of figlet.js

  • Limited to text-based ASCII art, lacking general-purpose box drawing capabilities
  • May require more setup and configuration for basic text styling tasks
  • Larger file size due to included font data

Code Comparison

figlet.js:

const figlet = require('figlet');

figlet('Hello, World!', function(err, data) {
    if (err) {
        console.log('Something went wrong...');
        console.dir(err);
        return;
    }
    console.log(data);
});

boxen:

const boxen = require('boxen');

console.log(boxen('Hello, World!', {
    padding: 1,
    margin: 1,
    borderStyle: 'double'
}));

Key Differences

  • figlet.js focuses on creating elaborate ASCII text art, while boxen specializes in creating simple, customizable boxes around text
  • boxen offers more straightforward usage for basic text decoration, whereas figlet.js provides more complex text transformation options
  • figlet.js requires font selection and potentially more configuration, while boxen's default options are often sufficient for basic use cases

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

boxen

Create boxes in the terminal

Install

npm install boxen

Usage

import boxen from 'boxen';

console.log(boxen('unicorn', {padding: 1}));
/*
┌─────────────┐
│             │
│   unicorn   │
│             │
└─────────────┘
*/

console.log(boxen('unicorn', {padding: 1, margin: 1, borderStyle: 'double'}));
/*

   ╔═════════════╗
   ║             ║
   ║   unicorn   ║
   ║             ║
   ╚═════════════╝

*/

console.log(boxen('unicorns love rainbows', {title: 'magical', titleAlignment: 'center'}));
/*
┌────── magical ───────┐
│unicorns love rainbows│
└──────────────────────┘
*/

API

boxen(text, options?)

text

Type: string

Text inside the box.

options

Type: object

borderColor

Type: string
Values: 'black' 'red' 'green' 'yellow' 'blue' 'magenta' 'cyan' 'white' 'gray' or a hex value like '#ff0000'

Color of the box border.

borderStyle

Type: string | object
Default: 'single'
Values:

  • 'single'
┌───┐
│foo│
└───┘
  • 'double'
╔═══╗
║foo║
╚═══╝
  • 'round' ('single' sides with round corners)
╭───╮
│foo│
╰───╯
  • 'bold'
┏━━━┓
┃foo┃
┗━━━┛
  • 'singleDouble' ('single' on top and bottom, 'double' on right and left)
╓───╖
║foo║
╙───╜
  • 'doubleSingle' ('double' on top and bottom, 'single' on right and left)
╒═══╕
│foo│
╘═══╛
  • 'classic'
+---+
|foo|
+---+
  • 'arrow'
↘↓↓↓↙
→foo←
↗↑↑↑↖
  • 'none'
foo

Style of the box border.

Can be any of the above predefined styles or an object with the following keys:

{
	topLeft: '+',
	topRight: '+',
	bottomLeft: '+',
	bottomRight: '+',
	top: '-',
	bottom: '-',
	left: '|',
	right: '|'
}
dimBorder

Type: boolean
Default: false

Reduce opacity of the border.

title

Type: string

Display a title at the top of the box. If needed, the box will horizontally expand to fit the title.

Example:

console.log(boxen('foo bar', {title: 'example'}));
/*
┌ example ┐
│foo bar  │
└─────────┘
*/
titleAlignment

Type: string
Default: 'left'

Align the title in the top bar.

Values:

  • 'left'
/*
┌ example ──────┐
│foo bar foo bar│
└───────────────┘
*/
  • 'center'
/*
┌─── example ───┐
│foo bar foo bar│
└───────────────┘
*/
  • 'right'
/*
┌────── example ┐
│foo bar foo bar│
└───────────────┘
*/
width

Type: number

Set a fixed width for the box.

Note: This disables terminal overflow handling and may cause the box to look broken if the user's terminal is not wide enough.

import boxen from 'boxen';

console.log(boxen('foo bar', {width: 15}));
// ┌─────────────┐
// │foo bar      │
// └─────────────┘
height

Type: number

Set a fixed height for the box.

Note: This option will crop overflowing content.

import boxen from 'boxen';

console.log(boxen('foo bar', {height: 5}));
// ┌───────┐
// │foo bar│
// │       │
// │       │
// └───────┘
fullscreen

Type: boolean | (width: number, height: number) => [width: number, height: number]

Whether or not to fit all available space within the terminal.

Pass a callback function to control box dimensions:

import boxen from 'boxen';

console.log(boxen('foo bar', {
	fullscreen: (width, height) => [width, height - 1],
}));
padding

Type: number | object
Default: 0

Space between the text and box border.

Accepts a number or an object with any of the top, right, bottom, left properties. When a number is specified, the left/right padding is 3 times the top/bottom to make it look nice.

margin

Type: number | object
Default: 0

Space around the box.

Accepts a number or an object with any of the top, right, bottom, left properties. When a number is specified, the left/right margin is 3 times the top/bottom to make it look nice.

float

Type: string
Default: 'left'
Values: 'right' 'center' 'left'

Float the box on the available terminal screen space.

backgroundColor

Type: string
Values: 'black' 'red' 'green' 'yellow' 'blue' 'magenta' 'cyan' 'white' 'gray' or a hex value like '#ff0000'

Color of the background.

textAlignment

Type: string
Default: 'left'
Values: 'left' 'center' 'right'

Align the text in the box based on the widest line.

Maintainer

Related

NPM DownloadsLast 30 Days