Animated typing in ~400 bytes

Downloads in past


1,18930.1.13 years ago3 years agoMinified + gzip package size for @camwiegert/typical in KB


Animated typing in ~400 bytes :blowfish: 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:
  • string arguments will be typed
  • number arguments will pause, in milliseconds
  • function arguments will be called with the target element as an argument
  • Promise arguments will 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);


  • x Chrome
  • x Edge
  • x Firefox
  • x Safari
  • Internet Explorer