5 min read
Bjørn Wikkeling
Share:

Introducing barva: A Modern Approach to Terminal colours

Introducing barva, a modern TypeScript library for adding colors to terminal output, with a simple and intuitive API.

In the world of terminal applications, colour and styling are essential for creating user-friendly interfaces, highlighting important information, and improving readability. Today, I’m excited to introduce barva , a new terminal colour library that brings a fresh approach to styling your command-line applications.

Barva is the Czech word for colour

A Fresh Perspective on Terminal Styling

There are several excellent terminal colour libraries available, so why create another one? barva was born from a desire to create a more intuitive API that leverages modern JavaScript features while maintaining high performance.

The key differentiator is barva’s use of template literals:

1import { red, bold, green } from 'barva';
2
3// Using template literals for a more natural syntax
4console.log(red`This text is red`);
5console.log(bold.green`This is bold and green`);
6console.log(red`Error: ${green`But this part is green`}`);

This approach creates a more readable, intuitive API that feels like a natural extension of JavaScript.

Key Features

🎨 Intuitive Template Literal API

Unlike traditional libraries that use function calls like red("text"), barva uses JavaScript’s template literals to create a more natural syntax:

1// Traditional approach
2console.log(chalk.red('Error occurred'));
3
4// barva approach
5console.log(red`Error occurred`);

This small syntactic difference makes your code more readable, especially when working with variables:

1const name = 'John';
2const score = 95;
3
4console.log(blue`Player: ${bold`${name}`} scored ${green`${score}`} points`);

🌲 Tree-Shakable for Smaller Bundles

barva is fully tree-shakable, which means your bundler can eliminate unused code. If you only import the styles you need, your final bundle will be much smaller:

1// Only red and bold will be included in your bundle
2import { red, bold } from 'barva';

This is particularly important for modern web applications or Node.js tools where bundle size matters.

🔗 Intuitive Style Chaining

Combining styles is seamless and intuitive:

1console.log(red.bold`Important warning`);
2console.log(blue.underline.bgWhite`Highlighted information`);

The API reads naturally from left to right, making it clear what styles are being applied.

🪆 Nested Styling Done Right

barva handles nested styles elegantly:

1console.log(red`Error: ${blue.bold`Important details`} need attention`);

The text “Error:” and “need attention” will be red, while “Important details” will be blue and bold. This nesting works to any depth and with any combination of styles.

📦 Tiny Size, No Dependencies

barva is extremely lightweight:

  • Zero dependencies
  • Only 3.9KB minified
  • 1.8KB gzipped
  • Even smaller with tree-shaking

🛡️ TypeScript Ready

barva comes with complete TypeScript definitions, providing excellent IDE support and type safety:

1import { red, blue, colourFunction } from 'barva';
2
3// TypeScript knows this is a string
4const errorMessage: string = red`Error occurred`;
5
6// You can also type the colour functions
7const createWarning = (message: string, colourizer: colourFunction) => {
8  return colourizer`Warning: ${message}`;
9};

👌 Environment Aware

barva is smart about when to apply colours:

  • Automatically detects TTY support
  • Respects the NO_colour standard
  • Provides manual control with setEnabled()
1import { setEnabled, red } from 'barva';
2
3// Manually control colour output
4setEnabled(false);
5console.log(red`This will not be coloured`);
6
7setEnabled(true);
8console.log(red`This will be coloured`);

Complete Style Support

barva supports the full range of terminal styles:

Text colours: black, red, green, yellow, blue, magenta, cyan, white, grey/gray
Background colours: bgBlack, bgRed, bgGreen, etc.
Bright Variants: redBright, greenBright, bgBlueBright, etc.
Modifiers: bold, dim, italic, underline, inverse, hidden, strikethrough

Performance: Speed Matters

Performance was a key consideration in barva’s design. The library uses several optimizations:

  • Cached colourizer functions
  • Pre-allocated arrays for string assembly
  • Fast path for disabled colours
  • Efficient handling of nested styles

These optimizations ensure that barva remains fast even with complex styling.

Getting Started

Installing barva is simple with your preferred package manager:

 1# npm
 2npm install barva
 3
 4# yarn
 5yarn add barva
 6
 7# pnpm
 8pnpm add barva
 9
10# bun
11bun add barva

Then import just what you need:

1// Import individual styles (best for tree-shaking)
2import { red, green, bold } from 'barva';
3
4// Or import everything
5import barva from 'barva';

Real-World Example

Here’s a more complex example showing how barva can be used to create an informative CLI output:

 1import { red, green, yellow, blue, bold, dim, grey } from 'barva';
 2
 3// Function to format a log message
 4function formatLog(level, message, details = null) {
 5  const timestamp = new Date().toISOString();
 6  
 7  let levelIndicator;
 8  switch (level.toLowerCase()) {
 9    case 'error':
10      levelIndicator = red.bold`[ERROR]`;
11      break;
12    case 'warning':
13      levelIndicator = yellow.bold`[WARNING]`;
14      break;
15    case 'info':
16      levelIndicator = blue.bold`[INFO]`;
17      break;
18    case 'success':
19      levelIndicator = green.bold`[SUCCESS]`;
20      break;
21    default:
22      levelIndicator = dim`[LOG]`;
23  }
24  
25  let output = `${dim`${timestamp}`} ${levelIndicator} ${message}`;
26  
27  if (details) {
28    output += `\n  ${dim.grey`→ ${details}`}`;
29  }
30  
31  return output;
32}
33
34// Usage
35console.log(formatLog('error', 'Failed to connect to database', 'Connection timed out after 30s'));
36console.log(formatLog('success', 'User profile updated'));
37console.log(formatLog('warning', 'File locked', 'locked files can not be deleted'));
38console.log(formatLog('info', `Processing ${bold`23`} pending transactions`));

This creates beautiful, informative logs with clear visual hierarchy.

Why Choose barva?

With several colour libraries available, why consider barva?

  1. Modern API: The template literal approach is more intuitive and readable.

  2. Bundle Efficiency: Tree-shaking support means you only pay for what you use.

  3. Performance: Careful optimizations ensure excellent performance.

  4. TypeScript First: Built with TypeScript for excellent IDE integration.

  5. Simplicity: Focused solely on terminal colours with zero dependencies.

Conclusion

barva represents a modern approach to terminal styling that prioritizes developer experience without sacrificing performance. By leveraging JavaScript’s template literals, it provides an API that feels natural and intuitive.

Whether you’re building a CLI tool, a server application with informative logs, or just want to add some colour to your terminal output, barva offers a fresh perspective on terminal styling.

Try it today and let me know what you think!

1npm install barva
2
3// or use yarn
4yarn add barva

Visit the GitHub repository or the npm package page for more examples, documentation, or to report issues. Contributions are of course always appreciated.