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.

<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((resolve, reject) => {
      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();
});

Build a Typewriter Animation Now

Record an animation and tweak it to your liking. (Be gracious -- this playground is a work-in-progress!)

Record Your Animation

Watch Your Animation

...

Tweak Your Animation

Easy to Set Up and Integrate

  • 1.

    Load the script on the page.

    Load the script with a script tag (a CDN link is available).

    <script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>

    Or, run 'npm install typeit' and import the module.

    import TypeIt from "typeit";
  • 2.

    Configure your animation.

    Choose an element to target, define what to type, pick your other options, and kick it off.

    new TypeIt("#element", {
  strings: "This is my string!",
  speed: 75,
  loop: true,
}).go();

Available in Multiple Flavors

For easy usage in a wide variety of projects, TypeIt's ready to go in multiple different packages. Purchase a license, and you get to choose which implementation is best for your needs.

Pricing

It's free for use in any personal or open source project (check out the code on GitHub!). For a less restrictive commercial license, choose one of the following:

  • Limited Commercial License

    $9

    Use TypeIt on a single commercial project. Includes lifetime updates.

  • Unlimited Commercial License

    $29

    Unlimited use on any commercial project. Includes lifetime updates.