TypeIt | The most versatile JavaScript typewriter effect library on the planet.

new TypeIt("#hero", {
  speed: 50,
  startDelay: 900,
})
  .type("the mot versti", { delay: 100 })
  .move(-8, { delay: 100 })
  .type("s", { delay: 400 })
  .move(null, { to: "START", instant: true, delay: 300 })
  .move(1, { delay: 200 })
  .delete(1)
  .type("T", { delay: 225 })
  .pause(200)
  .move(2, { instant: true })
  .pause(200)
  .move(5, { instant: true })
  .move(5, { delay: 200 })
  .type("a", { delay: 350 })
  .move(null, { to: "END" })
  .type("le typing utlity")
  .move(-4, { delay: 150 })
  .type("i")
  .move(null, { to: "END" })
  .type(' on the <span class="place">internet</span>', { delay: 400 })
  .delete(".place", { delay: 800, instant: true })
  .type('<em><strong class="font-semibold">planet.</strong></em>', {
    speed: 100,
  })
  .go();

TypeIt is a JavaScript library that makes it easy to create flexible, dynamic typewriter effects for the web.

~4kb gzipped
no dependencies
super flexible API
SEO-friendly

Type a simple string.

At it's most basic level, just target an element, define a string, and voilà.

<p id="simpleUsage"></p>

new TypeIt("#simpleUsage", {
    strings: "This is a simple string.",
    speed: 50,
    waitUntilVisible: true,
}).go();

Type multiple strings.

To type multiple strings that stack on top of each other, pass an array of them.

<p id="multipleStrings"></p>

new TypeIt("#multipleStrings", {
  strings: ["This is a great string.", "But here is a better one."],
  speed: 50,
  waitUntilVisible: true,
}).go();

Type into form elements.

Create a typewriter effect on input or textarea elements.

Full Name

<fieldset>
  <label for="formElement">Full Name</label>
  <input type="text" id="formElement" />
</fieldset>

new TypeIt("#formElement", {
  strings: "Alex MacArthur",
  waitUntilVisible: true,
}).go();

Execute code at key points of any animation.

Callback methods are available for before and after each string or character is typed, as well as after the entire instance is finished.

<p id="callback"></p>

new TypeIt("#callback", {
  strings: ["Look, it's rainbow text!"],
  afterStep: function (instance) {
    instance.getElement().style.color = getRandomColor();
  },
}).go();

Type fine-grained, life-like effects.

Use the included instance methods to control the smallest details, including speed, deletions, pausing, and even cursor movement.

<p id="companionMethods"></p>

new TypeIt("#companionMethods", {
  speed: 50,
  waitUntilVisible: true,
})
  .type("Nvver", { delay: 300 })
  .move(-3)
  .delete(1)
  .type("e")
  .move(null, { to: "END" })
  .type(" let yees")
  .pause(300)
  .delete(2)
  .type("sterday use up to muc")
  .move(-4)
  .type("o")
  .move(null, { to: "END" })
  .type("h of today.")
  .pause(500)
  .break({ delay: 500 })
  .break({ delay: 500 })
  .type("<em>- Will Rogers</em>")
  .go();

Async-ready.

The included `.exec()` method allows you to asynchronously fire code at any point during the animation.

<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<void>((resolve) => {
      setTimeout(() => {
        return resolve();
      }, 2000);
    });
  })
  .type(" OK, now go.")
  .go();

Pause & resume animations on demand.

Included `freeze()` and `unfreeze()` methods make it easy.

<p id="pauseResume"></p>

const instance = new TypeIt("#pauseResume", {
  strings:
    "Click the 'freeze' button to freeze and unfreeze this instance as much as you want.",
  waitUntilVisible: true,
}).go();

document.querySelector("#freezeButton").addEventListener("click", function (e) {
  if (instance.is("frozen")) {
    instance.unfreeze();
    return;
  }

  instance.freeze();
});