@christophervr/pptx-viewer 1.4.2 → 1.5.1

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.5.0](https://github.com/ChristopherVR/pptx-viewer/releases/tag/@christophervr/pptx-viewer@1.5.0) - 2026-07-11
+
+### Features
+
+- **cli:** Add svelte and vanilla js install/scaffold targets (by @ChristopherVR) ([768aafe](https://github.com/ChristopherVR/pptx-viewer/commit/768aafe14f57b75cc3d91a00c62be261c4044789))
+
+## [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,20 +407,136 @@ 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 type { CollaborationConfig } from 'pptx-angular-viewer';
+import { PowerPointViewerComponent } from 'pptx-angular-viewer';
+
+@Component({
+	selector: 'app-root',
+	standalone: true,
+	imports: [PowerPointViewerComponent],
+	styles: [\`
+		:host { display: block; height: 100dvh; }
+		.stage { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 2rem; cursor: default; }
+		.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; max-width: 520px; width: 100%; padding: 3rem; text-align: center; border: 2px dashed var(--pptx-border, #374151); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
+		.dropzone.over, .dropzone:hover { border-color: var(--pptx-primary, #6366f1); background: var(--pptx-muted, rgba(255,255,255,0.04)); }
+		h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
+		p { margin: 0; font-size: 0.875rem; color: var(--pptx-muted-foreground, #9ca3af); }
+		.pick-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--pptx-border, #374151); background: var(--pptx-muted, #1f2937); color: var(--pptx-foreground, #f3f4f6); cursor: pointer; font-size: 0.875rem; transition: background 0.15s; }
+		.pick-label:hover { background: var(--pptx-accent, #374151); }
+		.or-sep { font-size: 0.8rem; color: var(--pptx-muted-foreground, #6b7280); }
+		.new-btn { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; background: var(--pptx-primary, #6366f1); color: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s; }
+		.new-btn:hover { opacity: 0.9; }
+	\`],
+	template: \`
+		@if (content(); as c) {
+			<div style="height: 100dvh">
+				<pptx-power-point-viewer
+					[content]="c"
+					[canEdit]="true"
+					style="height: 100%"
+					[collaboration]="collab()"
+					(startCollaboration)="collab.set($event)"
+					(stopCollaboration)="collab.set(undefined)"
+				/>
+			</div>
+		} @else {
+			<div
+				class="stage"
+				[class.over]="over()"
+				(dragover)="$event.preventDefault(); over.set(true)"
+				(dragleave)="over.set(false)"
+				(drop)="onDrop($event)"
+				(click)="fileInput.click()"
+			>
+				<div class="dropzone">
+					<h1>Open a Presentation</h1>
+					<p>Drag &amp; drop a .pptx file here, or</p>
+					<label class="pick-label" (click)="$event.stopPropagation()">
+						Choose .pptx file
+						<input #fileInput type="file" accept=".pptx" style="display: none" (change)="onPick($event)" />
+					</label>
+					<span class="or-sep">or</span>
+					<button class="new-btn" (click)="$event.stopPropagation(); newPresentation()">New Presentation</button>
+				</div>
+			</div>
+		}
+	\`,
+})
+export class App {
+	content = signal<ArrayBuffer | Uint8Array | null>(null);
+	collab = signal<CollaborationConfig | undefined>(undefined);
+	over = signal(false);
+
+	async onDrop(e: DragEvent) {
+		e.preventDefault();
+		this.over.set(false);
+		const file = e.dataTransfer?.files?.[0];
+		if (file?.name.endsWith('.pptx')) this.content.set(await file.arrayBuffer());
+	}
+
+	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 type { CollaborationConfig } from 'pptx-react-viewer';
 import { PowerPointViewer } from 'pptx-react-viewer';
 import 'pptx-react-viewer/styles.css';
 import './i18n';
 
 export default function App() {
 	const [content, setContent] = useState<Uint8Array | null>(null);
+	const [over, setOver] = useState(false);
+	const [collab, setCollab] = useState<CollaborationConfig | undefined>();
 
-	const loadFile = useCallback((file: File) => {
-		const reader = new FileReader();
-		reader.onload = () => setContent(new Uint8Array(reader.result as ArrayBuffer));
-		reader.readAsArrayBuffer(file);
+	const loadFile = useCallback(async (file: File) => {
+		setContent(new Uint8Array(await file.arrayBuffer()));
 	}, []);
 
 	const newPresentation = useCallback(async () => {
@@ -433,34 +549,55 @@ export default function App() {
 
 	if (content) {
 		return (
-			<div style={{ height: '100vh' }}>
-				<PowerPointViewer content={content} canEdit />
+			<div style={{ height: '100dvh' }}>
+				<PowerPointViewer
+					content={content}
+					canEdit
+					collaboration={collab}
+					onStartCollaboration={setCollab}
+					onStopCollaboration={() => setCollab(undefined)}
+				/>
 			</div>
 		);
 	}
 
 	return (
-		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, height: '100vh', fontFamily: 'system-ui, sans-serif' }}>
-			<h1 style={{ margin: 0, fontSize: 24, fontWeight: 500, color: '#e5e7eb' }}>Open a Presentation</h1>
-			<label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 20px', borderRadius: 8, border: '1px solid #4b5563', background: '#1f2937', color: '#f3f4f6', cursor: 'pointer', fontSize: 14, transition: 'background 0.15s' }}>
-				Choose .pptx file
-				<input
-					type="file"
-					accept=".pptx"
-					style={{ display: 'none' }}
-					onChange={(e) => {
-						const file = e.target.files?.[0];
-						if (file) loadFile(file);
-					}}
-				/>
-			</label>
-			<span style={{ color: '#6b7280', fontSize: 13 }}>or</span>
-			<button
-				onClick={() => void newPresentation()}
-				style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontSize: 14, fontWeight: 500 }}
+		<div className="stage">
+			<div
+				className={\`dropzone\${over ? ' over' : ''}\`}
+				onDragOver={(e) => { e.preventDefault(); setOver(true); }}
+				onDragLeave={() => setOver(false)}
+				onDrop={(e) => {
+					e.preventDefault();
+					setOver(false);
+					const file = e.dataTransfer.files[0];
+					if (file?.name.endsWith('.pptx')) void loadFile(file);
+				}}
+				onClick={() => document.getElementById('file-input')?.click()}
 			>
-				New Presentation
-			</button>
+				<h1>Open a Presentation</h1>
+				<p>Drag &amp; drop a .pptx file here, or</p>
+				<label className="pick-label" onClick={(e) => e.stopPropagation()}>
+					Choose .pptx file
+					<input
+						id="file-input"
+						type="file"
+						accept=".pptx"
+						style={{ display: 'none' }}
+						onChange={(e) => {
+							const file = e.target.files?.[0];
+							if (file) void loadFile(file);
+						}}
+					/>
+				</label>
+				<span className="or-sep">or</span>
+				<button
+					className="new-btn"
+					onClick={(e) => { e.stopPropagation(); void newPresentation(); }}
+				>
+					New Presentation
+				</button>
+			</div>
 		</div>
 	);
 }
@@ -484,31 +621,320 @@ i18n.use(initReactI18next).init({
 
 export default i18n;
 `;
-var REACT_INDEX_CSS = `:root {
-  color-scheme: light dark;
+
+// src/templates/shared.ts
+var MINIMAL_APP_CSS = `:root {
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  overflow-x: hidden;
+  background: var(--pptx-background, #030712);
+  color: var(--pptx-foreground, #f3f4f6);
+}
+
+#app,
+#root {
+  height: 100dvh;
+}
+
+.stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: 2rem;
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  max-width: 520px;
+  width: 100%;
+  padding: 3rem;
+  text-align: center;
+  border: 2px dashed var(--pptx-border, #374151);
+  border-radius: 0.75rem;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+
+.dropzone.over,
+.dropzone:hover {
+  border-color: var(--pptx-primary, #6366f1);
+  background: var(--pptx-muted, rgba(255, 255, 255, 0.04));
+}
+
+.dropzone h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.dropzone p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--pptx-muted-foreground, #9ca3af);
+}
+
+.pick-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--pptx-border, #374151);
+  background: var(--pptx-muted, #1f2937);
+  color: var(--pptx-foreground, #f3f4f6);
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.15s;
+}
+
+.pick-label:hover {
+  background: var(--pptx-accent, #374151);
+}
+
+.or-sep {
+  font-size: 0.8rem;
+  color: var(--pptx-muted-foreground, #6b7280);
+}
+
+.new-btn {
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: none;
+  background: var(--pptx-primary, #6366f1);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: opacity 0.15s;
+}
+
+.new-btn:hover {
+  opacity: 0.9;
+}
+`;
+var ANGULAR_GLOBAL_CSS = `:root {
+  color-scheme: dark;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 body {
   margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  background: var(--pptx-background, #030712);
+  color: var(--pptx-foreground, #f3f4f6);
+}
+
+app-root {
+  display: block;
+  height: 100dvh;
+}
+`;
+
+// src/templates/svelte.ts
+var SVELTE_APP_SVELTE = `<script lang="ts">
+	import { PptxHandler } from 'pptx-viewer-core';
+	import type { CollaborationConfig } from 'pptx-svelte-viewer';
+	import { PowerPointViewer } from 'pptx-svelte-viewer';
+
+	let content = $state<Uint8Array | null>(null);
+	let over = $state(false);
+	let collab = $state<CollaborationConfig | undefined>();
+
+	async function loadFile(file: File) {
+		content = new Uint8Array(await file.arrayBuffer());
+	}
+
+	function onDrop(e: DragEvent) {
+		over = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file?.name.endsWith('.pptx')) void loadFile(file);
+	}
+
+	function onPick(e: Event) {
+		const file = (e.target as HTMLInputElement).files?.[0];
+		if (file) void loadFile(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: 100dvh">
+		<PowerPointViewer
+			source={content}
+			editable
+			collaboration={collab}
+			onstartcollaboration={(cfg) => { collab = cfg; }}
+			onstopcollaboration={() => { collab = undefined; }}
+		/>
+	</div>
+{:else}
+	<div
+		class="stage"
+		ondragover={(e) => { e.preventDefault(); over = true; }}
+		ondragleave={() => { over = false; }}
+		ondrop={(e) => { e.preventDefault(); onDrop(e); }}
+		onclick={() => document.getElementById('file-input')?.click()}
+		role="button"
+		tabindex="0"
+	>
+		<div class="dropzone" class:over>
+			<h1>Open a Presentation</h1>
+			<p>Drag &amp; drop a .pptx file here, or</p>
+			<label class="pick-label" onclick={(e) => e.stopPropagation()}>
+				Choose .pptx file
+				<input id="file-input" type="file" accept=".pptx" style="display: none" onchange={onPick} />
+			</label>
+			<span class="or-sep">or</span>
+			<button class="new-btn" onclick={(e) => { e.stopPropagation(); void newPresentation(); }}>
+				New Presentation
+			</button>
+		</div>
+	</div>
+{/if}
+`;
+
+// src/templates/vanilla.ts
+var VANILLA_MAIN_TS = `import { createPptxViewer } from 'pptx-vanilla-viewer';
+import { PptxHandler } from 'pptx-viewer-core';
+
+import './style.css';
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+
+function show(source: ArrayBuffer | Uint8Array): void {
+	app.innerHTML = '';
+	app.style.height = '100dvh';
+	createPptxViewer(app, { source, editable: true });
 }
+
+function showLanding(): void {
+	app.style.height = '';
+	app.innerHTML = '';
+
+	const stage = document.createElement('div');
+	stage.className = 'stage';
+
+	const zone = document.createElement('div');
+	zone.className = 'dropzone';
+
+	const h1 = document.createElement('h1');
+	h1.textContent = 'Open a Presentation';
+
+	const hint = document.createElement('p');
+	hint.textContent = 'Drag & drop a .pptx file here, or';
+
+	const label = document.createElement('label');
+	label.className = 'pick-label';
+	label.textContent = 'Choose .pptx file';
+
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.accept = '.pptx';
+	input.style.display = 'none';
+	label.append(input);
+
+	const orSep = document.createElement('span');
+	orSep.className = 'or-sep';
+	orSep.textContent = 'or';
+
+	const newBtn = document.createElement('button');
+	newBtn.className = 'new-btn';
+	newBtn.textContent = 'New Presentation';
+
+	zone.append(h1, hint, label, orSep, newBtn);
+	stage.append(zone);
+	app.append(stage);
+
+	zone.addEventListener('dragover', (e) => {
+		e.preventDefault();
+		zone.classList.add('over');
+	});
+	zone.addEventListener('dragleave', () => zone.classList.remove('over'));
+	zone.addEventListener('drop', (e) => {
+		e.preventDefault();
+		zone.classList.remove('over');
+		const file = e.dataTransfer?.files?.[0];
+		if (file?.name.endsWith('.pptx')) void file.arrayBuffer().then(show);
+	});
+
+	// Click the zone to open the file picker (but not if the button was clicked).
+	zone.addEventListener('click', () => input.click());
+	label.addEventListener('click', (e) => e.stopPropagation());
+	input.addEventListener('click', (e) => e.stopPropagation());
+	input.addEventListener('change', () => {
+		const file = input.files?.[0];
+		if (file) void file.arrayBuffer().then(show);
+	});
+
+	newBtn.addEventListener('click', async (e) => {
+		e.stopPropagation();
+		newBtn.textContent = 'Creating...';
+		newBtn.disabled = true;
+		const { handler, data } = await PptxHandler.createBlank({
+			title: 'Untitled Presentation',
+			initialSlideCount: 1,
+		});
+		show(await handler.save(data.slides));
+	});
+}
+
+showLanding();
 `;
+
+// src/templates/vue.ts
 var VUE_APP_VUE = `<script setup lang="ts">
 import { ref } from 'vue';
 import { PptxHandler } from 'pptx-viewer-core';
+import type { CollaborationConfig } from 'pptx-vue-viewer';
 import { PowerPointViewer } from 'pptx-vue-viewer';
 import 'pptx-vue-viewer/styles.css';
 
 const content = ref<Uint8Array>();
+const over = ref(false);
+const collab = ref<CollaborationConfig | undefined>();
+
+async function loadFile(file: File) {
+	content.value = new Uint8Array(await file.arrayBuffer());
+}
 
-function loadFile(file: File) {
-	const reader = new FileReader();
-	reader.onload = () => (content.value = new Uint8Array(reader.result as ArrayBuffer));
-	reader.readAsArrayBuffer(file);
+function onDrop(e: DragEvent) {
+	over.value = false;
+	const file = e.dataTransfer?.files?.[0];
+	if (file?.name.endsWith('.pptx')) void loadFile(file);
 }
 
 function onPick(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
-	if (file) loadFile(file);
+	if (file) void loadFile(file);
 }
 
 async function newPresentation() {
@@ -521,19 +947,53 @@ async function newPresentation() {
 </script>
 
 <template>
-	<div v-if="content" style="height: 100vh">
-		<PowerPointViewer :content="content" can-edit style="height: 100%" />
+	<div v-if="content" style="height: 100dvh">
+		<PowerPointViewer
+			:content="content"
+			can-edit
+			style="height: 100%"
+			:collaboration="collab"
+			@start-collaboration="collab = $event"
+			@stop-collaboration="collab = undefined"
+		/>
 	</div>
-	<div v-else 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" />
-		</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
+		v-else
+		class="stage"
+		@dragover.prevent="over = true"
+		@dragleave="over = false"
+		@drop.prevent="onDrop($event as DragEvent)"
+		@click="($refs.input as HTMLInputElement).click()"
+	>
+		<div :class="['dropzone', { over }]">
+			<h1>Open a Presentation</h1>
+			<p>Drag &amp; drop a .pptx file here, or</p>
+			<label class="pick-label" @click.stop>
+				Choose .pptx file
+				<input ref="input" type="file" accept=".pptx" style="display: none" @change="onPick" />
+			</label>
+			<span class="or-sep">or</span>
+			<button class="new-btn" @click.stop="newPresentation">New Presentation</button>
+		</div>
 	</div>
 </template>
+
+<style>
+:root { color-scheme: dark; }
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--pptx-background, #030712); color: var(--pptx-foreground, #f3f4f6); }
+#app { height: 100dvh; }
+.stage { display: flex; align-items: center; justify-content: center; height: 100dvh; padding: 2rem; }
+.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; max-width: 520px; width: 100%; padding: 3rem; text-align: center; border: 2px dashed var(--pptx-border, #374151); border-radius: 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
+.dropzone.over, .dropzone:hover { border-color: var(--pptx-primary, #6366f1); background: var(--pptx-muted, rgba(255, 255, 255, 0.04)); }
+.dropzone h1 { margin: 0; font-size: 1.5rem; font-weight: 500; }
+.dropzone p { margin: 0; font-size: 0.875rem; color: var(--pptx-muted-foreground, #9ca3af); }
+.pick-label { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--pptx-border, #374151); background: var(--pptx-muted, #1f2937); color: var(--pptx-foreground, #f3f4f6); cursor: pointer; font-size: 0.875rem; transition: background 0.15s; }
+.pick-label:hover { background: var(--pptx-accent, #374151); }
+.or-sep { font-size: 0.8rem; color: var(--pptx-muted-foreground, #6b7280); }
+.new-btn { padding: 0.5rem 1.25rem; border-radius: 0.5rem; border: none; background: var(--pptx-primary, #6366f1); color: #fff; cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: opacity 0.15s; }
+.new-btn:hover { opacity: 0.9; }
+</style>
 `;
 var VUE_MAIN_TS = `import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
@@ -552,81 +1012,15 @@ 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 COLLAB_EXTRAS = [
+  {
+    prompt: "Include real-time collaboration? (adds yjs, y-websocket, y-webrtc)",
+    packages: ["yjs", "y-websocket", "y-webrtc"]
+    // defaultInclude is true (the default) - demo apps ship with collab packages.
+  }
+];
 var TARGETS = [
   {
     id: "react",
@@ -677,8 +1071,9 @@ 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
+      },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -711,7 +1106,8 @@ Docs: https://www.npmjs.com/package/pptx-vue-viewer`,
       ],
       entryCandidates: ["src/App.vue"],
       entryContent: VUE_APP_VUE,
-      extraFiles: { "src/main.ts": VUE_MAIN_TS }
+      extraFiles: { "src/main.ts": VUE_MAIN_TS },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -747,7 +1143,86 @@ Docs: https://www.npmjs.com/package/pptx-angular-viewer`,
       // Angular v20+ generates `app.ts`; older schematics generate `app.component.ts`.
       entryCandidates: ["src/app/app.ts", "src/app/app.component.ts"],
       entryContent: ANGULAR_APP_TS,
-      extraFiles: { "src/main.ts": ANGULAR_MAIN_TS }
+      extraFiles: { "src/main.ts": ANGULAR_MAIN_TS, "src/styles.css": ANGULAR_GLOBAL_CSS },
+      // @angular/cli@22 requires Node.js >=22.22.0, >=24.13.1, or >=26.0.0. Check
+      // BEFORE the project-name prompt so the user sees the real reason immediately.
+      preflight: () => {
+        const node = process.versions.node;
+        const [maj, min, pat] = node.split(".").map(Number);
+        const ok = maj === 22 && min >= 22 || maj === 24 && (min > 13 || min === 13 && pat >= 1) || maj >= 26;
+        if (!ok) {
+          throw new Error(
+            `@angular/cli@latest requires Node.js v22.22.0+, v24.13.1+, or v26.0.0+.
+  You are running Node.js v${node}.
+  Update Node.js at: https://nodejs.org`
+          );
+        }
+      },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    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 },
+      optionalExtras: COLLAB_EXTRAS
+    }
+  },
+  {
+    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",
+        "three",
+        "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 },
+      optionalExtras: COLLAB_EXTRAS
     }
   },
   {
@@ -846,7 +1321,7 @@ import { spawn } from "child_process";
 function runCommand(command, args, cwd, options) {
   return new Promise((resolve, reject) => {
     const isWindows = process.platform === "win32";
-    const stdio = options?.silent ? "ignore" : "inherit";
+    const stdio = options?.silent ? ["inherit", "ignore", "inherit"] : "inherit";
     const child = isWindows ? spawn([command, ...args].join(" "), { cwd, stdio, shell: true }) : spawn(command, args, { cwd, stdio });
     child.on("error", reject);
     child.on("close", (code) => resolve(code ?? 1));
@@ -912,7 +1387,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 +1435,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] };
   }
@@ -984,6 +1460,18 @@ async function runScaffoldMode(target, args, configTargets, cwd) {
   if (!recipe) {
     throw new Error(`${target.label} has no scaffold recipe.`);
   }
+  recipe.preflight?.();
+  const optionalPkgs = [];
+  if (recipe.optionalExtras) {
+    for (const extra of recipe.optionalExtras) {
+      const defaultChoice = extra.defaultInclude !== false;
+      const include = args.yes || !process.stdin.isTTY ? defaultChoice : await confirm(extra.prompt);
+      if (include) {
+        optionalPkgs.push(...extra.packages);
+      }
+    }
+  }
+  const effectiveRecipe = optionalPkgs.length > 0 ? { ...recipe, extraPackages: [...recipe.extraPackages, ...optionalPkgs] } : recipe;
   const defaultName = `pptx-${target.id}-app`;
   const rawName = args.dir ?? (process.stdin.isTTY ? await input("Project directory name", defaultName) : defaultName);
   const projectName = sanitizeProjectName(rawName);
@@ -1001,7 +1489,7 @@ ${dim("Skipped.")}`);
       return;
     }
   }
-  const result = await scaffoldProject(recipe, projectName, pm, cwd);
+  const result = await scaffoldProject(effectiveRecipe, projectName, pm, cwd);
   if (!result.patchedFile) {
     console.log(
       `

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@christophervr/pptx-viewer",
-	"version": "1.4.2",
+	"version": "1.5.1",
 	"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",