Slide Deck

Slide Deck

Turn a Markdown note into a slide deck and export it to PDF or a PNG image series, with live readability checks.

Deutsch

Features

• Theme isolation — slides render inside a sandboxed iframe, so the active Obsidian theme never leaks into the preview or the exports. A deck looks identical regardless of the vault theme.
• Four built-in themes — default (light), dark, serif, high-contrast — selected per deck via the theme: frontmatter key; each carries a matching code-highlight and Mermaid theme.
• Live theme switcher — the preview toolbar has a theme dropdown for ephemeral try-on, a source label (from frontmatter / from default / ● unsaved) that shows where the active theme comes from, and a Set button that writes theme: directly into the note's frontmatter. Frontmatter is the source of truth; the Settings default applies only to notes without a theme: key.
• User themes — drop .css files into a configurable themes folder (default Slide-Deck-Themes/); the frontmatter theme: value is the filename without the .css extension. Each file is a --sd-* token block with optional extra CSS; user themes inherit the built-in default theme's code-highlight and Mermaid styles. The Settings tab shows all valid theme keys live.
• Theme import/export — an Open in Finder button reveals the themes folder so you can drop files in; Export theme as .css writes any theme as an editable .css starting point; a toggle hides the themes folder in Obsidian's file explorer.
• Nine per-slide templates — default, title, section, quote, image-focus, two-column, columns-3, stat, cover-image — set per slide with a layout directive (an HTML comment); columns are separated by a column directive, and in multi-column templates the leading heading spans all columns. See the layout guide.
• Combinable density modifiers — add compact (tighter type) or code-heavy (smaller code) to any template in the same layout directive.
• Smart layout inference — with no explicit directive, the layout is inferred from content shape: a lone heading becomes section, a lone block quote becomes quote, a lone image or diagram becomes image-focus, and column splits pick two-column / columns-3. An explicit layout directive always wins.
• Deck slots — header:, footer:, and paginate: frontmatter keys render as floating corner slots on every slide (pagination shows n / N).
• Media that fills and centers — block images and Mermaid diagrams occupy the available space, horizontally and vertically centered and scaled to fit (object-fit: contain), for both Obsidian ![[embeds]] and standard ![](https://raw.githubusercontent.com/johannes-kaindl/slide-deck/HEAD/…) images.
• Sparse slides compose vertically — slides with little content are vertically centered instead of clinging to the top.
• Markdown notes → slides — separate slides with a line containing only ---; YAML frontmatter controls theme, aspect ratio, and font floor per note.
• Live preview pane — renders the current note as a slide deck in a side panel, scaled to pane width, with a click-to-source link on overflow warnings.
• Fit-or-warn readability — each slide auto-scales content down to a configurable legibility floor (minFontPx); slides that would need smaller text are flagged as overflowing instead of becoming unreadable.
• Custom CSS — an optional CSS snippet in Settings is appended to the deck styles in both preview and exports, for branding or tweaks.
• PDF export — renders all slides at their native resolution; on desktop, triggers the system print dialog (choose "Save as PDF"); on mobile (iOS/iPadOS), writes a self-contained HTML file and opens it via the OS so you can print or share to PDF from there.
• PNG image-series export — captures each slide via modern-screenshot and writes numbered PNGs into a configurable export folder (Settings, default Slide-Deck-Export/); typographically accurate inter-word spacing.
• Mobile support — runs on iOS/iPadOS (Obsidian Mobile); all desktop-only APIs are platform-guarded.
• KaTeX math — inline and display math ($…$ / $$…$$) rendered by KaTeX.
• Code highlighting — fenced code blocks highlighted by highlight.js, per-theme.
• Accessible callouts — Obsidian-style > [!note], [!warning], [!danger], [!tip], [!info] blocks rendered with redundant coding: border color + geometric shape + visible label word (not color-only; satisfies WCAG 1.4.1).
• Mermaid diagrams — fenced ```mermaid ``` blocks rendered as SVG, per-theme.
• EN/DE interface — all UI strings follow Obsidian's language setting (English canonical, German supported).

Screenshots

Requirements

• Obsidian ≥ 1.13.0 (the settings tab uses the declarative settings API introduced in 1.13.0)
• Desktop + Mobile (isDesktopOnly: false) — runs on desktop (Windows, macOS, Linux) and on mobile (iOS/iPadOS); desktop-only APIs are platform-guarded.
• Desktop PDF export uses the system print dialog — choose "Save as PDF" in the printer dropdown. It does not produce a PDF file directly.
• Mobile PDF export writes a self-contained HTML file into the export folder and opens it with the OS default app; from there you can print or share to PDF. The file name is <export-folder>/<note-name>.html.
• PNG export writes files into a configurable export folder (Settings → Slide Deck → Export folder, default Slide-Deck-Export/). PDF export on desktop goes through the system print dialog, where you choose the location.

Install

Community Plugins (intended channel)

Planned: once accepted into the Obsidian community plugin registry it will be installable via Settings → Community plugins → Browse → search "Slide Deck".

Manual install

1. Download main.js, manifest.json, and styles.css from the latest release.
2. Create the folder .obsidian/plugins/slide-deck/ inside your vault.
3. Copy the three files into that folder.
4. In Obsidian: Settings → Community plugins → Installed plugins — enable Slide Deck.

BRAT (Beta Reviewers Auto-update Tool)

1. Install the BRAT plugin.
2. In BRAT settings, add https://codeberg.org/jkaindl/slide-deck (or its GitHub mirror https://github.com/johannes-kaindl/slide-deck).
3. Reload Obsidian.

Build from source

git clone https://codeberg.org/jkaindl/slide-deck.git
cd slide-deck
npm install
npm run build          # produces main.js
cp main.js manifest.json styles.css /path/to/vault/.obsidian/plugins/slide-deck/

Configuration

Plugin settings

Per-note frontmatter

Add a YAML frontmatter block at the top of your note to control presentation-level settings:

---
theme: dark
aspect: 16:9
minFontPx: 24
header: My talk
footer: ACME Corp
paginate: true
---

Slide layout & syntax

Nine per-slide templates (default, title, section, quote, image-focus, two-column, columns-3, stat, cover-image), combinable density modifiers (compact, code-heavy), the layout and column directives, and smart layout inference are documented in the Slide layouts & syntax guide.

Slide separator

Use a line containing only --- to split slides:

---
theme: default
aspect: 16:9
---

# Slide 1

Content here.

---

# Slide 2

More content.

Note: the --- in the YAML frontmatter block is the standard YAML delimiter and is not a slide separator.

How it works

1. Parsing — the active note's Markdown is split on --- lines into individual slide bodies. A YAML frontmatter block (if present) sets deck-level directives.
2. Fixed canvas — each slide is rendered onto a fixed canvas: 1280×720 px (16:9) or 960×720 px (4:3). The canvas size does not change with window size.
3. Theme isolation — slides render inside a sandboxed iframe with the chosen theme's styles injected directly. The active Obsidian theme does not reach inside the iframe, so the deck looks identical in preview, PDF, and PNG regardless of vault theme.
4. Fit-or-warn — each slide's content is measured in the DOM. If it exceeds the canvas, the content is scaled down uniformly. Scaling stops at minFontPx (the legibility floor). If the content would still overflow at that scale, the slide is flagged with a warning in the preview pane rather than scaled further.
5. Export — the same theme-isolated iframe artifact feeds all export paths: the print pipeline (PDF) and per-slide modern-screenshot (domToCanvas) capture (PNG). On desktop, PDF is printed via contentWindow.print(); on mobile, a self-contained HTML file is written to the vault and handed to the OS via openWithDefaultApp.

License

Code: AGPL-3.0-or-later. Documentation: CC BY-SA 4.0. Author: Johannes Kaindl — https://jkaindl.de