@web-ppt/editor

_{瑞士网格 · 14 页 · 664 元素 · 91 个组合，每页一串入场动画 —— 样本库原文件，由 Web-PPT 在浏览器中实时渲染
样本作者 Hugo He · MIT · 出处 · 在样本页打开}

亮点

实战样本

不是为演示现造的文件。下面两份都来自样本库，录制脚本直接打开原文件，与样本页走同一条渲染链路。

交互课件：EDDi 互动病例教程

整份课件没有一次「下一页」，81 个内部跳页链接组成按钮式导航。Web-PPT 原样保留这些链接，点哪里就跳到哪里（红圈是录制时的点击位置）。

_{EDDi 互动病例教程 · 29 页 · 604 元素 · 301 张原创插画 · 画布 1040×720
演示 Juliane Boenecke · 插画 Annabell Koenen-Rindfrey · CC BY 4.0 · 出处 · 在样本页打开}

两段 GIF 都由 npm run demo-gif 录制，引擎改动后重跑即可更新。

为什么做这个

Web-PPT 把文件留在客户端、把动画留住、全链路 MIT，包括 1997–2003 的二进制 .ppt。

快速开始

查看与导出

npm i @web-ppt/core @web-ppt/viewer-core

import { parse, slideToSvgFile } from '@web-ppt/core';
import { Viewer } from '@web-ppt/viewer-core';

const pres = await parse(file);                      // File | Blob | ArrayBuffer | Uint8Array
const viewer = new Viewer(container, pres, { animate: true });
viewer.next();                                       // 有动画先播，否则翻页
viewer.search('关键词');
await viewer.exportPng(2);                           // → Blob

const svg = await slideToSvgFile(pres, pres.slides[0]);

图片 ZIP、打印 HTML、Worker 解析、媒体播放、直接驱动 PresentationState 见查看器与渲染。

编辑

编辑能力在 beta 线，整套依赖必须使用同一 next 版本：

npm i @web-ppt/core@next @web-ppt/edit-core@next @web-ppt/viewer-core@next @web-ppt/editor@next

import { openEditor } from '@web-ppt/editor';

const session = await openEditor(file);
const view = session.mount(container, { mode: 'edit', zoom: 1 });
const slideId = session.editor.doc.slideOrder[0];
session.editor.exec({ type: 'SetXfrm', id: session.editor.doc.slides[slideId].children[0], x: 120 });
session.dispose();

模板、设计画布、选择窗格、快捷键与剪贴板、低层 EditDoc、预设调节柄与保存链路见编辑器接入。

0.7 的模板旅程（npm run test:v07）覆盖“模板 → 主题 → 母版 → 版式 → 普通页面 → 保存重开”，细节见编辑器接入。

按需入口

包

体积按默认入口及全部相对静态分块逐文件 gzip 求和，不含 peer 与动态入口。

能力、性能与保真

完整矩阵见格式能力，缺失与近似实现见格式限制，基准方法见性能与保真基准。

架构

四条解析链路各自收敛到统一 Schema，渲染层只认 Schema、不认文件格式；编辑器在只读源值之上叠加覆盖，投影回同一套渲染。依赖方向、数据流与质量体系见架构总览，硬性约束见架构规则。

开发

测试分套件、断言数与快照说明见测试规范，其余命令与调试页见本地开发，提交约定与已知陷阱见AGENTS.md，全部文档的阅读顺序见文档地图。

交流

许可

MIT

README 中的演示 GIF 录自第三方样本，版权与许可归原作者，见各图下方署名。