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>

This should be possible. Please share your manifest and the JavaScript (or TypeScript) code so we can see where the spinner is called and under that circumstances. — Rick Kirkham
– Rick Kirkham, Commented May 23, 2023 at 21:19
@RickKirkham Thanks! I've added the manifest. It's pretty minimal and I'm not sure it's correct. As for the spinner, it's not rendered anywhere in the TypeScript. It's a box containing a spinner that renders in the slide that appears to be some sort of PowerPoint content addin placeholder (and doesn't render if I change the app type to Task Panel app). — ionosphere
– ionosphere, Commented May 23, 2023 at 22:37
So is there actually a file home.html? Does it have a <body> with content? — Rick Kirkham
– Rick Kirkham, Commented May 24, 2023 at 1:18
I haven't had a chance to work on this. But I've found some sample content add-ins, at least one PowerPoint. They might give something to compare with. They are all old. github.com/OfficeDev/Office-Apps/tree/master/PeopleGraph, github.com/OfficeDev/Office-Apps/tree/master/ModernTrend, github.com/OfficeDev/Office-Apps/tree/master/FunnelChart, github.com/OfficeDev/hands-on-labs/tree/…, github.com/OfficeDev/Excel-Content-Add-in-Humongous-Insurance — Rick Kirkham
– Rick Kirkham, Commented May 26, 2023 at 23:16
There's also this one which was an attempt to convert a taskpane to a content add-in. It's only about 2 years old. github.com/OfficeDev/Office-Addin-Content — Rick Kirkham
– Rick Kirkham, Commented May 26, 2023 at 23:18

ionosphere · Accepted Answer · 2023-05-28 03:02:14Z

0

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

edited May 28, 2023 at 3:02

answered May 27, 2023 at 20:21

ionosphere

4154 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rick Kirkham Over a year ago

Your answer doesn't help other people who encounter your symptoms. Please specify what the correct SourceLocation should be and the correct webpack.

ionosphere Over a year ago

@Rick Kirkham: Good point, thanks. I’ve added more specific details regarding the correct webpack and SourceLocation to help others who encounter the same issue. Sorry, I wanted to post something quickly earlier so you wouldn’t have to spend any more time on this. It turned out to be simpler than expected to resolve. Thanks again for all your help!

Collectives™ on Stack Overflow

Can React apps be embedded into a PowerPoint?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related