Update: TypeIt is now vanilla JavaScript, and no longer dependent upon jQuery!

TypeIt: The Most Versatile JavaScript Animated Typing Utility on the Planet

Table of Contents

• Overview
• Choose a License
• Setup
• Simple Usage
• Advanced Usage (Chaining Companion Functions)
• Options
• Contributions
• Documentation (offsite)

Overview

TypeIt is the most versatile JavaScript animated typing utility on the planet. With simple, straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain HTML.

For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to a single character, enabling you to type an dynamic narrative, with complete control over speed changes, line breaks, deletions, and pauses.

Some of the Perks

• Choose to start typing only when your container element becomes visible on the screen.
• Loop your string(s) continuously.
• Define you strings via an options object or in the HTML (useful in case user doesn't have JavaScript enabled, as well as for SEO).
• Use a single TypeIt instance to control several different elements on a page.
• Handle HTML tags (including those with classes, ID's, etc.) and entities with ease.
• Use companion functions to chain individual commands together to fine tune your typing.
• Ready to be included via JS module, or as a separate script loaded on your page.
• No dependencies!

Demos

Checkout several demos and a sandbox where you can try it out at typeitjs.com.

Documentation

View the full documentation for using TypeIt here: typeitjs.com/docs.

Choose a License

Using TypeIt for an open source or personal project is completely free. To use it in a commercial project, purchase a single license, or an unlimited license that'll never expire, no matter how many times you use it.

• Personal or Open Source - FREE
• Single Commercial License - Purchase Here
• Extended Commercial License - Purchase Here

Setup

Get the Code

Get it from this repo, or from the following sources:

• CDN: Include https://cdnjs.cloudflare.com/ajax/libs/typeit/{ VERSION }/typeit.min.js on your page.
• npm / yarn: Install with npm install typeit or yarn install typeit and import into your project with import TypeIt from 'typeit'.

Hook It Up

1. Load TypeIt into your page or application.

<script src="typeit.js"></script>

or

import TypeIt from 'typeit'; 

2. Create an empty HTML element to select. (If you want to have a fallback for users without JavaScript, you can put a string or strings right into this element. For more on that, see the full documentation.)

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

You're ready to start typing!

Simple Usage

At its simplest use, just create a new TypeIt instance, pass an empty element, and define your options.

Example:

  new TypeIt('.type-it', {
    strings: ['Enter your string here!', 'Another string!']
  });

Advanced Usage

To control a typewriter effect to the smallest character, pause, speed, or more, there are six companion functions available. Simply chain them together on an instance of TypeIt, and your chain will execute. You'll be able to create a dynamic, realistic narrative with just a few lines of code.

For example:

  new TypeIt('.type-it', {
    speed: 900,
    lifeLike: false,
    autoStart: false
  })
  .type('I am typing slowly,')
  .options({speed: 100})
  .type('but now I am typing pretty fasst')
  .delete(2)
  .type('t!');

Companion Functions

Options

You can modify the options for the plugin by passing in JSON.

There are a number of options you may use to customize TypeIt. For more details on these options, view the full documentation.

Contributions

Please do! The code is available on Github. Spin it up, make a PR, and let's improve TypeIt together!