TypeFX.js

A modern typewriter effect library in plain JavaScript: type, erase, select – almost anything you’d do on a keyboard.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/typefxjs/dist/typefx.umd.min.js"></script>

NPM

npm install typefxjs

// ESM
import TypeFX from "typefxjs"; 

// CommonJS
const TypeFX = require('typefxjs')

Usage

<p id="content"></p>

const element = document.querySelector('#content')

new TypeFX(element)
    .type("Type something with typefx.js!").wait(300)
    .move(-10).wait(400)
    .select(10).wait(500)
    .delete()

Or define with options:

new TypeFX(element, {...})
    ...

See API and Options

Vue3 Usage

<template>
  <p ref="content"></p>
</template>

<script setup>
import { onMounted, useTemplateRef } from 'vue'
import TypeFX from 'typefxjs'

const contentEl = useTemplateRef('content')

onMounted(() => {
    new TypeFX(contentEl.value)
        .type("Type something with typefx.js!")
})
</script>

React Usage

import { useEffect, useRef } from 'react'
import TypeFX from 'typefxjs'

export default function Demo() {
    const ref = useRef(null)

    useEffect(() => {
        if (!ref.current) return
        new TypeFX(ref.current)
            .type('Type something with typefx.js!')
    }, [])

    return <p ref={ref} />
}

Chainable

All TypeFX.js APIs are chainable and non-blocking, while each action in the chain is executed in sequence.

const typeInstence = new TypeFX(document.querySelector('#content'), {
    speed: 100,
})

This:

typeInstence
    .type("Type something, ").wait(300)
    .type("then type something else").wait(100)

Equal to:

typeInstence.type("Type something, ").wait(300)
typeInstence.type("then type something else").wait(100)

Options

The TypeFX constructor accepts an options object to control typing speed, randomness, and caret style.

new TypeFX(element, options?)

For example:

new TypeFX(element, {
    speed: 100,
    speedRange: 0,
    caretWidth: "1ch",
    entryAnimation: {
        keyframes: [{ opacity: 0 }, { opacity: 1 }],
        options: { duration: 300 }
    },
    deleteAnimation: {
        keyframes: [{ opacity: 1 }, { opacity: 0 }],
        options: { duration: 300 }
    }
})

| Param | | Description | | ------------------- | ------------------------------------- | ------------------------------------------------------------------------- | | speed | number (default 50) | Base typing pause in milliseconds per character. | | speedRange | number (default 50) | Random speed range to simulate natural typing, set to 0 for linear typing | | caretWidth | string (default "0.05em") | Width of the caret, should be a valid CSS length. | | caretColor | string (default "currentColor") | Color of the caret, should be a valid CSS color. | | entryAnimation | object | Custom entry animation using Web Animations API. | | deleteAnimation | object | Custom delete animation using Web Animations API. |

API

| Name | Params | Description | | ---------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | .type | text: string String to type | Types characters one by one. | | .quickType | text: string String to type | Instantly types characters. | | .wait | ms: number Time in milliseconds | Wait for a given duration. | | .delete | n?: number Number of characters (default 0) | Deletes n characters (and selected characters). | | .quickDelete | n?: number Number of characters (default 0) | Instantly deletes n characters (and selected characters). | | .move | n: number Number of characters to move (positive = right, negative = left) | Moves the caret by n characters. | | .quickMove | n: number Number of characters to move (positive = right, negative = left) | Instantly moves the caret by n characters. | | .select | n: number Number of characters to select (positive = forward, negative = backward) | Selects n characters by caret. | | .quickSelect | n: number Number of characters to select (positive = forward, negative = backward) | Instantly selects n characters by caret. | | .clear | - | Clears all text. | | .quickClear | - | Quick clears all text. | | .cancel | - | Cancels all current queued actions. | | .then | - | Runs custom function. | | .speed | ms: number Time in milliseconds | Set typing speed. | | .speedRange | ms: number Time in milliseconds | Set typing speed range. | | .hideCaret | - | Hides caret. | | .showCaret | - | Shows caret. |