Animate Type of Effect Through The List of Strings | Write and Delete

Write and Delete is a small js library to trigger some writing effects through the list of strings. It also supports typos settings, to make them more bearable for a human. This JavaScript library simulates realistic human writing behavior on the web.

Note Generators are used, so they are only supported in modern browsers.


  • Classify by group of strings.
  • infinite loop.
  • Custom share of typos.
  • The indicator flashes.

Must Read: jQuery Plugin That Formats JSON Strings | jsonFormatter

How to make use of it:

1. Import the Write and Delete.

<script src="dist/lib.js"></script>
// or as a web component
<script src="dist/webcomponent.js" defer></script>

2. Initialize the library and outline an array of strings to be printed on the web page.

writeAndDelete(document.querySelector("#container"), [
  "Text to type 1",
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // options here

3. You can even use it as a web element.

<write-and-delete>String1, String2, String3, String4</write-and-delete>

4. Possible options to config the typing animation.

writeAndDelete(document.querySelector("#container"), [
  `Text to type 1`,
  "Text to type 2",
  "Text to type 3",
  "Text to type 4",
  // ...
], {
  // timeout in ms
  timeout: 1000,
  // animation speed
  speed: 300,
  // variation for the speed option
  speedVariation: undefined,
  // infinite loop
  loop: true,
  // quota of typos
  errorQuota: 0
  // Custom string of characters used for the typo errors
  errorCharacterMap: undefined,
  // custom cursor
  cursor: '_',
  // speed of binking animation
  cursorSpeed: undefined,
// or 
<write-and-delete timeout="1000" loop="true" speed="200">String1, String2, String3, String4</write-and-delete>


Write and Delete


Must Read: Translate Strings In Any Elements & Attributes Using Vanilla JS | Simple Translator

timeoutnumberrequired Timeout until the next element is been written/deleted
speednumberrequired The velocity of typing effect
speedVariationnumberA variation for the speed property. So it is not too linear
loopbooleanRestart after reaching the last text in the list
errorQuotanumberThe quota of typos injected into the text
errorCharacterMapstringA custom string of characters is used for the typo errors.
cursorstringThe character of the cursor like / or _
cursorSpeednumberSpeed of the blinking animation

See Demo And Download

Official Website(faebeee): Click Here

This superior jQuery/javascript plugin is developed by faebeee. For extra Advanced Usage, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…