typefxjs

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 }
    }
})

API