From e0a91c7030429c725a6c58d4f3d5a285ef838110 Mon Sep 17 00:00:00 2001 From: erkamyaman Date: Tue, 20 Oct 2026 14:17:51 +0000 Subject: [PATCH 1/2] docs: document the presenter's click preview --- src/content/built-in/shortcuts.md | 3 ++- src/content/guide/presenter-mode.md | 31 ++++++++++++++++++++++++++++ src/content/migrating/from-slidev.md | 4 ++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/content/built-in/shortcuts.md b/src/content/built-in/shortcuts.md index 7b27dc9..9fed77f 100644 --- a/src/content/built-in/shortcuts.md +++ b/src/content/built-in/shortcuts.md @@ -16,6 +16,7 @@ description: The keyboard and mouse controls of a deck, and how to change them. | `d` | Dark or light mode | | `g` | Go to a slide: type a number or part of a title, then Enter | | Escape | Close the overview, dialogs and menus | +| `u` | Presenter page: show or hide the [click preview](../guide/presenter-mode.md#click-preview) | Shortcuts are off while you type in a text field or an editor, and while the drawing toolbar is open. Escape leaves a text field (not an editor), so the keys work again. After a click on a checkbox or a button, the arrow keys still move the slides. While the info dialog or a modal `` of a slide is open, only Escape works. When a `slide-ng-drag` element is selected, the arrow keys nudge it instead of moving through the slides. @@ -43,7 +44,7 @@ export default (actions: ShortcutActions, list: Shortcut[]): Shortcut[] => [ ]; ``` -`key` is a `KeyboardEvent.key` name, with `shift+` in front if needed, and `space` for the space bar. When two shortcuts have the same key, the one later in the list wins, so appending `{ key: 'k' }` replaces a built-in `k`. A deck's `setup/shortcuts.ts` runs after the shortcuts of its theme and addons, so it gets their list and has the last word. The names of the default shortcuts are `next_space`, `prev_space`, `next_right`, `prev_left`, `next_page_key`, `prev_page_key`, `next_down`, `prev_up`, `next_shift`, `prev_shift`, `toggle_dark`, `toggle_overview`, `toggle_overview_backtick`, `hide_overview`, `goto`, `fullscreen`, and the overview moves `right_overview`, `left_overview`, `up_overview`, `down_overview` and `goto_from_overview`. +`key` is a `KeyboardEvent.key` name, with `shift+` in front if needed, and `space` for the space bar. When two shortcuts have the same key, the one later in the list wins, so appending `{ key: 'k' }` replaces a built-in `k`. A deck's `setup/shortcuts.ts` runs after the shortcuts of its theme and addons, so it gets their list and has the last word. The names of the default shortcuts are `next_space`, `prev_space`, `next_right`, `prev_left`, `next_page_key`, `prev_page_key`, `next_down`, `prev_up`, `next_shift`, `prev_shift`, `toggle_dark`, `toggle_overview`, `toggle_overview_backtick`, `hide_overview`, `goto`, `fullscreen`, `toggle_click_preview` (presenter page only), and the overview moves `right_overview`, `left_overview`, `up_overview`, `down_overview` and `goto_from_overview`. ## Color mode diff --git a/src/content/guide/presenter-mode.md b/src/content/guide/presenter-mode.md index b0db9b7..5a8c1c0 100644 --- a/src/content/guide/presenter-mode.md +++ b/src/content/guide/presenter-mode.md @@ -27,6 +27,37 @@ Say hello. `slide-ng export-notes` makes a PDF of the notes. See [Speaker notes](../features/speaker-notes.md). +## Click preview + +The eye button next to the layout button, or `u`, turns on a click preview of the current slide. The preview is on the presenter page only. The audience page, `/notes` and the next-step pane do not change. + +- Parts that are already shown look as usual. +- The part of the next click is brighter and has a dashed outline. +- The parts of later clicks are greyed out. +- Each part that a later click changes has a badge with the number of that click. + +Click a badge or a greyed-out part to go to that click. Every window follows. The choice is remembered in the browser, under the key `slide-ng-presenter-click-preview`. The shortcut is named `toggle_click_preview`, see [Shortcuts](../built-in/shortcuts.md#change-the-keys). + +A theme or a deck can change the look with CSS variables: + +| Variable | Default | What it sets | +| --- | --- | --- | +| `--slide-ng-ghost-opacity` | `0.25` | Opacity of the parts of later clicks | +| `--slide-ng-ghost-next-opacity` | `0.75` | Opacity of the part of the next click | +| `--slide-ng-ghost-next` | `var(--slidev-theme-primary)` | Colour of the outline and the badge of the next click | +| `--slide-ng-ghost-badge-background` | `#6b7280` | Background of the other badges | +| `--slide-ng-ghost-badge-foreground` | `white` | Text of the badges | + +The parts carry the classes `slide-ng-click-ahead` and, for the next click, `slide-ng-click-next`. The click is in `data-slide-ng-click-at`. + +The preview has limits: + +- A `` shows only its current child. The badge on the switch says when it changes. +- Code line steps, Magic Move, `slide-ng-mark` and `slide-ng-motion` show their state at the current click, not their later state. A badge says when they change next. +- The notes PDF has no click preview. + +Slidev has no click preview, see [What differs from Slidev](../migrating/from-slidev.md#added-in-slide-ng). + ## Timer ```md diff --git a/src/content/migrating/from-slidev.md b/src/content/migrating/from-slidev.md index 5639ec2..91cbf99 100644 --- a/src/content/migrating/from-slidev.md +++ b/src/content/migrating/from-slidev.md @@ -16,6 +16,10 @@ slide.ng reads the same markdown file format as *Slidev, with the same slide spl - Most headmatter keys, see [Headmatter and frontmatter](../built-in/headmatter.md), and most of the command line. - The same keyboard shortcuts, the presenter view, drawing and recording. +## Added in slide.ng + +- A click preview on the presenter page: the eye button or `u` shows what the later clicks of the current slide show, greyed out, and a click on a part goes to its click. See [Presenter mode](../guide/presenter-mode.md#click-preview). + ## Syntax differences | In Slidev | In slide.ng | From adbab868fc860ebd00aae2f535808f79d183a6ef Mon Sep 17 00:00:00 2001 From: erkamyaman Date: Tue, 20 Oct 2026 14:26:34 +0000 Subject: [PATCH 2/2] docs: say what a click on a greyed-out part does --- src/content/guide/presenter-mode.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guide/presenter-mode.md b/src/content/guide/presenter-mode.md index 5a8c1c0..925c443 100644 --- a/src/content/guide/presenter-mode.md +++ b/src/content/guide/presenter-mode.md @@ -36,7 +36,7 @@ The eye button next to the layout button, or `u`, turns on a click preview of th - The parts of later clicks are greyed out. - Each part that a later click changes has a badge with the number of that click. -Click a badge or a greyed-out part to go to that click. Every window follows. The choice is remembered in the browser, under the key `slide-ng-presenter-click-preview`. The shortcut is named `toggle_click_preview`, see [Shortcuts](../built-in/shortcuts.md#change-the-keys). +Click a badge or a greyed-out part to go to that click. Every window follows. A link or button inside a greyed-out part is not followed; parts already shown keep their own clicks. While you draw, the pen gets the click and the slide does not move. The choice is remembered in the browser, under the key `slide-ng-presenter-click-preview`. The shortcut is named `toggle_click_preview`, see [Shortcuts](../built-in/shortcuts.md#change-the-keys). A theme or a deck can change the look with CSS variables: