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

TypeMorph is a JavaScript text animation library that creates smooth, realistic typing animations with advanced features like streaming Markdown output, HTML rendering, and intelligent auto-scrolling.

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.
• scrollInterval: Number of chunks typed before auto-scroll triggers.
• 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,
  scrollInterval: 1, 
  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.
• 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.

The post Text Typing Animations with Real-time Markdown/HTML Rendering – TypeMorph appeared first on CSS Script.