Typewriter Effects Made Easy

TypeIt is the most versatile JavaScript utility on the planet for creating dynamic, realistic typewriter text effects. With simple, straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.

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.

Try It!

To give you a very small taste of what TypeIt can do, use the playground here. For more information on how each setting works, go to the docs.

output box

Start Using TypeIt!

Using TypeIt for an open source or personal project is completely free. To use it commercially, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it.

Free for Personal/Open Source

Use TypeIt all you want for any open source or personal project.

Start Using TypeIt!

Commercial License

Use TypeIt for a commercial project. Includes lifetime support & updates.

Buy a License

Easy Installation Steps

1

Load TypeIt on Your Page

Available from Github, npm, UpLabs, or CDN (recommended).

<-- Load the script on the page. -- >

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/{VERSION}/typeit.min.js"></script>


//-- Or, import as JS module after installing with npm or yarn.

import TypeIt from 'typeit';
2

Initialize TypeIt

Pass an element(s) and options into a new TypeIt instance.

new TypeIt('#element', {
     // 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
Input <p id="example1"></p>

new TypeIt('#example1', {
     strings: 'This is a simple string.',
     speed: 50,
     autoStart: false
});
Output

Type multiple strings that replace each other.

Rerun
Input <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
});
Output

Type multiple strings that break to new lines.

Rerun
Input <p id="example3"></p>

new TypeIt('#example3', {
     strings: ["This is a great string.", "And here we have another great string.."],
     speed: 50,
     autoStart: false
});
Output

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
Input <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>');
Output

Ready to learn more about TypeIt?

View the Docs
Back to Top

Like it? Star the project on Github! Hate it with a burning, insatiable passion? Let me know!