# How to Add Callout/Note Boxes with Different Types in Tiptap: Complete Implementation Guide

> 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.

- Repository: [Hung Hoang/reactjs-tiptap-editor](https://github.com/hunghg255/reactjs-tiptap-editor)
- Tags: how-to-guide
- Published: 2026-03-03

---

**The `reactjs-tiptap-editor` library provides a built-in Callout extension that enables you to insert styled note boxes with configurable semantic types (note, tip, warning, caution, etc.) via the `setCallout` command and `RichTextCallout` toolbar component.**

Adding visually distinct callout or note boxes to your Tiptap editor enhances content readability and user engagement. The `hunghg255/reactjs-tiptap-editor` repository ships with a dedicated **Callout** extension that supports multiple predefined types out of the box. This guide walks you through registering the extension, rendering the UI components, and customizing callout types to match your application's design system.

## Registering the Callout Extension

The core logic for the callout node resides in [`src/extensions/Callout/Callout.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/Callout.ts). This file defines the **Tiptap node specification**, including the three primary attributes—`type`, `title`, and `body`—along with the `setCallout` command used to insert nodes programmatically.

To enable callouts in your editor, import the extension from the `callout` submodule and append it to your extensions array:

```tsx
// App.tsx or your editor configuration file
import { Callout } from 'reactjs-tiptap-editor/callout';

const extensions = [
  // ... other extensions (StarterKit, etc.)
  Callout,
];

```

The extension automatically handles **HTML parsing and serialization**, ensuring callouts are preserved when loading or saving editor content.

## Rendering the Toolbar Interface

To allow users to create callouts interactively, render the `RichTextCallout` component in your toolbar. Located at [`src/extensions/Callout/components/RichTextCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/RichTextCallout.tsx), this component provides a dialog interface for selecting the callout type, entering a title, and writing the body content.

```tsx
// Inside your toolbar component
import { RichTextCallout } from 'reactjs-tiptap-editor/callout';

export const MyToolbar = () => (
  <div className="flex gap-2">
    {/* other toolbar buttons */}
    <RichTextCallout />
  </div>
);

```

When clicked, the component opens a modal that lets users choose from five predefined types: `note`, `tip`, `important`, `warning`, and `caution`. Upon confirmation, it executes the `setCallout` command with the selected attributes.

## Inserting Callouts Programmatically

You can bypass the UI and insert callouts directly via the editor chain API. This is useful for automated content generation or custom button implementations:

```tsx
// Anywhere you have access to the editor instance
editor
  .chain()
  .focus()
  .setCallout({
    type: 'warning',
    title: 'Heads-up',
    body: 'Check this configuration before proceeding!'
  })
  .run();

```

The `setCallout` command accepts an object matching the node attributes defined in [`Callout.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/Callout.ts). If a callout is already selected, the command updates its attributes; otherwise, it inserts a new node at the current cursor position.

## In-Place Editing with Bubble UI

For editing existing callouts without reopening the main toolbar, use the `RichTextBubbleCallout` component. This floating interface appears when a user selects a callout node, allowing quick modifications to the type, title, or body content.

```tsx
import { RichTextBubbleCallout } from 'reactjs-tiptap-editor/bubble';

// Place inside your editor container alongside other bubble menus
<RichTextBubbleCallout />

```

The bubble component interacts with the **React Node View** defined in [`src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx), which renders the actual styled box with appropriate colors, borders, and icons based on the `type` attribute.

## Customizing Callout Types

To extend the default type list, modify the `CALLOUT_TYPES` constant in both the toolbar component and the node view renderer.

First, update the type definition in [`src/extensions/Callout/components/RichTextCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/RichTextCallout.tsx):

```tsx
const CALLOUT_TYPES = [
  { value: 'note', label: 'Note', icon: 'Info' },
  { value: 'tip', label: 'Tip', icon: 'Lightbulb' },
  { value: 'warning', label: 'Warning', icon: 'AlertTriangle' },
  // Add your custom type
  { value: 'info', label: 'Info', icon: 'Info' },
] as const;

```

Then, add the corresponding styling configuration in [`src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx):

```tsx
const CALLOUT_TYPES = [
  // ... existing entries
  {
    value: 'info',
    label: 'Info',
    icon: Info,
    color: '#0ea5e9',
    background: '#0ea5e91f',
  },
] as const;

```

After rebuilding your application, the new type appears in the creation dialog and renders with the specified color scheme and icon.

## Summary

- **The Callout extension** in `reactjs-tiptap-editor` provides a complete node implementation with `type`, `title`, and `body` attributes.
- **Register the extension** by importing from `'reactjs-tiptap-editor/callout'` and adding it to your editor's extension array.
- **Use `RichTextCallout`** for the toolbar UI that opens a dialog to create new callouts via the `setCallout` command.
- **Use `RichTextBubbleCallout`** to enable in-place editing of existing callout nodes.
- **Customize types** by editing the `CALLOUT_TYPES` array in both [`RichTextCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/RichTextCallout.tsx) and [`NodeViewCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/NodeViewCallout.tsx) to add new semantic variants with custom colors and icons.

## Frequently Asked Questions

### How do I add a custom callout type not included by default?

Edit the `CALLOUT_TYPES` constant in both [`src/extensions/Callout/components/RichTextCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/RichTextCallout.tsx) and [`src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx). Add your new type with a unique value, label, icon reference, and color styling, then rebuild your application.

### Can I edit an existing callout without using the toolbar button?

Yes. Import and render the `RichTextBubbleCallout` component from `'reactjs-tiptap-editor/bubble'`. This provides a floating menu that appears when a callout node is selected, allowing users to modify the type, title, and body without navigating back to the main toolbar.

### What attributes does the Callout node support?

According to the source in [`src/extensions/Callout/Callout.ts`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/Callout.ts), the node accepts three attributes: `type` (string identifying the semantic variant), `title` (string for the callout header), and `body` (string or rich content for the main text). These are set via the `setCallout` command or the provided UI components.

### Where is the callout styling defined in the source code?

The visual rendering logic resides in [`src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx`](https://github.com/hunghg255/reactjs-tiptap-editor/blob/main/src/extensions/Callout/components/NodeViewCallout/NodeViewCallout.tsx). This file maps each `type` value to specific color values, background tints, and icon components, determining how each callout variant appears in the editor canvas.