---
title: "Whiteboard arrows"
description: "Connect shapes on a whiteboard with arrows, and give the arrows labels, curved or bent lines, dashes and other heads."
canonical_url: "https://tiptap.dev/docs/editor/whiteboard/guides/arrows"
---

# Whiteboard arrows

Connect shapes on a whiteboard with arrows, and give the arrows labels, curved or bent lines, dashes and other heads.

An arrow connects two shapes, or runs between free points on the board. An end that connects a shape follows the shape when it moves or changes its size.

## Connect shapes

With the `arrow` tool, users draw an arrow with a drag. Each end connects the shape under it, except a pen line, or stays free on the board. A connected end aims at the spot of the shape where the drag started or ended, and stops on the shape's edge. Near the middle of the shape, it aims at the middle. The end handles of a selected arrow move its ends the same way. While an end is dragged, the shape that it would connect has `data-arrow-target`, for your CSS.

`insertShape` adds an arrow between shapes, between points, or from a shape to a point:

```js
editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toId: 'plan' })
editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toX: 400, toY: 300 })
```

An end with the id of a shape on the board sits on the edge of that shape, where the line meets it on its way to the end's anchor: `fromAnchorX` and `fromAnchorY`, or `toAnchorX` and `toAnchorY`, from 0 to 1 in the shape's box. The default, 0.5, aims at the middle. An end without a shape sits at its point, `fromX` and `fromY` or `toX` and `toY`. When a connected shape is deleted, the end stays where it touched the shape. See [`ArrowEndAttributes`](https://tiptap.dev/docs/editor/whiteboard/api-reference/types.md#arrowendattributes).

## Labels

The paragraphs of an arrow are its label, which sits in the middle of its line. The line leaves a gap around the label. A double click on an arrow, or Enter while it is the only selected shape, edits the label. An arrow without text shows no label.

To start a board with a label, give the arrow a paragraph:

```js
import { boardContent, stickyNoteContent } from '@tiptap-pro/extension-whiteboard'

const content = boardContent([
  stickyNoteContent({ id: 'idea', x: 0, y: 0, text: 'An idea' }),
  stickyNoteContent({ id: 'plan', x: 400, y: 0, text: 'A plan' }),
  {
    type: 'arrow',
    attrs: { id: 'idea-to-plan', fromId: 'idea', toId: 'plan' },
    content: [{ type: 'paragraph', content: [{ type: 'text', text: 'leads to' }] }],
  },
])

editor.commands.setContent(content)
```

Like the text of other shapes, a label has a `fontSize` and a `font`.

## Lines and heads

These styles change how an arrow looks:

| Style           | Values                                          | Default    |
| --------------- | ----------------------------------------------- | ---------- |
| `arrowKind`     | `straight`, `curved` and `elbow`                | `straight` |
| `dash`          | `solid`, `dashed` and `dotted`                  | `solid`    |
| `arrowheads`    | `none`, `end` and `both`                        | `end`      |
| `arrowheadKind` | `triangle`, `arrow`, `dot`, `diamond` and `bar` | `triangle` |

Set them like other styles, for the selected arrows and the arrows added later, or as attributes of one arrow:

```js
editor.commands.setShapeStyle({ name: 'arrowKind', value: 'elbow' })
editor.commands.insertShape({ type: 'arrow', fromId: 'idea', toId: 'plan', dash: 'dashed' })
```

A curved or elbow arrow leaves and enters each shape through the side nearest to the spot where its end was dropped, and goes around the shapes when it has to. An end dropped near the middle of its shape takes the side that makes the line simplest. With both ends there, the arrow runs between the sides that face each other. An elbow turns at right angles, and a curve bends smoothly along the same way. When the shapes are too close for that, the arrow is straight. `arrowheads` decides which ends have a head, and `arrowheadKind` how the heads look.

Arrows draw their lines and heads in the current color, so your CSS sets their `color`. See [Styling](https://tiptap.dev/docs/editor/whiteboard/api-reference/styling.md#parts-of-shapes) for the label and the other parts of an arrow.

## Next steps

- Choose the styles of new shapes with [`setShapeStyle`](https://tiptap.dev/docs/editor/whiteboard/guides/shapes-and-tools.md#styles-for-new-shapes)
- See all [commands](https://tiptap.dev/docs/editor/whiteboard/api-reference/commands.md)