---
title: "Copy to Clipboard Button"
description: "Copy selected content or entire nodes from Tiptap editors to clipboard with formatting preservation, keyboard shortcuts, and accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/copy-to-clipboard-button"
---

# Copy to Clipboard Button

Copy selected content or entire nodes from Tiptap editors to clipboard with formatting preservation, keyboard shortcuts, and accessibility support.

A fully accessible copy to clipboard button for Tiptap editors. Copy selected content or entire nodes to the clipboard with optional formatting preservation and keyboard shortcut support.

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

## Installation

Add the component via the Tiptap CLI:

```bash
npx @tiptap/cli@latest add copy-to-clipboard-button
```

## Components

### `<CopyToClipboardButton />`

A prebuilt React component that copies editor content to the clipboard.

#### Usage

```tsx
export default function MyEditor() {
  return (
    <CopyToClipboardButton
      editor={editor}
      text="Copy"
      copyWithFormatting={true}
      hideWhenUnavailable={true}
      showShortcut={true}
      onCopied={() => console.log('Content copied to clipboard!')}
    />
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                      |
| --------------------- | ---------------- | ----------- | ------------------------------------------------ |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                       |
| `text`                | `string`         | `undefined` | Optional text label for the button               |
| `copyWithFormatting`  | `boolean`        | `true`      | Whether to preserve formatting when copying      |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when copying is not available   |
| `onCopied`            | `() => void`     | `undefined` | Callback fired after a successful copy operation |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)   |

## Hooks

### `useCopyToClipboard()`

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

#### Usage

```tsx
function MyCopyToClipboardButton() {
  const { isVisible, handleCopyToClipboard, canCopyToClipboard, label, shortcutKeys, Icon } =
    useCopyToClipboard({
      editor: myEditor,
      copyWithFormatting: false,
      hideWhenUnavailable: true,
      onCopied: () => console.log('Content copied!'),
    })

  if (!isVisible) return null

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

#### Props

| Name                  | Type             | Default     | Description                                     |
| --------------------- | ---------------- | ----------- | ----------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                      |
| `copyWithFormatting`  | `boolean`        | `true`      | Whether to preserve formatting when copying     |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if copying cannot be performed |
| `onCopied`            | `() => void`     | `undefined` | Callback fired after successful copy operation  |

#### Return Values

| Name                    | Type                     | Description                           |
| ----------------------- | ------------------------ | ------------------------------------- |
| `isVisible`             | `boolean`                | Whether the button should be rendered |
| `canCopyToClipboard`    | `boolean`                | If content can be copied to clipboard |
| `handleCopyToClipboard` | `() => Promise<boolean>` | Function to copy content to clipboard |
| `label`                 | `string`                 | Accessible label text for the button  |
| `shortcutKeys`          | `string`                 | Keyboard shortcut (Cmd/Ctrl + C)      |
| `Icon`                  | `React.FC`               | Icon component for the copy button    |

## Utilities

### `canCopyToClipboard(editor)`

Checks if content can be copied in the current editor state.

```tsx
import { canCopyToClipboard } from '@/components/tiptap-ui/copy-to-clipboard-button'

const canCopy = canCopyToClipboard(editor)
```

### `copyToClipboard(editor, copyWithFormatting?)`

Programmatically copies content to the clipboard.

```tsx
import { copyToClipboard } from '@/components/tiptap-ui/copy-to-clipboard-button'

const success = await copyToClipboard(editor, true) // With formatting
const plainSuccess = await copyToClipboard(editor, false) // Plain text only
```

### `writeToClipboard(textContent, htmlContent?)`

Low-level utility to write content directly to the clipboard.

```tsx
import { writeToClipboard } from '@/components/tiptap-ui/copy-to-clipboard-button'

await writeToClipboard('Plain text content')
await writeToClipboard('Plain text', '<p>HTML content</p>')
```

### `extractContent(editor, copyWithFormatting?)`

Extracts content from the current selection or node.

```tsx
import { extractContent } from '@/components/tiptap-ui/copy-to-clipboard-button'

const { textContent, htmlContent } = extractContent(editor, true)
console.log('Text:', textContent)
console.log('HTML:', htmlContent)
```

## Keyboard Shortcuts

The copy to clipboard button supports the following keyboard shortcut:

- **Cmd/Ctrl + C**: Copy selected content to clipboard

The shortcut is automatically registered when using either the `<CopyToClipboardButton />` component or the `useCopyToClipboard()` hook. Note that this overrides the browser's default copy 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)
- `sun-icon` (icon)