@christophervr/pptx-viewer 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project are documented here.
 This file is generated from [Conventional Commits](https://www.conventionalcommits.org)
 by [git-cliff](https://git-cliff.org); do not edit it by hand.
 
+## [1.4.2](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.2) - 2026-07-07
+
 ## [1.4.1](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.1) - 2026-07-05
 
 ## [1.4.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.4.0) - 2026-07-05

package/README.md

@@ -7,7 +7,7 @@
 
 ![The pptx-viewer editor: ribbon toolbar, slide thumbnails, and a slide rendered on the canvas](https://raw.githubusercontent.com/ChristopherVR/pptx-viewer/main/.github/assets/editor.png)
 
-This is what you get one `npx` away: a working `.pptx` viewer/editor, wired up in a React, Vue, or Angular app, or just the framework-agnostic engine on its own.
+This is what you get one `npx` away: a working `.pptx` viewer/editor, wired up in a React, Vue, Angular, Svelte, or vanilla JavaScript app, or just the framework-agnostic engine on its own.
 
 <samp>**[▶️ Try the live demo](https://christophervr.github.io/pptx-viewer/demo/)** · **[📦 npm](https://www.npmjs.com/package/@christophervr/pptx-viewer)** · **[📖 Full docs](https://christophervr.github.io/pptx-viewer/)** · **[🧩 Core SDK](https://www.npmjs.com/package/pptx-viewer-core)**</samp>
 
@@ -28,6 +28,8 @@ What are you building with pptx-viewer? (you can pick more than one)
 ❯ ◉ React - pptx-react-viewer, a viewer/editor component for a React 19 app
   ◯ Vue - pptx-vue-viewer, a viewer/editor component for a Vue 3.5+ app
   ◯ Angular - pptx-angular-viewer, a viewer/editor component for an Angular 22+ app
+  ◯ Svelte - pptx-svelte-viewer, a viewer/editor component for a Svelte 5 app
+  ◯ Vanilla JS - pptx-vanilla-viewer, a zero-framework viewer/editor, plain DOM
   ◯ Core engine only - pptx-viewer-core, the framework-agnostic SDK, no UI
   ◯ MCP server - pptx-viewer-mcp, PowerPoint editing tools for AI agents
 ```
@@ -38,14 +40,14 @@ Picking more than one is fine, for example React plus the MCP server to get both
 
 ### Compatibility check
 
-If you picked React, Vue, or Angular and a `package.json` already exists in the current directory, the CLI looks at what's actually installed (or declared) for `react`, `vue`, or `@angular/core` and compares it against the major version each viewer package requires. If they don't match (say, `react@18` in a project but `pptx-react-viewer` needs `react@^19`), it warns you and asks whether to continue before touching anything.
+If you picked React, Vue, Angular, or Svelte and a `package.json` already exists in the current directory, the CLI looks at what's actually installed (or declared) for `react`, `vue`, `@angular/core`, or `svelte` and compares it against the major version each viewer package requires. If they don't match (say, `react@18` in a project but `pptx-react-viewer` needs `react@^19`), it warns you and asks whether to continue before touching anything. (Vanilla JS has no framework peer, so there is nothing to check.)
 
 ### Install here, or scaffold a new project?
 
 When exactly one UI framework is selected, you're asked how to set it up:
 
 - **Install here** adds the package(s) to the project in the current directory (a `package.json` must already exist; run `npm init -y` first if not).
-- **Scaffold a new project** bootstraps a brand-new starter app in its own folder, using the framework's own official scaffolding tool ([`create-vite`](https://www.npmjs.com/package/create-vite) for React/Vue, [`@angular/cli`](https://www.npmjs.com/package/@angular/cli) for Angular), then wires in a working `PowerPointViewer` example (same pattern as the [live demos](https://christophervr.github.io/pptx-viewer/demo/): open an existing `.pptx`, or click "New Presentation" to build a blank deck with `PptxHandler.createBlank` and start editing right away) and installs the viewer package plus `pptx-viewer-core` on top.
+- **Scaffold a new project** bootstraps a brand-new starter app in its own folder, using the framework's own official scaffolding tool ([`create-vite`](https://www.npmjs.com/package/create-vite) for React/Vue/Svelte/Vanilla JS, [`@angular/cli`](https://www.npmjs.com/package/@angular/cli) for Angular), then wires in a working `PowerPointViewer` example (same pattern as the [live demos](https://christophervr.github.io/pptx-viewer/demo/): open an existing `.pptx`, or click "New Presentation" to build a blank deck with `PptxHandler.createBlank` and start editing right away) and installs the viewer package plus `pptx-viewer-core` on top.
 
 Scaffolding is only offered for a single framework at a time; if you select more than one UI framework together, the CLI installs into the current project instead.
 
@@ -60,14 +62,14 @@ npx @christophervr/pptx-viewer --target react --scaffold --dir my-app --yes
 npx @christophervr/pptx-viewer --pm pnpm                           # force a package manager instead of auto-detecting
 ```
 
-| Flag             | Meaning                                                                                                    |
-| ---------------- | ---------------------------------------------------------------------------------------------------------- |
-| `--target <ids>` | Comma-separated: `react`, `vue`, `angular`, `core`, `mcp`. Skips the picker.                               |
-| `--scaffold`     | Bootstrap a new project instead of installing here. Needs exactly one of `react`/`vue`/`angular` selected. |
-| `--dir <name>`   | Project directory name for `--scaffold` (default: `pptx-<target>-app`).                                    |
-| `--pm <manager>` | `bun`, `pnpm`, `yarn`, or `npm`. Skips auto-detection.                                                     |
-| `--yes`, `-y`    | Skip confirmation prompts (including the compatibility warning).                                           |
-| `--help`, `-h`   | Print usage.                                                                                               |
+| Flag             | Meaning                                                                                           |
+| ---------------- | ------------------------------------------------------------------------------------------------- |
+| `--target <ids>` | Comma-separated: `react`, `vue`, `angular`, `svelte`, `vanilla`, `core`, `mcp`. Skips the picker. |
+| `--scaffold`     | Bootstrap a new project instead of installing here. Needs exactly one UI binding target selected. |
+| `--dir <name>`   | Project directory name for `--scaffold` (default: `pptx-<target>-app`).                           |
+| `--pm <manager>` | `bun`, `pnpm`, `yarn`, or `npm`. Skips auto-detection.                                            |
+| `--yes`, `-y`    | Skip confirmation prompts (including the compatibility warning).                                  |
+| `--help`, `-h`   | Print usage.                                                                                      |
 
 ## What it installs
 
@@ -76,6 +78,8 @@ npx @christophervr/pptx-viewer --pm pnpm                           # force a pac
 | **React**      | [`pptx-react-viewer`](https://www.npmjs.com/package/pptx-react-viewer)     | View, edit, present, collaborate, and export `.pptx` files in React 19. |
 | **Vue**        | [`pptx-vue-viewer`](https://www.npmjs.com/package/pptx-vue-viewer)         | The Vue 3.5+ counterpart, feature-equivalent to the React package.      |
 | **Angular**    | [`pptx-angular-viewer`](https://www.npmjs.com/package/pptx-angular-viewer) | The Angular 22+ counterpart, feature-equivalent to the React package.   |
+| **Svelte**     | [`pptx-svelte-viewer`](https://www.npmjs.com/package/pptx-svelte-viewer)   | The Svelte 5 counterpart, built on the same shared engine.              |
+| **Vanilla JS** | [`pptx-vanilla-viewer`](https://www.npmjs.com/package/pptx-vanilla-viewer) | The zero-framework binding: plain DOM, one factory function.            |
 | **Core only**  | [`pptx-viewer-core`](https://www.npmjs.com/package/pptx-viewer-core)       | The framework-agnostic parse/edit/save/convert SDK, no UI.              |
 | **MCP server** | [`pptx-viewer-mcp`](https://www.npmjs.com/package/pptx-viewer-mcp)         | 25 PowerPoint editing tools exposed to AI agents (Claude, Cursor, ...). |
 

package/dist/index.mjs

@@ -407,7 +407,84 @@ async function input(question, defaultValue) {
   }
 }
 
-// src/targets.ts
+// src/templates/angular.ts
+var ANGULAR_APP_TS = `import { Component, signal } from '@angular/core';
+import { PptxHandler } from 'pptx-viewer-core';
+import { PowerPointViewerComponent } from 'pptx-angular-viewer';
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [PowerPointViewerComponent],
+	template: \`
+		@if (content(); as c) {
+			<div style="height: 100vh">
+				<pptx-power-point-viewer [content]="c" [canEdit]="true" style="height: 100%" />
+			</div>
+		} @else {
+			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
+				<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
+				<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
+					Choose .pptx file
+					<input type="file" accept=".pptx" style="display: none" (change)="onPick($event)" />
+				</label>
+				<span style="color: #6b7280; font-size: 13px">or</span>
+				<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" (click)="newPresentation()">New Presentation</button>
+			</div>
+		}
+	\`,
+})
+export class App {
+	content = signal<ArrayBuffer | Uint8Array | null>(null);
+
+	async onPick(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (file) {
+			this.content.set(await file.arrayBuffer());
+		}
+	}
+
+	async newPresentation() {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		this.content.set(await handler.save(data.slides));
+	}
+}
+`;
+var ANGULAR_MAIN_TS = `import 'zone.js';
+import '@angular/compiler';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { Injectable } from '@angular/core';
+import type { MissingTranslationHandlerParams } from '@ngx-translate/core';
+import { MissingTranslationHandler, provideTranslateService } from '@ngx-translate/core';
+import { keyToLabel } from 'pptx-angular-viewer';
+
+import { App } from './app/app.ts';
+
+@Injectable()
+class LabelFallbackHandler implements MissingTranslationHandler {
+	handle(params: MissingTranslationHandlerParams): string {
+		return keyToLabel(params.key);
+	}
+}
+
+bootstrapApplication(App, {
+	providers: [
+		provideTranslateService({
+			lang: 'en',
+			fallbackLang: 'en',
+			missingTranslationHandler: {
+				provide: MissingTranslationHandler,
+				useClass: LabelFallbackHandler,
+			},
+		}),
+	],
+}).catch((err) => console.error(err));
+`;
+
+// src/templates/react.ts
 var REACT_APP_TSX = `import { useCallback, useState } from 'react';
 import { PptxHandler } from 'pptx-viewer-core';
 import { PowerPointViewer } from 'pptx-react-viewer';
@@ -484,7 +561,9 @@ i18n.use(initReactI18next).init({
 
 export default i18n;
 `;
-var REACT_INDEX_CSS = `:root {
+
+// src/templates/shared.ts
+var MINIMAL_APP_CSS = `:root {
   color-scheme: light dark;
 }
 
@@ -492,6 +571,97 @@ body {
   margin: 0;
 }
 `;
+
+// src/templates/svelte.ts
+var SVELTE_APP_SVELTE = `<script lang="ts">
+	import { PptxHandler } from 'pptx-viewer-core';
+	import { PowerPointViewer } from 'pptx-svelte-viewer';
+
+	let content = $state<Uint8Array | null>(null);
+
+	function onPick(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (!file) return;
+		const reader = new FileReader();
+		reader.onload = () => (content = new Uint8Array(reader.result as ArrayBuffer));
+		reader.readAsArrayBuffer(file);
+	}
+
+	async function newPresentation() {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		content = await handler.save(data.slides);
+	}
+</script>
+
+{#if content}
+	<div style="height: 100vh">
+		<PowerPointViewer source={content} editable />
+	</div>
+{:else}
+	<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
+		<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
+		<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
+			Choose .pptx file
+			<input type="file" accept=".pptx" style="display: none" onchange={onPick} />
+		</label>
+		<span style="color: #6b7280; font-size: 13px">or</span>
+		<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" onclick={() => void newPresentation()}>New Presentation</button>
+	</div>
+{/if}
+`;
+
+// src/templates/vanilla.ts
+var VANILLA_MAIN_TS = `import { PptxHandler } from 'pptx-viewer-core';
+import { createPptxViewer } from 'pptx-vanilla-viewer';
+
+import './style.css';
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+
+const picker = document.createElement('div');
+picker.setAttribute(
+	'style',
+	'display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif',
+);
+picker.innerHTML = \`
+	<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
+	<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
+		Choose .pptx file
+		<input id="file-input" type="file" accept=".pptx" style="display: none" />
+	</label>
+	<span style="color: #6b7280; font-size: 13px">or</span>
+	<button id="new-presentation" style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500">New Presentation</button>
+\`;
+app.append(picker);
+
+function show(content: ArrayBuffer | Uint8Array) {
+	picker.remove();
+	app.style.height = '100vh';
+	createPptxViewer(app, { source: content, editable: true });
+}
+
+picker.querySelector<HTMLInputElement>('#file-input')!.addEventListener('change', (e) => {
+	const file = (e.target as HTMLInputElement).files?.[0];
+	if (file) {
+		void file.arrayBuffer().then(show);
+	}
+});
+
+picker.querySelector<HTMLButtonElement>('#new-presentation')!.addEventListener('click', () => {
+	void (async () => {
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		show(await handler.save(data.slides));
+	})();
+});
+`;
+
+// src/templates/vue.ts
 var VUE_APP_VUE = `<script setup lang="ts">
 import { ref } from 'vue';
 import { PptxHandler } from 'pptx-viewer-core';
@@ -552,81 +722,8 @@ const i18n = createI18n({
 
 createApp(App).use(i18n).mount('#app');
 `;
-var ANGULAR_APP_TS = `import { Component, signal } from '@angular/core';
-import { PptxHandler } from 'pptx-viewer-core';
-import { PowerPointViewerComponent } from 'pptx-angular-viewer';
-
-@Component({
-	selector: 'app-root',
-	standalone: true,
-	imports: [PowerPointViewerComponent],
-	template: \`
-		@if (content(); as c) {
-			<div style="height: 100vh">
-				<pptx-power-point-viewer [content]="c" [canEdit]="true" style="height: 100%" />
-			</div>
-		} @else {
-			<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; height: 100vh; font-family: system-ui, sans-serif">
-				<h1 style="margin: 0; font-size: 24px; font-weight: 500; color: #e5e7eb">Open a Presentation</h1>
-				<label style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 8px; border: 1px solid #4b5563; background: #1f2937; color: #f3f4f6; cursor: pointer; font-size: 14px">
-					Choose .pptx file
-					<input type="file" accept=".pptx" style="display: none" (change)="onPick($event)" />
-				</label>
-				<span style="color: #6b7280; font-size: 13px">or</span>
-				<button style="padding: 10px 20px; border-radius: 8px; border: none; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500" (click)="newPresentation()">New Presentation</button>
-			</div>
-		}
-	\`,
-})
-export class App {
-	content = signal<ArrayBuffer | Uint8Array | null>(null);
 
-	async onPick(e: Event) {
-		const file = (e.target as HTMLInputElement).files?.[0];
-		if (file) {
-			this.content.set(await file.arrayBuffer());
-		}
-	}
-
-	async newPresentation() {
-		const { handler, data } = await PptxHandler.createBlank({
-			title: 'Untitled Presentation',
-			initialSlideCount: 1,
-		});
-		this.content.set(await handler.save(data.slides));
-	}
-}
-`;
-var ANGULAR_MAIN_TS = `import 'zone.js';
-import '@angular/compiler';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { Injectable } from '@angular/core';
-import type { MissingTranslationHandlerParams } from '@ngx-translate/core';
-import { MissingTranslationHandler, provideTranslateService } from '@ngx-translate/core';
-import { keyToLabel } from 'pptx-angular-viewer';
-
-import { App } from './app/app.ts';
-
-@Injectable()
-class LabelFallbackHandler implements MissingTranslationHandler {
-	handle(params: MissingTranslationHandlerParams): string {
-		return keyToLabel(params.key);
-	}
-}
-
-bootstrapApplication(App, {
-	providers: [
-		provideTranslateService({
-			lang: 'en',
-			fallbackLang: 'en',
-			missingTranslationHandler: {
-				provide: MissingTranslationHandler,
-				useClass: LabelFallbackHandler,
-			},
-		}),
-	],
-}).catch((err) => console.error(err));
-`;
+// src/targets.ts
 var TARGETS = [
   {
     id: "react",
@@ -677,7 +774,7 @@ Docs: https://www.npmjs.com/package/pptx-react-viewer`,
       entryContent: REACT_APP_TSX,
       extraFiles: {
         "src/i18n.ts": REACT_I18N_TS,
-        "src/index.css": REACT_INDEX_CSS
+        "src/index.css": MINIMAL_APP_CSS
       }
     }
   },
@@ -750,6 +847,62 @@ Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
       extraFiles: { "src/main.ts": ANGULAR_MAIN_TS }
     }
   },
+  {
+    id: "svelte",
+    label: "Svelte",
+    description: "pptx-svelte-viewer - viewer/editor component for a Svelte 5 app",
+    mode: "install",
+    group: "framework",
+    packages: ["pptx-svelte-viewer", "svelte", "jszip", "fast-xml-parser"],
+    // The Svelte binding compiles its styles into the components, so there
+    // is no `/styles.css` subpath to import.
+    nextSteps: `<script lang="ts">
+	import { PowerPointViewer } from 'pptx-svelte-viewer';
+</script>
+
+<PowerPointViewer source={bytes} editable />
+
+Docs: https://www.npmjs.com/package/pptx-svelte-viewer`,
+    compat: { peerPackage: "svelte", requiredMajor: 5 },
+    scaffold: {
+      command: "create-vite@latest",
+      args: (dir) => [dir, "--template", "svelte-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: ["pptx-svelte-viewer", "pptx-viewer-core", "jszip", "fast-xml-parser"],
+      entryCandidates: ["src/App.svelte"],
+      entryContent: SVELTE_APP_SVELTE,
+      // The starter's main.ts imports ./app.css; replace the Vite demo
+      // styles (centred #app with padding) with a full-viewport reset.
+      extraFiles: { "src/app.css": MINIMAL_APP_CSS }
+    }
+  },
+  {
+    id: "vanilla",
+    label: "Vanilla JS",
+    description: "pptx-vanilla-viewer - zero-framework viewer/editor, plain DOM, no framework at all",
+    mode: "install",
+    group: "framework",
+    // The vanilla binding injects its own stylesheet at runtime; jszip and
+    // fast-xml-parser are its only peers.
+    packages: ["pptx-vanilla-viewer", "jszip", "fast-xml-parser"],
+    nextSteps: `import { createPptxViewer } from 'pptx-vanilla-viewer';
+
+const viewer = createPptxViewer(document.getElementById('host')!, {
+  source: '/deck.pptx', // URL, ArrayBuffer, Uint8Array, Blob, or File
+  editable: true,
+});
+
+Docs: https://www.npmjs.com/package/pptx-vanilla-viewer`,
+    scaffold: {
+      command: "create-vite@latest",
+      args: (dir) => [dir, "--template", "vanilla-ts", "--no-interactive", "--no-immediate"],
+      extraPackages: ["pptx-vanilla-viewer", "pptx-viewer-core", "jszip", "fast-xml-parser"],
+      entryCandidates: ["src/main.ts"],
+      entryContent: VANILLA_MAIN_TS,
+      // main.ts imports ./style.css; replace the Vite demo styles with a
+      // full-viewport reset.
+      extraFiles: { "src/style.css": MINIMAL_APP_CSS }
+    }
+  },
   {
     id: "core",
     label: "Core engine only",
@@ -912,7 +1065,7 @@ ${bold("Usage:")} npx @christophervr/pptx-viewer [options]
 
 ${bold("Options:")}
   ${cyan("--target <ids>")}  Skip the picker; comma-separated, any of: ${TARGETS.map((t) => t.id).join(", ")}
-                   (react, vue, and angular are mutually exclusive; pick at most one)
+                   (the UI bindings - react, vue, angular, svelte, vanilla - are mutually exclusive; pick at most one)
   ${cyan("--scaffold")}      Bootstrap a brand-new starter project instead of installing here
   ${cyan("--dir <name>")}    Project directory name for --scaffold
   ${cyan("--pm <manager>")}  Package manager to use: bun, pnpm, yarn, npm (default: auto-detected)
@@ -960,7 +1113,8 @@ async function resolveScaffoldChoice(installTargets, args) {
   const scaffoldable = installTargets.filter((t) => t.scaffold);
   if (args.scaffold) {
     if (scaffoldable.length !== 1) {
-      throw new Error("--scaffold requires exactly one of: react, vue, angular to be selected.");
+      const scaffoldIds = TARGETS.filter((t) => t.scaffold).map((t) => t.id).join(", ");
+      throw new Error(`--scaffold requires exactly one of: ${scaffoldIds} to be selected.`);
     }
     return { useScaffold: true, scaffoldTarget: scaffoldable[0] };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@christophervr/pptx-viewer",
-	"version": "1.4.2",
+	"version": "1.5.0",
 	"description": "Interactive installer for the pptx-viewer family of packages: React, Vue, and Angular viewer components, the framework-agnostic core engine, and the MCP server.",
 	"keywords": [
 		"angular",