# reactjs-tiptap-editor | Hung Hoang | Knowledge Base | Instagit

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs

GitHub Stars: 672

Repository: https://github.com/hunghg255/reactjs-tiptap-editor

---

## Articles

### [How to Handle TipTap Editor State Management with React Context in reactjs-tiptap-editor](/hunghg255/reactjs-tiptap-editor/how-to-handle-editor-state-with-react-context)

Learn to manage TipTap editor state in React using Context. Access and control your editor instance easily with the useEditorInstance hook, avoiding prop-drilling.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add Custom Keyboard Shortcuts for Tiptap Editor Actions](/hunghg255/reactjs-tiptap-editor/how-to-add-custom-keyboard-shortcuts)

Learn how to add custom keyboard shortcuts for Tiptap editor actions using shortcutKeys and addKeyboardShortcuts in your extension configuration for seamless editing.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Implement Search and Replace Functionality in Tiptap Editor](/hunghg255/reactjs-tiptap-editor/how-to-implement-search-and-replace)

Learn to implement search and replace in Tiptap editor using the hunghg255/reactjs-tiptap-editor repository. This guide details its ProseMirror plugin, storage system, and React UI for a seamless experience.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Customize the Editor Theme and Dark Mode Using Shadcn UI in Reactjs-Tiptap-Editor](/hunghg255/reactjs-tiptap-editor/how-to-customize-editor-theme-dark-mode)

Customize your reactjs-tiptap-editor theme and dark mode with Shadcn UI. Learn how to update CSS custom properties using themeActions for a personalized look.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add File Attachment Handling to Tiptap Editor: A Complete Guide](/hunghg255/reactjs-tiptap-editor/how-to-add-file-attachment-handling)

Learn to add file attachment handling to your Tiptap editor with our guide. Utilize the built-in Attachment extension for streamlined uploads and styled nodes.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Configure Table Features (Merge Cells & Resize Columns) in reactjs-tiptap-editor](/hunghg255/reactjs-tiptap-editor/how-to-configure-table-features)

Learn to merge cells and resize columns in reactjs-tiptap-editor. This guide shows how to enable table features and efficiently manage table content with simple code.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add Callout/Note Boxes with Different Types in Tiptap: Complete Implementation Guide](/hunghg255/reactjs-tiptap-editor/how-to-add-callout-note-boxes)

Learn to add callout note boxes in Tiptap easily. This guide covers implementation with different types using the built-in Callout extension and RichTextCallout component.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Create Collapsible Drawer/Accordion Blocks in ReactJS Tiptap Editor](/hunghg255/reactjs-tiptap-editor/how-to-create-collapsible-drawer-accordion-blocks)

Learn how to build collapsible drawer and accordion blocks in ReactJS Tiptap Editor. Extend the Drawer node and add a toggle command for interactive content.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add Custom Emoji Picker Support to Tiptap Editor in React](/hunghg255/reactjs-tiptap-editor/how-to-add-custom-emoji-picker-support)

Learn how to add custom emoji picker support to your Tiptap editor in React. Replace the default picker with your own React component to insert emojis seamlessly. Explore the example repository for guidance.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Implement @Mentions with Custom User Lists in the React Tiptap Editor](/hunghg255/reactjs-tiptap-editor/how-to-implement-mentions-with-custom-user-lists)

Learn to add custom @mentions to your React Tiptap editor. Configure the Mention extension with a suggestion object and filter users from your list for a seamless experience.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Embed Twitter/X Tweets in Editor Content with reactjs-tiptap-editor](/hunghg255/reactjs-tiptap-editor/how-to-embed-twitter-x-tweets)

Easily embed Twitter X tweets in your editor content using reactjs-tiptap-editor. Learn how the Twitter extension converts URLs and renders tweets with react-tweet.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Render LaTeX/KaTeX Math Equations in Tiptap: A Complete Guide](/hunghg255/reactjs-tiptap-editor/how-to-render-latex-katex-math-equations)

Learn to render LaTeX KaTeX math equations in Tiptap with our complete guide. Discover client-side solutions for Tiptap using custom node views and real-time previews.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Embed Excalidraw Drawings in the React TipTap Editor: A Complete Implementation Guide](/hunghg255/reactjs-tiptap-editor/how-to-embed-excalidraw-drawings)

Learn how to embed Excalidraw drawings in your React TipTap editor with this guide. The dedicated extension renders static SVG previews and offers an interactive editing canvas.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add Mermaid Diagram Support for Flowcharts in the React TipTap Editor](/hunghg255/reactjs-tiptap-editor/how-to-add-mermaid-diagram-support)

Add Mermaid diagram support for flowcharts in your React TipTap editor. Render flowcharts as SVG images with this simple configuration guide.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Export Editor Content to Word (.docx) in React Tiptap Editor](/hunghg255/reactjs-tiptap-editor/how-to-export-editor-content-to-word-docx)

Easily export React Tiptap editor content to Word (.docx) format. Learn how the ExportWord extension serializes content and triggers a browser download for seamless document integration.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Export Editor Content to PDF with Proper Styling in ReactJS Tiptap Editor](/hunghg255/reactjs-tiptap-editor/how-to-export-editor-content-to-pdf)

Learn to export Tiptap editor content to PDF with custom styling in ReactJS. This guide shows how to use the Export PDF extension for styled, printable PDFs.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Customize the Slash Command Menu with New Commands in reactjs-tiptap-editor](/hunghg255/reactjs-tiptap-editor/how-to-customize-slash-command-menu)

Learn how to customize the slash command menu in reactjs-tiptap-editor by adding new commands. Extend the default functionality and enhance your editor experience effortlessly.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Add Custom Bubble Menu Actions for Specific Node Types in Tiptap](/hunghg255/reactjs-tiptap-editor/how-to-add-custom-bubble-menu-actions-for-node-types)

Learn how to add custom bubble menu actions for specific node types in Tiptap. Extend BubbleOptions and implement button view factories to customize your editor experience.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Implement Real-Time Collaboration Using Yjs with reactjs-tiptap-editor](/hunghg255/reactjs-tiptap-editor/how-to-implement-real-time-collaboration-using-yjs)

Learn to implement real time collaboration with Yjs in your reactjs-tiptap-editor. Integrate Yjs for seamless multi-user editing and synchronization.

- Tags: how-to-guide
- Published: 2026-03-03

### [How to Configure the RichTextProvider with Custom Tiptap Extensions](/hunghg255/reactjs-tiptap-editor/how-to-configure-richtextprovider-with-custom-tiptap-extensions)

Learn to configure RichTextProvider with custom Tiptap extensions by passing a pre-configured Editor instance via the editor prop. Access extensions seamlessly in your React Tiptap editor.

- Tags: how-to-guide
- Published: 2026-03-03