An Intuitive JavaScript Typing Animation Library

The problem

There are typing animation libraries available out there but most are really difficult to use. This can be frustrating when you want to get an animation up really quickly.

This solution

Typeinit is a javascript typing animation library which is easy and intuitive to use. It is a plug and play library which produces really smooth animations without headaches.


  • Offers a chainable API for ease of use.
  • Choose to delay the animation until the target element becomes visible on the screen.
  • Define strings to type programmatically or in the HTML (a useful fallback in case the user doesn't have JavaScript enabled, as well as for SEO).
  • Style the color of the caret with any CSS color syntax (gradients work too 😋).
  • Responsive: the caret shrinks or grows in relation to the font size specified.
  • Fire callback functions when a character is typed, deleted, or when repeating.


via NPM

npm install typeinit

via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>


javascript (ES6+)

After NPM installation

import Typeinit from "typeinit";

new Typeinit(".element").type("Hello world!").play();

javascript (ES5+)

With CDN

<!DOCTYPE html>
<html lang="en">
    <div class="element"></div>
    <!-- Typeinit CDN -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.js"></script>
      const typeinit = new Typeinit(".element");
      typeinit.type("Hello world!").play();


const typeinit = new Typeinit(".element", {
   * @property {number} startDelay time before typing starts in milliseconds
  startDelay: 0,

   * @property {number} typingSpeed typing speed in milliseconds
  typingSpeed: 100,

   * @property {number} deletingSpeed deleting speed in milliseconds
  deletingSpeed: 40,

   * @property {number} deleteDelay time before deleting in milliseconds
  deleteDelay: 300,

   * @property {number} pause the amount of time in milliseconds to pause
  pause: 1000,

   * @property {(number|"infinite")} repeat repeat animation
   * @property {boolean} repeatEase apply an effect before repeating
   * @property {number} repeatSpeed the speed in milliseconds it takes to delete all characters in the element before repeating
   * @property {number} repeatDelay time before each repeat in milliseconds
  repeat: 0,
  repeatEase: false,
  repeatSpeed: 0,
  repeatDelay: 750,

   * @property {boolean} caret show caret
   * @property {string} caretStyle color applied to the caret element
   * @property {string} caretWidth the width of the caret
  caret: true,
  caretColor: "currentcolor",
  caretWidth: 1,

   * @property {boolean} waitUntilVisible Start the animation only when the element is within the viewport
   * @property {string} visibleOptions configure when the element becomes visible
  waitUntilVisible: false,
  visibleOptions: "center bottom",

   * Before it begins typing
  onStart: () => {},

   * All typing is complete
  onEnd: () => {},

   * After resetting the Target element
  onReset: () => {},

   * After restarting the animation
  onRestart: () => {},

   * After each character is typed
  onCharTyped: () => {},

   * After each character is deleted
  onCharDeleted: () => {},


All of Typeinit's documentation can be found at https://typeinit-docs.vercel.app.