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();

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

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

Unmatched Flexibility

Type a simple string.

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

Type multiple strings.

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

Type into form elements.

Target any input or textarea like any other element, and you're set.

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

Type dynamic, life-like effects.

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

Fire any arbitrary code whenever.

If the provided callback methods aren't enough, the included `.exec()` method allows you to fire code at any point during the animation, and is async-friendly.

Pause & resume on demand.

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

Build an 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 Setup & Installation

#1

Load on 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 & go.

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.

Learn More About License Options