# Typed.js

GitHub | Documentation | View original demo | View mattboldt.com | Complain to Matt about how awful this is

## Basic Demo

Typed.js^10 is a JavaScript library.

It types out sentences.

And then deletes them.

Try it out!

      var typed = new Typed("#typed", {
        stringsElement: '#typed-strings',
        typeSpeed: 0,
        backSpeed: 0,
        backDelay: 500,
        startDelay: 1000,
        loop: false,
        onBegin: function(self) { prettyLog('onBegin ' + self) },
        onComplete: function(self) { prettyLog('onCmplete ' + self) },
        preStringTyped: function(pos, self) { prettyLog('preStringTyped ' + pos + ' ' + self); },
        onStringTyped: function(pos, self) { prettyLog('onStringTyped ' + pos + ' ' + self) },
        onLastStringBackspaced: function(self) { prettyLog('onLastStringBackspaced ' + self) },
        onTypingPaused: function(pos, self) { prettyLog('onTypingPaused ' + pos + ' ' + self) },
        onTypingResumed: function(pos, self) { prettyLog('onTypingResumed ' + pos + ' ' + self) },
        onReset: function(self) { prettyLog('onReset ' + self) },
        onStop: function(pos, self) { prettyLog('onStop ' + pos + ' ' + self) },
        onStart: function(pos, self) { prettyLog('onStart ' + pos + ' ' + self) },
        onDestroy: function(self) { prettyLog('onDestroy ' + self) }
      });

## Fade Out

      var typed2 = new Typed('#typed2', {
        strings: ['Some <i>strings</i> with', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'],
        typeSpeed: 0,
        backSpeed: 0,
        fadeOut: true,
        loop: true
      });

## Smart Backspace

      var typed3 = new Typed('#typed3', {
        strings: ['My strings are: <i>strings</i> with', 'My strings are: <strong>HTML</strong>', 'My strings are: Chars &times; &copy;'],
        typeSpeed: 0,
        backSpeed: 0,
        smartBackspace: true, // this is a default
        loop: true
      });

## In an input

      var typed4 = new Typed('#typed4', {
        strings: ['Some strings without', 'Some HTML', 'Chars'],
        typeSpeed: 0,
        backSpeed: 0,
        attr: 'placeholder',
        bindInputFocusEvents: true,
        loop: true
      });

## Shuffled

      var typed5 = new Typed('#typed5', {
        strings: ['1 Some <i>strings</i> with', '2 Some <strong>HTML</strong>', '3 Chars &times; &copy;'],
        typeSpeed: 0,
        backSpeed: 0,
        cursorChar: '_',
        shuffle: true,
        smartBackspace: false,
        loop: true
      });

## Bulk Typing

      var typed6 = new Typed('#typed6', {
        strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
        typeSpeed: 40,
        backSpeed: 0,
        loop: true
      });