ChalkJS - Are Beautiful Logs Real?

Do your cosole.log()'s lack pizazz? Would you like to spruce them up and make them easier to read/debug? Then Chalk is for you, whether you are building a NodeJS application or the next big npm package.

Chalk claims to be a clean, and focused alternative compared to other terminal string styling libraries such as colors.js, "Although there are other packages, they either do too much or not enough. Chalk is a clean and focused alternative" - ChalkJS. Well, let's take a look at Chalk and see if beautiful logging is real?

So today I would like to go over ChalkJS and highlight some of its features, and why you might want to use it in your next project.

Let's first look at a simple example of chalk.

const chalk = require('chalk')

// Simple Example
console.log(chalk.bgGreen.white('Green BG/White Text'))

As you can see in the code snippet above we console log a string with a green background and white text. The nice thing about Chalk is its chainable API. We can call Chalk and then chain multiple methods together and call our final method with the string we want to log. Super Cool. 😎

Template Literals

Chalk also supports template literals which is awesome and allows us to do a lot more with our logs and even add dynamic data.

const lowMemoryUsage = "20%";
const normalMemoryUsage = "40%";
const highMemoryUsage = "40%";

console.log(`
Memory Usage: ${chalk.green(`${lowMemoryUsage} - Low`)}
Memory Usage: ${chalk.yellow(`${normalMemoryUsage} - Normal`)}
Memory Usage: ${chalk.red(`${highMemoryUsage} - High`)}
`);

Ok, now that could be useful. we can use template literals and Chalk to create beautiful logs with dynamic data think of all the possibilities. 🤤

Tagged Template Literals

Chalk supports something called tagged template literals, where you specify your template with a set of curly brackets {}, then the first word in the template is the styling we would like to apply. {bold} The remaining string in the template will be the string the has that styling applied to it. {bold I'm bold.} We can also nest templates to chain styles together. {bold {yellow I'm bold and yellow}} Let's take a peek at a better example of this.

const lowMemoryUsage = "20%";
const normalMemoryUsage = "40%";
const highMemoryUsage = "40%";

console.log(chalk`
Memory Usage: {green ${lowMemoryUsage} - Low}
Memory Usage: {yellow ${normalMemoryUsage} - Normal}
Memory Usage: {red ${highMemoryUsage} - High}
`);

So there are a few things to note here. The first thing is that we pass a template literal directly to the Chalk method, you may have seen this if you have ever worked with styled components. The next thing to note is that we can still use dynamic data since we pass Chalk a template literal.

String Substitutions

The last way we can use dynamic data in chalk is with string substitutions. String substitution is baked into the console.log() API. I'm not going to go too in-depth because it's fairly simple but if you would like to read more about string substitution you can do so here. For now, let's just look at a quick example.

const str = "part?";
console.log(chalk.bold.red("Where is the other %s"), str);

See very straightforward.

True Color Support

Ok, so we all can see that Chalk is pretty awesome and has a bunch of cool features the make our console logs better. Now, what if I told you it has true color support, yep access to over 16 Million colors it supports HEX, RGB, and CSS color keywords. 🤯

console.log(`I am ${chalk.hex("#FFA500")("Orange")}`);
console.log(`I am ${chalk.rgb(255, 0, 255)("magenta")}`);
console.log(`I am ${chalk.keyword("pink")("pink")}`);

Theming

The last thing I would like to touch on is theming. Yep, you can create reusable methods and just call them in your logs.

const error = chalk.bold.red;
const warning = chalk.keyword("orange").bold;
const success = chalk.bold.green;

console.log(error("This is an error"));
console.log(warning("This is a warning"));
console.log(success("I am success!!! 🚀"));

Conclusion

Chalk is pretty amazing it allows you to style terminal strings with ease and is used in some big packages such as eslint, node-sass, jest, react-dev-utils, tslint, and even npm. I have included links to Chalk's GitHub page as well as their npm page. Also, let me know if you have ever used Chalk and what your experience has been with it.

Resources

Chalk's GitHub Page
Chalk's NPM Page
Console Log API - String Substitutions
Packages Reliant on Chalk
CSS Color Keywords