Modify or Extract PowerPoint Slide Titles in React with JavaScript

2026-11-12 07:33:55 Written by  Nina Tang
Rate this item
(0 votes)

The same deck gets reused for different projects, quarters, and audiences, and its titles have to change with them. The reverse case is just as common: a deck runs dozens of slides, and turning every title into an agenda or a list means copying them one by one. Doing this on a server means uploading the file first, and it stops being local to the user.

This article modifies and extracts slide titles in the browser with Spire.Presentation for JavaScript. ISlide.Title reads and writes the title placeholder on a single slide. To collect every title in a deck at once, walk the shapes on each slide and filter by placeholder type. Everything runs in the browser via WebAssembly, with no Office install and no backend.

This article covers two core tasks:

For installation and project setup, see How to Integrate Spire.Presentation for JavaScript in a React Project. The examples below assume Spire.Presentation is installed and the WebAssembly module is initialized.


Modify PowerPoint slide titles

Spire.Presentation for JavaScript provides the ISlide.Title property to read and write the title of a single slide. Assigning a value replaces the text in the title placeholder; the placeholder keeps its position and font size. If the slide has no title placeholder, the assignment adds one.

Title works on the title placeholder and leaves other shapes alone:

Placeholder type Does Title apply
PlaceholderType.Title Yes
PlaceholderType.CenteredTitle Yes
PlaceholderType.Subtitle No

The steps are:

  1. Get the Spire.Presentation WASM module and make sure it is ready.
  2. Load the sample presentation and fonts, create a Presentation object, and open the file.
  3. Get the target slides with Presentation.Slides.get_Item() and assign the new title to ISlide.Title.
  4. Save the result with Presentation.SaveToFile().
  5. Read the result file from the VFS and trigger a browser download.

The code to modify PowerPoint slide titles is as follows:

function App() {
  const modifyTitles = async () => {
    // Get the Spire.Presentation WASM module
    const pptModule = window.wasmModule?.spirepresentation;

    // Check that the module is ready
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // Load the presentation and fonts
    await window.spire.FetchFileToVFS('Annual Business Report.pptx', "", `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);

    // Create a Presentation instance and load the presentation
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile('Annual Business Report.pptx');

    // Get slides by index and assign new titles
    ppt.Slides.get_Item(0).Title = '2026 Annual Business Report';
    ppt.Slides.get_Item(1).Title = 'Key Metrics (Revised)';
    ppt.Slides.get_Item(3).Title = 'Next Steps';

    // Save the result file
    const outputFileName = 'Titles Modified.pptx';
    ppt.SaveToFile({ file: outputFileName, fileFormat: pptModule.FileFormat.Pptx2013 });
    ppt.Dispose();

    // Read the generated file from the VFS and trigger a download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Modify PowerPoint slide titles</h1>
      <button onClick={modifyTitles}>
        Modify titles
      </button>
    </div>
  );
}

export default App;

After the change, the titles on the cover, metrics, and closing slides are all replaced:

The presentation after modifying titles


Extract PowerPoint slide titles

Spire.Presentation for JavaScript can also collect titles by placeholder: walk the shapes on each slide, keep the ones whose placeholder type is Title, CenteredTitle, or Subtitle, and read TextFrame.Text. The subtitle on the cover is included; body text and ordinary text boxes are not.

Placeholder type Description
PlaceholderType.Title The title on a content slide
PlaceholderType.CenteredTitle The centered main title on a cover slide
PlaceholderType.Subtitle The subtitle on a cover slide

The steps are:

  1. Get the Spire.Presentation WASM module and make sure it is ready.
  2. Load the sample presentation and fonts, create a Presentation object, and open the file.
  3. Walk Presentation.Slides and the Shapes on each slide, filtering with shape.IsPlaceholder and shape.Placeholder.Type.
  4. Push the TextFrame.Text of each matching shape into an array.
  5. Write the title list with FS.writeFile() and trigger a browser download.

The code to extract PowerPoint slide titles is as follows:

function App() {
  const extractTitles = async () => {
    // Get the Spire.Presentation WASM module
    const pptModule = window.wasmModule?.spirepresentation;

    // Check that the module is ready
    if (!pptModule) {
      alert('Spire.Presentation is not ready yet');
      return;
    }

    // Load the presentation and fonts
    await window.spire.FetchFileToVFS('Annual Business Report.pptx', "", `${process.env.PUBLIC_URL}/data/`);
    await window.spire.FetchFileToVFS('ARIALUNI.TTF', "/Library/Fonts/", `${process.env.PUBLIC_URL}/font/`);

    // Create a Presentation instance and load the presentation
    const ppt = new pptModule.Presentation();
    ppt.LoadFromFile('Annual Business Report.pptx');

    // Walk every shape on every slide and collect titles by placeholder type
    const titles = [];
    for (let i = 0; i < ppt.Slides.Count; i++) {
      const slide = ppt.Slides.get_Item(i);
      for (let j = 0; j < slide.Shapes.Count; j++) {
        const shape = slide.Shapes.get_Item(j);
        if (!shape.IsPlaceholder) continue;
        const type = shape.Placeholder.Type;
        if (type === pptModule.PlaceholderType.Title ||
            type === pptModule.PlaceholderType.CenteredTitle ||
            type === pptModule.PlaceholderType.Subtitle) {
          titles.push(shape.TextFrame.Text);
        }
      }
    }

    // Write the title list, one title per line
    const outputFileName = 'Slide Titles.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, titles.join('\n'));
    ppt.Dispose();

    // Read the text from the VFS and trigger a browser download
    const txtArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const txtBlob = new Blob([txtArray], { type: 'text/plain' });
    const txtUrl = URL.createObjectURL(txtBlob);
    const txtLink = document.createElement('a');
    txtLink.href = txtUrl;
    txtLink.download = outputFileName;
    txtLink.click();
    URL.revokeObjectURL(txtUrl);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract PowerPoint slide titles</h1>
      <button onClick={extractTitles}>
        Extract titles
      </button>
    </div>
  );
}

export default App;

The extracted title list, one title per line, subtitle included:

The extracted slide title list


FAQ

What is the difference between a title and an ordinary text box on a slide

Cause: ISlide.Title only recognizes title placeholders (Title, CenteredTitle). Some templates build the title as a plain text box for layout reasons; those shapes have no placeholder, so Title can neither read nor change them.

Solution: Check that the title shape is a placeholder before using Title. When it is not, locate the text box by shape name or position and change its TextFrame.Text directly.

What does Title return when a slide has no title placeholder

Cause: Title reads the text in the title placeholder. When the slide has no such placeholder, it returns the slide's default name (for example, Slide 1), not the body text on the slide. Writing still works: assigning Title to such a slide adds a title placeholder and writes the text into it.

Solution: To check whether a slide has a title, walk its shapes and look at shape.IsPlaceholder and shape.Placeholder.Type instead of relying on the return value of Title.

Why does the extraction include subtitles

Cause: The filter includes PlaceholderType.Subtitle, so the subtitle on the cover is collected along with the main title.

Solution: To get only the main title of each slide, drop Subtitle from the condition:

if (type === pptModule.PlaceholderType.Title ||
    type === pptModule.PlaceholderType.CenteredTitle) {
  titles.push(shape.TextFrame.Text);
}

Why does accessing shape.Placeholder.Type throw an error

Cause: Text boxes expose a Placeholder property too, but its type is null. The wrapper object is still truthy, so skipping the null check and reading .Type throws Arg_NullReferenceException.

Solution: Filter with shape.IsPlaceholder first, then read shape.Placeholder.Type:

if (!shape.IsPlaceholder) continue;
const type = shape.Placeholder.Type;

Do the font size and position change after I modify a title

Cause: Title replaces the text inside the title placeholder. The placeholder itself keeps its position, size, and text formatting.

Solution: When the slide already has a title placeholder, no extra formatting is needed. If the placeholder was added by the assignment, it uses the default position and font size; set its Frame and text formatting if needed.


Get a Free License

If you want to remove the evaluation message from the result documents or lift feature limits, contact sales for a temporary license valid for 30 days.