Typr

A lightweight, declarative typewriter animation library built with vanilla JavaScript. No dependencies, no setup — just add attributes to your HTML.

🌏 Landing Page

https://chesteralejandro.github.io/typr

📦 Installation

CDN (Recommended)

Latest version

<script
	defer
	src="https://cdn.jsdelivr.net/npm/@chesteralejandro/typr/dist/typr.min.js"
></script>

Stable Version

<script
	defer
	src="https://cdn.jsdelivr.net/npm/@chesteralejandro/typr@1.0.0/dist/typr.min.js"
></script>

NPM

npm install @chesteralejandro/typr

❓ Why Typr?

• Declarative — configure entirely with HTML attributes; no extra JavaScript code required.
• Lightweight — ~5 KB, minimal footprint for your projects.
• Reusable — works on any HTML element with data-typr.
• Customizable — cursor symbol, typing speed, pauses, blinking, and more.
• Production-ready — npm package + CDN support.

✨ Features

• Pure vanilla JavaScript.
• Scoped using an IIFE (no global variable pollution).
• Fully configurable with data-* attributes.
• Dynamically injects cursor styles.
• Supports pause-on-hover.
• Loops through multiple phrases separated by |.

🛠️ Example Setup

<h1>I am a <span data-typr>Web Developer|Designer|Coder</span></h1>

Optional cursor symbol

<h1>I am a <span data-typr="_">Web Developer|Designer|Coder</span></h1>

⚙️ Attributes

Attribute	Description	Default	Example
data-typr	Required. Activates the typewriter animation. Optional value sets cursor symbol.	|	data-typr data-typr="_"
data-typr-color	Cursor color. Accepts any valid CSS color.	hsl(0,0%,7%)	data-typr-color="red"
data-typr-blink	Turns cursor blinking on/off.	on	data-typr-blink="off"
data-typr-speed	Typing speed per character in milliseconds.	100	data-typr-speed="50"
data-word-delay	Delay between words in milliseconds.	500	data-word-delay="800"
data-pause-delay	Delay after typing before deleting in milliseconds.	2000	data-pause-delay="3000"

💡 Notes

• The element's inner content must contain pipe-separated phrases: Web Developer | Designer | Coder.
• Hovering over the element pauses the animation automatically.

📂 Project Structure

typr/
├── dist/
│   ├── typr.js
│   └── typr.min.js
├── docs/
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   └── favicon.png
├── src/
│   └── typr.js
├── LICENSE
├── README.md
└── CHANGELOG.md