Text Typing Animations with Real-time Markdown/HTML Rendering - TypeMorph

Authorjohnny-bousaab

Last UpdateDecember 29, 2025

LicenseMIT

Features:

Flexible Typing Engine: Character-by-character rendering with configurable speed and chunk size.
Multiple Looping Modes: Supports both clear and backspace loop styles with customizable iteration counts and delays between cycles.
Markdown Rendering: Parses markdown syntax using Marked library with inline and block-level support for rich text formatting.
HTML Sanitization: Automatically sanitizes HTML content using DOMPurify to prevent XSS attacks while preserving safe markup.
Smart Auto-Scrolling: Detects user scroll interactions and automatically scrolls to show new content during typing animations.
Cursor Customization: Built-in blinking cursor with configurable character, color, and animation timing via CSS classes.
Promise-Based API: Async methods for type, loop, stop, and destroy operations enable sequential animation chains.
Event Callbacks: Lifecycle hooks for stop, finish, and destroy events.

See It In Action:

Use Cases:

AI Chatbots: Animate streaming responses from language models with markdown formatting and code block support for natural conversational experiences.
Landing Pages: Create modern hero sections that cycle through key features or commands with backspacing transitions between phrases.
Product Demo Sections: Showcase code examples or terminal commands with realistic typing speeds to draw attention to technical capabilities.
Email Campaign Headers: Build promotional banners that loop through benefit statements with smooth transitions.

How To Use It:

1. Install TypeMorph with NPM and import it into your project.

# NPM
$ npm install typemorphjs

import TypeMorph from "typemorphjs";

2. Or load the UMD version (Includes parsers) in your HTML document.

<!-- Local -->
<script src="./dist/typemorph.umd.min.js"></script>
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/typemorphjs/dist/typemorph.umd.min.js"></script>

3. Create a container element where the typed text will appear:

<div id="typing-target"></div>

4. Initialize the library and start a basic animation.

// Get reference to the target element
const targetElement = document.getElementById("typing-target");
// Initialize TypeMorph with configuration
const typer = new TypeMorph({
  parent: targetElement,
});
// Start typing animation
typer.type("Hello world!");

5. This example demonstrates how to handle streaming Markdown rendering:

const typer = new TypeMorph({
  parent: document.getElementById("typing-target"),
  parseMarkdown: true,
  markdownInline: true
});
// Type markdown - renders as formatted HTML
typer.type("**This is real fun** with *italic* and `code`");

6. Create sequential animation flow:

const typer = new TypeMorph({
  parent: document.getElementById("typing-target"),
  loopCount: 1,                      // Single loop iteration
  loopType: "backspace",             // Backspace when looping
  loopFinalBehavior: "remove",       // Remove text after final loop
  loopEndDelay: 500                  // Delay before backspacing
});
// Chain multiple animations using async/await
await typer.loop("**This is real fun**");
await typer.loop("**I want more**", { 
  loopFinalBehavior: "keep"  // Override: keep this text visible
});

7. All configuration options:

text: Optional initial text for this instance.
parent: The target element or its id where the text will appear.
speed: Delay in milliseconds per character (or chunk).
chunkSize: Number of characters typed in one iteration.
loopCount: Number of loops before stopping.
loopType: Defines how text is removed between loops ("clear" or "backspace").
loopFinalBehavior: Defines behavior at the final loop ("keep" or "remove").
loopStartDelay: Delay before restarting the typing after clearing/backspacing.
loopEndDelay: Delay after typing finishes, before starting backspacing/clearing.
backspaceSpeed: Delay in milliseconds per character when backspacing.
showCursor: Shows a blinking cursor (|) at the end of the text.
cursorChar: The character used for the cursor.
parseMarkdown: If true, parses markdown syntax into HTML (implies parseHtml = true).
markdownInline: Parses markdown inline, avoiding unwanted block wrappers for short text.
parseHtml: Whether to interpret HTML in the text.
markdownParse: Custom markdown parser function.
hideCursorOnFinishTyping: Automatically hides the cursor when typing completes (if not looping).
autoScroll: Automatically scrolls the parent element to end while typing.
scrollContainer: Custom scroll container. If not provided, the current typing parent is the target for autoscroll.
scrollInterval: Number of chunks typed before auto-scroll triggers.
smoothScroll: Enable smoth scrolling.
clearBeforeTyping: If true, clears the parents text before typing new text.
htmlSanitize: Custom HTML sanitizer function.
onStop: Called when a typing operation is stopped manually via .stop().
onFinish: Called when typing completes naturally.
onDestroy: Called when the instance is destroyed and all resources are cleaned up.

const typer = new TypeMorph({
  text: null,
  parent: null,
  speed: 50,
  chunkSize: 1,
  loopCount: Infinity,
  loopType: "backspace",
  loopFinalBehavior: "keep",
  loopStartDelay: 300, 
  loopEndDelay: 800, 
  backspaceSpeed: 50,
  showCursor: true,
  cursorChar: "|",
  parseMarkdown: false,
  markdownInline: false, 
  parseHtml: true,
  markdownParse: null,
  hideCursorOnFinishTyping: true,
  autoScroll: true,
  scrollContainer: null,
  scrollInterval: 1, 
  smoothScroll: false,
  clearBeforeTyping: true,
  htmlSanitize: null, 
  onStop: (instance) => {}, 
  onFinish: (instance) => {}, 
  onDestroy: (instance) => {},
});

8. API methods.

type(text, parent, options): Types the provided text into the target element once. Returns a Promise.
loop(text, parent, options): Starts looping typing animation using the configured loopType. Returns a Promise.
backspace(count, parent, options): Backspaces the provided number of characters (or all if count is null) from the target element once.
stop(): Gracefully stops any ongoing typing or looping operation. Returns a Promise.
destroy(): Stops all operations, removes timers, event listeners, and the cursor.
isTyping(): Returns whether the instance is currently typing, looping or backspacing.
getCurrentLoop(): Returns the current loop iteration index.

Alternatives

Typed.js: More mature with a larger community, but a heavier footprint and less flexible markdown integration.
TypeIt: Offers more built-in animation styles and easier chaining syntax, but lacks native markdown parsing capabilities.
streamdown: A drop-in replacement for react-markdown, designed for AI-powered streaming.

FAQs:

Q: Does TypeMorph work on mobile devices?
A: Yes, the library is fully compatible with mobile browsers. The auto-scroll feature detects touch-based scrolling and disables automatic scrolling when users manually interact with the content.

Q: How do I handle dynamically added content after initialization?
A: Call the type() or loop() methods again with new text. Set clearBeforeTyping to false in the options if you want to append rather than replace existing content.

Q: Can I use custom markdown or HTML parsers instead of the bundled libraries?
A: Yes, provide your own parser function via the markdownParse option or sanitizer via the htmlSanitize option.

Q: Why does my inline markdown create unexpected line breaks?
A: Set markdownInline to true when using parseMarkdown. This prevents Marked from wrapping content in block-level paragraph tags that cause layout issues.

Changelog:

v1.1.0 (12/29/2025)

Add direct backspace feature

v1.0.4 (12/07/2025)

add smoothScroll config

v1.0.3 (12/07/2025)

Update dependencies

v1.0.2 (11/30/2025)

Add scrollContainer option

Text Typing Animations with Real-time Markdown/HTML Rendering – TypeMorph