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

import TypeFX from "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>

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",
)

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.

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.