Typr.js Library
A lightweight, declarative JavaScript library for smooth, customizable typewriter effects using a single required attribute.
Get Started GitHubA lightweight, declarative JavaScript library for smooth, customizable typewriter effects using a single required attribute.
Get Started GitHub📝 The pipe-separated phrases are placed inside the element.
<script defer src="https://cdn.jsdelivr.net/npm/@chesteralejandro/typr/dist/typr.min.js"></script>| Attribute | Description | Default Value | Sample |
|---|---|---|---|
data-typr |
Required attribute to activate the
animation.
• The element's inner content contains the pipe-separated phrases. • Optional value sets the cursor symbol. |
| |
data-typr="_"data-typr="✏️"
|
data-typr-color |
Optional cursor color. Accepts any valid CSS color value. | hsl(0, 0%, 7%) |
data-typr-color="red"data-typr-color="#6366f1"
|
data-typr-blink |
Toggle the cursor blinking animation on or off. | on |
data-typr-blink="off"
|
data-typr-speed |
Typing speed per character (milliseconds). | 100 ms |
data-typr-speed="50"
|
data-word-delay |
Delay between words (milliseconds). | 500 ms |
data-word-delay="800"
|
data-pause-delay |
Pause after fully typing before deleting (milliseconds). | 2000 ms |
data-pause-delay="3000"
|
📝 Hovering over the element will automatically pause the typing animation.
If you find this library useful, consider starring the repository and contributing to its development.
⭐ Star on GitHub