Obsidian Stats logoObsidian Stats

Handwriting Markdown View

by Daniel Xu
5
4
3
2
1
Score: 50/100
Install Code

Description

Obsidian plugin: vector handwriting annotation over rendered Markdown

Reviews

No reviews yet.

Stats

0
stars
111
downloads
0
forks
51
days
51
days
51
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
1
commits

Latest Version

1.0.0
2 months ago

Changelog

Initial release of Handwriting Markdown View plugin for Obsidian.

What's included

  • Independent handwriting view panel
  • Pen, highlighter, eraser, move, undo/redo
  • Pressure/tilt/twist data collection
  • Touch gesture separation (draw vs scroll vs zoom)
  • Configurable side button mapping
  • Ink persistence with SVG preview
  • Cross-platform (desktop + mobile)
See all version on GitHub

README file from

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.

Sponsors