Yuzu Bases Plus

An Obsidian plugin that adds a Cards Plus view to Bases: a card layout like the built-in Cards view, as a base for extra features.

Requires Obsidian 1.13.0+ (Bases plugin API + declarative settings).

Features

Cards (same as the built-in Cards view)

• Card size, image property, image fit (cover / contain), image aspect ratio
• The image property accepts [[attachment.png]] links, ![](...) embeds, vault paths, external URLs, and colors ("#ff8800", rgb(...); quote hex values in YAML). For lists, the first item that resolves is used.
• Fallback image property: used when the image property is empty, doesn't resolve to an image, or fails to load (e.g. main localCover, fallback cover).
• Grouping with group headers and counts, property values rendered by Obsidian (links, tags, checkboxes…)
• Click a card to open the note (Ctrl/Cmd-click or middle-click opens it in a new tab), hover the title for a preview, right-click for the file menu

Extras

• Card gap: spacing between cards, 0–48px (default 12px)
• Title property: show a property as the card title instead of the file name (falls back to the file name when empty)
• Title lines: clamp card titles to N lines (0 = no limit)
• Image fills card (show info on hover): the card is just the image; on hover the title and properties slide up and fade in over a dark overlay (scrollable if taller than the card). Always shown on touch screens and on cards without an image; reduced-motion users get a fade only.
• Show property labels toggle
• Collapsible groups: click the chevron on a group header. Collapsed groups are remembered per view (saved as collapsedGroups in the .base file), and renaming a collapsed group keeps it collapsed.
• Plugin settings (Settings → Bases Plus):
  • Group header font size
  • Select button placement: Bases toolbar (next to Sort / Group / Filter) or Row above the cards. The toolbar button is inserted into Obsidian's own toolbar, which has no public API; if a future update changes the toolbar so it can't be found, the button falls back to the row above the cards automatically.
• Command: Bases Plus: Toggle select mode works on the Cards Plus view in the active tab and can be given a hotkey (Settings → Hotkeys). It uses only the official API, so it keeps working whatever happens to the toolbar.
• Rename groups: click a group header to edit it. Enter or clicking away applies, Esc cancels. After you confirm, the group-by property is rewritten in every note in that group (list items matching the old value are replaced; numbers and booleans keep their type). Clicking No value sets the property on those notes. Only works when grouping by a note property, not a formula or file property.
• Select mode (the Select button, the Toggle select mode command, or right-click a card → Select):
  • Click to toggle a card, Shift-click to select a range, Esc to exit
  • Select all checkbox in the toolbar, and a Select group button on each group header when grouping (clicking it also turns on select mode)
  • Add tags: adds to tags, skipping tags a note already has (case-insensitive)
  • Set property: sets property: value on every selected note, overwriting existing values. Type is Text / List / Number / Checkbox / Date / Date & time, and is guessed from existing values.
  • Remove properties: pick from the properties the selected notes have (with counts)
  • Delete: asks first, then moves the files to trash using your "Deleted files" setting
  • Right-click a selected card for the same actions, plus other plugins' multi-file menu items

Project layout

src/main.ts                  Plugin entry: registers the view, command and settings tab
src/settings.ts              Plugin settings tab (declarative settings API)
src/image.ts                 Resolves an image property to an image URL or color
src/bulk.ts                  Frontmatter edits: add tags, set/remove properties, rename group, delete
src/modals.ts                Dialogs for the bulk actions

src/views/cards-plus/
  CardsPlusView.ts           The view class: wires the modules below together
  options.ts                 View options (settings menu), defaults, reading the config
  card.ts                    One card: title, properties, click / hover / right-click
  cover.ts                   Card cover image, with fallback property
  groups.ts                  Group headers: collapse, rename, "Select group"
  selection.ts               Select-mode state (no DOM)
  toolbar.ts                 Select button in the Bases toolbar + the bulk-action bar
  bulk-actions.ts            Bulk actions on selected cards (dialog → edit)
styles.css                   View styles (loaded automatically by Obsidian)
manifest.json                Plugin id/name/version (id = folder name in the vault)
esbuild.config.mjs           Bundler; outputs main.js
scripts/install.mjs          Copies main.js, manifest.json, styles.css into a vault

Build

npm install          # once
npm run build        # type-check + production bundle -> main.js
npm run dev          # watch mode: rebuilds main.js on every save
npm run lint         # eslint with the official obsidianmd rules

Install into a vault

Use a separate test vault for development, not your main vault.

The plugin goes in <vault>/.obsidian/plugins/bases-plus/ and needs main.js, manifest.json and styles.css.

One-off install:

npm run build
npm run install-plugin -- "C:\path\to\TestVault"

Dev loop (auto-copy on every rebuild):

$env:OBSIDIAN_VAULT = "C:\path\to\TestVault"
npm run dev

Then in Obsidian:

1. Settings → Community plugins → turn off Restricted mode, then enable Bases Plus.
2. Open or create a .base file → view picker → Add view → Cards Plus.
3. Use the view's settings (the toolbar menu) to pick an image property, image fit, card size and labels; pick the shown properties in the Properties menu.

Reloading after changes: run Reload app without saving from the command palette. Turning the plugin off and on does not rebuild a Bases view that is already open, so the old view code keeps running. The community plugin Hot-Reload (pjeby/hot-reload) can also reload automatically; the install script writes the .hotreload file it looks for.

Release

Bump version in manifest.json (or run npm version patch), then npm run build, and attach main.js, manifest.json and styles.css to a GitHub release.