inken

terminal-like string styling for the browser

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.

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

$ npm install inken

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

import { blue } from 'inken';

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

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

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

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

• 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.

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

• black
• red
• green
• yellow
• blue
• magenta
• cyan
• white
• gray

• bgBlack
• bgRed
• bgGreen
• bgYellow
• bgBlue
• bgMagenta
• bgCyan
• bgWhite
• bgGray

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)}!`);

All-in-one:

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

...

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

Output:

• chalk-dom - Chalk for the browser
• xterminal - build web-based cli interfaces

Released under the MIT License