Chalk: An Unpackaged Review

Unpackaged Reviews
codeburst
Published in
5 min readJul 17, 2020

--

Overview

Want to make your console look groovy and colorful? In this article we are going to go through the npm package chalk which aids in styling your terminal in a very easy and quick way!

This package is solely built for the purpose of the console and how we can visualize whatever it logs. The package can be installed using the command npm install chalk. Let’s look at what this package offers.

Highlights

To start off with, let us look at how we can include this package in our code. Very simple to do so, just using the line:

/* babel or ES6 */
import chalk from 'chalk';
/* node or require js */
const chalk = require('chalk');

Coloring your words:

console.log(chalk.color_name(“Your text”));

Here, the color_name is the color you want to style your text. Colors which can be specified through keywords are:

black,red, green, yellow, blue, magenta, cyan, white, blackBright (alias: gray, grey), redBright, greenBright, yellowBright, blueBright, magentaBright, cyanBright, whiteBright.

Adding background colors:

console.log(chalk.bg<Color>(“Your text”));

The bgColor can be modified to have different background colors to your text. The various readymade background colors are:

bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bgBlackBright (alias: bgGray, bgGrey), bgRedBright, bgGreenBright, bgYellowBright, bgBlueBright, bgMagentaBright, bgCyanBright, bgWhiteBright.

Adding Modifiers:

console.log(chalk.<modifier>(“Your text”));

The modifiers are used to modify the text to the styles we specify. The supported modifiers are:

reset, bold, dim, italic, underline, inverse, hidden, strikethrough, visible.

Now that we have gone through the basic styling, let us look at the real power of using this module:

Chainable API:

Chalk allows us to chain multiple styles in the same statement, for example:

console.log(chalk.magenta.bgGreen.bold(“Styled text”));

console.log output

The above line would have magenta-colored text, with a green background and would be bold in nature. In the case of a conflict, the last specified style is used, that is, chalk.red.blue is effectively chalk.blue.

Chalk levels:

There are 4 levels of color support for chalk. The levels can be set using the ‘level’ property.

  • 0 - All colors disabled
  • 1 - Basic color support (16 colors)
  • 2 - 256 color support
  • 3 - Truecolor support (16 million colors)
const chalkLevelDef = new chalk.Instance({level: levelValue});

Chalk support for stderr:

For the stderr stream, there is a separate definition of chalk and is defined by chalk.stderr.

Defining our own themes:

We can define our own themes and use them across our code.

const myOwnTheme = chalk.italic.bgYellow.blue;
console.log(myOwnTheme(“This text is in italic, has a background of yellow and is blue in color!”));
console.log output

One good example to utilize the power of having custom themes can be demonstrated in the usage of log levels:

const errorTheme = chalk.red;
const warningTheme = chalk.hex('#FFFF00');
const infoTheme = chalk.white.bold;
const debugTheme = errorTheme.bold;
const traceTheme = debugTheme.underline.bgBlack;
console.error(errorTheme('ERROR: This text is from the error theme'));
console.warn(warningTheme('WARNING: This text is from the warning theme'));
console.info(infoTheme('INFO: This text is from the info theme'));
console.debug(debugTheme('DEBUG: This text is from the debug theme'));
console.trace(traceTheme('TRACE: This text is from the trace theme'));
console.log output

Each log level has been assigned a specific template. If you can see from the above code, it is possible to chain attributes to custom themes as well. That is, in:

const debugTheme = errorTheme.bold;
const traceTheme = debugTheme.underline.bgBlack;

debugTheme and traceTheme have been defined by chaining extra styles bold and underline.bgBlack respectively to the user-defined custom themes created errorTheme and debugTheme instead of rewriting the whole chain of styles. This surely reduces some redundancy.

Color support:

One of the most important features of chalk is the support of 256 and Truecolor color. On terminals which support 256 and Truecolor color, chalk can be used to define any possible color we want in the various models it supports:

rgb, hex, keyword, hsl, hsv, hwb, ansi, ansi256.

This means that we can define a string with a red color like:

chalk.red(“Text”);
chalk.rbg(255,0,0)(“Text”);
chalk.hex(‘#FF0000’)(“Text”);
console.log output

As you can see, all three texts are printed in red.

Template literals and tagged template literals:

We can define styles using template literals and chalk can be used as a tagged template literal.

tagged template literal - console.log(chalk`This text is {underline.hex('#FF5349') orangish! :P}`);template literal - console.log(`This text is ${chalk.blue("Blue!")}`);
console.log output

Other important features include the ability to have multiple arguments in the chalk function and to use the chalk function in string substitution.

Evaluation Metrics

Conclusion

This package really came to the fore when the shortfalls of colors.js were exposed. Chalk doesn’t extend the String.prototype which avoids causing a whole bunch of problems! To summarize, this is a very versatile and easy to use package to style your console. This package also gets close to 50M downloads per week! Well, rightly so. With the features described above, it’s difficult to not like and use this package! Hope you’ve received some good insight into the features of Chalk. Happy coding!

Check out the package and some reading materials

Video review of the package

Video review of the package with interesting use cases and in-depth exploration of the features is coming soon! For more related content, check out Unpackaged Reviews

Disclosures

The content and evaluation scores mentioned in this article/review is subjective and is the personal opinion of authors at Unpackaged Reviews based on everyday usage and research on popular developer forums. They do not represent any company’s views and are not impacted by any sponsorships/collaboration.

--

--

We’re a small team of devs reviewing code packages to help choose the one for your next project!