Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

शब्दावली (shabdawali)

Amazing human-like typing effects with typo, events, dynamic speed and more


  • Amazing human-like typing effects beyond your imagination.
  • It does typo, and corrects them.
  • It mimics humar style by dynamic speed and pauses to type/delete sentences.
  • Small size 1.5k.
  • No dependency.
  • CPU friendly.
  • Can be used as a jQuery plugin, React component, or with other libraries.
  • You can fully control it's behavior.
  • You can use it for playing music notes, typing demos, typing posts on devRant, Twitter and Github.
  • Check for a live demo.

How to use

You can either install it through npm ,or download js from dist folder or directly refer to CDN.

npm i shabdawali
var shabdawali = require('shabdawali'); // this line is needed only for nodejs users

shabdawali(el, {
    lines : ["sentence 1", "sentence 2"],
    //other configuration



You can control typing speed, deleting speed, pauses etc. using the following configuration:

    typingSpeed : 75,
    dynamicPauseBeforeDelete : true, 
    pauseBeforeDelete : 2000, 
    pauseBeforeNext : 1000, 
    delay : 0


You can enable/disable effects:

    typoEffect : false,
    repeat : true,
    deleteEffect : true,
    dynamicPause : true,


You may want to play music on a piano with key press effects. Events can help you:

    onCharChange : function(char){...};
    onLineChange : function(char, lineNumber, line){...};
    nextWord : function(word){...};

playback events:

var me = shabdavali(..),
me.on("pause", fn);
me.on("resume", fn);

Some ideas

  • Keyboard typing effect.
  • Piano playing effect.
  • Typewriter strike effect.
  • Number dial effect.
  • Background change.
  • Whatever you can think of...

Spelling Correction

By default Shabdawali looks for words longer than 4 letters, and randomly applies typo effects on a maximum of 1 word per sentence. Here is the configuration:

    max : 1, // Maximum number of typos per line
    minWordLength : 5, //skip words which are smaller than 5 characters
    extendedRange : 3, //How long to type before correction effect
    skip : 2, //how many letters from the starting of a word should be left
    randomFactor : 4 //higher the value lesser the chance to pick a word for typo effect

You can override checkIfFitsForTypoEffect(word) to apply your logic to check if shabdawali would apply typo effects on current word.

Currently Shabdawali shuffles the letters of a word randomly to apply typo effects. But you can change this behavior by overriding makeTypo().

Some ideas

  • Apply typo effect on particular words or particular lines.
  • Apply typo effect only on particular type of words.
  • Apply the effects like;
    • missing vowels.
    • shuffle only 2-3 letters.
    • writing wrong spelling or similar words.
    • writing completely wrong sentences.
    • writing slang and then star/mask them.
    • whatever you can think of...


When you don't want to make a sentence longer and don't want your reader to read the same sentence again-n-again, you can set replaceable: true to delete only uncommon parts.


"I have worked in India"
"I have worked in Japan"
"I have worked in England"


You can pause/resume the animation whenever you want:

var amit = shabdawali(..);

amit.start(3);//pause after typing 3 sentences
amit.resume(3);//pause after typing next 3 sentences
amit.pause(); //pause manually
amit.resume(); //resume previously paused typing

Integration with other JS libraries

Jquery Plugin

    $.fn.shabdawali = function(options) {

    return this.each(function() {
        shabdawali($(this), options);

Riot JS Tag

    <h1 ref="slat"></h1>
        shabdawali(this.refs.slat, this.opts);

React component

//-- check for more detail

class Slate extends React.Component {
  constructor (props) {
  componentDidMount () {
      var props = { lines: [ "शब्दावली (shabdawali)", "It can be used as a React component as well"]
    shabdawali(this.el, props);
  	return <span ref={(el) => { this.el = el; }}>{this.props.children}</span>;

	  <Slate />

Worth to check

  • BigBit standard) : A standard to reprent any number in the universe in comparitively less space and without precision loss. A standard to save space to represent any text string in comparision of UTF encoding.
  • imglab : Speedup and simplify image labeling / annotation. Supports multiple formats, one click annotation, easy
  • वार्ता (vaarta) : Human like chatting effects.


Typewriting effect js plugin mimics human behavior




No releases published


No packages published