Typewriter Effects Made Easy

TypeIt is the most versatile jQuery typewriter effect plugin on the planet. In its simplest use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.

For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to tweak your typing down to the smallest character, enabling you to type not just a few strings of text, but an entire narrative, with complete control over speed, characters, line breaks, deletions, pauses, everything.

Try It!

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

output box

License Options

The code is out there to check out and use for any personal project, 100% free. But if you're thinking about using TypeIt commercially, check out the license options below that'll get you full support if it's ever needed.


Use TypeIt all you want for any of your personal, non-commercial projects.

Get It

Single Commercial

Use TypeIt for a single commercial project. Includes lifetime support.

Get It

Extended Commercial

Use TypeIt for an unlimited number of commercial projects. Includes lifetime support.

Get It

Easy Installation Steps


Load jQuery & TypeIt on Your Page

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

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>

Call TypeIt

Select an element, call typeIt(), and define your options.

     // options

Simple Usage

Just select an empty HTML element, pass in your options, and you're ready for typing effects like this.

Type a simple, single string.

Input <p id="example1"></p>

     strings: 'This is a simple string.',
     speed: 50,
     autoStart: false

Type multiple strings that replace each other.

Input <p id="example2"></p>

     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.

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

     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.

Input <p id="example4"></p>

     speed: 50,
     autoStart: false
.tiType('ell, ')
.tiType('I guess I\'m typing..')
.tiBreak() .tiPause(750)
.tiType(' but I don\'t really know what to say')
.tiSettings({speed: 700})
.tiSettings({speed: 50})
.tiType('IS THAT SO <strong>WRONG??</strong>');

Ready to learn more about TypeIt?

View the Docs
Back to Top

Like it? Hate it with a burning, insatiable passion? Let me know!