Frontmatter Infobox

unlisted

by Daniel Ialcin Misser Westergaard

Display frontmatter properties as a Wikipedia-style infobox that text wraps around, in reading view and live preview.

Updated 1mo agoMIT
View on GitHub

Frontmatter Infobox

Replaces the built-in properties display with a Wikipedia-style infobox floated at the top of the note, with the body text wrapping around it — in both reading view and live preview. Source mode is untouched.

In live preview the infobox hosts Obsidian's own properties editor — the plugin moves the native .metadata-container into the floated box instead of re-implementing it. Everything the native editor can do works inside the infobox: edit values with type-aware inputs, rename properties with vault-wide suggestions, change a property's type (text, list, number, checkbox, date), reorder, add ("Add property" with native name suggestions), and remove via the property menu. In reading view the infobox is a read-only wiki-style table. In contexts without a native editor (embeds, canvas cards) it falls back to a built-in click-to-edit table backed by processFrontMatter.

Screenshots

Reading viewLive previewSource mode
Reading viewLive previewSource mode
Read-only wiki-style infobox; body text wraps around it.The floated infobox hosts Obsidian's native properties editor.Frontmatter stays raw YAML — completely untouched.

How it works

  • Reading view — a markdown post-processor injects the infobox as a direct child of .markdown-preview-sizer. All rendered blocks are siblings in the same block formatting context, so the floated infobox shortens their line boxes and text wraps around it naturally.
  • Live preview — a CodeMirror 6 StateField places an inline widget decoration at the start of the first content line. The widget is floated with CSS, so the editor's .cm-line elements wrap around it the same way. The widget adopts the view's native properties editor into itself and returns it to its original place whenever the widget is destroyed (mode switch, plugin unload).
  • Infoboxes refresh automatically when frontmatter changes (via the metadata cache) and when settings change.

Features

  • Optional title row (uses the title property, falling back to the file name)
  • Image support: point the image property (default image) at a vault image ([[photo.png]]) or a URL
  • Wikilinks ("[[Note]]") and URLs in property values render as clickable links
  • Arrays render as lists; booleans as Yes/No (native checkbox in live preview)
  • Float left or right, adjustable width, excluded-properties list
  • The built-in properties view is hidden wherever the infobox is enabled; disable the infobox for a mode to get it back
  • On phones the infobox becomes full-width (no room to wrap text)

Installation

Community plugins (once available): Settings → Community plugins → Browse → search "Frontmatter Infobox" → Install.

Manual: download main.js, manifest.json, and styles.css from the latest release into <vault>/.obsidian/plugins/frontmatter-infobox/, then reload Obsidian and enable the plugin.

Beta builds: install BRAT and add this repository to receive pre-release builds.

Development

npm install --legacy-peer-deps
npm run dev    # watch mode
npm run build  # type-check + production build

License

MIT

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.