Installation

1. Get the code through one of the following means:

• CDN - Include the source on your page.

<script src="https://unpkg.com/typeit@@{TYPEIT_VERSION}/dist/index.umd.js"></script>

• npm / yarn - Install with npm install typeit or yarn add typeit.

• Clone the Repo - The compiled source files will be in the /dist directory.

2. Load the script on your page.

Depending on your setup, you’ll load TypeIt with a script tag , or an import, which will require the use of some sort of bundler.

<script src="/path/to/typeit/source"></script>

import TypeIt from "typeit";

Whatever the case, just be sure you load and instantiate TypeIt after the script and your target element are loaded on the page. This can usually be accomplished by loading & running the script at the bottom of your page. But if you can’t you can use the DOMContentLoaded event to execute it anywhere on the page. Example:

<script src="<https://unpkg.com/typeit@@{TYPEIT_VERSION}/dist/index.umd.js>"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    new TypeIt("#element", {
      strings: ["This is my string!"],
    }).go();
  });
</script>

3. Create a Target Element

You’ll be able to target an element by tag name, class, ID, or any other selector. For example, you might want to target an element with a .type-effect class attached to it.

<span class="type-effect"></span>

If you want a fallback for users without JavaScript enabled, you can put a string or strings directly into this element. For more on that, see the Defining Strings section. This will also be helpful if you’re concerned about SEO.