Use the Slide Viewer

View, navigate, and present your slides using the Pitch Smith Slide Viewer in VS Code. This guide covers opening the viewer, navigating between slides, using viewer controls, entering presentation mode, and understanding auto-refresh behavior.

Prerequisites

Before using the Slide Viewer, make sure you have:

• The Pitch Smith VS Code extension installed and enabled
• At least one built slide in your deck (run /pitchsmith:build-one or /pitchsmith:build-all first -- see Build Slides)
• VS Code open in your project directory

Open the Viewer

The Slide Viewer opens automatically after a build completes. If it does not open automatically, or you want to open it manually:

1. Open the Pitch Smith sidebar in VS Code by clicking the Pitch Smith icon in the Activity Bar.

2. In the deck catalog, find the deck you want to view and click on it to open the deck detail view.

3. Click on any slide thumbnail or the deck title to open the Slide Viewer panel.

Alternatively, you can open the Slide Viewer from the Command Palette:

1. Open the Command Palette (Cmd+Shift+P on macOS, Ctrl+Shift+P on Windows/Linux).
2. Search for Pitch Smith: Open Slide Viewer.
3. Select your deck to open the viewer.

Verify: Viewer opened successfully

Expected: The Slide Viewer panel opens in VS Code showing your first slide at full size, with a thumbnail sidebar on the left showing all slides in the deck. The current slide number is displayed in the toolbar area.

If no slides appear, confirm that your deck has built slides by checking the output/<deck-slug>/slides/ directory for HTML files.

Navigate Between Slides

Move through your slides using keyboard shortcuts, the thumbnail strip, or the slide counter.

Keyboard Shortcuts

Key	Action
Right Arrow (→)	Next slide
Left Arrow (←)	Previous slide
Page Down	Next slide
Page Up	Previous slide

Thumbnail Strip

The thumbnail sidebar on the left side of the viewer shows miniature previews of every slide in your deck. Click any thumbnail to jump directly to that slide. The currently active slide is highlighted in the thumbnail strip.

Slide Counter

The slide counter in the toolbar displays your current position in the deck (for example, "3 / 10"). This updates automatically as you navigate between slides.

Verify: Navigation works correctly

1. Press the right arrow key several times to advance through slides.
2. Press the left arrow key to go back.
3. Click a thumbnail in the sidebar to jump to a specific slide.

Expected: The main slide display updates to show the selected slide. The slide counter reflects the correct position. The active thumbnail is highlighted in the sidebar.

Viewer Controls

The Slide Viewer toolbar provides controls for adjusting your viewing experience.

Toolbar Actions

The toolbar at the top of the viewer includes:

• Slide counter -- Shows current slide number and total (for example, "3 / 10")
• Fullscreen toggle -- Expand the viewer to fill the entire VS Code editor area
• Sidebar toggle -- Show or hide the thumbnail sidebar
• Download menu -- Export slides in various formats (see Export Presentations)

Fullscreen View Mode

Press the fullscreen button in the toolbar or use the keyboard shortcut to expand the viewer to fill the entire editor area. This removes distracting UI elements and lets you focus on the slide content. Press the button again or press Escape to exit fullscreen.

Fullscreen Edit Mode

The viewer also supports a fullscreen edit mode where you can view and edit slide content at full size. In edit mode, text fields on the slide become editable -- click on any text element to modify it directly. Changes are saved automatically to the slide's state file.

Sidebar Toggle

Click the sidebar toggle button in the toolbar to show or hide the thumbnail strip. Hiding the sidebar gives more horizontal space to the main slide display, which is useful on smaller screens.

Verify: Controls respond correctly

1. Click the fullscreen toggle -- the viewer should expand to fill the editor area.
2. Click it again or press Escape -- the viewer returns to normal size.
3. Click the sidebar toggle -- the thumbnail strip hides.
4. Click it again -- the thumbnail strip reappears.

Expected: All toolbar buttons respond immediately. The slide display adjusts smoothly when toggling fullscreen or sidebar visibility.

Present Your Slides

Enter a browser-based presentation mode to display your slides fullscreen in a web browser, ideal for actual presentations or screen sharing.

1. Click the Present button in the Slide Viewer toolbar.

2. Pitch Smith starts a local HTTP server and opens your default browser with the presentation view at a local URL.

3. The presentation opens in fullscreen mode. Navigate through slides using:

Key	Action
Right Arrow (→) or Spacebar	Next slide / next animation step
Left Arrow (←)	Previous slide / previous animation step
Escape	Exit fullscreen

4. If your slides have build animations, each press of the right arrow or spacebar reveals the next animation group before advancing to the next slide.

5. When you are finished presenting, close the browser tab. The HTTP server stops automatically.

Verify: Presentation mode works

1. Click the Present button in the viewer toolbar.
2. A browser window should open showing your first slide in fullscreen.
3. Press the right arrow key to advance through slides.

Expected: Slides display at full resolution with your brand theme applied. Keyboard navigation works smoothly. If slides have animations, elements appear in sequence. Closing the browser tab returns you to VS Code.

Presenting tips

• Use fullscreen mode (press F11 in most browsers) for distraction-free presenting.
• Build animations play automatically when you advance -- each keypress reveals the next animation group before moving to the next slide.
• Skipped slides (if any are marked as skipped) are automatically excluded from the presentation.

Auto-Refresh and File Watching

The Slide Viewer automatically detects changes to slide files on disk and refreshes the display. This means you can edit slides (via /pitchsmith:edit, AI editing, or direct HTML changes) and see the results immediately without manually reloading.

How Auto-Refresh Works

1. The viewer monitors your deck's slides/ directory for file changes.
2. When a slide HTML file is modified (for example, after a rebuild or an AI edit), the viewer detects the change within a few seconds.
3. The viewer reloads the affected slide content and updates the thumbnail preview.

Manual Refresh

If auto-refresh does not pick up a change (for example, if a new slide was added or the manifest changed), you can manually trigger a refresh:

/pitchsmith:refresh

This regenerates the manifest.json file for your deck, which tells the viewer about all available slides, their titles, and animation data. After running refresh, the viewer picks up any newly built, edited, or animated slides.

Verify: Auto-refresh detects changes

1. Open the Slide Viewer with a built deck.
2. In a separate Claude Code session, run /pitchsmith:edit on one of the visible slides.
3. After the edit completes, switch back to the Slide Viewer.

Expected: The modified slide updates automatically in the viewer within a few seconds. The thumbnail in the sidebar also refreshes to reflect the change. No manual action is needed.

See Also

Related documentation

The following pages provide deeper context on the concepts used in this guide:

• Build Slides -- Build slides before viewing them
• Edit Slides -- Edit slides using natural language prompts
• Export Presentations -- Export slides from the viewer's download menu
• Reference: Commands -- Full command reference with options and examples
• Core Concepts: Themes -- How brand themes are applied to your slides
• Core Concepts: Slides -- How slide rendering and viewing work under the hood (coming soon)
• Core Concepts: Workflows -- The command system that powers Pitch Smith (coming soon)