ArrayKit

Collaborative Whiteboard

Sketch together over a direct connection between the two browsers, with no room to leave behind.

Collaborative Whiteboard

Sketch together over a direct connection between the two browsers, with no room to leave behind.

Strokes travel directly between the two browsers and are never stored. Closing the tab ends the session and the board is gone.

Send a file the same way

About Collaborative Whiteboard

Most shared whiteboards work by putting your drawing on someone else's server and giving you a room link. This connects the two browsers to each other instead: you swap a connection code once, over whatever chat you already trust, and the strokes travel directly between you. There is no room, no link that stays live, and nothing left behind when the tab closes. Six tools, six colours, an undo that only removes your own strokes, and exports to PNG, SVG or PDF. It works perfectly well on your own too, if you just want somewhere to sketch.

Features

  • Pen, highlighter, line, rectangle, ellipse and eraser
  • Strokes are shared as they are finished, in normalised coordinates
  • Undo removes your own last stroke, not the other person's
  • A late joiner is caught up with the board as it stands
  • Direct browser-to-browser connection, with no room to join and nothing in the middle
  • Incoming strokes are validated before they touch the canvas
  • Export as PNG, as vector SVG, or as a landscape PDF

How to use the Collaborative Whiteboard

  1. Draw straight away — nothing needs setting up to work alone
  2. To draw with someone, create an invitation code and send it to them
  3. They paste it, send back their reply code, and you connect
  4. Export the board as PNG, SVG or PDF when you are done

Example

Input

Invitation code created, pasted into a chat, reply code pasted back

Output

Connected · local network — both boards now show the same strokes.

The route line says whether the connection stayed on the local network.

Common errors & troubleshooting

  • The two browsers will not connect. — Either both networks sit behind a strict NAT, or this network blocks the local-name lookup two devices on the same Wi-Fi use to find each other. Trying from a different network usually settles which.
  • The other person sees an empty board. — The board as it stood is sent when the connection opens. Draw one more stroke to prompt a fresh sync if something was drawn during the handshake.
  • The connection code is very long. — It carries the network details needed to connect. Paste it as one block — a code broken across lines by a chat app will not decode.
  • My drawing vanished when I reloaded. — The board lives only in the page. Export it before closing, since there is nothing storing it anywhere.

Frequently asked questions

Where is the board stored?
Nowhere. It exists in the two browsers drawing on it and disappears when they close. That is the trade for a direct connection: nothing to leak, and nothing to come back to.
Can more than two people join?
No — it is a direct connection between two browsers. Three people would need a server to relay between them, which is exactly what this avoids.
Is the connection code sensitive?
It contains the network addresses your device can be reached at, so treat it like a phone number: send it to the person you are drawing with, not somewhere public.
Does the eraser really remove strokes?
It paints white over them, which is what you see. Undo removes a stroke properly, and it only ever removes your own.
Which export should I use?
SVG stays sharp at any size and is the best choice for anything you will reuse. PNG for pasting into a message, PDF for printing or attaching.

Related tools

  • P2P File Transfer — Send files straight from one browser to another over a direct connection.
  • Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
  • Image Cropper — Crop an image to any area or fixed aspect ratio and download it, in your browser.
  • Mermaid Diagram Renderer — Render Mermaid diagrams (flowcharts, sequence, gantt) to SVG in your browser.
  • Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
  • PDF to Images — Render PDF pages to PNG or JPG images you can download.
  • Image to PDF — Combine images into a single PDF (auto / portrait / landscape).

More Images tools

  • Image Optimizer — Re-encode and shrink images (JPEG/WebP/PNG), optionally resizing.
  • Image Format Converter — Convert images between PNG, JPEG and WebP entirely in your browser.
  • EXIF Viewer & Remover — View and strip EXIF metadata (including GPS) from photos — nothing is uploaded.
  • Base64 Image Encoder / Decoder — Convert images to Base64 Data URIs with ready-made HTML and CSS snippets, or decode a Data URI back to a downloadable image.
  • App Icon Generator — Turn one image into every iOS, macOS and Android app icon size — downloaded as a ZIP, in your browser.
  • Sprite Sheet CSS Animation Generator — Turn a sprite sheet into a copy-paste CSS @keyframes animation using steps(), with a live preview.
  • SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
  • Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.
  • Color Format Converter — Convert a color across HEX, RGB, HSL, HWB, LAB, LCH and OKLCH with a live swatch.
  • Barcode Generator — Generate EAN, UPC, Code 128 and Code 39 barcodes and download them as SVG or PNG.
  • Image Color Palette Extractor — Extract a dominant color palette from an image as HEX, RGB and HSL with CSS variables.
  • Flip & Rotate Image — Rotate by 90° and flip images horizontally or vertically, then download — in your browser.
  • Image Cropper — Crop an image to any area or fixed aspect ratio and download it, in your browser.
  • Image Watermark — Add a text or logo watermark to an image, anchored or tiled, with opacity and rotation.
  • Blur & Redact Image — Permanently blur, pixelate or black out parts of a screenshot before sharing it.
  • Round Image Corners — Clip photos to rounded rectangles or circles and export PNGs with transparent corners.
  • Color Blindness Simulator — See any image the way people with protanopia, deuteranopia or tritanopia see it.
  • Image DPI Changer — Set a PNG or JPEG’s DPI for print without recompressing a single pixel.
  • BlurHash Generator — Turn an image into a BlurHash string, and decode any hash back to a preview.
  • Placeholder Image Generator — Make placeholder images at any size, as SVG, PNG or a data URI.
  • ASCII Art Generator — Convert any image into ASCII art, with character sets, contrast and invert.
  • Image Filters — Apply grayscale, sepia, contrast, blur and more, then export the PNG and the CSS.
  • Image Splitter — Cut a picture into a grid of tiles and download them as a ZIP.
  • Image Merger — Combine images side by side, stacked or in a grid, with gaps and a background.

See all Images tools (35) · All tools