Friday, April 12, 2013

Embed Orion compare widget into your web page

In my previous post, I talked about Orion git status page where compare widgets are embedded inside the page. Now in the latest version of Orion, we are exposing a stand alone compare build. You can use the build to embed a compare widget into any DOM element in your page, without accessing to Orion server. It is a pure client side java script that can be consumed anywhere in your client code. There are several features worth mentioning:

  • Pure javascript code. No dependencies on server side.
  • Clear annotations and navigation on diffs
  • High and low levels of diff walk through.
  • Syntax highlighting depending on provided file names.
  • Multiple widgets in one page.
  • Toggleable compare widget type between side by side and unified views.
  • All open options to embed the widget from lightweight to fully loaded.


To quickly launch a demo on how to use the build, please try it out here.
To see the source code, please refer to here.
To summarize the ease of use, you only need to provide two strings as your compare contents with options like the file name and additional command holder.
You can also download the build and the stand alone demo in different levels. Please refer to the Orion compare build wiki page for details.
Please note that if you host the build in your own server you can even provide only two file URLs as long as they are in the same domain.