Skip to content
GitHub

Slide Viewer


The Slide Viewer is an Astro component that automatically converts your page content into an interactive slide presentation system. It provides a rich set of features for navigation, customization, and content interaction through a modular architecture.


Simply add the component to any MDX page:

import SlideViewer from '../../../components/slides/SlideViewer.astro';
<SlideViewer triggerText="Open Slides" title = "Content Slides"/>
astro

Structure your MDX content using horizontal rules (---) to create explicit slide boundaries:

---
title: My Presentation
---
# Introduction Slide
This is the first slide content.
---
# Second Slide
This is the second slide content.
---
# Third Slide
This is the third slide content.
mdx

Key Guidelines:

  • Use --- separators to create explicit slide breaks
  • One main concept per slide keep content focused and concise
  • Start with a clear heading on each slide for better navigation
  • Include visual elements like code blocks, images, and lists
  • Write presentation-friendly content avoid overly long paragraphs

  • Verify keyboard navigation works smoothly across all features
  • Check theme compatibility with your site design
  • Optimize content length for slide format presentation
  • Use bookmarks to mark important slides for quick reference

The component intelligently parses your page content and creates slides based on:

  1. Heading-based divisions Each major heading starts a new slide
  2. Content sections Logical content breaks are preserved
  3. Code blocks and lists Special formatting is maintained
  4. Image and media support Visual content is properly displayed
  5. Content filtering Automatically excludes scripts, styles, and metadata

Navigate through your presentation using multiple methods:

  • Keyboard shortcuts: Arrow keys, Page Up/Down, Home/End
  • Navigation buttons: Previous/Next slide controls
  • Direct slide access: Click slide counter or press G or Ctrl+G for go-to modal
  • Touch gestures: Mobile-friendly navigation
  • Progress tracking: Visual progress bar shows completion

The component offers three distinct viewing experiences:

  1. Slide Mode: Traditional presentation view with one slide at a time
  2. Reading Mode: Continuous document view with original content structure
  3. Overview Mode: Thumbnail grid showing all slides at once

  • Instant search across all slide content with debounced input
  • Highlighted matches with search term emphasis
  • Filtered results showing only relevant slides
  • Search persistence across different viewing modes

Advanced search interface with enhanced features:

  1. Modal interface opened with / or F keys
  2. Keyboard navigation through search results with arrow keys
  3. Content snippets showing search context
  4. Reading mode support with section-aware search
  • Smart TOC generation based on slide headings or content structure
  • Slide previews with hover effects showing content summary
  • Reading time estimates calculated at 200 words per minute
  • Bookmark indicators showing saved slides with star icons
  • Collapsible sidebar with toggle and click-to-expand

Sophisticated annotation tool with multiple drawing modes:

Drawing Modes:

  • Freehand drawing : Natural sketching with smooth curves
  • Circle tool : Perfect circles with drag-to-resize
  • Rectangle tool : Rectangular shapes with drag-to-resize
  • Line tool : Straight lines with precise endpoints

Settings:

  • Color picker : Choose from any color
  • Thickness control : Adjustable from 1-10 pixels
  • Fade duration : Configurable from 0.5-5 seconds
  • Reverse fade : Lines can undraw from end back to start
  • Persistent storage : Settings saved to localStorage

Keep track of important slides:

  • Quick bookmarking with B key or click bookmark button
  • Bookmark panel with Shift+B showing all saved slides
  • Slide previews with slide numbers and content excerpts
  • Persistent storage : Bookmarks saved per page URL
  • Visual indicators in thumbnails, TOC, and current slide

Accessibility-focused text scaling:

  • Dynamic font adjustment with +/- buttons
  • Range: 60% to 500% scaling with validation
  • Double-click reset on decrease button
  • Persistent preferences saved to localStorage

Choose from 6 carefully designed themes with light/dark variants:

  1. Default : Clean, minimal theme
  2. Dracula : Popular developer-friendly purple theme
  3. GitHub : Familiar GitHub-inspired design
  4. Discord : Gaming-community inspired dark theme
  5. One Dark : Atom editor’s beloved color scheme
  6. Ocean : Blue-toned theme with calming colors

Independent light/dark toggle system:

  • Independent toggle : Works separately from Starlight’s theme
  • Persistent preference : State saved to localStorage
  • Visual feedback : Sun/moon icons indicate current state
  • Theme compatibility : All themes have light/dark variants

  • Automatic conflict resolution with Starlight themes
  • Persistent theme selection across sessions
  • Theme cycling with T keyboard shortcut
  • Dropdown selector with available themes

  • ← → - Previous/Next slide
  • Page Up Page Down - Previous/Next slide
  • Home - Go to first slide
  • End - Go to last slide
  • G or Ctrl+G - Open go-to slide modal
  • / or F - Open search modal
  • ↑ ↓ - Navigate search results (in modal)
  • Enter - Select search result
  • L - Toggle laser pointer
  • S - Open laser pointer settings
  • T - Cycle through themes
  • B - Bookmark current slide
  • Shift + B - Toggle bookmarks panel
  • Esc - Close slideshow/modal/panel
  • Shift + ? - Show keyboard help modal

  • ARIA live regions for screen reader announcements
  • Keyboard focus management with proper tab order and focus trapping
  • Screen reader optimized labels and descriptions
  • High contrast support across all themes
  • Semantic HTML structure for assistive technologies

  • Lazy content loading for smooth performance
  • Debounced search to prevent excessive operations
  • Throttled scroll listeners for efficient updates
  • Local storage caching for user preferences
  • Efficient DOM manipulation with minimal reflows

  • Modern ES6+ JavaScript with module support
  • CSS Grid and Flexbox for responsive layouts
  • Local Storage API for preference persistence
  • Canvas API for laser pointer functionality
  • Fullscreen API for immersive presentations