PPTist Development Guide

Expert guidance for working with PPTist, a web-based PowerPoint-like presentation editor built with Vue 3, TypeScript, and Vite.

Overview

PPTist is a feature-rich presentation editor with desktop, mobile, and presentation modes. It uses ProseMirror for rich text editing, IndexedDB for data persistence, and supports multiple element types (text, images, shapes, charts, tables, media, LaTeX).

Development Commands

Installation & Development

1. Install dependencies: `npm install`

2. Start development server: `npm run dev` (opens at `http://127.0.0.1:5173/`)

3. For production build: `npm run build` (includes type-check)

Code Quality Commands

Code Style Rules

Architecture

Technology Stack

Application Views

1. **Editor** (`src/views/Editor/`): Main desktop editing interface

2. **Screen** (`src/views/Screen/`): Presentation/slideshow mode

3. **Mobile** (`src/views/Mobile/`): Mobile-optimized editor and player

Core Pinia Stores

Directory Structure

Supported Element Types

Canvas System

Data Flow

1. Mock data loaded from `src/services/` on init

2. Slides stored in Pinia + persisted to IndexedDB

3. Snapshot system for undo/redo

4. Export supports PPTX, PDF, images, JSON

Styling Conventions

API Integration

Development Best Practices

Component Development

1. Use Vue 3 Composition API patterns

2. Strict TypeScript with proper prop/emit typing

3. Follow existing naming conventions

4. Validate props and type emissions

State Management

1. Use Pinia stores for global state

2. Minimize component-local state

3. Use `storeToRefs()` for reactive store properties

4. Implement proper store actions for mutations

Styling

1. Use SCSS variables for consistent theming

2. Follow existing component patterns

3. Ensure mobile responsiveness

4. Use CSS Grid/Flexbox for layouts

Performance

1. Virtualize elements for large presentations

2. Use computed properties for expensive calculations

3. Optimize canvas rendering

4. Implement cleanup in unmount hooks

Common Tasks

Adding a New Element Type

1. Define type in `src/types/slides.ts`

2. Create element component in `src/views/Editor/Canvas/`

3. Add toolbar panel in `src/views/Editor/Toolbar/`

4. Implement operations in hooks

5. Update serialization/export logic

Modifying Canvas Behavior

1. Check `src/views/Editor/Canvas/` for rendering logic

2. Update hooks in `src/hooks/` for operations

3. Test drag/resize/rotate/align interactions

4. Verify mobile compatibility

Debugging Data Flow

1. Check Pinia stores in Vue DevTools

2. Inspect IndexedDB in browser DevTools

3. Review snapshot history in `useSnapshotStore`

4. Use console logging in store actions

Working with Stores

```typescript

import { storeToRefs } from 'pinia'

import { useSlidesStore } from '@/store'

const slidesStore = useSlidesStore()

const { slides, currentSlide } = storeToRefs(slidesStore)

// Actions

slidesStore.addSlide(newSlide)

slidesStore.updateElement(elementId, changes)

```

Important Notes

Resources