Back to Projects
Library

Typewriter.js

Overview

Typewriter.js — Plug-and-Play Vanilla JavaScript Typewriter Engine

Typewriter.js is a plug-and-play typewriter animation library built in pure vanilla JavaScript, designed for effortless integration into any HTML page with zero dependencies and zero configuration overhead (embeddable directly via CDN at https://cdn.jsdelivr.net/gh/DJ-InfinityCoder/TypeWriter-Effect/TypeWriter.js). It features a fully declarative HTML attribute-driven API, asynchronous recursion-based timing, and runtime self-contained styling.

  • Script-Tag Driven API: Configure the entire typewriter engine directly via HTML attributes on the script tag itself (sentences, typingSpeed, eraseSpeed, etc.), eliminating the need for consumer-written JavaScript.
  • Encapsulated State Machine: Employs a factory-function closure pattern to encapsulate internal state, protecting the global namespace and preventing scope pollution.
  • Self-Contained Styling Engine: Dynamically injects an animated blinking cursor and @keyframes blink-animation CSS rules at runtime via raw DOM stylesheet insertions, keeping the library fully standalone.
  • Recursive Async Timing: Orchestrates looping sentence queues via recursive setTimeout chains rather than setInterval, preventing overlapping call frames and ensuring flawless render sequences.
  • Flexible DOM Targeting: Mounts dynamically to any target container element using user-specified query selectors (id, class) with a fallback default container.

Technologies

JavaScriptHTMLCSS
Source Code

Project Glimpse

Typewriter.js screenshot 1