Simulate Typewriter Typing On The Screen – typing.js

Category: Animation , Javascript | January 3, 2018
Views Total:3,018 views
Official Page:Go to website
Last Update:January 3, 2018


Simulate Typewriter Typing On The Screen – typing.js


typing.js is a vanilla JavaScript plugin used to simulate Typewriter typing and erasing effects on the screen. Supports multi-line text typing and custom font styles.

How to use it:

Insert the typing.css and typing.js into the document.

<link rel="stylesheet" href="typing.css">
<script src="typing.js"></script>

Create a container in which you want to output the text.

<div id="demo"></div>

Initialize the typing.js and we’re ready to go.

  • selector: target container.
  • speed: typing speed in milliseconds.
  • initialdelay: initial delay in milliseconds.
// selector, speed, initialDelay
_$("demo", 100, 800)


  • type(string, option): type strings
  • wait(): time before typing
  • speed(): typing speed
  • lineBreak(): add a linebreak
  • delete(string, option): delete strings
_$("demo", 100, 800)
  .type("Hello! ").wait(1000).speed(100)
  .type("This is ").wait(300).speed(100)
  .type("Typing Javascript", { 
      fontWeight: "bold", 
      color: "black",
  .type("JS", { 
      fontWeight: "bold", 
      color: "black",

You Might Be Interested In:

Leave a Reply