Web Application Development: Using WOPI To Embed Microsoft Office In Your Web App (Part 1)

Are you thinking about harnessing the capabilities of Office Online (Office Online Server or Office 365) to enhance your web application by embedding Word, Excel, Powerpoint? This is the first in a series of blog posts relating to embedding Microsoft Office document editing capability using WOPI (Web Application Open Platform Interface) in a bespoke web application. In this post, we’ll give you some guidance on getting set up for WOPI development, where to find documentation and what WOPI is. In the next few posts, we’ll be exploring a working WOPI application and seeing how it all fits together.

Common Uses

Common uses of this technique are that the web app you are developing allows users to store and edit Microsoft Office documents. For example, you could be engaged in web app development for software that tracks development of engineering components. The components could have data sheets that are being collaboratively written using Word and technical calculations that are being developed using Excel. Rather than kicking users out of your web application to deal with edit these documents and having your users manually upload and download them to / from your software, you could embed Office Online Word and Excel edits inside your applications.

Embedding WOPI In An Web Application

Getting Started With WOPI

To get going with this process, you are going to need your usual development environment (e..g Visual Studio) and access to Office Online. Access to Office Online is either typically through Office 365 (hosted by Microsoft) or by an on premise install of Office Online Server. If you are going to use the Office 365 approach, then you will need to enrol in the “Office 365 – Cloud Storage Parter Program“. If you are developing for Office Online Server, you don’t need to do this. Indeed, getting a development environment and a simple testable product setup quickly is easier with Office Online Server. The simplest way to get a copy of Office Online Server is to organise yourself an MSDN subscription. If you’re reading his, the changes are that you are already into web app development and you already have an MSDN subscription. If you want to develop using Office 365 then you have to get some endpoints registered with Microsoft and jump through some other hoops (I’ll document these in a later post) which can take a little while.

The next thing you are going to need is access to the WOPI documentation. The good news is that it is freely available here: https://wopi.readthedocs.io/en/latest/

The bad news is that it is incomplete, inconsistent, vague and inaccurate. This is why we decided to write a series of blog posts outlining how to make this work in practice!

What Is WOPI?

WOPI is a protocol that you must develop a RESTful Web API to implement in order to embed web-based Office document editing in your web application. You don’t need to implement the whole protocol. You only need to implement the methods of the protocol that are required for your web application. In the simplest scenario (that we will start with in the next blog post), you just need to implement a few methods to embed a read-only Word editor in your web application. This is both easier and harder than it sounds. It’s easier because it’s just a simple API implementation. It’s harder because the documentation for that implementation is so poor and lacks a complete, working example.

What’s Next?

In our next post, we will explain how you set up your host iframe to hold the Office 365 editor for your web application and we will explain some of the underlying concepts of WOPI that you need to get you started.

Web Application Development Services

If you don’t have the in-house skills or time to develop your own WOPI web application solution, then please contact McKenna Consultants for a free consultation!


Nick McKenna
Nick McKenna is a (polymath) computer programmer and scaled Agile consultant. Nick has been a professional programmer for over 20 years and an Agile guru for nearly as long! Nick's specialities include progressive web app development, mobile app development, the Internet Of Things, Azure cloud development, systems integration, Scaled Agile Framework, Scrum, Lean, LeSS, Scrum At Scale and much much more.