Awesome Open Source
Awesome Open Source

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element.

npm version JavaScript Style Guide Build Status Dependency Status


Size (It's really tiny)

  • Minimized: 2.9KB
  • Gziped: 1.1KB


Library can be easily installed via either NPM or Bower:

npm i tinytyper --save


bower i tinytyper --save


Basic setup looks like this:

import TinyTyper from 'tinytyper';

const el       = document.querySelector('.text-el')
const options  = { /* . . . */ }
const instance = new TinyTyper(el, options)

In case you need to run animation again:


Available options:

Option Default Description
text innerText of specifed element Sets a text to be displayed
textSpeed 95 Defines text speed animation
cursor ▌ Defines current cursor symbol
blinkSpeed 0.05 Defines blink speed of a cursor
cursorClass tiny-typer-cursor A CSS class for cursor element
textClass tiny-typer-text A CSS class for text element
staticCursor false Makes cursor static (disables blinking)
staticText false Makes text static (disables animation)


Contributions are welcome. Feel free to create issues and PRs



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (69,965
typing (39