[!NOTE] Work in Progress — Kambas is actively developed. Features and interfaces may evolve between releases.

Kambas

An image toolkit and enhanced visual workspace for Obsidian Canvas.

Kambas transforms Obsidian Canvas into a self-contained, portable reference environment for designers, researchers, and visual creators. Its core feature is embedded image storage — images are encoded as Base64 data URIs and stored directly inside the .canvas file itself, eliminating vault clutter and broken link dependencies entirely.

The Problem Kambas Solves

Obsidian Canvas excels at connecting ideas, but managing visual reference assets creates friction for visual creators:

• Vault pollution: Pasting or dropping images auto-creates individual attachment files in your vault. Hundreds of single-use images accumulate and contaminate file navigation and search.
• Broken link dependencies: Reorganizing vault folders, renaming directories, or syncing across devices frequently breaks the relative paths that Canvas relies on to display images.
• Portability friction: Sharing a .canvas file requires separately locating and bundling every referenced attachment — defeating the purpose of a self-contained reference board.
• Limited in-canvas controls: Adjusting images for mood board use (flipping, desaturating, setting transparency) requires leaving Obsidian entirely.

Core Concept: Embedded Images

The defining feature of Kambas is inline Base64 image embedding. When you paste or drop an image, Kambas can encode it as a data URI stored directly in the .canvas JSON:

{
  "id": "node-abc123",
  "type": "file",
  "url": "data:image/png;base64,iVBORw0KGgo...",
  "kambasTags": ["concept", "character-design"],
  "unknownData": {
    "kambasFlipH": false,
    "kambasFlipV": false,
    "kambasGrayscale": false,
    "kambasPalette": false,
    "kambasOpacity": 1,
    "originalWidth": 1920,
    "originalHeight": 1080
  }
}

The result is a single portable .canvas file — no attachments folder, no broken paths, no extra steps when sharing, archiving, or syncing.

Features

Image & Node Manipulation

Right-click any canvas node to access enhanced controls:

• Flip horizontal / vertical: Mirror the image along its X or Y axis (persisted across canvas re-renders).

  

• Toggle grayscale: Apply a CSS grayscale filter to evaluate light values, structure, and contrast without color distraction.

  

• Toggle color palette: Extract and display dominant color swatches overlaying the image (3–10 swatches, configurable) with a one-click Copy all palette colors button.

  

• Change opacity: Set transparency (0–100%) on any node type — images, text cards, file embeds, or groups.

  

• Reset to original size: Restore a scaled node to its native pixel dimensions.

• Copy media to clipboard: Copy raw image data directly to system clipboard.

• Swap media…: Replace an existing image or video with another from your vault, local disk, or clipboard — preserving node position and aspect ratio.

• Embed in canvas file…: Convert vault-linked image nodes into inline Base64 data URIs (with optional deletion of source vault file).

• Move / Copy media to…: Relocate or duplicate vault-linked media files using a modal picker with clean incremental numbering (canvas_image-01).

GIF Playback & Frame Extraction Controls

Take complete control over animated GIF files directly on the canvas without external tools:

• Interactive Timeline & Scrubber: Play/pause, step forward/backward frame-by-frame, scrub through frames, or adjust playback speeds (0.25x, 0.5x, 1.0x, 1.5x, 2.0x).
• Frame Extraction: Extract any single frame from an animated GIF as a static image saved directly to your vault or embedded in the canvas.
• Multi-Select Synchronization: Control playback, stepping, or seeking across multiple selected GIF nodes simultaneously.
• Instant Toggle & Command Palette: Enable or disable GIF controls at any time via plugin settings or the Command Palette (Toggle GIF controls on/off).

Loupe Inspector Tool

Inspect fine image details and artwork without changing canvas zoom levels:

• Hotkey Lens Toggle: Press Q (configurable) over any image node to open an interactive magnifying loupe lens.
• Smooth Tracking: Features dampened motion interpolation for smooth, precise cursor movement over image details.
• Custom Optics: Adjust magnification power (1.5x–10.0x), lens size (100px–600px), and lens shape (circle, square, rounded) in settings.

Storage & Ingestion

Pasting or dropping files onto the canvas presents an instant choice:

• Embed in canvas — encode image as a Base64 data URI stored inside .canvas.
• Save to vault — save to a configured attachment folder as a standard file link.

Multi-file drops are processed in a single batch. The Hide media label setting suppresses technical data URI headers above embedded image cards for a clean visual presentation.

Base64 Optimization & Compression

• Auto-Compress on Ingest: Automatically compress pasted or dropped Base64 images to WebP data URIs.
• Resolution & Quality Controls: Configure maximum pixel dimension caps (default: 2048px) and WebP quality targets (0.1–1.0).

Advanced Media Organization & Naming

When moving or copying media assets within your vault:

• Standardized Naming: Default naming format (canvas_image-01) eliminates irregular filenames.
• Flexible Numbering Formats: Choose from Zero-Padding (01, 02...), Roman Numerals (I, II... / i, ii...), Letters (A, B... / a, b...), or Arabic Numerals (1, 2...).
• Batch Memory & Badges: Target destination badges display target paths while remembering numbering choices across operations.

Filter Panel (Tags & Colors)

A floating, resizable, position-remembered panel accessed from the Tags button in the canvas toolbar.

How Filtering Works

Kambas uses a 3-state logic (Neutral ☐, Include ✓, Exclude ✕) per tab:

• Exclude wins over include: If a node matches an included tag but also an excluded color, it is hidden.
• Non-matching nodes dim: Filtered-out nodes dim cleanly (adjustable opacity down to 12%) rather than abruptly disappearing.

Contextual "In View" Intelligence

• "N in view" badges: Displays how many currently visible nodes co-contain each tag or color.
• Auto-Sorting: Rows sort dynamically by visible count to surface relevant co-occurring attributes first.
• Dimmed Unrelated Rows: Attributes absent from visible nodes display at reduced opacity (45%).

Bidirectional Cross-Highlighting

• Hovering filter rows highlights matching canvas elements with custom borders.
• Hovering canvas image nodes highlights their corresponding tag and color rows in the panel.

Tags Tab

• Tag Assignment: Right-click nodes or use tag modal to add comma-separated kebab-case tags (#character-design).
• Custom Tag Colors: Set individual tag background and text colors directly in the tag modal or plugin settings.
• Tag Badges & Visibility: Toggle canvas tag badge display or change badge positions (outside-below or inside bottom-left).
• Tag Management: Rename tags canvas-wide, change tag colors, or delete tags directly from the panel.
• Search & Clear: Search tags or clear active filter configurations.

Colors Tab

• Dominant Color Extraction: HSV color classification into up to 13 color categories: Black, Gray, White, Red, Orange, Yellow, Green, Teal, Cyan, Blue, Indigo, Purple, Pink.
• Canvas Card Color Filtering: Filter by Obsidian node border/background colors.
• Extraction Modes: Configurable to Auto (on tab open), Manual ("Scan canvas colors" button), or Disabled.

Keyboard Navigation

[!NOTE] Keyboard panning functionality is inspired by and based on the Canvas Keyboard Pan plugin.

• Pan Canvas (Up / Down / Left / Right): W / S / A / D or Arrow Keys
• Zoom In / Out: + / -
• Selection Zoom to Fit: Space
• Loupe Inspector Lens: Q
• Toggle GIF Controls: Command Palette (Toggle GIF controls on/off)
• Toggle Tag Visibility: Command Palette

Configuration

Access settings in Obsidian Settings > Kambas:

Installation

Community Plugins

1. Open Settings > Community Plugins and turn off Restricted Mode.
2. Search for Kambas and install.
3. Enable Kambas in installed plugins.

Manual Installation

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Create folder <vault>/.obsidian/plugins/obsidian-kambas/.
3. Copy downloaded files inside, reload Obsidian, and enable plugin.

Development

npm install        # Install dependencies
npm run dev        # Dev build watcher
npm run health     # Type-check and lint
npm run build      # Production bundle

Support

If Kambas improves your workflow, consider supporting development:

• Ko-fi
• PayPal