A JavaScript Typing Animation Library
Branch: master
Clone or download
Latest commit dd852f0 Jan 30, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PULL_REQUEST_TEMPLATE.md Jul 16, 2017
.vscode fixed codeclimate issues Jun 27, 2017
assets fixed conflicts and tested demo May 26, 2018
docs Added feature to use HTML element instead of element ID string Jul 3, 2017
lib fix issue#303 Jan 30, 2019
src fix issue#303 Jan 30, 2019
.codeclimate.yml don't judge my assets Jul 3, 2017
.csslintrc Added codeclimate Jun 27, 2017
.esdoc.json work in progress, adding documentation Jun 27, 2017
.eslintignore adding demo page Jul 2, 2017
.eslintrc.yml adding demo page Jul 2, 2017
.gitignore Added minified version via Gulp. Also fixes #53 Feb 7, 2015
.travis.yml switched to yarn Jul 3, 2017
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jul 16, 2017
LICENSE.txt bumpedd version number and copyright date May 26, 2018
README.md Fix broken link in docs and add wc repo Nov 8, 2018
app.js moved demos to index.html Jul 2, 2017
bower.json New version bump including TypeScript definition Aug 7, 2018
gulpfile.js New version bump including TypeScript definition Aug 7, 2018
index.d.ts New version bump including TypeScript definition Aug 7, 2018
index.html Fixes #332 Jun 13, 2018
logo-cropped.png cropped logo Sep 9, 2016
logo.png year & logo Sep 9, 2016
package-lock.json fixed another vulnerable dependency Aug 20, 2018
package.json fixed another vulnerable dependency Aug 20, 2018
webpack.config.js fixed codeclimate issues Jun 27, 2017
yarn.lock Updated yarn lock Aug 20, 2018


Build Status Code Climate GitHub release npm GitHub license

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.


Choose One

npm install typed.js
yarn add typed.js
bower install typed.js


<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>


This is really all you need to get going.

// Can also be included with a regular script tag
import Typed from 'typed.js';

var options = {
  strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
  typeSpeed: 40

var typed = new Typed(".element", options);

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













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.

  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings'
<div id="typed-strings">
    <p>Typed.js is a <strong>JavaScript</strong> library.</p>
    <p>It <em>types</em> out sentences.</p>
<span id="typed"></span>

Type Pausing

You can pause in the middle of a string for a given amount of time by including an escape character.

var typed = new Typed(".element", {
  // Waits 1000ms after typing "First"
  strings: ["First ^1000 sentence.", "Second sentence."]

Smart Backspacing

In the following example, this would only backspace the words after "This is a"

var typed = new Typed(".element", {
  strings: ["This is a JavaScript library", "This is an ES6 module"],
  smartBackspace: true // Default value

Bulk Typing

The following example would emulate how a terminal acts when typing a command and seeing its result.

var typed = new Typed(".element", {
  strings: [
    "git push --force ^1000\n `pushed to origin with option force`"


CSS animations are built upon initialzation in JavaScript. But, you can customize them at your will! These classes are:

/* Cursor */
.typed-cursor {}

/* If fade out option is set */
.typed-fade-out {}

Use with ReactJS

Check out this example React app using Typed.js in a component: https:/https://github.com/jsfiddle.net/mattboldt/ovat9jmp/

Use with Vue.js

Check out the Vue.js component: http://www.oddjack.com/?certs=Orlandster/vue-typed-js

Use it as WebComponent

Check out the WebComponent: http://www.oddjack.com/?certs=Orlandster/wc-typed-js


var typed = new Typed(".element", {
   * @property {array} strings strings to be typed
   * @property {string} stringsElement ID of element containing string children
  strings: ['These are the default values...', 'You know what you should do?', 'Use your own!', 'Have a great day!'],
  stringsElement: null,

   * @property {number} typeSpeed type speed in milliseconds
  typeSpeed: 0,

   * @property {number} startDelay time before typing starts in milliseconds
  startDelay: 0,

   * @property {number} backSpeed backspacing speed in milliseconds
  backSpeed: 0,

   * @property {boolean} smartBackspace only backspace what doesn't match the previous string
  smartBackspace: true,

   * @property {boolean} shuffle shuffle the strings
  shuffle: false,

   * @property {number} backDelay time before backspacing in milliseconds
  backDelay: 700,

   * @property {boolean} fadeOut Fade out instead of backspace
   * @property {string} fadeOutClass css class for fade animation
   * @property {boolean} fadeOutDelay Fade out delay in milliseconds
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutDelay: 500,

   * @property {boolean} loop loop strings
   * @property {number} loopCount amount of loops
  loop: false,
  loopCount: Infinity,

   * @property {boolean} showCursor show cursor
   * @property {string} cursorChar character for cursor
   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
  showCursor: true,
  cursorChar: '|',
  autoInsertCss: true,

   * @property {string} attr attribute for typing
   * Ex: input placeholder, value, or just HTML text
  attr: null,

   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
  bindInputFocusEvents: false,

   * @property {string} contentType 'html' or 'null' for plaintext
  contentType: 'html',

   * All typing is complete
   * @param {Typed} self
  onComplete: (self) => {},

   * Before each string is typed
   * @param {number} arrayPos
   * @param {Typed} self
  preStringTyped: (arrayPos, self) => {},

   * After each string is typed
   * @param {number} arrayPos
   * @param {Typed} self
  onStringTyped: (arrayPos, self) => {},

   * During looping, after last string is typed
   * @param {Typed} self
  onLastStringBackspaced: (self) => {},

   * Typing has been stopped
   * @param {number} arrayPos
   * @param {Typed} self
  onTypingPaused: (arrayPos, self) => {},

   * Typing has been started after being stopped
   * @param {number} arrayPos
   * @param {Typed} self
  onTypingResumed: (arrayPos, self) => {},

   * After reset
   * @param {Typed} self
  onReset: (self) => {},

   * After stop
   * @param {number} arrayPos
   * @param {Typed} self
  onStop: (arrayPos, self) => {},

   * After start
   * @param {number} arrayPos
   * @param {Typed} self
  onStart: (arrayPos, self) => {},

   * After destroy
   * @param {Typed} self
  onDestroy: (self) => {}


View Contribution Guidelines


Thanks for checking this out. If you have any questions, I'll be on Twitter.

If you're using this, let me know! I'd love to see it.

It would also be great if you mentioned me or my website somewhere. www.mattboldt.com