Typed Text

Highlight your Headings

or other textual content


The Typed Text Element allows you to create animated headings looking like a person would type them. You can use multiple lines of text, set the speed and play it in a loop (or not).

Typed Text is absolutely SEO friendly, with a structured fallback heading.

Usage Examples

  • Focus visitors on Heading.
  • News Tickers.
  • Animated Headings
  • ..

Typed Text Properties

  1. Display as: How should the typed text be displayed? As a heading or a "normal" text.
  2. Type Speed: Set the speed in milliseconds at which the text should be typed in.
  3. Play in Loop: Should the content be played more then once?
  4. Show Cursor: Should the fake "cursor" shown while it's typing?
  5. Sentences: The content that should be typed in. Can be only one or multiple texts. 

See it in action

This is the first Sentence

This is the Second one

A way faster one

Way way way faster

One sentence with hidden Cursor

Generated HTML (Outline)

<div class="mame-typed-text" style="..">
   <div class="typed" data...>
     <div class="typed_strings">
         <!-- For SEO -->
          <h2>First sentence</h2>
      <!-- The typing content -->
      <h2>F |</h2>

Style / CSS Selectors

.mame-typed-text {
  /* All typed text elements */

.mame-typed-text .typed hX {
  /* The typed in text */


The Typed Text uses Typed.js, an open source JavaScript library.

References / Useful information

Was this article helpful?