README

Live Demo | View All Demos | View Full Docs | mattboldt.com

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

---

 Licensing


  
    GPL-3.0 License
    Limited Commercial License
    Unlimited Commercial License
  
  
    
      Free for use on personal and open source projects
      View License
    
    
      For use on a single commercial project
      Purchase License
      View License
    
    
      For use on unlimited commercial projects
      Purchase License
      View License
    
  


 Installation

For use with a build tool like Vite, and/or in a React application, install with NPM or Yarn.

 NPM


npm install typed.js


 Yarn


yarn add typed.js


 General ESM Usage

js
import Typed from 'typed.js';

const typed = new Typed('element', {
  strings: ['First sentence.', '& a second sentence.'],
  typeSpeed: 50,
});


 ReactJS Usage

js
import React, { useEffect, useRef } from 'react';
import Typed from 'typed.js';

function MyComponent() {
  // Create reference to store the DOM element containing the animation
  const el = useRef(null);

  useEffect(() = {
    const typed = new Typed(el.current, {
      strings: ['First sentence.', '& a second sentence.'],
      typeSpeed: 50,
    });

    return () = {
      // Destroy Typed instance during cleanup to stop animation
      typed.destroy();
    };
  }, []);

  return (
    
      
    
  );
}


 CDN

html



For use directly in the browser via  tag:

html
  
  

  
  

  
  
    var typed = new Typed('element', {
      strings: ['First sentence.', '& a second sentence.'],
      typeSpeed: 50,
    });
  



More complex hook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/

Class component: https://jsfiddle.net/mattboldt/ovat9jmp/

 Use with Vue.js

Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js

 Use it as WebComponent

Check out the WebComponent: https://github.com/Orlandster/wc-typed-js

 Wonderful sites that have used (or are using) Typed.js

https://forwardemail.net

https://codesignal.com

https://github.com/features/package-registry

https://slack.com

https://envato.com

https://gorails.com

https://productmap.co

https://www.typed.com

https://apeiron.io

https://git.market

https://commando.io

http://testdouble.com/agency.html

https://www.capitalfactory.com

http://www.maxcdn.com

https://www.powerauth.com

---

 Strings from static HTML (SEO Friendly)

Rather than using the strings array to insert strings, you can place an HTML div on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.

javascript

  var typed = new Typed('typed', {
    stringsElement: 'typed-strings'
  });



html

  Typed.js is a JavaScript library.
  It types out sentences.




 Type Pausing

You can pause in the middle of