简体中文 | English

🎨 Courseware-Editor

A web-based presentation (slideshow) application built with Vue3.x and TypeScript, that replicates most of the common features of Microsoft Office PowerPoint, allowing for the editing and presentation of PPTs online. It offers a rich set of shortcuts and right-click context menus, aiming to recreate a desktop-like application experience. Additionally, it supports exporting to local PPTX files. If you’re looking to develop a “Web Slideshow Application,” PPTist is a great place to start.

🚀 Installation

npm install

npm run dev

📚 Features

Basic Features

• History (undo, redo)
• Shortcuts
• Right-click menu
• Export local files (PPTX, JSON, images, PDF)
• Import and export pptist files
• Print

Slide Page Editing

• Add/delete pages
• Copy/paste pages
• Adjust page order
• Background settings (solid color, gradient, image)
• Set canvas size
• Gridlines
• Rulers
• Canvas zoom and move
• Theme settings
• Extract slides style
• Speaker notes (rich text)
• Slide templates
• Transition animations
• Element animations (entrance, exit, emphasis)
• Selection panel (hide elements, layer sorting, element naming)
• Find/replace
• Annotations

Slide Element Editing

• Add/delete elements
• Copy/paste elements
• Drag and move elements
• Rotate elements
• Scale elements
• Multiple element selection (marquee, point selection)
• Group multiple elements
• Batch edit multiple elements
• Lock elements
• Magnetic alignment of elements (move and scale)
• Adjust element layer
• Align elements to canvas
• Align elements to other elements
• Evenly distribute multiple elements
• Drag to add text and images
• Paste external images
• Set element coordinates, size, and rotation
• Element hyperlinks (link to webpage, link to other slide pages)

Text

• Rich text editing (color, highlight, font, font size, bold, italic, underline, strikethrough, subscript, inline code, quote, hyperlink, alignment, numbering, bullet points, paragraph indent, clear formatting)
• Line height
• Character spacing
• Paragraph spacing
• First line indent
• Fill color
• Border
• Shadow
• Transparency
• Vertical text

Images

• Crop (custom, shape, aspect ratio)
• Filters
• Tint (mask)
• Flip
• Border
• Shadow
• Replace image
• Reset image
• Set as background

Shapes

• Draw any polygon
• Draw any line (unclosed shape simulation)
• Replace shape
• Fill color
• Border
• Shadow
• Transparency
• Flip
• Shape format painter
• Edit text (supports rich text, similar to text element’s rich text editing)

Lines

• Color
• Width
• Style
• Endpoint style

Charts (bar, column, line, area, scatter, pie, donut)

• Chart conversion
• Data editing
• Background fill
• Theme color
• Coordinate system and axis text color
• Other chart settings
• Border
• Legend

Tables

• Add/delete rows and columns
• Theme settings (theme color, header, total row, first column, last column)
• Merge cells
• Cell styles (fill color, text color, bold, italic, underline, strikethrough, alignment)
• Border

Video

• Preview cover settings
• Auto play

Audio

• Icon color
• Auto play
• Loop play

Formulas

• LaTeX editing
• Color settings
• Formula line thickness settings

Slide Show

• Preview all slides
• Pen and blackboard tools
• Timer tool
• Laser pointer
• Auto play
• Speaker view

Mobile

• Basic editing
  • Add/delete/copy/note/undo redo pages
  • Insert text, images, rectangles, circles
  • General element operations: move, scale, rotate, copy, delete, layer adjust, align
  • Element styles: text (bold, italic, underline, strikethrough, font size, color, alignment), fill color
• Basic preview
• Play preview

👀 FAQ

Some common problems: FAQ

🎯 Supplement

There is currently no complete development documentation, but the following documents may be of some help to you:

• Project Directory and Data Structure
• Fundamentals of Canvas and Elements
• How to Customize an Element

🧮 Commercial

If you wish to use this project for commercial gain, I hope you will respect open source and strictly adhere to the AGPL-3.0 license, giving back to the open source community.