SlideForge is a browser-based PowerPoint template editor built with Next.js, TypeScript, Tailwind CSS, Zustand, JSZip, and PptxGenJS.
It lets you import .pptx files, edit slide content on an interactive canvas, adjust object properties, and export the result as a new PowerPoint presentation.
Install dependencies:
npm installStart the development server:
npm run devOpen http://localhost:3000 in your browser.
- Import
.pptxfiles directly in the browser - Slide thumbnails and slide navigation
- Add slides, textboxes, rectangles, and circles
- Drag canvas elements to reposition them
- Double-click text to edit it
- Edit position, size, fill color, and font size in the property panel
- Export edited slides to
edited_presentation.pptx - Client-side processing with no backend required
Example presentations are available in sampleDeck/:
quarterly-review.pptxsales-pitch.pptxstartup-pitch.pptx
Use the Import button in the editor to load one of these files.
PresentationApp/
├── app/
│ ├── globals.css Global styles
│ ├── layout.tsx App metadata and root layout
│ └── page.tsx Main editor screen and import handling
├── components/
│ └── editor/
│ ├── CanvasStage.tsx Editable presentation canvas
│ ├── PropertyPanel.tsx Selected element controls
│ ├── SlideSidebar.tsx Slide thumbnails and navigation
│ └── Toolbar.tsx Editing and export actions
├── lib/
│ ├── pptx/
│ │ ├── exporter.ts PPTX generation
│ │ └── parser.ts PPTX import and style parsing
│ └── types.ts Shared slide and element types
├── sampleDeck/ Example PowerPoint files
├── store/
│ └── useSlideStore.ts Zustand slide deck state
├── package.json Scripts and dependencies
├── tailwind.config.ts Tailwind configuration
└── README.md Project documentation
Run a production build with:
npm run build