Typed Text

The rotating typewriter headline is a staple of landing pages. This plugin wraps the Typed.js library as a GrapesJS component, so it can be dropped in and configured without writing any JavaScript.

What it adds

A typed block and component, plus a typed-strings trait: a textarea where each row is one string in the rotation. Everything else is exposed as component properties, editable from the Settings panel.

Component properties

• Timing — type-speed, back-speed, start-delay and back-delay, all in milliseconds.
• Looping — loop, loop-count and shuffle.
• Erasing — smart-backspace deletes only what does not match the next string, while fade-out swaps backspacing for a fade, with fade-out-class and fade-out-delay.
• Cursor — show-cursor, cursor-char and auto-insert-css.
• content-type — html, or null for plain text.

Options

script points at the Typed.js build loaded asynchronously when the library is not already on the page. block and props extend the block definition and the component properties.

Good to know

Install as grapesjs-typed. MIT licensed.