Blackboard

Native stylus and Apple Pencil drawing for Obsidian.

Blackboard adds a .blackboard file type with pressure-sensitive freehand drawing and palm rejection, and lets you draw directly inside Obsidian Canvas nodes and Markdown embeds — no separate editor to open first. It is built for iPad with Apple Pencil, and works on desktop with a mouse.

Features

• Pressure-sensitive drawing — Apple Pencil and stylus support with variable-width strokes via perfect-freehand.
• Draw in place — Pen-down draws immediately on a Canvas node or a Markdown embed; there is no click-to-open step.
• Palm rejection — A stylus always draws; a resting palm or finger never does. Touch is reserved for navigation (see below), so your hand can rest on the screen while you write.
• Touch navigation — In a standalone .blackboard view, one finger pans and two fingers pinch-zoom the infinite canvas; on desktop, hold Space and drag to pan. The stylus keeps drawing throughout.
• Pen, highlighter, eraser — Solid pen strokes, semi-transparent highlighter, and a stroke eraser.
• Blackboard or whiteboard — The board background is a single setting; keep it black or set it white (or any color) for a whiteboard.
• Shared floating toolbar — One toolbar follows the active drawing. Tool, color, and brush size are global across every drawing on the page; it collapses to a corner pill.
• Per-embed sizing — Each embed's display size is controlled by its host (the Canvas node's geometry, or the |WxH size on a Markdown embed), never baked into the file. Resizing scales the drawing without distortion; strokes are clipped to the node and never resize it.
• Automatic SVG export (optional) — Export a vector .svg alongside each drawing on save.
• Plain-JSON files — .blackboard files are human-readable JSON that diffs cleanly in Git.

How it compares

Blackboard focuses on fast, native pen drawing that lives inside your notes and canvases. Excalidraw is a full diagramming tool; Ink is another handwriting plugin. They're built for different things.

Need rich diagramming? Use Excalidraw — it's excellent at it.

Installation

Manual

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Create the folder <vault>/.obsidian/plugins/blackboard/.
3. Copy the three files into it.
4. Enable Blackboard in Settings → Community plugins.

BRAT

1. Install BRAT.
2. Add Beta Plugin → jameswolensky/obsidian-blackboard.
3. Enable Blackboard in Settings → Community plugins.

Usage

Create a drawing

Run Blackboard: New drawing from the command palette. This creates a .blackboard file and opens it.

The toolbar

A single floating toolbar follows whichever drawing is active. It holds the pen, highlighter, and eraser; a color control (preset swatches plus a color wheel); a brush-size control; undo/redo; and a button to collapse it to a small pill. Tool, color, and size apply to every drawing on the page — pick a color once and it stays as you move between drawings and switch tools.

Embed in a Canvas

1. Open an Obsidian Canvas.
2. Use the Canvas card menu's drawing button, or Blackboard: Insert drawing, to add a drawing node.
3. Draw on it directly with a stylus. Resize the Canvas node to scale the drawing.

Embed in a Markdown note

Embed a drawing like any file: ![[My Drawing.blackboard]]. Set a size with the standard Obsidian syntax, e.g. ![[My Drawing.blackboard|640x480]] or ![[My Drawing.blackboard|100%]]. You can draw on the embed directly.

Export

Enable Auto-export SVG in settings to write a .svg next to each drawing whenever it is saved (renames and deletes are kept in sync). Set SVG export path to collect exports in one folder.

Commands

Settings

The default toolbar palette is #000000, #ffffff, #ff0000, #0000ff, #00ff00, #ffff00, #ffa500, #800080. Pen, highlighter, and eraser sizes and colors are chosen live from the floating toolbar; they are not separate settings.

Compatibility

File format

.blackboard files are JSON:

{
  "version": 3,
  "width": 320,
  "height": 240,
  "strokes": [
    {
      "id": "abc123",
      "tool": "pen",
      "color": "#ffffff",
      "size": 2,
      "opacity": 1,
      "points": [[100, 200, 0.5], [101, 201, 0.6]],
      "hasPressure": true,
      "timestamp": 1711281600000
    }
  ],
  "background": { "color": "transparent" },
  "contentBounds": { "x": 80, "y": 180, "width": 60, "height": 50 }
}

Each stroke is an array of [x, y, pressure] points in drawing-space. width/height and contentBounds cache the strokes' bounding box for previews and are recomputed from the strokes; display size is decided by each embed, not the file. Files from earlier versions are read without loss.

Development

Requires Node.js 24 and npm.

npm install
npm run dev      # watch build
npm run build    # production build
npm test         # unit tests (Vitest)
npm run check    # typecheck + tests + build

iPad-specific rendering (Apple WebKit) can't be reproduced by the desktop/Electron test runner; verify anything iPad-specific manually in the iOS Simulator (requires Xcode). The static harnesses in test/webkit/ render the toolbar and engine in real WebKit for that.

See CONTRIBUTING.md for the contribution workflow and conventions.

Built with

• perfect-freehand (MIT) — pressure-sensitive stroke geometry
• iro.js (MPL-2.0) — the color wheel

License

MIT © James Wolensky