Need help with tiper-js?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

184 Stars 5 Forks 46 Commits 6 Opened issues


A small library for creating typing animations.

Services available


Need anything else?

Contributors list

npm version

A small library for creating typing animations.

View a short video demonstration here.


npm i tiper-js


Initialization is really simple. Just create a new instance of Tiper and pass in a DOM element. The options object is optional.

import Tiper from "tiper-js";

//ES5 let Tiper = require("tiper-js");

let tiper = new Tiper(document.querySelector(".tiper-js-container"));

tiper.beginTyping(); //Begins typing with default text and config. tiper.line("Hello, neighbor!"); // Types "Hello, neighbor!". Also uses default config.

If you want to have the blinking cursor affect, link the css file in your html file like so:

Checkout the test folder for a basic, viewable example.


Tiper exposes a minimal, yet fun, set of options to play around with.

  • text: string
    (required) - The string of text to be typed.
  • hesitation: number
    - A number from 0 to 1. Used as a factor in determining the delay between typing the next character. Default is
  • wordsPerMinute: number
    : - A number used to determine typing speed. Default is
  • pauseTimeout: number
    : - The time in ms to pause on certain conditions. Only applies if
    is true.
  • pauseOnSpace: boolean
    : - Whether or not to pause on spaces. Default is false.
  • pauseOnEndOfSentence: boolean
    : - Whether or not to pause at the end of sentences. Default is true.
  • showCaret: boolean
    : - Whether or not show caret. Default is false.
  • caretType: string
    : - The type of caret to show if
    is true. Available options are 'normal' or 'underscore'. Default is 'normal'.
  • glitch: boolean
    : - Whether or not to show glitch effect intermittently.
  • onFinishedTyping: Function
    : - The callback to fire after the text has been typed.


  • tiper.beginTyping(text: string, reset: boolean)
    - Begin typing at the current index. Returns a Promise that resolves when all the text has been typed.
  • tiper.stopTyping()
    - Stop typing at the current index. Returns a Promise that resolves when async interval is cleared.
  • tiper.resumeTyping()
    - Resume typing from the current index.
  • tiper.line(text: string)
    - Output a single line of text. Returns a Promise that resolves when the particular text is finished being displayed.
  • tiper.back(chars: number)
    - Removes n amount of characters in sequence. If no number is specified, it will remove characters until there are none left.
  • tiper.getElementText()
    - Returns the text content of the current text element.
  • tiper.setAccuracy(accuracy: number)
    - Modify the current typing accuracy.
  • tiper.isFinished()
    - Returns whether or not Tiper is finished typing.
  • tiper.clearText()
    - Clears all text within the container.
  • tiper.destroy()
    - Stops typing and removes all content inside the main container. Returns false.

Repeating stuff

Tiper offers 3 main ways of repeating text, each with their own benefits and drawbacks.

Let's start with the core repeat function:

tiper.repeat(repeatAmount: number | string, repeatAction: Function)

This will repeat a given function n amount of times and will serve as the basis for the next two functions. As an example, let's say you want to type "Hi, I'm Carlos. I am a web developer.", but you're not basic, so you want to spice it up a bit. You can do the following:

await tiper.line("Hi, I'm Carlos. I am a ");
tiper.repeat(2, async () => {
    await tiper.line("web developer.");
    await tiper.delay(1000);
    await tiper.back(14);
    await tiper.line("web designer.");
    await tiper.delay(1000);
    await tiper.back(13);
    await tiper.delay(2000);

This will do exactly what you think it will, but it looks really sloppy, and there's not much room for expansion (what if I want to add "professional cat petter" to the list?). That's where

comes in.

tiper.easyRepeat(config: repeatConfig)

This function takes in just one parameter of type

which looks something like this:
interface repeatConfig {
    values?: Array;
    action?: string;
    getValue?: Function;
    repeatAmount: number;
    delay: number;


in particular, we just need a values array, an action, a repeat amount, and a delay. So, we can do the same thing we did with the
function in a simpler way:
let config = {
    action: "line",
    values: ["web developer.", "web designer.", "professional cat petter."],
    repeatAmount: 2,
    delay: 2000,
await tiper.line("Hi, I'm Carlos. I am a");

Now, what if you really wanted to show off and have Tiper repeat that statement forever except this time your profession was chosen at random? Fear not,

is on the way!

tiper.targetRepeat(config: repeatConfig)

At first glance,

look exactly the same, but theres one key difference. With
you don't have to specify a values array, you can simply pass in a function that can be called to get a value. Check this out.
let config = {
    action: "line",
    getValue: this.getRandomProfession, // where the magic happens
    repeatAmount: "forever",
    delay: 2000
await tiper.line("Hi, I'm Carlos. I am a");

Now every time the

function gets called, the return value of
will be passed in, forever. Sweet right?

Hope you guys enjoy!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.