About TypeIt

TypeIt is the most versatile, user-friendly jQuery animated typing plugin on the planet. In simple 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.

Personal

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

1

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.3.0/typeit.min.js"></script>
2

Call TypeIt

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

$('#element').typeIt({
     // 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.

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

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

Type multiple strings that replace each other.

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

$('#example2').typeIt({
     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>

$('#example3').typeIt({
     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>

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

Ready to learn more about TypeIt?

View the Docs
Back to Top

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