explaingit

mattboldt/typed.js

16,275JavaScriptAudience · vibe coderComplexity · 1/5LicenseSetup · easy

TLDR

A lightweight JavaScript library that animates text on a webpage as if someone is typing and erasing it live, used for dynamic headlines, landing pages, and terminal-style demos.

Mindmap

mindmap
  root((repo))
    What it does
      Typing animation
      Erase and retype
      Blinking cursor
    Features
      Smart backspace
      Loop control
      Speed control
    Setup
      NPM install
      CDN script tag
      HTML element input
    Use cases
      Landing pages
      Portfolio sites
      Terminal interfaces
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a typing-animation headline to a startup landing page that cycles through your product value propositions.

USE CASE 2

Create a portfolio site that animates through your job titles or skills with a blinking cursor.

USE CASE 3

Build a terminal-style demo interface where commands appear to be typed live on screen.

Tech stack

JavaScriptNPMCDN

Getting it running

Difficulty · easy Time to first run · 5min
Free for personal and open-source projects, commercial use requires a paid license.

In plain English

Typed.js is a JavaScript library that creates animated typing effects on a webpage. You give it a list of text strings, and it displays them one character at a time, as if someone is typing them live, then erases and types the next one. This creates a dynamic, eye-catching effect often seen on landing pages. You control the speed of typing and erasing, how long to pause between strings, whether to loop the animation, and whether to show a blinking cursor. There's a "smart backspace" feature that only erases the part of a sentence that differs from the next one, so if you're cycling through phrases that share a common beginning, the shared words stay put. The library can read its text from an HTML element already on the page rather than from a JavaScript array, which is useful for search engine optimization (SEO), search engines can still see the text even when JavaScript is disabled. You'd use Typed.js when building a website that needs animated headline text, a startup landing page showing rotating value propositions, a portfolio site cycling through job titles, or a terminal-style demo interface. It works by being added to a page via a package manager like NPM or directly via a script tag from a CDN (content delivery network, meaning a hosted file you can link to). It's free for personal and open-source projects, with paid licenses available for commercial use. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Add Typed.js to my landing page so the headline cycles through three taglines with a typing animation and blinking cursor, show me the complete HTML and JS.
Prompt 2
How do I use Typed.js's smart backspace feature so words shared between phrases stay on screen while only the different part types and erases?
Prompt 3
Set up Typed.js to read its strings from an existing HTML element so search engines can still index the content when JS is disabled.
Prompt 4
Make a Typed.js animation that pauses for 2 seconds on each phrase, loops forever, and types at double the default speed.
Open on GitHub → Explain another repo

← mattboldt on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.