new TypeIt('#hero', {
  speed: 50,
  startDelay: 900
.type('The most versatile animated typing utility on the internte')
.options({speed: 100, deleteSpeed: 75})

"It is literally the easiest JS plugin I've ever used." - Brian

  • ~5kb gzipped
  • zero dependencies
  • highly-flexible API
  • SEO-friendly

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

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 License

Unlimited Commercial License

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

Buy an Unlimited License

Easy Installation Steps

Once you have a your license, you're ready to install TypeIt in your website or application!

#1 Load TypeIt on Your Page

Available from Github, npm, or CDN.

<!-- Load the script on the page. -->
<script src="" />
//-- Or, import as JS module.
import TypeIt from 'typeit';

#2 Initialize TypeIt

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

const 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.

<p id="simpleUsage"></p>
new TypeIt('#simpleUsage', {
  strings: 'This is a simple string.',
  speed: 50,
  waitUntilVisible: true

Type multiple strings that replace each other.

<p id="replaceStrings"></p>
new TypeIt('#replaceStrings', {
  strings: ["This is a great string.", "But here is a better one."],
  speed: 50,
  breakLines: false,
  waitUntilVisible: true

Type multiple strings that break to new lines.

<p id="breakLines"></p>
new TypeIt('#breakLines', {
  strings: ["This is a great string.", "And here we have another great string.."],
  speed: 50,
  waitUntilVisible: true

Type into form inputs and textareas.

  <label for="formElement">Full Name</label>
  <input type="text" id="formElement">
new TypeIt('#formElement', {
  strings: "Alex MacArthur",
  waitUntilVisible: true

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.

<p id="companionMethods"></p>
new TypeIt('#companionMethods', {
  speed: 50,
  waitUntilVisible: true
.type('ell, ')
.type('I guess I\'m typing..')
.type(' but I don\'t really know what to say')
.options({speed: 700})
.options({speed: 50})
.type('IS THAT SO <strong>WRONG??</strong>')

Pause and resume an instance after it's been created.

<p id="pauseResume"></p>
const instance = new TypeIt('#pauseResume', {
  strings: ["After two seconds, this string will be paused for three seconds, and then resume."],
  waitUntilVisible: true

setTimeout(() => {

  setTimeout(() => {
  }, 3000);
}, 2000);

Fire a callback function before/after each character, string, or after the entire instance completes.

<p id="callback"></p>
const element = document.getElementById('callback');

const instance = new TypeIt(element, {
  strings: ["Look, it's rainbow text!"],
  afterStep: function (step, queue, instance) { = getRandomColor();

Insert asyncronous code anywhere inside your queue.

<p id="asyncExec"></p>
new TypeIt('#asyncExec', {
  waitUntilVisible: true
.type('Hold up!')
.exec(async () => {

  //-- Return a promise that resolves after something happens.
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      return resolve();
    }, 2000)
.type(' OK, now go.')

Ready to learn more about TypeIt?

View the Docs

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