Inken NPM | npm.io

With inspiration from yoctocolors, this is similar module that provides terminal-like string styling functionality in the browser.
Checkout chalk-dom, similar but mature with a different API.

Features

Expressive API
Highly performant
Ability to nest styles
Clean and focused
Actively maintained

Install

$ npm install inken

Usage

HTML

<div id='console'></div>

JavaScript

import { blue } from 'inken';

const consoleBox = document.getElementById('console');

function log(...data) {
    consoleBox.innerHTML += `<div>${data.join(' ')}</div>`;
}

log(blue('Hello World!'));

Demo

To run the demo, clone this repo and simply open the index.html file in your browser.

Styles

Modifiers

bold - Make the text bold.
dim - Make the text have lower opacity (sets css opacity to 0.5).
italic - Make the text italic.
underline - Underline the text.
strikethrough - Put a horizontal line through the center of the text.

User defined

fg - Set a custom foreground color (text color)
bg - Set a custom background color

Colors

black
red
green
yellow
blue
magenta
cyan
white
gray

Background colors

bgBlack
bgRed
bgGreen
bgYellow
bgBlue
bgMagenta
bgCyan
bgWhite
bgGray

API

Multiple arguments, nesting and ES2015 template literals are supported by all styles.

In code samples below, '...' represents the implementation of the log function from the previous section (usage)

Multiple arguments

log(blue('Hello', 'World!', 'JS', 'is', 'cool'));

Nested styles

import { bgBlack, yellow } from 'inken';

...

log(bgBlack(yellow('Hello, World!')));

ES6 template literals

import { green } from 'inken';

...

const user = 'Guest';
log(`Hello ${green(user)}!`);

Example

All-in-one:

import { bold, cyan, green, italic, magenta } from 'inken';

...

log(
    bgBlack(magenta(
        'Hey, ' + italic(cyan('Pen'), `is ${bold(green('awesome!!'))}`)
    ))
);

Output:

npm.io