Getting Started

Welcome to the Typeinit documentation!

Installation

You can get the code through one of the following means:

  • via CDN - include the source on your page.
    <script src="https://cdn.jsdelivr.net/npm/typeinit@1.3.2/dist/index.umd.js"></script>
  • via NPM / YARN - install with npm install typeinit or yarn add typeinit.

Setup

  • Create a Target Element

    You can target an element by tag name, class, ID, or any other CSS selector. For instance, if you want to target an element with a .element class attached to it:

    <div class="element"></div>

    If you want a fallback for users without Javascript enabled, or for SEO reasons, you can put the text directly into this element, (More info).

  • Load the script on your page

javascript (ES6+)

After NPM installation

import Typeinit from "typeinit";
                 
new Typeinit(".element")
    .type("Hello world!")
    .play();

javascript (ES5+)

With CDN

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Typeinit</title>
  </head>
  <body>
    <!-- The target element -->
    <div class="element"></div>

    <!-- Typeinit CDN -->
    <script src="https://cdn.jsdelivr.net/npm/typeinit@1.3.2/dist/index.umd.js"></script>
    <script>
      let typeinit = new Typeinit(".element");
      typeinit
        .type("Hello world!")
        .play();
    </script>
  </body>
</html>