Replacements for chalk

styleText (native)

Since Node 20.x, you can use the styleText function from the node:util module to style text in the terminal.

Example:

import { styleText } from 'node:util'
import chalk from 'chalk'

console.log(`Hello ${chalk.blue('blue')} world!`) 
console.log(`Hello ${styleText('blue', 'blue')} world!`) 

When using multiple styles, you can pass an array to styleText:

console.log(`I am ${chalk.blue.bgRed('blue on red')}!`) 
console.log(`I am ${styleText(['blue', 'bgRed'], 'blue on red')}!`) 

NOTE

styleText does not support RGB and hex colors (e.g. #EFEFEF or 255, 239, 235). You can view the available styles in the Node documentation.

picocolors

picocolors follows a similar API but without chaining:

import chalk from 'chalk'
import picocolors from 'picocolors'

console.log(`Hello ${chalk.blue('blue')} world!`) 
console.log(`Hello ${picocolors.blue('blue')} world!`) 

// A chained example
console.log(chalk.blue.bgRed('blue on red')) 
console.log(picocolors.blue(picocolors.bgRed('blue on red'))) 

NOTE

picocolors currently does not support RGB and hex colors (e.g. #EFEFEF or 255, 239, 235).

ansis

ansis supports a chaining syntax similar to chalk and supports both RGB, and hex colors.

Example:

import ansis from 'ansis'
import chalk from 'chalk'

console.log(`Hello ${chalk.blue('blue')} world!`) 
console.log(`Hello ${ansis.blue('blue')} world!`) 

When using multiple styles, you can chain them just like in chalk:

console.log(chalk.blue.bgRed('blue on red')) 
console.log(ansis.blue.bgRed('blue on red')) 

Similarly, you can use RGB and hex colors:

console.log(chalk.rgb(239, 239, 239)('Hello world!')) 
console.log(ansis.rgb(239, 239, 239)('Hello world!')) 

Browser support

While these libraries are primarily designed for terminal output, some projects may need colored output in browser environments.

Following MDN documentation, the native approach is %c directive in console.log:

console.log(
  'Hello %ce%c1%c8%ce',
  'color: #ec8f5e;',
  'color: #f2ca60;',
  'color: #bece57;',
  'color: #7bb560;',
  'Ecosystem Performance'
)

Library support:

• ansis - colors are supported in Chromium browsers
• picocolors - strips colors in browser environments
• node:util - is not available in browsers