TypingEffect

The TypingEffect module adds a realistic typing effect to text strings in the console. It simulates a user typing by printing each character one by one with customizable delays and extensive color/styling options. Perfect for CLI tools, interactive interfaces, and adding dynamic visual effects to console output.

Features

• Text Styles: bold, italic, underline, strikethrough, dim, inverse, hidden
• Truecolor Output: Use any CSS color name, hex (#rgb, #rrggbb), or RGB (rgb(… ) / [r,g,b]) for foreground and background
• Flexible Styling Syntax: Combine styles with + or pass structured objects
• Dual Module Support: Works with both CommonJS (require) and ESM (import)
• Customizable Speed: Adjustable typing delay per character

Installation

npm install @perpetuate97/type-writer-js

CommonJS

const typingEffect = require('@perpetuate97/type-writer-js');

typingEffect({
  text: "Hello, World!",
  delay: 100,
  color: "lime"
});

Color & Style Syntax

• Strings: Combine items with +. Examples: "dodgerblue", "bold+#ff4500", "italic+bg:navy", "bold+underline+rgb(255,215,0)".

• Objects: Provide explicit foreground/background/styles.

  color: {
    fg: '#ff8800',        // hex, name, rgb string, or [r,g,b]
    bg: 'rgb(20,20,20)',  // optional background
    styles: ['bold', 'underline']
  }

• Arrays: Use for style lists only when it improves readability, e.g. { styles: ['italic', 'dim'] } or legacy ['bold', 'red'].

Supported Color Names

Every CSS color keyword is available (aliceblue, coral, dodgerblue, forestgreen, hotpink, rebeccapurple, …). Refer to MDN CSS color keywords for the full list.

Examples

Basic Usage

typingEffect({
  text: "Simple red text",
  delay: 80,
  color: "red"
});

Combined Styles (String)

typingEffect({
  text: "Bold gold text on navy background",
  delay: 70,
  color: "bold+yellow+bg:navy"
});

Hex & Background

typingEffect({
  text: "Underlined cyan text",
  delay: 90,
  color: "underline+#00ffff"
});

Complex Styling

typingEffect({
  text: " Fancy styled text! ",
  delay: 60,
  color: {
    fg: [255, 105, 180],
    bg: '#1a1a1a',
    styles: ['bold', 'italic']
  }
});

Parameters

| Name | Type | Required | Description | | --- | --- | --- | --- | | text | string | ✅ | Text to display with the typing effect | | delay | number | ✅ | Milliseconds between each character | | color | string | object | array | ❌ | Styling to apply (CSS names, hex, rgb, background via bg: or object form) | | wait | number | ❌ | Milliseconds to wait after typing completes before processing the next item in queue | | callback (CJS only) | function | ❌ | Invoked after the full message prints |

🎯 Run Examples

Try the included example files:

# ESM example (default)
node example.js

# CommonJS example
node example.cjs