logtint is a lightweight, isomorphic library that brings colors and style to your console.log
— use single API that works in both Node.js and the browser
Explore the API »
Report a bug
·
Request a feature
Tired of digging through walls of gray text? Logging doesn’t have to be a snoozefest.
Whether you're squashing bugs, keeping an eye on things, or just want your console to look a bit fancier,
logtint will help you highlight the important stuff — with style, consistency, and no fuss.
You know what's best of all?
It works seamlessly in Node.js and the browser.
| 🌐 Isomorphic | Use the same API in both Node.js and the browser |
| 🚀 Zero dependencies | Lightweight, fast, and easy to include in any project |
| 🌲 Tree-shakeable | Only things you use make it into your final bundle |
| 💙 TypeScript | Type definitions right out of the box |
logtint lets you add color and style to your logs with a single, easy-to-use API.
It works in both Node.js and the browser, handling the messy stuff behind the scenes — ANSI codes for terminals, CSS for
browsers.
You just write your log once, and it figures out the rest.
npm install logtintYou wrap the parts of the message with utilities like bold, cyan, or any other to apply styling.
Once you have your message ready, you need it to pass it through log function to make the styling work.
import log, { underline, bold } from "logtint"
log`By default, your messages are output through ${underline`console.log.`}.`
log(console.info)`But do you know you can output your messages through ${bold`any`} function?`
log(console.error)`You just need to pass a function that takes the message as its first argument!`Tip
Most logtint utilities can be used as both functions and template literals
Use the syntax that fits best for your use case — they’re interchangeable!
Want to turn a color into a background? Just wrap it with bg(...).
Need a brighter version of a color? Make it brighter with bright(...).
And yes — you can mix them!
import log, { bright, bg, yellow } from "logtint"
log(bg(yellow)`You can make any color a background color!`)
log(bright(yellow)`Or maybe you just need a brighter color?`)
log(bright(bg(yellow))(yellow`Yellow text on a bright yellow background? Just use both!`))Use tint whenever you must keep your tinted reusable bits for later!
import log, { tint, italic, bg, blue } from "logtint"
const message = tint`A ${italic`reusable`} message.`
const logger = (level, message) =>
tint`[${level}] ${message}`
const debug = bg(blue)`DEBUG`
// Hijack your console.log
console.log = (message) => {
log(console.log)`${logger(debug, message)}`
}
console.log(message)A lot of crayons to choose from!
All tree-shakeable to keep your bundles lean and mean.
import {
// Crayons for text formatting
bold, italic, underline, strikethrough, dim, inverse, hidden,
// Crayons for coloring
black, white, red, green, blue, yellow, magenta, cyan,
// Crayon modifiers
bg, bright
} from "logtint"Compose and reuse!
import log, { bright, magenta, bold, italic, underline } from "logtint"
const highlight = bright(magenta)
const format = (text) => highlight(bold(italic(underline(text))))
log`You can compose them and combine them into a ${format("single crayon combo")}.`Or make your own!
import log, { crayon, TextStyle } from "logtint"
const overline = crayon(TintStyle.from("text-decoration: overline;", 9 /* underline */))
log`You need your own? ${overline("We've got you covered!")}`