tiptap-extension-twemoji
1

Usage Guide

Welcome to the Usage Guide!
This page will walk you through installation and basic usage.

📦 Installation

Install the package with your preferred package manager:

pnpm add @raihancodes/tiptap-extension-twemoji-react

or

npm install @raihancodes/tiptap-extension-twemoji-react

⚡ Basic Example

Import the extension and add it to your editor:

import { useEditor } from "@tiptap/react";
import { StarterKit } from "@tiptap/starter-kit";
import { TwemojiExtension } from "@raihancodes/tiptap-extension-twemoji-react";

export default function Editor() {
  const editor = useEditor({
    extensions: [StarterKit, TwemojiExtension],
  });

  return <EditorContent editor={editor} />;
}

🖼️ Move the Twemoji sprite sheet to public/assets/

Download the image from here then move it to your public/assets/ folder. The image location can be anywhere in your public or on CDN, see here to adjust spriteUrl

🎉 Congratulations! Twemoji is now working in your editor.

You can start typing :smile , :hug: , XD , or paste any emoji, and see it rendered instantly.

🚀 Next Steps

  • 👉 Check out the Custom Emojis section to learn about how to add or upload Custom Emojis.
  • 👉 Check out the Deep Dive section to learn how to customize the extension—header, navigation, cell size, custom emojis, etc.