pptx-glimpse 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pptx-glimpse",
3
- "version": "1.1.1",
3
+ "version": "1.1.2",
4
4
  "description": "A lightweight JavaScript library for rendering PowerPoint (.pptx) files as SVG or PNG in Node.js. No LibreOffice required.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -43,49 +43,10 @@
43
43
  "opentype.js": "1.3.4"
44
44
  },
45
45
  "devDependencies": {
46
- "@changesets/cli": "^2.29.8",
47
- "@types/node": "^25.2.2",
48
- "@types/ws": "^8.18.1",
49
- "@vitest/coverage-v8": "4.1.0",
50
- "eslint": "^9.0.0",
51
- "eslint-config-prettier": "^10.0.0",
52
- "eslint-plugin-simple-import-sort": "^12.1.1",
53
- "jszip": "^3.10.1",
54
- "knip": "^5.85.0",
55
- "pixelmatch": "^7.1.0",
56
- "prettier": "^3.0.0",
57
- "sharp": "^0.34.5",
58
- "tsup": "^8.0.0",
59
- "tsx": "^4.21.0",
60
- "typescript": "^5.9.3",
61
- "typescript-eslint": "^8.55.0",
62
- "vitest": "^4.1.0",
63
- "ws": "^8.19.0"
46
+ "@pptx-glimpse/document": "0.0.0",
47
+ "@pptx-glimpse/renderer": "0.0.0"
64
48
  },
65
49
  "scripts": {
66
- "build": "tsup src/index.ts --format cjs,esm --dts",
67
- "bench": "vitest bench",
68
- "lint": "eslint src/ vrt/ scripts/ bench/ e2e/",
69
- "lint:fix": "eslint src/ vrt/ scripts/ bench/ e2e/ --fix",
70
- "format": "prettier --write 'src/**/*.ts' 'vrt/**/*.ts' 'scripts/**/*.ts' 'bench/**/*.ts' 'e2e/**/*.ts'",
71
- "format:check": "prettier --check 'src/**/*.ts' 'vrt/**/*.ts' 'scripts/**/*.ts' 'bench/**/*.ts' 'e2e/**/*.ts'",
72
- "test": "vitest run",
73
- "test:coverage": "vitest run --coverage",
74
- "test:watch": "vitest",
75
- "typecheck": "tsc --noEmit",
76
- "knip": "knip",
77
- "dev": "tsx scripts/dev-server.ts",
78
- "render": "tsx scripts/test-render.ts",
79
- "inspect": "tsx scripts/inspect-pptx.ts",
80
- "vrt:snapshot:docker-build": "docker build -t pptx-glimpse-snapshot-vrt docker/snapshot-vrt",
81
- "vrt:snapshot:fixtures": "tsx vrt/snapshot/create-fixtures.ts",
82
- "vrt:snapshot:update": "docker run --rm -v \"$(pwd)\":/workspace -v pptx-glimpse-snapshot-vrt-nm:/workspace/node_modules pptx-glimpse-snapshot-vrt bash /workspace/vrt/snapshot/docker-run.sh bash -c \"npx tsx vrt/snapshot/create-fixtures.ts && npx tsx vrt/snapshot/update-snapshots.ts\"",
83
- "vrt:lo:docker-build": "docker build -t pptx-glimpse-vrt docker/libreoffice-vrt",
84
- "vrt:lo:fixtures": "docker run --rm -v \"$(pwd)\":/workspace pptx-glimpse-vrt python3 /workspace/vrt/libreoffice/create_fixtures.py",
85
- "vrt:lo:update": "pnpm run vrt:lo:docker-build && pnpm run vrt:lo:fixtures && docker run --rm -v \"$(pwd)\":/workspace pptx-glimpse-vrt bash /workspace/vrt/libreoffice/update_snapshots.sh",
86
- "test:package": "pnpm run build && bash scripts/test-package.sh",
87
- "changeset": "changeset",
88
- "demo:dev": "cd demo && npm run dev",
89
- "demo:build": "pnpm run build && cd demo && npm install && npm run build"
50
+ "build": "tsup"
90
51
  }
91
52
  }
package/README.md DELETED
@@ -1,344 +0,0 @@
1
- # pptx-glimpse
2
-
3
- [![npm](https://img.shields.io/npm/v/pptx-glimpse)](https://www.npmjs.com/package/pptx-glimpse)
4
- [![CI](https://github.com/hirokisakabe/pptx-glimpse/actions/workflows/ci.yml/badge.svg)](https://github.com/hirokisakabe/pptx-glimpse/actions/workflows/ci.yml)
5
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6
- [![Node.js](https://img.shields.io/badge/node-%3E%3D22-brightgreen)](https://nodejs.org/)
7
-
8
- No LibreOffice required — just `npm install`.
9
-
10
- A lightweight JavaScript library that renders PowerPoint (.pptx) slides as SVG or PNG in Node.js.
11
-
12
- **[Try the Demo](https://glimpse.pptx.app/)** | [npm](https://www.npmjs.com/package/pptx-glimpse)
13
-
14
- ![pptx-glimpse demo](https://raw.githubusercontent.com/hirokisakabe/pptx-glimpse/main/docs/demo.gif)
15
-
16
- _Upload a .pptx file → get SVG/PNG output instantly_
17
-
18
- | PowerPoint | pptx-glimpse |
19
- | :------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: |
20
- | ![PowerPoint](https://raw.githubusercontent.com/hirokisakabe/pptx-glimpse/main/docs/comparison-powerpoint.png) | ![pptx-glimpse](https://raw.githubusercontent.com/hirokisakabe/pptx-glimpse/main/docs/comparison-pptx-glimpse.png) |
21
-
22
- ## Motivation
23
-
24
- pptx-glimpse is designed for two primary use cases:
25
-
26
- - **Frontend PPTX preview** — Render slide thumbnails without depending on
27
- Microsoft Office or LibreOffice. The SVG output can be embedded directly
28
- in web pages.
29
- - **AI image recognition** — Convert slides to PNG so that vision-capable LLMs
30
- can understand slide content and layout.
31
-
32
- The library focuses on accurately reproducing text, shapes, and spatial layout
33
- rather than pixel-perfect rendering of every PowerPoint feature.
34
-
35
- ## Why not LibreOffice?
36
-
37
- | | LibreOffice | pptx-glimpse |
38
- | ------------ | -------------------------- | ------------------------------ |
39
- | Install size | ~500 MB+ | `npm install` (~30 MB) |
40
- | Docker image | Large base image required | Works in any Node.js image |
41
- | Startup time | Process spawning overhead | In-process, no spawning |
42
- | Concurrency | One process per conversion | Async, runs in your event loop |
43
-
44
- ## Requirements
45
-
46
- - **Node.js >= 22**
47
-
48
- ## Installation
49
-
50
- ```bash
51
- npm install pptx-glimpse
52
- ```
53
-
54
- ## Usage
55
-
56
- ```typescript
57
- import { readFileSync, writeFileSync } from "fs";
58
- import { convertPptxToSvg, convertPptxToPng } from "pptx-glimpse";
59
-
60
- const pptx = readFileSync("presentation.pptx");
61
-
62
- // Convert to SVG
63
- const svgResults = await convertPptxToSvg(pptx);
64
- // [{ slideNumber: 1, svg: "<svg>...</svg>" }, ...]
65
-
66
- // Convert to PNG
67
- const pngResults = await convertPptxToPng(pptx);
68
- // [{ slideNumber: 1, png: Buffer, width: 960, height: 540 }, ...]
69
-
70
- writeFileSync("slide1.png", pngResults[0].png);
71
- ```
72
-
73
- ### Options
74
-
75
- Both `convertPptxToSvg` and `convertPptxToPng` accept an optional `ConvertOptions` object.
76
-
77
- ```typescript
78
- const results = await convertPptxToPng(pptx, {
79
- slides: [1, 3], // Convert only slides 1 and 3
80
- width: 1920, // Output width in pixels (default: 960)
81
- height: 1080, // Output height in pixels (width takes priority if both set)
82
- logLevel: "warn", // Warning log level: "off" | "warn" | "debug"
83
- fontDirs: ["/custom/fonts"], // Additional font directories to search
84
- skipSystemFonts: true, // Skip OS system font directories; use fontDirs only
85
- fontMapping: {
86
- "Custom Corp Font": "Noto Sans", // Custom font name mapping
87
- },
88
- });
89
- ```
90
-
91
- #### Text output mode (`textOutput`)
92
-
93
- By default, text is converted to `<path>` outlines, which renders consistently in any environment but bypasses the browser's native text rasterization (hinting, text-specific anti-aliasing), so glyph edges can look jagged when SVGs are displayed inline in a browser.
94
-
95
- With `textOutput: "text"`, `convertPptxToSvg` emits native `<text>` elements along with `@font-face` rules that embed subsetted fonts as data URIs. This produces smoother text rendering in browsers, smaller SVGs for CJK-heavy slides, and selectable/copyable text. Characters not covered by the resolved font fall back to the viewer's fonts via the `font-family` chain.
96
-
97
- ```typescript
98
- // SVG only — convertPptxToPng always uses path output
99
- const svgResults = await convertPptxToSvg(pptx, { textOutput: "text" });
100
- ```
101
-
102
- Note: embedded fonts and `<text>` may not render as expected when the SVG is referenced via `<img src="...svg">` or sanitized. `convertPptxToPng` always uses path output regardless of this option.
103
-
104
- ### Advanced Usage
105
-
106
- <details>
107
- <summary>Font Utilities</summary>
108
-
109
- #### Collecting used fonts
110
-
111
- `collectUsedFonts` parses a PPTX file and returns all font names used across slides — without performing a full render. Useful for pre-checking which fonts need to be installed.
112
-
113
- ```typescript
114
- import { collectUsedFonts } from "pptx-glimpse";
115
-
116
- const fonts = collectUsedFonts(pptx);
117
- // {
118
- // theme: { majorFont: "Calibri Light", minorFont: "Calibri", majorFontEa: "...", ... },
119
- // fonts: ["Arial", "Calibri", "Meiryo"]
120
- // }
121
- ```
122
-
123
- #### Font mapping helpers
124
-
125
- ```typescript
126
- import { DEFAULT_FONT_MAPPING, createFontMapping, getMappedFont } from "pptx-glimpse";
127
-
128
- // Create a custom mapping (merges with defaults, user values take priority)
129
- const mapping = createFontMapping({ Calibri: "Ubuntu" });
130
-
131
- // Look up mapped font (case-insensitive)
132
- getMappedFont("Meiryo", mapping); // "Noto Sans JP"
133
- getMappedFont("calibri", mapping); // "Ubuntu"
134
- ```
135
-
136
- </details>
137
-
138
- <details>
139
- <summary>Custom Font Loading</summary>
140
-
141
- In environments where system fonts are not available, you can build a text measurer from font buffers using `createOpentypeSetupFromBuffers`. This is a low-level utility for advanced use cases.
142
-
143
- ```typescript
144
- import { readFileSync } from "fs";
145
- import { createOpentypeSetupFromBuffers } from "pptx-glimpse";
146
-
147
- const setup = await createOpentypeSetupFromBuffers([
148
- { name: "Carlito", data: readFileSync("fonts/Carlito-Regular.ttf") },
149
- { name: "Noto Sans JP", data: readFileSync("fonts/NotoSansJP-Regular.ttf") },
150
- ]);
151
- // setup.measurer — text width measurement
152
- // setup.fontResolver — text-to-SVG-path conversion
153
- ```
154
-
155
- </details>
156
-
157
- ## Fonts
158
-
159
- ### Automatic Font Loading
160
-
161
- pptx-glimpse automatically scans system font directories and loads fonts using [opentype.js](https://opentype.js.org/). Text in SVG output is converted to `<path>` elements, ensuring consistent rendering regardless of the environment.
162
-
163
- Default system font directories:
164
-
165
- | OS | Directories |
166
- | ------- | ------------------------------------------------------------ |
167
- | Linux | `/usr/share/fonts`, `/usr/local/share/fonts` |
168
- | macOS | `/System/Library/Fonts`, `/Library/Fonts`, `~/Library/Fonts` |
169
- | Windows | `C:\Windows\Fonts` |
170
-
171
- Use the `fontDirs` option to add custom font directories. To skip system font scanning entirely and use only `fontDirs` (useful in containers, serverless environments, or when you want to bundle specific fonts to reduce startup time), set `skipSystemFonts: true`.
172
-
173
- ### Font Mapping
174
-
175
- PPTX files often reference proprietary fonts (e.g., Calibri, Meiryo). pptx-glimpse maps these to open-source alternatives available on Google Fonts.
176
-
177
- Default mapping:
178
-
179
- | PPTX Font | Mapped to |
180
- | ----------------------------------- | ------------- |
181
- | Calibri | Carlito |
182
- | Arial | Arimo |
183
- | Times New Roman | Tinos |
184
- | Courier New | Cousine |
185
- | Cambria | Caladea |
186
- | Meiryo / Yu Gothic / MS Gothic etc. | Noto Sans JP |
187
- | MS Mincho / Yu Mincho etc. | Noto Serif JP |
188
-
189
- You can customize the mapping via the `fontMapping` option:
190
-
191
- ```typescript
192
- const results = await convertPptxToSvg(pptx, {
193
- fontMapping: {
194
- "Custom Corp Font": "Noto Sans", // Add a new mapping
195
- Arial: "Inter", // Override the default
196
- },
197
- });
198
- ```
199
-
200
- ## Feature Support
201
-
202
- 136 preset shapes, charts, tables, SmartArt, gradients, shadows, and more — covering the most common static PowerPoint content.
203
-
204
- ### Supported Features
205
-
206
- #### Shapes
207
-
208
- | Feature | Details |
209
- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
210
- | Preset shapes | 136 types (rectangles, ellipses, arrows, flowcharts, callouts, stars, math symbols, etc.) |
211
- | Custom shapes | Arbitrary shape drawing using custom paths (moveTo, lnTo, cubicBezTo, quadBezTo, arcTo, close), adjust values / guide formulas |
212
- | Connectors | Straight / bent / curved connectors, arrow endpoints (headEnd/tailEnd), line style / color / width |
213
- | Groups | Shape grouping, nested groups, group rotation / flip |
214
- | Transforms | Position, size, rotation, flip (flipH/flipV), adjustment values |
215
-
216
- #### Text
217
-
218
- | Feature | Details |
219
- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
220
- | Character formatting | Font size, font family (East Asian font support), bold, italic, underline, strikethrough, font color, superscript / subscript, hyperlinks |
221
- | Paragraph formatting | Horizontal alignment (left/center/right/justify), vertical anchor (top/center/bottom), line spacing, before/after paragraph spacing, indent |
222
- | Bullet points | Character bullets (buChar), auto-numbering (buAutoNum, 9 types), bullet font / color / size |
223
- | Text boxes | Word wrap (square/none), auto-fit (noAutofit/normAutofit/spAutofit), font scaling, margins |
224
- | Word wrapping | Word wrapping for English, Japanese, and CJK text, wrapping with mixed font sizes |
225
- | Style inheritance | Full text style inheritance chain (run → paragraph default → body lstStyle → layout → master → txStyles → defaultTextStyle → theme fonts) |
226
- | Tab stops / fields | Tab stop positions, field codes (slide number, date, etc.) |
227
-
228
- #### Fill
229
-
230
- | Feature | Details |
231
- | ------------ | ---------------------------------------------------------------- |
232
- | Solid color | RGB color specification, transparency |
233
- | Gradient | Linear gradient, radial gradient, multiple gradient stops, angle |
234
- | Image fill | PNG/JPEG/GIF, stretch mode, cropping (srcRect) |
235
- | Pattern fill | Hatching patterns (horizontal, vertical, diagonal, cross, etc.) |
236
- | Group fill | Inherit fill from parent group |
237
- | No fill | noFill specification |
238
-
239
- #### Lines & Borders
240
-
241
- | Feature | Details |
242
- | ---------- | ----------------------------------------------------------------- |
243
- | Line style | Line width, solid color, transparency, lineCap, lineJoin |
244
- | Dash style | solid, dash, dot, dashDot, lgDash, lgDashDot, sysDash, sysDot |
245
- | Arrows | Head / tail arrow endpoints with type, width, and length settings |
246
-
247
- #### Colors
248
-
249
- | Feature | Details |
250
- | ---------------- | ------------------------------------------------------------------------ |
251
- | Color types | RGB (srgbClr), theme color (schemeClr), system color (sysClr) |
252
- | Theme colors | Color scheme (dk1, lt1, dk2, lt2, accent1-6, hlink, folHlink), color map |
253
- | Color transforms | Luminance adjustment (lumMod/lumOff), tint, shade, transparency (alpha) |
254
-
255
- #### Effects
256
-
257
- | Feature | Details |
258
- | ------------ | ------------------------------------------------------ |
259
- | Outer shadow | Blur radius, distance, direction, color / transparency |
260
- | Inner shadow | Blur radius, distance, direction, color / transparency |
261
- | Glow | Radius, color / transparency |
262
- | Soft edge | Radius |
263
-
264
- #### Images
265
-
266
- | Feature | Details |
267
- | -------------- | ---------------------------------------------------------------------------- |
268
- | Image elements | PNG/JPEG/GIF, position / size / rotation / flip, cropping (srcRect), effects |
269
- | Image fill | Image fill for shapes and backgrounds |
270
-
271
- #### Tables
272
-
273
- | Feature | Details |
274
- | --------------- | ------------------------------------------------------------------------------- |
275
- | Table structure | Row and column grid, cell merging (gridSpan/rowSpan), row height / column width |
276
- | Cell formatting | Text, fill (solid/gradient/image), borders (top/bottom/left/right, styles) |
277
-
278
- #### Charts
279
-
280
- | Feature | Details |
281
- | ---------------- | --------------------------------------------------------------------------------------------------------- |
282
- | Supported charts | Bar chart (vertical/horizontal), line chart, pie chart, scatter plot, area chart, doughnut, bubble, radar |
283
- | Chart elements | Title, legend (position), series (name/values/categories/color), category axis, value axis |
284
-
285
- #### SmartArt
286
-
287
- | Feature | Details |
288
- | ------------------- | ------------------------------------------------------------------------------ |
289
- | Pre-rendered shapes | Renders SmartArt using PowerPoint's pre-rendered drawing shapes (drawingN.xml) |
290
- | mc:AlternateContent | Handles AlternateContent fallback mechanism used by SmartArt |
291
-
292
- #### Background & Slide Settings
293
-
294
- | Feature | Details |
295
- | ------------ | ---------------------------------------------------------------------- |
296
- | Background | Solid, gradient, image. Fallback order: slide → layout → master |
297
- | Slide size | 16:9, 4:3, custom sizes |
298
- | Theme | Theme color scheme, theme fonts (majorFont/minorFont), theme font refs |
299
- | showMasterSp | Control visibility of master shapes per slide / layout |
300
-
301
- <details>
302
- <summary>Unsupported Features</summary>
303
-
304
- | Category | Unsupported features |
305
- | -------------- | -------------------------------------------------------------------------- |
306
- | Fill | Path gradient (rect/shape type) |
307
- | Effects | Reflection, 3D rotation / extrusion, artistic effects |
308
- | Charts | Stock, combo, histogram, box plot, waterfall, treemap, sunburst |
309
- | Chart details | Data labels, axis titles / tick marks / grid lines, error bars, trendlines |
310
- | Text | Individual text effects (shadow/glow), text columns |
311
- | Tables | Table style template application, diagonal borders |
312
- | Shapes | Shape operations (Union/Subtract/Intersect/Fragment) |
313
- | Multimedia | Embedded video / audio |
314
- | Animations | Object animations, slide transitions |
315
- | Slide elements | Slide notes, comments, headers / footers, slide numbers / dates |
316
- | Image formats | EMF/WMF (parsed but not rendered) |
317
- | Other | Macros / VBA, sections, zoom slides |
318
-
319
- </details>
320
-
321
- ## Development
322
-
323
- <details>
324
- <summary>Test rendering</summary>
325
-
326
- You can specify a PPTX file to preview SVG and PNG conversion results.
327
-
328
- ```bash
329
- npm run render -- <pptx-file> [output-dir]
330
- ```
331
-
332
- - If `output-dir` is omitted, output is saved to `./output`
333
-
334
- ```bash
335
- # Examples
336
- npm run render -- presentation.pptx
337
- npm run render -- presentation.pptx ./my-output
338
- ```
339
-
340
- </details>
341
-
342
- ## License
343
-
344
- MIT