Easily Add Typewriter Effects to Any Website
TypeIt is the most versatile JavaScript utility on the planet for creating dynamic, realistic typewriter text effects on the web. Include a single, dependency-free JavaScript file, and you're ready to go. Its straightforward API allows you to type single or multiple strings that break lines, delete & replace each other, and a whole lot more.
For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete control over speed changes, line breaks, deletions, and pauses.
Choose a License
To use TypeIt for a single or multiple commercial projects, purchase a license right here. You'll receive an email with all the information you need, and in just minutes, you'll be all set to start using it in your project. Using it for a personal or open source project is 100% free.
Commercial License
Use TypeIt for a single commercial project. Includes lifetime updates.
Buy a Limited LicenseUnlimited Commercial License
Use TypeIt for an unlimited number of commercial projects. Includes lifetime updates.
Buy an Unlimited LicenseEasy Installation Steps
Once you have a your license, you're ready to install TypeIt in your website or application!
Load TypeIt on Your Page
Available from Github, npm, or CDN (recommended).
<!-- Load the script on the page. -->
<script src="https://cdn.jsdelivr.net/npm/typeit@VERSION_NUMBER/dist/typeit.min.js" />
//-- Or, import as JS module after installing with npm or yarn.
import TypeIt from 'typeit';
Initialize TypeIt
Pass an element(s) and options into a new TypeIt instance.
var instance = new TypeIt('#element', {
strings: ['This is my string!'],
//-- Other options...
});
Simple Usage
Just pass an element(s) and options into a new TypeIt instance, and you're ready to create typewriter effects like this.
Type a simple, single string.
Rerun<p id="example1"></p>
new TypeIt('#example1', {<br>
strings: 'This is a simple string.',
speed: 50,
autoStart: false
});
Type multiple strings that replace each other.
Rerun<p id="example2"></p>
new TypeIt('#example2', {
strings: ["This is a great string.", "But here is a better one."],
speed: 50,
breakLines: false,
autoStart: false
});
Type multiple strings that break to new lines.
Rerun<p id="example3"></p>
new TypeIt('#example3', {
strings: ["This is a great string.", "And here we have another great string.."],
speed: 50,
autoStart: false
});
Advanced Usage
If you want to control every character of your strings, a series of companion functions are built right into TypeIt. You'll be able to do things like partially delete strings, change speed on the fly, break lines whenever you like, and more.
Don't just type a few strings. Create an entire, dynamic narrative.
Rerun<p id="example4"></p>
new TypeIt('#example4', {
speed: 50,
autoStart: false
})
.type('Wll')
.pause(500)
.delete(2)
.type('ell, ')
.pause(1000)
.type('I guess I\'m typing..')
.break()
.pause(750)
.type(' but I don\'t really know what to say')
.options({speed: 700})
.type('...')
.pause(750)
.options({speed: 50})
.delete()
.type('IS THAT SO <strong>WRONG??</strong>');
Pause and resume an instance after it's been created.
Rerun<p id="example5"></p>
var instance = new TypeIt('#example5', {
strings: ["After two seconds, this string will be paused for three seconds, and then resume."],
autoStart: false
});
setTimeout(() => {
instance.freeze();
setTimeout(() => {
instance.unfreeze();
}, 3000);
}, 2000);
Fire a callback function before/after each character, string, or after the entire instance completes.
Rerun<p id="example6"></p>
var element = document.getElementById('example6');
var instance = new TypeIt($element, {
strings: ["Look, it's rainbow text!"],
afterStep: function (step, queue, instance) {
element.style.color = getRandomColor();
}
});