Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

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