Skip to content

Repository files navigation

SlideForge

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.

Getting started

Install dependencies:

npm install

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

Features

  • Import .pptx files 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

Sample decks

Example presentations are available in sampleDeck/:

  • quarterly-review.pptx
  • sales-pitch.pptx
  • startup-pitch.pptx

Use the Import button in the editor to load one of these files.

Project structure

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

Validation

Run a production build with:

npm run build

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages