Editing presentations

PptxEditorSession coordinates reading, editable shape information, commands, SVG rerendering, selection, undo and redo, and PPTX serialization.

Create a session

import { createPptxEditorSession } from "pptx-glimpse";

const editor = await createPptxEditorSession(pptxBytes, {
  fonts: [{ name: "Inter", data: interFontBytes }],
  textOutput: "text",
});

Session input and output are byte-oriented. The API does not read file inputs, update the DOM, or start a download for you.

Inspect editable shapes

editor.slides contains the current SVG output. Use editor.shapes(slideNumber) to inspect shape bounds, text bodies, image replacement information, and stable source handles.

const shapes = editor.shapes(1);
const run = shapes
  .flatMap((shape) => shape.textBody?.paragraphs ?? [])
  .flatMap((paragraph) => paragraph.runs)
  .find((candidate) => candidate.handle !== undefined);

Preview masters and layouts

layoutCatalog stays a metadata-only ordered view. Pass a master or layout handle to previewLayoutCatalogTarget when a UI needs one SVG thumbnail. Previewing does not change the document, selection, undo/redo history, rendered slides, or saved PPTX bytes.

const layout = editor.layoutCatalog[0]?.layouts[0];
if (layout) {
  const result = await editor.previewLayoutCatalogTarget(layout.handle);
  if (result.ok) {
    thumbnail.innerHTML = result.svg;
    console.log(result.diagnostics);
  } else {
    // preview-handle-not-found | preview-handle-ambiguous
    showThumbnailFallback(result.code);
  }
}

Layout previews resolve template backgrounds, normal master/layout shapes, and compatible placeholder inheritance without including real slide user content. Unsupported elements produce diagnostics. Cache, scheduling, cancellation, PNG conversion, and fallback UI are application responsibilities.

Apply a command

if (run?.handle) {
  const response = await editor.apply({
    kind: "replaceTextRunPlainText",
    handle: run.handle,
    text: "Edited with pptx-glimpse",
  });

  const updatedSvg = response.slides[0]?.svg;
}

Successful state-changing commands rerender the current document and create history. Use applyAll when several commands must succeed atomically as one undo entry.

Editing support is intentionally constrained. Shapes without stable source handles and operations that cannot be preserved safely are rejected. Check the feature support documentation before designing a general-purpose editor.

Selection and history

Use selectShape and selection to keep a single shape selection. The session reconciles selection after edits and history changes.

const selectableShape = editor.shapes(1)
  .find((shape) => shape.handle !== undefined);

if (selectableShape?.handle) {
  editor.selectShape(selectableShape.handle);
}

if (editor.history.canUndo) {
  await editor.undo();
}

if (editor.history.canRedo) {
  await editor.redo();
}

Save the presentation

const { pptx } = editor.save();
const copy = new Uint8Array(pptx.byteLength);
copy.set(pptx);

const blob = new Blob([copy.buffer], {
  type: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
});

save() returns updated PPTX bytes. Your application decides whether to write them to disk, upload them, or offer a browser download.