November 2026 - Presentation Editing

Presentation now covers more of a slide editor, built on @diceui/pptx 0.3.

pnpm dlx shadcn@latest add @diceui/presentation

EditingCopy Anchor Link

• Selection. A click selects a shape. Click it again, double-click, or type to edit its text. An empty text box is removed once editing moves elsewhere.
• Snapping. Moving and resizing snap to the slide and to other shapes, with guides. Hold Alt to place freely, or set snapping and snapThreshold.
• Rotation. Drag the handle above a shape to rotate it. Rotated shapes resize along their own axes.
• Shortcuts. Tab moves between shapes, Ctrl / Cmd + D duplicates, copy, cut, and paste work within and between decks, and Ctrl / Cmd + ] and Ctrl / Cmd + [ arrange.
• Thumbnails. The list keeps at most 50 rendered previews, and pending previews no longer pulse.

Formatting toolbarCopy Anchor Link

useSelection reads the selection and its text formatting, and formats, duplicates, deletes, reorders, and inserts text boxes and shapes. startDrawing arms a draw tool that places a text box or shape where the slide is clicked or dragged. Mark toolbars and their menus with data-pptx-keep-selection so pressing them keeps the selection.

The editing example now has a small toolbar built with it.

Overlay partsCopy Anchor Link

The selection overlay is composable from PresentationSelectionBox, PresentationResizeHandle, PresentationRotateHandle, PresentationSnapGuide, and PresentationMarquee. PresentationSelection renders all of them by default.

<PresentationSelection>
  <PresentationSelectionBox>
    <PresentationResizeHandle />
    <PresentationRotateHandle />
  </PresentationSelectionBox>
  <PresentationSnapGuide />
  <PresentationMarquee />
</PresentationSelection>

Breaking changesCopy Anchor Link

• undo() returns a promise. useHistory().undo and store.undo() resolve to a boolean, like redo().
• move starts on drag. mode and data-mode stay "selected" on a press and only become "move" once it drags.
• Click selects text boxes. A single click no longer starts editing a text box or placeholder.
• New selection color. The default --presentation-selection is #1a73e8 instead of var(--ring).
• Resize handle attribute. Resize handles carry data-resize-handle instead of data-resize-grip.
• New modes. onModeChange and mode can report "rotate" and "draw".

MigratingCopy Anchor Link

1. Update @diceui/pptx to 0.3 and reinstall the Presentation component.
2. Await or void calls to undo().
3. Rename [data-resize-grip] selectors to [data-resize-handle].
4. Set --presentation-selection: var(--ring) to keep the old selection color.