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.

---

Installation

CDN

1<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

For use directly in the browser via <script> tag:

1  <!-- Element to contain animated typing -->
2  <span id="element"></span>
3
4  <!-- Load library from the CDN -->
5  <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
6
7  <!-- Setup and start animation! -->
8  <script>
9    var typed = new Typed('#element', {
10      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
11      typeSpeed: 50,
12    });
13  </script>
14</body>

As an ESModule

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

1import Typed from 'typed.js';
2
3const typed = new Typed('#element', {
4  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
5  typeSpeed: 50,
6});

ReactJS Usage

1import React from 'react';
2import Typed from 'typed.js';
3
4function MyComponent() {
5  // Create reference to store the DOM element containing the animation
6  const el = React.useRef(null);
7
8  React.useEffect(() => {
9    const typed = new Typed(el.current, {
10      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
11      typeSpeed: 50,
12    });
13
14    return () => {
15      // Destroy Typed instance during cleanup to stop animation
16      typed.destroy();
17    };
18  }, []);
19
20  return (
21    <div className="App">
22      <span ref={el} />
23    </div>
24  );
25}

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.

1<script>
2  var typed = new Typed('#typed', {
3    stringsElement: '#typed-strings'
4  });
5</script>

1<div id="typed-strings">
2  <p>Typed.js is a <strong>JavaScript</strong> library.</p>
3  <p>It <em>types</em> out sentences.</p>
4</div>
5<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.

1var typed = new Typed('#element', {
2  // Waits 1000ms after typing "First"
3  strings: ['First ^1000 sentence.', 'Second sentence.'],
4});

Smart Backspacing

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

1var typed = new Typed('#element', {
2  strings: ['This is a JavaScript library', 'This is an ES6 module'],
3  smartBackspace: true, // Default value
4});

Bulk Typing

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

1var typed = new Typed('#element', {
2  strings: ['git push --force ^1000\n `pushed to origin with option force`'],
3});

CSS

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

1/* Cursor */
2.typed-cursor {
3}
4
5/* If fade out option is set */
6.typed-fade-out {
7}

Customization

1var typed = new Typed('#element', {
2  /**
3   * @property {array} strings strings to be typed
4   * @property {string} stringsElement ID of element containing string children
5   */
6  strings: [
7    'These are the default values...',
8    'You know what you should do?',
9    'Use your own!',
10    'Have a great day!',
11  ],
12  stringsElement: null,
13
14  /**
15   * @property {number} typeSpeed type speed in milliseconds
16   */
17  typeSpeed: 0,
18
19  /**
20   * @property {number} startDelay time before typing starts in milliseconds
21   */
22  startDelay: 0,
23
24  /**
25   * @property {number} backSpeed backspacing speed in milliseconds
26   */
27  backSpeed: 0,
28
29  /**
30   * @property {boolean} smartBackspace only backspace what doesn't match the previous string
31   */
32  smartBackspace: true,
33
34  /**
35   * @property {boolean} shuffle shuffle the strings
36   */
37  shuffle: false,
38
39  /**
40   * @property {number} backDelay time before backspacing in milliseconds
41   */
42  backDelay: 700,
43
44  /**
45   * @property {boolean} fadeOut Fade out instead of backspace
46   * @property {string} fadeOutClass css class for fade animation
47   * @property {boolean} fadeOutDelay Fade out delay in milliseconds
48   */
49  fadeOut: false,
50  fadeOutClass: 'typed-fade-out',
51  fadeOutDelay: 500,
52
53  /**
54   * @property {boolean} loop loop strings
55   * @property {number} loopCount amount of loops
56   */
57  loop: false,
58  loopCount: Infinity,
59
60  /**
61   * @property {boolean} showCursor show cursor
62   * @property {string} cursorChar character for cursor
63   * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
64   */
65  showCursor: true,
66  cursorChar: '|',
67  autoInsertCss: true,
68
69  /**
70   * @property {string} attr attribute for typing
71   * Ex: input placeholder, value, or just HTML text
72   */
73  attr: null,
74
75  /**
76   * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
77   */
78  bindInputFocusEvents: false,
79
80  /**
81   * @property {string} contentType 'html' or 'null' for plaintext
82   */
83  contentType: 'html',
84
85  /**
86   * Before it begins typing
87   * @param {Typed} self
88   */
89  onBegin: (self) => {},
90
91  /**
92   * All typing is complete
93   * @param {Typed} self
94   */
95  onComplete: (self) => {},
96
97  /**
98   * Before each string is typed
99   * @param {number} arrayPos
100   * @param {Typed} self
101   */
102  preStringTyped: (arrayPos, self) => {},
103
104  /**
105   * After each string is typed
106   * @param {number} arrayPos
107   * @param {Typed} self
108   */
109  onStringTyped: (arrayPos, self) => {},
110
111  /**
112   * During looping, after last string is typed
113   * @param {Typed} self
114   */
115  onLastStringBackspaced: (self) => {},
116
117  /**
118   * Typing has been stopped
119   * @param {number} arrayPos
120   * @param {Typed} self
121   */
122  onTypingPaused: (arrayPos, self) => {},
123
124  /**
125   * Typing has been started after being stopped
126   * @param {number} arrayPos
127   * @param {Typed} self
128   */
129  onTypingResumed: (arrayPos, self) => {},
130
131  /**
132   * After reset
133   * @param {Typed} self
134   */
135  onReset: (self) => {},
136
137  /**
138   * After stop
139   * @param {number} arrayPos
140   * @param {Typed} self
141   */
142  onStop: (arrayPos, self) => {},
143
144  /**
145   * After start
146   * @param {number} arrayPos
147   * @param {Typed} self
148   */
149  onStart: (arrayPos, self) => {},
150
151  /**
152   * After destroy
153   * @param {Typed} self
154   */
155  onDestroy: (self) => {},
156});

Contributing

View Contribution Guidelines

end

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