Homepage Blocks

Homepage Blocks

A composable, drag-and-drop homepage for Obsidian.

Features

• 17 block types -- greeting, clock, quotes, quick links, button grid, image gallery, video embed, embedded note, static text, HTML, bookmarks, recent files, pomodoro timer, spacer, random note, voice notes, vault search
• Drag-and-drop layout with 2D resize (column span + row height)
• Accent colors with adjustable intensity (5--100%) that tint the entire card, including interactive controls
• Per-block styling -- title, emoji, divider, padding, elevation, border, opacity, backdrop blur, gradients
• Responsive layout -- blocks reflow in narrow panes via CSS container queries
• Full-screen lightbox for gallery images with keyboard and swipe navigation
• Collapsible blocks -- click any header to collapse or expand it
• 50 language presets for greeting salutations
• Zero runtime dependencies beyond GridStack

Installation

From Community Plugins

1. Open Settings > Community plugins > Browse
2. Search for Homepage Blocks
3. Click Install, then Enable

Manual

1. Download main.js, manifest.json, and styles.css from the latest release
2. Create <vault>/.obsidian/plugins/homepage-blocks/
3. Copy the three files into that folder
4. Enable the plugin in Settings > Community plugins

Getting started

1. Click the house icon in the ribbon, or run Open Homepage from the command palette.
2. Click the pencil FAB to enter edit mode.
3. Add Block inserts new blocks. The gear icon opens settings, the grip handle reorders, and the corner grip resizes.
4. Click Done to exit edit mode.

Block types

Voice Notes & privacy

The Voice Notes block records audio in your browser and uploads it to a third-party transcription service. Before you record for the first time, the plugin asks you to confirm the upload per provider.

What is sent and where:

API key storage: the key is encrypted at rest (AES-GCM-256) in <vault>/.obsidian/plugins/homepage-blocks/data.json using a non-extractable, per-device key held in the browser's IndexedDB. Because the key never leaves the device that created it, a synced data.json (Obsidian Sync, iCloud, Dropbox, git, ...) carries only ciphertext that cannot be decrypted on another device -- you re-enter the API key per device. On the rare platform without WebCrypto, the plugin falls back to plaintext (with a refuse-to-downgrade guard that never overwrites existing ciphertext). Treat the key like any secret regardless, since the ciphertext still travels with your synced vault. When you Export layout the key is stripped from the exported JSON.

Revoking access: delete the key from the provider's dashboard (OpenAI, Google AI Studio) and clear the API key field in block settings.

Mobile: voice recording requires the platform's MediaRecorder + navigator.mediaDevices APIs. On platforms that don't expose them, the block is automatically disabled with an "Not available on this platform" message.

If you do not want the Voice Notes feature, simply don't add a Voice Notes block -- no code runs and no network calls happen.

Card styling

Every block shares these settings (open them with the gear icon):

• Title -- custom label, emoji (picker), size (h1--h6), show/hide, divider
• Accent color -- preset swatches or custom picker, intensity slider (5--100%)
• Card -- hide border, hide background, padding, elevation (shadow), border radius/width/style
• Advanced -- background opacity, backdrop blur, two-color gradient with angle

An accent color tints the header, background, border, divider, and all interactive controls (checkboxes, toggles, radio buttons) in one step.

Settings

Open Settings > Homepage Blocks:

Commands

CSS customization

You can override layout variables in a CSS snippet:

:root {
  --hp-gap: 16px;
  --hp-padding: 24px;
  --hp-card-padding: 16px;
  --hp-content-max-width: 1400px;
  --hp-row-unit: 200px;
}

Using theme colors in HTML blocks

HTML that contains a <style> block is rendered inside a sandboxed iframe (no scripts, no network) for full CSS support with style isolation. HTML without a <style> block is sanitized and rendered inline, where <style>/<script>/<iframe> and other active tags are stripped. For inline fragments, match your theme by using inline style attributes with Obsidian's CSS variables -- these update automatically when you switch themes, so your HTML stays consistent.

Common theme variables

The table below lists the most useful variables. Use them as var(--variable-name) inside any inline style.

A themed card

This example builds a card that adapts to any theme:

<div style="
  background: var(--background-secondary);
  color: var(--text-normal);
  padding: 16px;
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
">
  <h3 style="color: var(--color-accent); margin-top: 0;">Dashboard</h3>
  <p style="color: var(--text-muted);">This card follows the active theme.</p>
</div>

You can blend colors with color-mix() to create transparent or tinted variants:

<div style="background: color-mix(in srgb, var(--color-accent) 10%, transparent);">
  Subtle accent tint
</div>

Finding more variables

Open DevTools (Ctrl+Shift+I), inspect the <body> element, and filter the Computed tab for --. You will see every CSS variable the current theme defines.

Support

Bug reports and feature requests: GitHub Issues

License

MIT