How casualoffice/slides works
Casual Slides is a self-hostable browser presentation editor built on Univer, with PowerPoint-style editing and .pptx round-trip. The main workflow is opening or creating a deck, editing slides through the shell and Univer command bridge, then exporting or retaining an autosave. README-described features include slide management, themes, notes, slideshow, recent files, and optional raw-WebSocket co-editing. Source excerpts show the app-to-command, app-to-file-client, worker, and autosave relationships; unsampled UI wiring and the server’s collaboration protocol are not inferred.
Main entry points: App.tsx Editor shell · commands.ts Slide commands · worker.ts PPTX worker · FormatPane.tsx Format pane
Components 27
Presentation editor
- Editor shell
apps/web/src/App.tsx - Univer canvas
apps/web/src/UniverSlide.tsx - Slide commands
apps/web/src/univer/commands.ts - Ribbon tools
apps/web/src/shell/Toolbar.tsx - Format pane
apps/web/src/shell/FormatPane.tsx - Selection bridge
apps/web/src/shell/selection.ts - Slide rail
apps/web/src/shell/SlideRail.tsx - Slide actions
apps/web/src/shell/SlideContextMenu.tsx - Element actions
apps/web/src/shell/ElementContextMenu.tsx - Find and replace
apps/web/src/shell/FindReplaceDialog.tsx - Themes and layouts
apps/web/src/shell/ThemePicker.tsx - Speaker notes
apps/web/src/shell/NotesPanel.tsx - Slideshow presenter
apps/web/src/shell/SlideShow.tsx
PowerPoint file I/O
- PPTX client
apps/web/src/pptx/client.ts - PPTX worker
apps/web/src/pptx/worker.ts - PresentationML import
apps/web/src/pptx/pptx-import.ts - PPTX export
apps/web/src/pptx/pptx-export.ts - PDF and PNG output
apps/web/src/shell/download-slide.ts
Local persistence
- Autosave snapshot
apps/web/src/storage/autosave.ts - Recent files
apps/web/src/storage/recent-files.ts
Co-editing relay
- Collaboration provider
apps/web/src/collab/CollabProvider.tsx - Mutation bridge
apps/web/src/collab/bridge.ts - WebSocket relay
apps/server/src/index.ts
Other components
- Presenter
- Browser user
- Browser storage
- Other editor
Connections 30
- Presenter → Editor shell: uses editor
README.md - Editor shell → Univer canvas: hosts canvas
apps/web/src/App.tsx - Editor shell → Slide commands: dispatches
apps/web/src/App.tsx - Ribbon tools → Slide commands: dispatches
apps/web/src/shell/Toolbar.tsx - Slide actions → Slide commands: dispatches
apps/web/src/shell/SlideContextMenu.tsx - Element actions → Slide commands: dispatches
apps/web/src/shell/ElementContextMenu.tsx - Format pane → Selection bridge: reads selection
apps/web/src/shell/FormatPane.tsx - Format pane → Slide commands: dispatches
apps/web/src/shell/FormatPane.tsx - Ribbon tools → Selection bridge: reads selection
apps/web/src/shell/Toolbar.tsx - Slide commands → Selection bridge: reads selection
apps/web/src/univer/commands.ts - Editor shell → PPTX client: imports and exports
apps/web/src/App.tsx - PPTX client → PPTX worker: sends requests
apps/web/src/pptx/client.ts - PPTX worker → PresentationML import: imports deck
apps/web/src/pptx/worker.ts - PPTX worker → PPTX export: exports deck
apps/web/src/pptx/worker.ts - Editor shell → Autosave snapshot: saves snapshot
apps/web/src/App.tsx - Editor shell → Recent files: uses recent files
README.md - Slide commands → PDF and PNG output: prints deck
apps/web/src/univer/commands.ts - Browser user → Editor shell: opens editor
- Editor shell → Slide rail: mounts rail
apps/web/src/main.tsx - Editor shell → Find and replace: mounts find UI
apps/web/src/main.tsx - Editor shell → Format pane: mounts format UI
apps/web/src/main.tsx - Editor shell → Element actions: mounts menu
apps/web/src/main.tsx - Editor shell → Slideshow presenter: opens slideshow
README.md - Editor shell → Themes and layouts: offers themes
README.md - Editor shell → Speaker notes: offers notes
README.md - Editor shell → Collaboration provider: enables optionally
README.md - Collaboration provider → Mutation bridge: uses bridge
apps/web/src/collab/CollabProvider.tsx - Mutation bridge → WebSocket relay: broadcasts mutations
README.md - Other editor → WebSocket relay: joins room
README.md - WebSocket relay → Browser storage: keeps rooms in memory
README.md