Typed.js — Animated Typing Effect for the Web

Introduction

Typed.js creates a realistic typewriter animation effect that types out text, pauses, deletes it, and cycles through an array of strings. It is widely used on marketing pages, portfolio sites, and developer landing pages to draw attention to key messages with engaging motion.

What Typed.js Does

• Types out strings character by character at a configurable speed
• Supports backspacing and cycling through multiple strings
• Allows HTML tags and inline styling within typed content
• Provides smart backspacing that only deletes differing suffixes
• Offers shuffle mode to randomize the string display order

Architecture Overview

Typed.js uses a recursive setTimeout loop to append one character at a time to the target element's innerHTML or textContent. It tracks the current string index, character position, and direction (typing vs. deleting). When HTML mode is enabled, the parser detects opening and closing tags and inserts them atomically rather than character by character, preserving valid markup throughout the animation cycle.

Self-Hosting & Configuration

• Install via npm, yarn, or include directly from a CDN
• Pass an options object with strings, typeSpeed, and backSpeed
• Use startDelay and backDelay to control pauses between cycles
• Set contentType: 'html' to allow rich formatting in typed strings
• Bind lifecycle callbacks like onComplete, preStringTyped, and onStringTyped

Key Features

• Zero dependencies with a small footprint under 5 KB gzipped
• Smart backspace that preserves common prefixes across strings
• CSS cursor styling with configurable blink speed
• Pause, resume, stop, and reset programmatic controls
• Framework adapters available for React and Vue

Comparison with Similar Tools

• Typewriter Effect (CSS-only) — pure CSS but limited to single strings; Typed.js cycles through multiple strings
• TypeIt — similar feature set with a commercial license; Typed.js is MIT-licensed
• Terminal-style CSS — static appearance only; Typed.js delivers real character-by-character animation
• GSAP TextPlugin — part of a larger library; Typed.js is focused and standalone

FAQ

Q: Can I use HTML inside the typed strings? A: Yes. Set contentType: 'html' and include tags like <strong> or <span> in your strings array.

Q: How do I stop the animation after one loop? A: Set loop: false (the default) and the animation stops after typing all strings once.

Q: Does Typed.js work with React? A: Yes. Use a ref to the target element and initialize Typed in a useEffect hook, returning the destroy function for cleanup.

Q: Can I control typing speed per character? A: Use the caret notation ^1000 inside a string to insert a millisecond pause at that position.

Sources

• https://github.com/mattboldt/typed.js
• https://mattboldt.github.io/typed.js/