$ show pipipi-pikachu/PPTist
PPTist is a full-featured web-based slide editor and presentation application, built with Vue 3, TypeScript, and Pinia. It replicates core PowerPoint functionality entirely in the browser, supporting text, image, shape, line, chart, table, video, audio, and LaTeX elements. Users can create, edit, animate, and present slides, with import/export support for PPTX, PDF, images, and a custom .pptist format. An AI-assisted slide generation feature allows users to input a topic and receive a complete slide deck via an external API, with template-based layout and image selection. The architecture is a single-page application with a custom canvas rendering system, rich text editing via ProseMirror, and state management through Pinia stores. The editor is divided into three main modes: Editor (full editing with thumbnails, toolbar, and canvas), Screen (presentation with speaker notes, audience view, writing board, and laser pointer), and Mobile (basic editing and preview for touch devices). Data persistence uses IndexedDB via Dexie for undo/redo snapshots, and slide data is stored as JSON in Pinia stores. External dependencies include ECharts for charts, pptxgenjs for PPTX export, and a backend server for AI generation and image search. Key entry points include src/App.vue (top-level routing), src/views/Editor/index.vue (main editor), src/views/Screen/index.vue (presentation mode), and src/views/Mobile/index.vue (mobile mode). Data flows center on the slide store: user actions trigger mutations captured as snapshots for undo/redo, export processes convert internal JSON to target formats, and import parses external files into the internal schema. The AI PPT flow sends a user prompt to the backend, receives an outline and slide data, then fills template slides with content and images. The application is actively maintained with a large community (9386 stars, 1770 forks) and is licensed under AGPL-3.0. It relies on an external backend for AI features and image search, meaning those features are not self-contained. The codebase is well-structured but lacks automated tests, and some components (e.g., HTML parser, shape library) are self-contained and potentially reusable in other projects.
The LLM identified 4 files worth highlighting for reuse:
A custom HTML parser with lexer, parser, formatter, and stringifier modules. It is self-contained (only imports from its own directory) and could be extracted as a standalone library for parsing and manipulating HTML strings. Demonstrates non-obvious skill in building a parser from scratch without relying on external parsing libraries.
A comprehensive library of shape definitions with SVG path strings and parametric path formulas (e.g., roundRect, parallelogramLeft, triangle). It is a pure data file with no internal imports, making it easily reusable in any vector graphics or slide editor application. The parametric formulas allow shapes to be adjusted dynamically, showcasing thoughtful design for extensibility.
A full-featured color picker component with hue, saturation, alpha, and editable input fields. It is self-contained and could be extracted as a reusable Vue component library. The implementation includes a checkboard pattern for transparency, gradient bars, and real-time color manipulation, demonstrating high craftsmanship in UI component design.
A custom context menu component with support for nested menus, icons, and dynamic item generation. It is self-contained (only imports types from its own directory) and could be extracted as a reusable Vue component. The implementation handles positioning, submenu delays, and click-outside dismissal, showing attention to UX details.