Looking to extend your instance of the OHIF Viewer? Want learn how to reuse a portion of the Viewer in your own application? Or maybe you want to get involved and draft or suggest a new feature? Regardless, you're in the right place!
The OHIF Viewer aims to be decoupled, configurable, and extensible; while this allows our code to be used in more ways, it also increases complexity. Below, we aim to demistify that complexity by providing insight into how our Viewer is architected, and the role each of it's dependent libraries plays.
contains the source code for the OHIF Medical Imaging Viewer. It is effectively
progressive web app
(PWA) that combines the business logic housed in
OHIF/ohif-core and the components in our
React Component library
OHIF/react-viewerbase. It provides
customization for common use cases through
configuration and for adding functionality via
Our goal is to maintain the majority of our business logic in
pre-packaged solutions for features common to Web-based medical imaging viewers.
- DICOM Web
- Hanging Protocols
- Managing a study's measurements
- Managing a study's DICOM metadata
- A flexible pattern for extensions
- And many others
It does this while remaining decoupled from any particular view library or rendering logic. While we use it to power our React Viewer, it can be used with Vue, React, Vanilla JS, or any number of other frameworks.
OHIF/react-viewerbase is a React
Component library that contains the reusable components that power the OHIF
Viewer. It allows us to build, compose, and test components in isolation; easing
the development process by reducing the need to stand-up a local PACS with test
Want to add custom logic or UI Components to the OHIF Viewer, but don't want to maintain a fork? We expose common integration points via extensions to make that possible. For a list of extensions maintained by OHIF, check out this helpful table.
If you find yourself thinking "I wish the Viewer could do X", and you can't accomplish it with an extension today, create a GitHub issue! We're actively looking for ways to improve our extensibility ^_^
This diagram is a conceptual illustration of how the Viewer is architected.
extensionscan be registered with
ohif-core's extension manager
ohif-coreprovides bussiness logic and a way for
viewerto access registered extensions
viewercomposes and provides data to components from our component library (
viewercan be built and served as a stand-alone PWA, or as an embeddable package (
When should I use the packaged source
ohif-viewerversus building a PWA from the source?
Can I create my own Viewer using Vue.js or Angular.js?
You can, but you will not be able to leverage as much of the existing code and
ohif-core could still be used for business logic, and to provide a
model for extensions.
react-viewerbase would then become a guide for the
components you would need to recreate.