Chalk-dom

chalk for the browser

Just like chalk but right in your browser. It uses HTML elements (b,s,i,span) and a little inline-css.

Features

• Expressive API
• Highly performant
• Ability to nest styles
• Customizable
• Doesn't extend String.prototype
• Clean and focused
• Maintained

Install

$ npm install chalk-dom

Usage

HTML

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

JavaScript

import chalk from 'chalk-dom';

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

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

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

Demo

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

API

The one difference with inken is styles can be chained with chalk-dom.

import chalk from 'chalk-dom';

...

log(chalk.bgBlack.yellow.italic('Hello, World!'));

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.
• inverse - Invert the background and foreground colors.

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

Related

• Inken - terminal-like string styling for the browser
• xterminal - build web-based cli interfaces

LICENSE

Released under the MIT License