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.