typed.js

Typed.js is a dependency-free JavaScript library that produces typewriter-style text animations: it types out configurable strings character by character, optionally backspaces them, and cycles through a sequence, all driven by a single constructor call against a target DOM element. Since 2013 it has become one of the most widely used text-animation libraries in the JavaScript ecosystem, with over 16,000 GitHub stars and hundreds of thousands of weekly npm downloads, and ships prebuilt ESM, CommonJS, and UMD bundles alongside hand-authored TypeScript declaration files.

Beyond basic string cycling, it supports HTML-aware typing that skips cleanly over tags and entities, inline pause and instant-reveal escape sequences within strings, smart backspacing that only erases the divergent suffix between two strings, shuffled string order, CSS fade-out transitions instead of backspacing, and reading strings directly from a hidden DOM element for SEO- and no-JS-friendly markup. A full set of lifecycle callbacks (onBegin, onComplete, onStringTyped, onTypingPaused, onDestroy, and more) makes it straightforward to wire into React, Vue, or plain script-tag usage.

What You Get

• Prebuilt ESM, CommonJS, and UMD bundles plus TypeScript typings, ready to drop into React, Vue, or a plain <script> tag
• A single Typed class with typing, backspacing, looping, shuffling, and fade-out animation modes driven entirely by an options object
• HTML-aware typing that skips over tags and entities without breaking mid-character
• Inline string escape sequences for timed pauses (^1000) and instant-reveal (skipped) segments
• A full callback lifecycle (onBegin, onComplete, onStringTyped, onTypingPaused, onDestroy, etc.) for hooking animation state into app code
• Support for reading strings from a hidden DOM element instead of the options array, for SEO- and no-JS-friendly markup

Common Use Cases

• Animated hero-section taglines that cycle through several value propositions on a marketing site
• Terminal-style demo widgets that “type” a command and its output for documentation or landing pages
• Dynamic input placeholders that cycle through example queries or prompts
• React/Vue component wrappers that mount a Typed instance on a ref and destroy it on unmount

Under The Hood

Architecture The Typed constructor delegates setup to an Initializer (src/initializer.js) that merges a defaults object (src/defaults.js) into the passed-in options and assigns roughly thirty properties directly onto the instance, after which begin() (src/typed.js) drives a timeout-chained state machine cycling through typewrite() -> keepTyping()/doneTyping() -> backspace(), with a separate HTMLParser module (src/html-parser.js) providing pure functions to advance the string position past HTML tags and entities. It’s a small, flat structure — one class plus two focused helper modules, no build-time DI or layering — and because callback timing, smart-backspace comparison, and HTML-position math are all interleaved inside typewrite()/backspace() rather than separated into independent stages, swapping the core typing state machine would touch several methods at once.

Tech Stack The package has zero runtime dependencies; the only listed dependency is the devDependency microbundle, which compiles the ES-module source in src/ into CommonJS (dist/typed.cjs), ESM (dist/typed.module.js), and UMD (dist/typed.umd.js) bundles for require/import/CDN consumption respectively, alongside hand-maintained index.d.ts/typed.d.ts declaration files rather than a TypeScript build step. The source targets the DOM directly (querySelector, innerHTML, classList) with no framework binding — the React/Vue usage shown in the README is consumer-side ref wiring, not a first-party adapter package — and there is no active CI workflow, only a stale Travis config targeting Node 6.

Code Quality No test directory, test framework, or test script exists anywhere in the repository, and the Travis config only runs npm install and npm run build rather than any test command. Error handling is minimal and implicit, with no validation on malformed options, but naming is consistent and descriptive (typewrite, keepTyping, doneTyping, backspace) and nearly every method carries a JSDoc block with @param/@private/@public annotations. There’s no ESLint configuration (only a bare .prettierrc for formatting) and no TypeScript source, so the ambient .d.ts declarations must be kept in sync with the JS implementation by hand; the complete absence of automated tests is the dominant factor here.

API Design The public surface is intentionally tiny — a single constructor call (new Typed(elOrSelector, options)) plus start/stop/toggle/reset/destroy/append — backed by nearly thirty documented options covering speed, backspacing, looping, shuffling, fade-out, and a full callback lifecycle, so most usage needs no boilerplate beyond the constructor. Distinctive touches include inline per-string escape sequences for timed pauses and instant-reveal segments that let a caller script complex typing choreography without extra configuration, automatic smart backspacing that diffs against the next string, and a stringsElement mode that sources content from hidden DOM markup for SEO/no-JS parity — practical solutions to real typewriter-effect problems rather than generic configurability, even if none of it is architecturally novel.