Skip to content
Starlight View Modes

Presentation Mode

Presentation Mode

Present any page of your documentation as a slide deck.

Presentation Mode turns each page of your documentation into a slide deck powered by reveal.js, without writing any slides.

Starting a presentation

Select the Presentation Mode icon in the header or in the table of contents, or use a keyboard shortcut. Press Esc to leave the presentation.

Presentations are available at the URL of a page with /presentation-mode/ added after the locale, e.g. /presentation-mode/getting-started/. Switching between view modes keeps the section you are reading.

How pages become slides

The title and description of a page open its presentation. Each h2 and h3 heading starts a new slide, and the content of deeper headings continues below its section when it does not fit. Use the splitHeadingLevel option to change which headings start a new slide.

Long sections are split into numbered slides, and content too large for a single slide is scaled down to fit.

Revealing content step by step1/2

Set the animation option to reveal the items of lists one by one, followed by the content after them. Content before the first list of a slide is displayed right away.

Add a presentation: pause directive to reveal the content following it in a later step, including a heading starting a new slide.

Revealing content step by step2/2

src/content/docs/example.md
Where do plants get their energy from?


<!-- presentation: pause -->


From sunlight, using photosynthesis.

Going back always displays the previous slide with all its content.

Presenting several pages

Enable the presentSidebarGroups option to present the pages of a top-level sidebar group as a single presentation, with slide numbers spanning all of its pages.

Slide numbers spanning several pages are only available in production builds.

Controlling slides1/2

Add presentation directives as comments to adjust how a page is split into slides. Comments are not displayed in the documentation.

src/content/docs/example.md
<!-- presentation: break -->
src/content/docs/example.mdx
{/* presentation: break */}

Controlling slides2/2

The following directives are available:

Directive Effect
presentation: break Starts a new slide.
presentation: keep start … presentation: keep end Keeps the content in between on a single slide.
presentation: hide start … presentation: hide end Hides the content in between.
presentation: pause Reveals the content following it in a later step.

A thematic break (---) also starts a new slide.

Speaker notes

Add speaker notes using the <SpeakerNotes> component. They are only visible in the speaker view, opened with S.

src/content/docs/example.mdx
import SpeakerNotes from "starlight-view-modes/components/SpeakerNotes.astro";


<SpeakerNotes>Ask the class where plants get their energy from.</SpeakerNotes>

In Markdown files, use <aside class="starlight-view-modes-notes" hidden> instead.

Keyboard shortcuts1/2

Shortcut Action
→, ← Next or previous section
↓, ↑ Next or previous slide in a section
Space, Shift+Space Next or previous slide
M Show the contents of the site
S Open the speaker view
F Toggle fullscreen

Keyboard shortcuts2/2

Shortcut Action
G Jump to a slide by its number or its text
B Pause the presentation with a black screen
Ctrl+K (Cmd+K on macOS) Search
Esc Leave Presentation Mode
? Show all keyboard shortcuts

Exporting as PDF

Select the export button in the bottom left corner and save the printable view as a PDF using the print dialog of your browser. Use the landscape layout without margins for the best results.

Switch to normal mode

Contents