TypeIt
~12kb min / ~4kb gzippedThe most versatile typing animation — cursor movement, input typing, and fluent chaining.
See It in Action
TypeIt's signature fluent API — type text, pause, delete, and retype with a blinking cursor.
What is TypeIt?
TypeIt is the most versatile JavaScript typewriter effect library. Beyond basic typing, it supports cursor movement (go back and edit text), form input typing, fluent chaining, and HTML rendering — making it the go-to for polished typing animations.
Created by Alex MacArthur, TypeIt uses a fluent API where you chain commands like .type("Hello").pause(500).delete(5).type("World"). Its standout feature is the companion input mode, which types into actual form fields — useful for onboarding demos. Note: TypeIt requires a commercial license ($19 one-time) for paid projects; it's free for open-source and personal use.
When to Use TypeIt
How TypeIt Compares
TypeIt has a richer API (cursor movement, input typing, fluent chaining). Typed.js is free and simpler. Choose TypeIt for advanced effects, Typed.js for basic typewriters.
Different tools. TypeIt simulates typing character-by-character. GSAP SplitText splits existing text for animation effects (fade, slide, stagger).
CSS can create a basic typewriter with steps() and ch units, but it's fragile and limited to fixed-width fonts. TypeIt handles all fonts and complex sequences.
Get Started with TypeIt
npm install typeityarn add typeit<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>import TypeIt from "typeit";
// Basic typing
new TypeIt("#element", {
speed: 75,
waitUntilVisible: true
})
.type("Hello, I'm TypeIt!")
.pause(800)
.delete(7)
.type("a typing library.")
.pause(500)
.type(" ✨")
.go();
// Typing into a form input
new TypeIt("#search-input", {
speed: 50
})
.type("How to use TypeIt...")
.go();