runemark

In-page visual feedback overlay for Svelte apps.

@martypara/runemark lets you annotate elements directly in the browser and copy structured markdown feedback with source, DOM, and layout context.

Install

pnpm add -D @martypara/runemark

Usage

<script lang="ts">
	import { Runemark } from "@martypara/runemark";
</script>

<Runemark />

Runemark only runs in development by default.

Features

• Click-to-annotate overlay with anchored markers
• Multi-select annotations with Shift+Click
• Inline draft/edit popup with keyboard submit
• Markdown export optimized for coding-agent workflows
• Optional detailed export mode (accessibility + computed style snapshot)
• Page freeze toggle for stable UI capture
• Persistent annotations via localStorage

Keyboard shortcuts

• Cmd+Shift+V / Ctrl+Shift+V: toggle Runemark
• Shift+Click: multi-select elements
• Enter: save annotation draft
• Shift+Enter: newline in draft textarea
• C: copy annotations markdown
• X: clear annotations
• F: freeze/unfreeze page interactions
• Esc: close current draft (or close Runemark)

Component options

Runemark accepts these props:

• enabled?: boolean
• storageKey?: string (default: __runemark_annotations__)
• accentColor?: string (default: #42b883)
• zIndex?: number (default: 2147483000)
• copyDepth?: "standard" | "detailed" (default: "standard")
• clearOnCopy?: boolean (default: false)
• cursor?: string (default: "crosshair")

Types are exported from:

• src/lib/types.ts

Source capture behavior

Runemark source mapping uses Svelte dev metadata (__svelte_meta.loc) when available.

It also supports explicit location attributes (data-runemark-loc="path:line:column") for advanced integrations.

Development

pnpm install
pnpm dev

Quality checks:

pnpm check
pnpm build

License

MIT. See LICENSE.