Can React apps be embedded into a PowerPoint?

Question

I'm trying to create a PowerPoint content add-in with Office JS and the PowerPoint JavaScript API that is capable of embedding HTML and React components into slides. This is my first time trying to create a PowerPoint add-in, so any suggestions or advice are greatly appreciated.

So far, I am encountering very basic issues even creating a PowerPoint content add-in since I haven't been able to find any example of PowerPoint content add-in code online: all of the examples in the Microsoft docs are of task panel add-ins and the one content add-in linked is for Excel and composed in C#. Yeoman also has no generator for content add-ins.

Essentially, I need the ability to create and render UI with JavaScript, CSS, HTML, and React inside Power Point slides. Creating a task panel app that renders React components inside the task panel is straightforward, but I have not found a similar method of rendering React components in slide content areas. Changing the AppType to ContentApp in the manifest.xml as recommended in the Microsoft docs renders a content area in a slide with a loading spinner that never resolves that I don't know how to manipulate.

I'm also considering solutions leveraging existing add-ins like LiveWeb for displaying a React app inside PowerPoint slides, but haven't gotten this to work so far due to ActiveX issues.

How can I render HTML or React components inside PowerPoint slides with a PowerPoint content add-in?

Here is the manifest.xml. It's pretty minimal since I'm not quite sure how it should be configured for a content add-in: essentially, I've used the Yeoman React project generator for task panel add-ins (since a content add-in generator isn't available) and removed the task panel specific configuration.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xsi:type="ContentApp">
  <Id>08da2054-d887-45bc-b1d7-4667a52407c3</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>ContentApp</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="ContentAddin"/>
  <Description DefaultValue="A template to get started."/>
  <IconUrl DefaultValue="https://localhost:3000/assets/icon-32.png"/>
  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
  <Hosts>
    <Host Name="Presentation"/>
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:3000/home.html"/>
    <RequestedHeight>700</RequestedHeight>
    <RequestedWidth>500</RequestedWidth>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

Answer 1

I finally got it working and was able to render a React app in a PowerPoint slide. The setup for the manifest.xml above was basically right: all it needed was a slight adjustment to the SourceLocation pathing to http rather than https and the webpack path resolution to pick up the home.html to embed the React app in a slide. Here is the code I needed to add to my webpack.config for HTMLWebpackPlugin:

new HtmlWebpackPlugin({
        filename: "home.html",
        template: "./src/home.html",
        chunks: ["player", "vendor", "polyfills"],
      })