Sharing MRI data with colleagues can be a time-consuming exercise. The files are often large and data-sets need to be viewable in a flexible fashion. Rich features assist the communication of results, including:

  • 3D viewing
  • flexible slicing
  • overlay of specific volumes

While there are many software packages for running on the desktop, there’s nothing better than being able to point to a simple HTML link and open the scan data in a prepared format. Therefore, I went digging for an open-source package or library to display MRI renders and slices.

Selection Criteria

It’s always helpful to have a shortlist of criteria when searching for software. This search was primarily focused on MRI software for viewing neuroimaging results. The list of desired features included:

  • open source and easily extensible
  • fast 3D rendering
  • NIFTI image format support
  • possibility of pre-loading volumes
  • good thresholding and viewing tools
  • (optional) labelling and annotation features

Summary of Software

There are many web-based image viewers but I found a number which either had restrictive licenses or appeared to be no longer developed. It was important to me to find a product that I could extend and customise in the future. This list is by no means exhaustive and I have ranked the packages for my particular needs. Do let me know if you think I’ve missed any good packages or your experiences with the packages shown:

Rank Name/Link Language Speed Formats Pre-load Live demo Notes
1 Papaya javascript 45 NIFTI, DICOM, GIFTI, VTK Yes Demo Intuitive and clean interface, does not support labels
2 AMI javascript (three.js) 35 NIFTI, DICOM, NRRD, MHD, MGZ, VTK, STL Yes Demo A toolkit to build custom viewers, powerful features but needs more config
3 BrainBrowser javascript (three.js) 45 MINC, NIfTI and MGH Yes Demo Supports annotation, but no updates for a while

Adding images and surfaces to Papaya

Payaya does not allow rendering of surfaces on the fly (it’s desktop equivalent, [Mango]() does). Therefore, we need to pre-render our surfaces and images (volumes) before loading them in Papaya.

For example, if we need to display a reference brain and two overlays, we would generate and upload the following files:

Reference image and surface:

  1. Add Image: glass_brain.nii - a standard reference brain volume data
  2. Add Surface: - the equivalent surface file

Overlay image and surface

  1. Add Image: overlay1.nii - the volume data
  2. Add Volume: - equivalent volume (generate using Mango)

NB: you may have the volume data in hdr/img format, if that is the case, convert it to nifti using MRIcron.

NB: you may not have a surface render of your overlay, you can use Mango to render a surface from an overlay and save it out as a surf.gii file

Now we can even preload these files and select a view using HTML similar to this:

    <script type="text/javascript">
        var params = [];
        params["worldSpace"] = true;
        params["images"] = ["data/myBaseImage.nii.gz", "data/myOverlayImage.nii.gz"];
        params["surfaces"] = ["data/"];
        params["myOverlayImage.nii.gz"] = {"min": 4, "max": 10};


<div class="papaya" data-params="params"></div>