Skip to content
Animated typing in ~400 bytes 🐡 of JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Add tests Sep 30, 2019
LICENSE Add license, package info Oct 15, 2019
package-lock.json Add tests Sep 30, 2019
package.json 0.1.1 Oct 19, 2019 Link demo image to demo Oct 27, 2019


Animated typing in ~400 bytes 🐡 of JavaScript.

  • Zero dependencies
  • MIT licensed
  • Emoji support
  • Smart delete: only delete what needs deleting
  • Pausing: pause between steps
  • Looping: easily loop from any point
  • Waiting: wait on arbitrary Promises
  • Humanity: slightly varied typing speed

Demo →


npm install @camwiegert/typical
More install options

Instead of using a package manager, you can download typical.js from GitHub and import it locally or import it directly from a CDN like unpkg.


type(target: HTMLElement, ...steps: any[]) => Promise<void>;

The module exports a single function, type, which takes a target element as its first argument, and any number of additional arguments as the steps to perform. Additional arguments perform actions based on their type:

Type Action
string Type text
number Pause (milliseconds)
function Call with target element
Promise Wait for resolution


The most basic usage of type is providing a target element and a string to type.

import { type } from '@camwiegert/typical';

type(element, 'text');


In order to pause typing at any point, pass a number of milliseconds to pause.

type(element, 'Hello', 1000, 'Hello world!');


In order to loop, pass type as a parameter to itself at the point at which you'd like to start looping. It can be helpful to alias type as loop to be explicit.

import {
    type as loop

const steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];

type(element, ...steps, loop);

To loop a finite amount, pass your steps multiple times.

type(element, ...steps, ...steps, ...steps);


When passed a Promise, type will wait for it to resolve before continuing. Because type itself returns a Promise, that means you can wait on a set of steps to complete before starting another.

const init = type(target, 'In a moment...', 500);

type(target, init, 'start', 500, 'looping', loop);


Function arguments are passed the target element, and can be useful for operating on the target element between steps. If you return a Promise, type will wait for it to resolve.

const toggle = (element) =>

type(target, toggle, 'Type me', toggle);


  • Chrome
  • Edge
  • Firefox
  • Safari
  • Internet Explorer


You can’t perform that action at this time.