Presentation editor
A slide deck editor with a reorderable thumbnail rail, in place editing on layouts, presenter notes and a full screen deck player with keyboard and swipe navigation.
Code
<PresentationEditor defaultValue={{ title: "Q3 review", slides: [{ id: "s1", layout: "title", title: "Q3 review", subtitle: "Product team" }] }} onSave={async (deck) => { await api.save(deck); }}/><DeckPlayer deck={deck} open={open} onOpenChange={setOpen} defaultShowNotes />Editors · beta
Live examples and controls: Presentation editor in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/presentation-editor.jsonBuild a deck from layouts (title, section, content, two columns, quote, image, blank), edit the text right on the slide,
and play it full screen. The DeckPlayer can also be used on its own to show any deck.
When to use
- Short decks made inside the product: pitches, onboarding, reports for a meeting.
When not to use
- Free form design with shapes and animation: this is layout based on purpose.
- Documents that scroll: use
ReportEditor.
Import
import { PresentationEditor, DeckPlayer } from "@fadymondy/nasaq/web";Quick start
<PresentationEditor
defaultValue={{ title: "Q3 review", slides: [{ id: "s1", layout: "title", title: "Q3 review", subtitle: "Product team" }] }}
onSave={async (deck) => {
await api.save(deck);
}}
/>
<DeckPlayer deck={deck} open={open} onOpenChange={setOpen} defaultShowNotes />API
| Prop | Type | Default | Description |
|---|---|---|---|
value, defaultValue, onValueChange | Deck | empty | Title and slides. Controlled or not. |
onSave | (deck) => Promise<void | { error?: string }> | none | Adds Save and the unsaved state. |
onPresent | (deck, startIndex) => void | opens its own player | Take over Present. |
readOnly | boolean | false | Look and play, change nothing. |
labels, className | English and Arabic built in. |
DeckPlayer props: deck, open, onOpenChange, index / defaultIndex / onIndexChange, fullscreen (default true), defaultShowNotes, labels.
SlideView draws one 16:9 slide with container units, so it works as a thumbnail, a canvas or the player stage.
Behaviour
- Drag thumbnails to reorder, or use Move earlier and Move later. Add slide offers every layout; Duplicate and Delete act on the selected slide.
- Player: Right, Space, Enter and Page Down go next, Left and Page Up go back, Home and End jump, N toggles notes with the next slide and a timer, F toggles full screen, Esc exits. Swipe on touch. Controls fade when idle.
- Image addresses are limited to https, http, site relative paths and data images.
Accessibility
The rail is a list of buttons naming each slide. The player is a modal dialog with a progress bar (role="progressbar") and a live region announcing "Slide 2 of 8".
RTL
Arrow keys and swipe direction mirror, so "next" is always the way you read. Slide text uses dir="auto".
Notes
A notes workspace with notebooks and tags, a list and a coloured board, search and sort, pinned and sealed notes, and an editor with a rich or Markdown body, backlinks, properties, word count, an autosave state, a context menu, an actions menu and keyboard shortcuts, driven by callbacks.
Report editor
A block based report editor for headings, rich text, key figures, charts, tables and callouts, with a live preview and a read only print friendly report viewer.