pptxtojson

Units

All numerical length and position values in the output JSON are provided in pt (points).

Accuracy

• Standard Files: For typical PPTX files created manually, layout and style accuracy is often 95%+".
• Complex Files: Files with complex masters, deep grouping, special gradients, or SmartArt may see lower accuracy (approx. 80%+) due to parsing difficulty.

Version Differences

• v0.x: Used px (pixels) for units. Image data used src field.
• v1.x and below: Image elements used src for base64; audio/video used blob.

The output is a structured JSON object organized by slides, elements, and themes. Key top-level properties include:

• slides: An array of slide objects.
• themeColors: An array of hex color strings used in the presentation.
• size: An object containing width and height of the slides.
• usedFonts: A list of embedded fonts.

Each slide in slides contains:

• elements: An array of visual elements (shapes, text, images, etc.).
• layoutElements: Elements from the slide master.
• note: Speaker notes.
• fill: Background fill information.
• transition: Transition animation details.

Length Units

All numeric length values in the output JSON (e.g., left, top, width, height) use pt (point) as the unit.

Fidelity

• Standard files: Can reach 95%+ fidelity for common structures.
• Complex files: Files using advanced techniques (complex masters, deeply nested groups, complex gradients, or SmartArt) may see lower fidelity (roughly 80%+).

Version Changes

• v2.0.1+: Uses pt for units.
• v0.x: Used px (pixels).
• v1.x and earlier: Used src for image base64 and different field names for media.

Install the library using npm to use it in your web or Node.js projects.

npm install pptxtojson

The options object allows you to control how media resources are handled during parsing. If not provided, default settings are used.

You can parse .pptx files directly in the browser using an ArrayBuffer. This is ideal for handling local files without server uploads. Use FileReader to read the file as an ArrayBuffer before passing it to the parse function.

import { parse } from 'pptxtojson'

document.querySelector('input').addEventListener('change', evt => {
	const file = evt.target.files[0]
	
	const reader = new FileReader()
	reader.onload = async e => {
		const json = await parse(e.target.result, {
			imageMode: 'base64',
			videoMode: 'none',
			audioMode: 'none',
		})
		console.log(json)
	}
	reader.readAsArrayBuffer(file)
})

In a browser environment, use parse(file, options) where file is an ArrayBuffer (typically obtained via FileReader.readAsArrayBuffer). This allows for client-side PPTX parsing without uploading files to a server.

import { parse } from 'pptxtojson'

document.querySelector('input').addEventListener('change', evt => {
	const file = evt.target.files[0]
	
	const reader = new FileReader()
	reader.onload = async e => {
		const json = await parse(e.target.result, {
			imageMode: 'base64',
			videoMode: 'none',
			audioMode: 'none',
		})
		console.log(json)
	}
	reader.readAsArrayBuffer(file)
})

For Node.js environments (supported since v1.5.0), import the CommonJS build and pass a buffer's underlying buffer to the parse method.

const pptxtojson = require('pptxtojson/dist/index.cjs')
const fs = require('fs')

async function func() {
  const buffer = fs.readFileSync('test.pptx')

  const json = await pptxtojson.parse(buffer.buffer, {
    imageMode: 'base64',
    videoMode: 'none',
    audioMode: 'none',
  })
  console.log(json)
}

func()

For Node.js environments (v1.5.0+), import the CommonJS build and pass a buffer. Note that this feature is currently experimental.

const pptxtojson = require('pptxtojson/dist/index.cjs')
const fs = require('fs')

async function func() {
  const buffer = fs.readFileSync('test.pptx')

  const json = await pptxtojson.parse(buffer.buffer, {
    imageMode: 'base64',
    videoMode: 'none',
    audioMode: 'none',
  })
  console.log(json)
}

func()

The elements array contains various object types. Common types include:

• text: Contains content (HTML rich text), left, top, width, height, and font/alignment styles.
• image: Contains base64 or blob data, left, top, width, height, and ref.
• shape: Contains shapType (e.g., rect), path, fill, and content (if it's a text shape).
• table: Contains data (cell styles and content), rowHeights, and colWidths.
• chart: Contains chartType, data, and colors.
• video / audio: Contains blob and ref.
• math: Contains latex expressions and picBase64 for formula images.
• diagram: Contains elements (sub-elements) and textList.
• group: Contains a collection of elements.

The parse function accepts an optional options object to control how media assets are handled:

• imageMode: Controls image asset parsing. Values: base64 (default), blob, both, or none (skips images).
• videoMode: Controls video asset parsing. Values: blob or none (default).
• audioMode: Controls audio asset parsing. Values: blob or none (default).

// Example options object
{
  imageMode: 'base64',
  videoMode: 'none',
  audioMode: 'none'
}

Elements within slides.elements are categorized by type. Common types include:

• text: Contains content as HTML rich text, along with positioning (left, top, width, height) and styling.
• image: Contains base64 or blob data, ref (asset path), and geom/rect for cropping.
• shape: Includes shapType (e.g., rect), fill, and path for custom shapes.
• table: Includes data (cells/styles), rowHeights, and colWidths.
• chart: Includes chartType, data, and colors.
• video/audio: Includes blob and ref.
• math: Includes latex expressions and picBase64/picBlob for formula images.
• diagram: (SmartArt) Includes elements and textList.
• group: Includes child elements.