# 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. Source: https://docs.nasaqui.com/components/presentation-editor ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/presentation-editor.json ``` Build 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 ```tsx import { PresentationEditor, DeckPlayer } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx { await api.save(deck); }} /> ``` ## API | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value`, `defaultValue`, `onValueChange` | `Deck` | empty | Title and slides. Controlled or not. | | `onSave` | `(deck) => Promise` | 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"`. ## Code ### React ```tsx { await api.save(deck); }} /> ``` ### shadcn ```tsx { await api.save(deck); }} /> ``` ### Vue ```vue ``` ### Blade ```blade ``` ### HTML + Alpine ```html

Saved

```