Bringing OpenDocument to the web, collaboratively

Last week, the first version of OwnCloud Documents was released as a part of OwnCloud 6. This incorporates  a subset of editing features from the upstream WebODF project that is considered stable and well-tested enough for collaborative editing.

DocumentsThis was a much-anticipated release and lots of nice reviews are pouring in, so I thought I’d take some time to write about WebODF and all the stuff we at KO GmbH been working on upstream.

So what is WebODF?

WebODF is a javascript library that lets you display ODF files in your browser. Think of it as PDF.js, but for ODF. You just throw a webodf.js script on your server, and do a couple of javascript calls to render an ODF file. It works completely client-side, no serverside ODF processing required. You only need a server to actually serve the javascript file. However, WebODF does not do any conversion to HTML. It really shows you the actual ODF, styled with CSS. To see this, you can simply inspect the document:

Inspecting a document in the WebODF Viewer.
Inspecting a document in the WebODF Viewer in Chrome.

As part of the WebODF project, you also get the viewer (shown above) and an editor application.

Aside: We’ve written a unified PDF and ODF viewer called ViewerJS and have released it as a standalone package that you can put on your server. This uses both the PDF.js and WebODF backends to show you a wider variety of formats.


The WebODF editor works by default in single-user mode. After more than a year of hard work laying the foundations for editing, we have now begun to implement new features rapidly.

The Editor UI is written using the Dojo toolkit and is ready to use for the average user already.

WebODF Editor action shot.

It lets you:

  • Apply, Remove, and Modify Paragraph Styles (with proper style inheritance handling).
  • Do basic Undo/Redo.
  • Apply direct text formatting through the toolbar and hotkeys – Bold, ItalicsUnderline, Strikethrough.
  • Change font style and size.
  • Modify indentation.
  • Apply different alignments – Left, Center, Right, Justified.
  • Insert and Remove links.
  • Add Images.
  • Zoom in and out.
  • Add and Remove Annotations.
  • Open, Edit, and Save an ODT document, both completely client-side, without ever talking to a server!


The recent NSA scandal has shaken the faith of many in ‘the cloud’, or at least the services hosted by the likes of Google and Microsoft. Therefore, being able to self-host this is a very attractive idea in the recent climate. However, open-source solutions in this space have generally dealt with plaintext or only very simple formatting (think Etherpad), which is why we’re very proud to roll this out.

Collaborative editing in action. Note the improved selections and paragraph edit history markers.

The collaborative server, included with OwnCloud Documents, lets users join a ‘session’, which is basically a document with a history of edit operations. Operations are small units of edits (think ‘commits’). In a collaborative session, we use Operational Transformation techniques to make sure that operations fired by various clients will eventually result in a consistent state everywhere. When a new client joins an existing session, all earlier operations are played-back for it to reach the current state.

Note that this editing is not turn-based; this is true inline collaborative editing where users can join a document and start editing straight away. Like in other similar applications, the OT is smart enough to not give a no-op result when one user inserts a character and another presses ‘delete’ at the same position – instead, the second user will remove it’s target character and the new character will be inserted next to it in the ‘converged’ state; thus respecting the intent of the edit operations.

When multiple users edit a paragraph, it gets a  ‘marker’ on it’s left in the color of the last editing user. Hovering over it shows a tooltip that provides information on which user edited it last.

Users’ selections are also collaborative, so you can neatly see what any other user has selected. This is useful for ‘indicating’ a region whilst reviewing something.

At the moment, we have our own homecooked library of Operations, for actions like cursor addition/movement/removal, text insertion/removal, style application, and more. Hopefully, we shall be able to agree upon a common spec for operations in the future with other developers for interoperability.

PS: Grab the source code at

11 thoughts on “Bringing OpenDocument to the web, collaboratively

  1. Thank you for the really interesting work you guys are developing.

    Since the release of WebODF 0.5.0 seems months away ( ) … I wonder if you plan to upgrade your Firefox extension ( ) which is on version 0.4.1 and not upgraded 17 months ago. Maybe a 0.4.2 release ?

    Sure, I try not being impatient, but you know … the screenshots shown here, compared to version 0.4.1 evidence a great improvement.

    Now probably an stupid question ( I am just a user) : Is there any way to download the code from GitHub and update our Firefox extension with that code ?

    Thanks a lot !!

  2. @German the default build of webodf will give you a firefox extension package, so ‘just’ check out git and build it with cmake

    1. Hey twitter, thank you for answering.

      Finally, after some reading, I was able to check out ( git clone git:// ) . The compilation ( mkdir build && cd build && cmake ../ && make firefoxextension-target ) ended OK … and I was even able to also install on Firefox the XPI file. Unfortunately it’s not working very well for me ( FF 26.0 on Kubuntu x86_64 ) . I guess this is one of risks of using development SW. Either way I am happy mainly because I have learnt quite a bit this weekend … and sure, I’ll try again in a couple of weeks to check if I am luckier.

      Thank you !!!

  3. Hi
    This is really a cool project, many thanks!
    Is there a Firefox Extension which allows for editing? This would make it possible to have an easy-to-deploy-and-use, completely Offline odf Editor.

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s