---
title: "Simple whiteboard"
description: "A whiteboard in React and Vue with buttons for the tools, undo, redo, zoom, files and images, on a board with sticky notes, shapes, arrows and a pen line."
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/editor/whiteboard/examples/simple"
---

# Simple whiteboard

A whiteboard in React and Vue with buttons for the tools, undo, redo, zoom, files and images, on a board with sticky notes, shapes, arrows and a pen line.

A whiteboard in React and Vue, with buttons for the tools, undo and redo, the zoom and fitting all shapes into view. The color buttons color the selected shapes and the shapes you add next, and the arrow buttons change the lines, dashes and heads of the selected arrows and the arrows you add next. The demo adds `pink` to the board's colors. Export saves the board to a JSON file, and Import opens one, in place of the board or added to it. PNG and SVG save the selected shapes, or the whole board, as an image, and Copy copies them as a PNG. Image adds image files, which you can also paste or drop on the board. The demo has no server, so it keeps them in the board as data URLs. The board starts with sticky notes, shapes, arrows and a pen line. Press the key of a tool, like N for a note, to choose it.

> **Interactive demo:** [Whiteboard](https://embed-pro.tiptap.dev/preview/Extensions/Whiteboard)