DEV Community 👩‍💻👨‍💻

Cover image for TypeWriter Effect with Javascript | HTML, CSS & JS

Posted on • Updated on

TypeWriter Effect with Javascript | HTML, CSS & JS

Hello Everyone ,
Today we are going to learn how to do the type write effect in vanilla JavaScript. You would be surprised how simple it is and we can build it in only in few lines of JavaScript code.

Tools used in this video: VS Code, HTML , CSS , JavaScript

Follow my video tutorial :-

Enter fullscreen mode Exit fullscreen mode

Friends if you like it then also follow my youtube channel Bocadmium

How to Subscribe Bocadmium:

Source Code :

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Type writer</title>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <div class="box-main">
        <p class="text-big">
            <span class="text-change" data-wait="3000" data-words='["Premium Education for all!","Suscribe to Bocadmium"]'></span>
Enter fullscreen mode Exit fullscreen mode


    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 100%;
    font-size: 30px;

/* cursor */
.text-change > .txt{
    border-right: 0.2rem solid #777;
    animation: blink 575ms infinite;
@keyframes blink {
        border-right: 0.2rem solid transparent;

Enter fullscreen mode Exit fullscreen mode


const TypeWriter = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt = '';
    this.wait = parseInt(wait,10);
    this.isDeleting = false;
// Type Method
TypeWriter.prototype.type = function(){
   // current index of word
   const current = this.wordIndex % this.words.length;
// Get full text of curent word 
const fulltxt = this.words[current];
// check if deleting
//Remove a character
this.txt = fulltxt.substring(0, this.txt.length - 1);
// Add a character
this.txt = fulltxt.substring(0, this.txt.length + 1);


// Insert txt into Element
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

// type speed
let typespeed = 50;

    typespeed = typespeed / 2;

//if word is complete
if(!this.isDeleting && this.txt === fulltxt)
    //Make a pause at end
   typespeed = this.wait;
    // set delete is true
    this.isDeleting = true;

}else if(this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    //move to next word
//Pause before start typing
typespeed = 500;

setTimeout(() =>this.type(), typespeed)

// init on dom load
document.addEventListener('DOMContentLoaded', init);

//init app
function init(){
  const txtElement = document.querySelector('.text-change');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  //init type writer
new TypeWriter(txtElement, words, wait);
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

lukeshiru profile image
Luke Shiru

You might want to use CSS only for this kind of effects so they are more accessible (changing the actual text with JS is bad for screen readers). There are some great articles about how you can achieve this here in DEV:


Sloan, the sloth mascot
Comment deleted
adwait12345 profile image


adwait12345 profile image

Someone just asked me to achive it only bases of js 😅 , I have also done with only css also 😎

Create an Account!
Now it's your turn!
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.