Handwriting Markdown View

approved

by Daniel Xu

A vector handwriting annotation view layered over rendered Markdown, with pen/touch separation, autosave, SVG preview, and basic block re-anchoring. - This plugin has not been manually reviewed by Obsidian staff.

↓ 16 downloadsUpdated 12d agoMIT
Install in ObsidianView on GitHub

Handwriting Markdown View

A vector handwriting annotation view layered over rendered Markdown, with pen/touch separation, autosave, SVG preview, and basic block re-anchoring — an Obsidian plugin.

Current version: 0.1.0-beta.1 — installable and testable, with core drawing and persistence working.

Features

1. Dedicated Handwriting View

Independent handwriting file view that works alongside Obsidian's edit/reading views. Switch freely between them on the same note.

2. Full Drawing Toolkit

  • Pen, highlighter, stroke eraser, move, undo/redo
  • Pressure, tilt, and twist data collection
  • Uses getCoalescedEvents() for smooth strokes, falls back to standard pointermove when unavailable

3. Pen & Touch Separation

  • Stylus draws on canvas
  • Single-finger scroll
  • Two-finger pinch zoom
  • Mouse draw mode available

4. Side Button Mapping

  • Configurable pen side-button codes (default: 2,5) to toggle pen/eraser
  • Live toolbar display of pointerType / button / pressure for debugging device mappings

5. Data Persistence

  • Each note gets a stable handwriting-id in frontmatter
  • Strokes saved as document.ink.json with auto-generated ink-preview.svg and metadata.json
  • Smart merge: matches strokes by ID before write, uses tombstones for deletions

6. Markdown Block Anchoring

Auto re-anchors strokes to Markdown blocks when text changes (exact text match). Unmatched stroke IDs are tracked as orphanedStrokeIds.

7. Cross-Platform

Reads/writes only through Obsidian's Vault / FileManager API — works on desktop and mobile.

8. Settings Panel

  • Customize output directory (default: Attachments/Handwriting/<handwriting-id>/)
  • Configure pen button codes
  • Pen color, width and opacity presets

9. Build & Development

  • TypeScript source in src/main.ts
  • Zero npm dependency build: npm run build
  • Lint check: npm run check

10. Diagnostics & Testing

  • OPPO Pad / Pencil real-time pointer diagnostics
  • Toolbar shows live pointerType / button / pressure
  • Button mapping debugging output

Data Directory

Default output:

Attachments/Handwriting/<handwriting-id>/
├── document.ink.json
├── ink-preview.svg
└── metadata.json

Configure the root directory in plugin settings.

Manual Installation

  1. Copy the handwriting-markdown-view folder to: 
    <Vault>/.obsidian/plugins/handwriting-markdown-view/
  2. Ensure it contains at least: 
    main.js
manifest.json
styles.css
  3. In Obsidian → Settings → Community plugins, reload and enable Handwriting Markdown View.
  4. Open any Markdown note, click the pen icon in the left ribbon, or run the command: 
    Handwriting Markdown View: Open handwriting view in current tab

Data Format

Each stroke stores:

  • tool / color / baseWidth / opacity
  • points[x, y, pressure, tiltX, tiltY, twist, time]
  • modifiedAt / deviceId
  • Optional Markdown block anchor: element type, text excerpt, text hash, block rect, relative offset

Canvas logical width defaults to 960px; display scaling is device-independent.

License

MIT License — see LICENSE.

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.