---
title: "Duplicate Button"
description: "Duplicate selected nodes and blocks in Tiptap editors with intelligent node detection, keyboard shortcuts, and accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/duplicate-button"
---

# Duplicate Button

Duplicate selected nodes and blocks in Tiptap editors with intelligent node detection, keyboard shortcuts, and accessibility support.

A fully accessible duplicate button for Tiptap editors. Clone selected nodes or blocks in the editor with keyboard shortcut support and intelligent content copying.

> **Interactive demo:** [duplicate button](https://template.tiptap.dev/preview/tiptap-ui/duplicate-button)

## Installation

Add the component via the Tiptap CLI:

```bash
npx @tiptap/cli@latest add duplicate-button
```

## Components

### `<DuplicateButton />`

A prebuilt React component that duplicates nodes in the editor.

#### Usage

```tsx
export default function MyEditor() {
  return (
    <DuplicateButton
      editor={editor}
      text="Duplicate"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDuplicated={() => console.log('Node duplicated!')}
    />
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                        |
| --------------------- | ---------------- | ----------- | -------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                         |
| `text`                | `string`         | `undefined` | Optional text label for the button                 |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when duplication is not available |
| `onDuplicated`        | `() => void`     | `undefined` | Callback fired after a successful duplication      |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)     |

## Hooks

### `useDuplicate()`

A custom hook to build your own duplicate button with full control over rendering and behavior.

#### Usage

```tsx
function MyDuplicateButton() {
  const { isVisible, handleDuplicate, canDuplicate, label, shortcutKeys, Icon } = useDuplicate({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDuplicated: () => console.log('Node duplicated!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleDuplicate} disabled={!canDuplicate} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                         |
| --------------------- | ---------------- | ----------- | --------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                          |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if duplication cannot be performed |
| `onDuplicated`        | `() => void`     | `undefined` | Callback fired after successful duplication         |

#### Return Values

| Name              | Type            | Description                                        |
| ----------------- | --------------- | -------------------------------------------------- |
| `isVisible`       | `boolean`       | Whether the button should be rendered              |
| `canDuplicate`    | `boolean`       | If a node can be duplicated                        |
| `handleDuplicate` | `() => boolean` | Function to duplicate the selected node            |
| `label`           | `string`        | Accessible label text for the button               |
| `shortcutKeys`    | `string`        | Keyboard shortcut (Cmd/Ctrl + D)                   |
| `Icon`            | `React.FC`      | Icon component for the duplicate button (CopyIcon) |

## Utilities

### `canDuplicateNode(editor)`

Checks if a node can be duplicated in the current editor state.

```tsx
import { canDuplicateNode } from '@/components/tiptap-ui/duplicate-button'

const canDuplicate = canDuplicateNode(editor)
```

### `duplicateNode(editor)`

Programmatically duplicates the selected node or block.

```tsx
import { duplicateNode } from '@/components/tiptap-ui/duplicate-button'

const success = duplicateNode(editor)
if (success) {
  console.log('Node duplicated successfully!')
}
```

## Keyboard Shortcuts

The duplicate button supports the following keyboard shortcut:

- **Cmd/Ctrl + D**: Duplicate the selected node or block

The shortcut is automatically registered when using either the `<DuplicateButton />` component or the `useDuplicate()` hook. Note that this overrides the browser's default bookmark behavior when the editor is focused.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `copy-icon` (icon)