# styl3

> terminal styling

Latest version **3.2.0** (published 2025-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install styl3
pnpm add styl3
yarn add styl3
bun add styl3
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.2.0 |
| Published | 2025-09-02 |
| First published | 2021-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tal Hayut |
| Maintainers | tool3 |
| Keywords | colors, ansi, format, output, themes |

## Links

- npm: https://www.npmjs.com/package/styl3
- Repository: https://github.com/tool3/styl3
- Homepage: https://github.com/tool3/styl3#readme
- Issues: https://github.com/tool3/styl3/issues
- npm.io page: https://npm.io/package/styl3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.2.0 (latest) — 2025-09-02
- 3.1.3 — 2025-09-02
- 3.1.2 — 2025-09-02
- 3.1.1 — 2024-06-03
- 3.1.0 — 2024-06-03
- 3.0.0 — 2024-05-23
- 2.4.0 — 2024-05-23
- 2.3.0 — 2024-05-23
- 2.2.0 — 2024-05-23
- 2.1.0 — 2024-05-23
- 2.0.0 — 2024-05-23
- 1.4.0 — 2021-09-20
- 1.3.0 — 2021-09-17
- 1.2.4 — 2021-08-31
- 1.2.3 — 2021-08-29
- … 6 more at https://npm.io/package/styl3/versions

## README

# styl3 3.2.0

themeable cli coloring

# What's New

✅ 20 built-in [themes](#themes)!  
✅ Formatting [decorators](#decorators)!  
✅ Supports custom colors and custom themes!  
✅ Supports hex, rgb, or ansi color codes  
✅ Color conversion utils such as rgb/hex/ansi  
✅ Easy and flexible api
✅ New write and timestamp options!

## usage

`styl3` can provide color names as functions for coloring output and decorators for adding specific formatting for a given string.  
for example:

```typescript
import style from "styl3";

const styled = style();

const output = [
  "@*Never* gonna give you !up!@",
  "@Never gonna %let you down%@",
  "@$Never$ gonna run around and *desert* you@"
];
```

![](./shellfies/rick.png)

```javascript
const style = require("styl3");
const s = style();

console.log(s.red`this will be a default red`);
// access a theme specifically
console.log(s.pastel.green`this will be a pastel green`);

const ss = style({ theme: "pastel" });
// now `ss.green` points to the pastel green

console.log(ss.green`also a pastel green`);

// supports custom hex
console.log(ss.hex("#de5285")`this will be a slick pink`);
// and rgb
console.log(ss.rgb(15, 106, 251)`this will be a rich blue`);
```

![](./shellfies/themes.png)

# decorators

decorators are characters used to wrap a word and give it decorating features,
such as bold, italic, underline, strikeout, inverted and italic.

more than one decorator can be applied to a word

## map

```javascript
{
  bold: '*',
  underline: '!',
  dim: '~',
  hidden: '#',
  invert: '@',
  blink: '^',
  italic: '%',
  strikeout: '$'
}
```

## usage

```javascript
const style = require("styl3");
const s = style({ theme: "pastel" });

// use decorators for bold, underline etc...
console.log(s.red`lush red *BOLD* @INVERTED@`);
// double decoratros
console.log(s.cyan`this is !*bolderlined!*! get it? bold and underlined...😏`);
console.log(s.green`viva la %italic%`);
console.log(s.pink`address: ~you@somewhere.earth~`);
```

![](./shellfies/decorators.png)

you can also provide your own custom decorators map:

```javascript
const style = require("styl3");
const s = style({ theme: "pastel", decorators: { bold: "_" } });

// use custom decorators
console.log(s.red`this will now be _BOLD_`);
```

you can also provide your own color theme:

```typescript
import style from `styl3`;

const custom = style({
  theme: "custom",
  colors: {
    custom: {
      red: "#750404",
      green: "#1b7504",
      yellow: "#929605",
      blue: "#041382",
      purple: "#620182",
      cyan: "#027678",
      pink: "#a3039b",
      orange: "#b37202"
    }
  }
});

// use custom colors
console.log(s.green`this will be with #1b7504 color`);
```

# themes

15 unique built-in themes to get you started on easy cli styling  
[![](https://img.shields.io/static/v1?label=created%20with%20shellfie&message=📸&color=pink)](https://github.com/tool3/shellfie)

| Theme     | Screenshot                            |
| --------- | ------------------------------------- |
| autumn    | ![](./shellfies/themes/autumn.png)    |
| beach     | ![](./shellfies/themes/beach.png)     |
| champagne | ![](./shellfies/themes/champagne.png) |
| crayons   | ![](./shellfies/themes/crayons.png)   |
| lush      | ![](./shellfies/themes/lush.png)      |
| mint      | ![](./shellfies/themes/mint.png)      |
| nature    | ![](./shellfies/themes/nature.png)    |
| neon      | ![](./shellfies/themes/neon.png)      |
| pastel    | ![](./shellfies/themes/pastel.png)    |
| pinkish   | ![](./shellfies/themes/pinkish.png)   |
| pool      | ![](./shellfies/themes/pool.png)      |
| rainbow   | ![](./shellfies/themes/rainbow.png)   |
| rufus     | ![](./shellfies/themes/rufus.png)     |
| sport     | ![](./shellfies/themes/sport.png)     |
| spring    | ![](./shellfies/themes/spring.png)    |
| summer    | ![](./shellfies/themes/summer.png)    |
| sunset    | ![](./shellfies/themes/sunset.png)    |
| vintage   | ![](./shellfies/themes/vintage.png)   |
| standard  | ![](./shellfies/themes/standard.png)  |
| default   | ![](./shellfies/themes/default.png)   |

# options

`styl3` 3.2.0 introduces 2 new options for quality of life.

## `write`

using this option set to true - `styl3` will perform the console.log for you.

## `timestamp`

using this option `styl3` will add a timestamp to each print using the time it is printed.  
primarily aimed at logging use-cases.

### example

```typescript
import style from `styl3`

const styled = style({
  write: true,
  timestamp: {
    format: {  dateStyle: 'short', timeStyle: 'short' },
    color: 'blue'
  }
});

const a = styled.blue`this will be logged out - no need to wrap in console.log`
// a still has the string formatted just in case you need it :)

styled.red`log is red but timestamp is blue`
// [9/2/25, 4:49 PM] log is red but timestamp is blue

```

---
_Source: https://npm.io/package/styl3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._