Try it!

Tweak the settings, enter at least one string, and watch it go!
Wait, what do these settings actually do?
output box

Easy Installation Steps

1

Download the code from the Github page or from npm.

2

Include jQuery (v1.8.0+) and typeit.min.js on your page.


Three Ways to Get Started

pass in settings JSON

The easiest way to start it up, and the default. Pass in at least one string and other optional settings, and you're all set.

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

$('#example1').typeIt({
     strings: "You've just initialized this bad boy."
});

data-typeit-* attributes

Every TypeIt setting can be defined by data-typeit-* attributes, so you can keep the code of multiple instances easier to manage.

<p id="example2" data-typeit-strings="This was defined with a data-typeit-* attribute."></p>

$('#example2').typeIt();

directly in HTML element

You can define your string by dropping it directly in the HTML element. It serves as a fallback if the user doesn't have JavaScript enabled.

<p id="example3">
     This is the string that will be typed!
</p>

$('#example3').typeIt();

Type More Than Just Single Strings

Type multiple strings that stack on each other:

Input

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

$('#example4').typeIt({
     strings: ["This is a string!", "And here's another one."],
     speed: 50
});

Output


Or type multiple strings that delete & replace each other:

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

$('#example5').typeIt({
     strings: ["This is a great string.", "But here is a better one."],
     speed: 50,
     breakLines: false
});
Output


You can even type strings with HTML markup & entities.

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

$('#example6').typeIt({
     strings: ["Cards games are <span class='just-a-class'>great!</span> &spades; &hearts; &clubs; &diams;"],
     speed: 100 });
Output


Customize the Settings


Option Description Default
strings The string or strings you'd like to type. "Your default string."
speed The speed (milliseconds) at which you want to type. 100
lifeLike Choose whether the plugin types at a constant pace or irregular, life-like pace. true
cursor Choose whether you want the blinking cursor to appear when typing. true
cursorSpeed The blinking speed of the cursor. 1000
breakLines Choose whether you want multiple strings to be printed on top of each other (breakLines = true), or if you want each string to be deleted and replaced by the next one (breakLines = false). true
breakDelay The amount of time between typing multiple strings. 750
startDelay The amount of time before the plugin begins typing after initializing. 250
loop Have your string or strings continuously loop after completing. false
loopDelay The amount of time between looping over a string or set of strings again. 750

Back to Top