Floating Screen Preview

Floating Screen Preview is an Obsidian plugin that shows a pinned image preview for the active Markdown note. The preview is fixed to the top-right corner of the app window and can be opened in a larger modal or in an Obsidian pane.

The image reference can come from note frontmatter or from a fenced code block, which makes it useful for notes that document UI screens, app flows, screenshots, diagrams, or visual states.

Features

• Floating preview image for the active Markdown note.
• Image reference from configurable frontmatter keys.
• Image reference from a configurable fenced code block language.
• Optional preview when hovering Markdown files in Obsidian's file explorer.
• Click action: modal preview or open the image file in a pane.
• Configurable size, offset, z-index, border radius, shadow, and refresh delay.

Usage

Frontmatter

By default, the plugin checks these frontmatter keys and uses the first non-empty value:

• screen_preview
• screen-preview
• preview_screen
• экран_превью

Example:

---
screen_preview: ../screens/auth-flow.png
---

Supported values:

• a path relative to the current note, for example ../screens/auth-flow.png;
• a vault-root path with a leading slash, for example /screens/auth-flow.png;
• a wiki link, for example [[screens/auth-flow.png]].

Code Block

By default, the plugin also reads the first non-empty line of a screen-preview fenced code block.

```screen-preview
../screens/auth-flow.png
```

Installation

Manual Installation

1. Download main.js, manifest.json, and styles.css from the latest GitHub release.
2. Copy them into your vault under .obsidian/plugins/floating-screen-preview/.
3. Reload Obsidian.
4. Enable Floating Screen Preview in Settings -> Community plugins.

Development

npm install
npm run build

For watch mode:

npm run dev

Release Files

Obsidian installs community plugins from GitHub release assets. Each release must include:

• main.js
• manifest.json
• styles.css

The GitHub release tag must match the version in manifest.json.

Author

Bogdan Nasikovsky
b.nasikovsky@gmail.com
https://github.com/bogdan808

License

MIT