super-typer
Advanced tools
super-typer.js is a JavaScript library that allows you to create a typing effect on your website.
setGlobalOptions(options)setGlobalCallbacks(callbacks)addCommand(command)addCommands(commands)clearCommands()start()pause()reset()type(text, options, callbacks)backspace(count, options, callbacks)arrowLeft(count, options, callbacks)arrowRight(count, options, callbacks)wait(time, options, callbacks)In the CDN installation selection, you have the choice between the Global or ES Module import methods.
The Global import method is as follows:
<html>
<head>
...
<script src="https://unpkg.com/super-typer/dist/super-typer.global.js"></script>
...
</head>
<body>
...
</body>
</html>
The ES Module import method is as follows:
<html>
<head>
...
</head>
<body>
...
<script type="module">
import Typer from "https://unpkg.com/super-typer/dist/super-typer.esm.js";
</script>
</body>
</html>
You can install super-typer using package managers like npm, yarn, or pnpm.
npm install super-typer
yarn add super-typer
pnpm install super-typer
super-typer.js is very easy to use and has a very simple API.
The basic usage of super-typer.js is as follows:
// Create a new instance of Typer.
const superTyper = new Typer(
{
// The speed of the typing effect in milliseconds.
speed: 100
},
{
// The onChange function is called every time when the text changes.
onChange: (text) => {
console.log(text);
},
}
);
const commands = [
{
// The "command" property is the command which will be executed.
// The "type" command is used to type text.
command: "type",
// The "argument" property is command's argument.
argument: "Hello!",
},
{
// The "backspace" command is used to delete text.
// It's like pressing the backspace key.
command: "backspace",
// The "backspace" command accepts a number as an argument,
// which is the number of characters to delete.
//
// A `-1` value means that the whole text will be deleted.
argument: -1,
}
];
// Add commands to the Typer instance.
superTyper.addCommands(commands);
// Start to type.
superTyper.start();
The constructor of Typer accepts three arguments, the global options object, the global callbacks object, and the commands array, for example:
new Typer(/* global options */, /* global callbacks */, /* commands */);
The global options object is used to configure the Typer instance, it accepts the following properties:
{
// The speed of the typing effect in milliseconds, default value is 100.
speed: 100
}
The global callbacks object is used to configure the callbacks of the Typer instance, it accepts the following properties:
{
// The onChange function is called every time when the text changes.
// The "text" argument is the current text, and the "cursorPosition" argument is the current cursor position in the text.
onChange: (text, cursorPosition) => {},
// The onBeforeChange function is called before the text changes.
onBeforeChange: (text, cursorPosition) => {},
// The onAfterChange function is called after the text changes.
onAfterChange: (text, cursorPosition) => {},
}
The commands array is a list of commands that will be executed by the Typer instance. A command is an object that has four properties, for example:
{
// The "command" property is the command which will be executed.
// The "type" command is used to type text.
// The available commands for the command are: "type", "backspace", "arrowLeft", "arrowRight", and "wait".
command: "type",
// The "argument" property is command's argument.
argument: "Hello!",
// The "options" property is the same as the constructor's "global options" argument and will override it.
options: {
speed: 80
},
// The "callbacks" property is the same as the constructor's "global callbacks" argument and will override it.
callbacks: {
onChange: (text, cursorPosition) => {},
onBeforeChange: (text, cursorPosition) => {},
onAfterChange: (text, cursorPosition) => {},
}
}
isRunningThe isRunning property is a getter that returns a boolean value indicating whether the Typer instance is running or not.
isPausedThe isPaused property is a getter that returns a boolean value indicating whether the Typer instance is paused or not.
setGlobalOptions(options)The setGlobalOptions method is used to set the global options of the Typer instance.
setGlobalCallbacks(callbacks)The setGlobalCallbacks method is used to set the global callbacks of the Typer instance.
addCommand(command)The addCommand method is used to add a command to the Typer instance, it accepts a command as an argument.
addCommands(commands)The addCommands method is used to add commands to the Typer instance, it accepts an array of commands as an argument.
clearCommands()The clearCommands method is used to clear all commands from the Typer instance.
start()The start method is used to start the execution of the commands.
pause()The pause method is used to pause the execution of the commands.
reset()The reset method is used to stop execution and clear the all commands.
type(text, options, callbacks)The type method simulates text input, it is used to add a type command and start the execution of the commands. It accepts three arguments, following is the description of each argument:
text: The content to be typed.options: The options of this command, it will override the global options.callbacks: The callbacks of this command, it will override the global callbacks.backspace(count, options, callbacks)The backspace method simulates a backspace keypress, it is used to add a backspace command and start the execution of the commands. It accepts three arguments, following is the description of each argument:
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of -1, the result is "Hello". If the value is -2, the text becomes "Hello". Thus, a value of -1 is equivalent to deleting the entire text.options: The options of this command, it will override the Global Options.callbacks: The callbacks of this command, it will override the Global Callbacks.arrowLeft(count, options, callbacks)The arrowLeft method simulates a left arrow keypress, it is used to add a arrowLeft command and start the execution of the commands. It accepts three arguments, and same as the backspace method, following is the description of each argument:
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of -1, the result is "Hello". If the value is -2, the text becomes "Hello". Thus, a value of -1 is equivalent to deleting the entire text.options: The options of this command, it will override the Global Options.callbacks: The callbacks of this command, it will override the Global Callbacks.arrowRight(count, options, callbacks)The arrowRight method simulates a right arrow keypress, it is used to add a arrowRight command and start the execution of the commands. It accepts three arguments, and same as the backspace method, following is the description of each argument:
count: The number of characters to delete, if the value is negative, the text will be delete (all characters length + count + 1) characters. For example, with the text "Hello!" and a value of -1, the result is "Hello". If the value is -2, the text becomes "Hello". Thus, a value of -1 is equivalent to deleting the entire text.options: The options of this command, it will override the Global Options.callbacks: The callbacks of this command, it will override the Global Callbacks.wait(time, options, callbacks)The wait method is used to add a wait command and start the execution of the commands. It accepts one argument, following is the description of each argument:
time: The time to wait in milliseconds.options: The options of this command, it will override the Global Options.callbacks: The callbacks of this command, it will override the Global Callbacks.FAQs
A JavaScript library for typing effects
The npm package super-typer receives a total of 2 weekly downloads. As such, super-typer popularity was classified as not popular.
We found that super-typer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.
Research
/Security News
The compromise affects MemTensor's MemOS, an open source memory framework for large language models (LLMs) and AI agents. Both npm package @memtensor/memos-cloud-openclaw-plugin and the PyPI package MemoryOS are compromised. They drop cross-platform Go binaries that exfiltrate developer secrets.
Security News
Lovable’s OJ rewrites Vite’s dev server in Rust, reducing memory use and preview times as AI lowers the cost of open source reimplementation.