README file from
GithubObsidian Infobox
An Obsidian plugin that renders Wikipedia-style infoboxes from YAML frontmatter, including a floating panel pinned to the top-right of the reading pane.
Features
- Frontmatter-driven: no special syntax in note body required
- Supports title, subtitle, image, caption, and key-value fields
- Named section dividers within the field list
- Resolves local vault images (wikilink or plain filename)
- Automatic light/dark theme support
- Works on desktop and mobile
Installation
Manual
- Download
main.js,styles.css, andmanifest.jsonfrom the latest release - Copy them into
.obsidian/plugins/infobox/inside your vault - Enable the plugin in Settings → Community Plugins
Community Plugins (coming soon)
Search for Infobox in the Obsidian community plugin browser.
Usage
Add an infobox: block to your note's YAML frontmatter:
---
infobox:
title: Albert Einstein
subtitle: Theoretical Physicist
image: einstein.jpg
caption: Photograph from 1921
fields:
- section: Personal
- Born: March 14, 1879
- Died: April 18, 1955
- Nationality: German / American
- section: Career
- Field: Theoretical physics
- Known for: General relativity, Special relativity
- Awards: Nobel Prize in Physics (1921)
---
Frontmatter fields
| Key | Type | Description |
|---|---|---|
title |
string | Bold heading at the top of the card |
subtitle |
string | Italic line below the title |
image |
string | Filename or URL. Supports [[wikilinks]] and ![[wikilinks]] |
caption |
string | Small italic text below the image |
fields |
list | Array of single-key objects (see below) |
Fields list
Each item in fields is a single-key YAML object:
- Regular row: any key/value pair renders as a label + value row
- Section header: use the key
sectionto insert a divider with a category label
fields:
- section: Category Name # renders as a section divider
- Label: Value # renders as a data row
Images
Images can be specified as:
- A plain filename:
image: einstein.jpg(resolved via vault) - A wikilink:
image: "[[einstein.jpg]]"orimage: "![[einstein.jpg]]" - A remote URL:
image: https://example.com/photo.jpg
Contributing
Issues and pull requests are welcome.
License
MIT see LICENSE