A lightweight, local-first slide editor that runs in the browser and exports real PowerPoint (.pptx) files (widescreen 16:9). The deck is stored in localStorage so your work survives refresh; nothing is sent to a server for editing or export.
Stack: React 18, TypeScript, Vite, Konva / react-konva, Zustand (with persist), pptxgenjs, file-saver.
A design → export tool:
- Build slides on a fixed canvas (editor size maps 1:1 to the exported slide inches).
- Add text, rectangles, and images; drag, resize, and rotate on the canvas.
- Tune layout from the Properties panel (position, size, rotation, text styling, rectangle fill and corner radius).
- Set each slide’s background (solid color and optional image with cover or contain fit).
- Export PPTX downloads a
.pptxyou can open in PowerPoint or compatible apps.
- Slides: Add and delete slides; switch from the slide list; per-slide element counts.
- Elements: Text (with in-panel editor and double-click on canvas where supported), rectangles, images from file upload.
- Canvas: Selection, transformer handles for resize/rotate, image resize keeps aspect ratio from corners.
- Templates: Blank, title slide, two columns, desktop app frame, mobile app, dashboard, modal, kanban board, flow diagram (inserted into the active slide).
- History: Undo / redo (buttons and Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y).
- Editing: Delete selection (Delete / Backspace), deselect (Escape when not typing in a field).
- Step-based export: Per-element
appearStep(see below). - Tests:
npm test(Vitest).
This is not PowerPoint’s built-in animation timeline. On export, each editor slide can become several PPTX slides: for step 0…max(appearStep), the exporter adds one slide per step and only includes elements whose appearStep is less than or equal to that step—so content accumulates as you advance slides in presentation mode. Background is repeated on each generated slide.
| Command | Description |
|---|---|
npm install |
Install dependencies |
npm run dev |
Vite dev server |
npm run build |
Typecheck + production build to dist/ |
npm run preview |
Serve the production build locally |
npm test |
Run Vitest |
CI uses Node 20. Matching that locally avoids surprises.
git clone https://github.com/monapdx/presentation-slide-editor.git
cd presentation-slide-editor
npm install
npm run devPushes to main build and deploy via GitHub Actions (see .github/workflows/deploy.yml). The Vite base is set to /presentation-slide-editor/ for that hosting path.
See CONTRIBUTING.md and the Issues tab on the repository.