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>
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"],
})