Top Related Projects
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:
-
Install the package:
npm install boxen
-
Import and use in your code:
import boxen from 'boxen'; console.log(boxen('Your text here', { padding: 1, borderStyle: 'round', borderColor: 'green' }));
-
Customize the options as needed. Refer to the documentation for all available options.
Competitor Comparisons
🖍 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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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
Top Related Projects
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot