Tiptap Stagger Extension

A Tiptap extension that adds staggered animation to text as it appears in the editor. Perfect for AI editors, chatbots, and anywhere you want to create a typewriter-like effect with more visual polish.

Features

• Adds staggered animations to text as it's added to the editor
• Works with both text nodes and block nodes
• Lightweight with minimal dependencies

Installation

1# Using npm
2npm install @10play/tiptap-stagger
3
4# Using yarn
5yarn add @10play/tiptap-stagger
6
7# Using bun
8bun add @10play/tiptap-stagger

Usage

In React with @tiptap/react

1import { useEditor, EditorContent } from "@tiptap/react";
2import StarterKit from "@tiptap/starter-kit";
3import { StaggerExtension } from "@10play/tiptap-stagger";
4
5const Editor = () => {
6  const editor = useEditor({
7    extensions: [StarterKit, StaggerExtension],
8    content: "<p>Hello World!</p>",
9    editable: false, // Typically used in read-only mode for AI responses
10  });
11
12  return <EditorContent editor={editor} />;
13};

In Vue with @tiptap/vue-3

1<script setup>
2import { useEditor, EditorContent } from "@tiptap/vue-3";
3import StarterKit from "@tiptap/starter-kit";
4import { StaggerExtension } from "@10play/tiptap-stagger";
5
6const editor = useEditor({
7  extensions: [StarterKit, StaggerExtension],
8  content: "<p>Hello World!</p>",
9  editable: false,
10});
11</script>
12
13<template>
14  <EditorContent :editor="editor" />
15</template>

Configuration

The StaggerExtension accepts the following configuration options:

1StaggerExtension.configure({
2  enabled: true, // Enable or disable the stagger effect
3  animation: "default", // Currently only 'default' is supported
4});

You can also toggle the stagger effect on and off:

1// Enable stagger animation
2editor.commands.setStaggerEnabled(true);
3
4// Disable stagger animation
5editor.commands.setStaggerEnabled(false);

Demo

Check out the live demo on GitHub Pages to see the stagger effect in action.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by 10Play