Typed.js
~7kbAdd a typewriter effect to your site — type, delete, and loop through text automatically.
See It in Action
Multiple strings, smart backspace, and HTML typing — beyond what CSS can do.
Cycles through multiple strings with a typewriter effect — CSS cannot handle variable-width fonts or multiple strings.
What is Typed.js?
Typed.js adds a typewriter effect to any website. Give it a list of strings and it types them out one by one, deletes them, and starts over — perfect for hero sections that cycle through taglines or roles.
You can control typing speed, backspace speed, and pauses between strings. It also supports typing out HTML like bold or colored text, and a smart backspace mode that only deletes the characters that differ between strings.
Typed.js is MIT licensed and free for any project, including commercial ones.
When to Use Typed.js
How Typed.js Compares
TypeIt has more advanced features like companion methods and cursor control, but requires a paid license for commercial use (GPL-3.0 otherwise). Typed.js is simpler, smaller, and MIT licensed — free for everything including commercial projects.
CSS can create a basic typewriter effect for a single fixed-width string, but it falls apart with variable-width fonts or multiple strings. Typed.js handles both effortlessly.
Get Started with Typed.js
npm install typed.jsyarn add typed.js<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typed.umd.js"></script>import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['First sentence.', 'Second sentence.'],
typeSpeed: 50,
backSpeed: 30,
loop: true
});