ohif-viewer/platform/docs/versioned_docs/version-3.11/development/video-tutorials.md

---
sidebar_position: 4
sidebar_label: Video Tutorials
title: OHIF Development Video Tutorials
summary: Collection of instructional videos demonstrating key OHIF development workflows, including creating, linking, and publishing modes and extensions, with step-by-step demonstrations of the OHIF CLI and NPM publishing process.
---

# Video Tutorials

## Creating, Linking and Publishing OHIF Modes and Extensions

The [OHIF CLI](./ohif-cli.md) facilitates the creation, linkage and publication
of OHIF modes and extensions. The videos below walk through how to use the CLI for
- creating modes and extensions
- linking local modes and extensions
- publishing modes and extensions to NPM
- adding published modes and extensions to OHIF
- submitting a mode to OHIF

The videos build on top of one another whereby the mode and extension created
in each of the first two videos are published to NPM and then the published
entities are added to OHIF.

### Creating and Linking a Mode

The first video demonstrates the creation and linkage of a mode.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884891676?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Create and link a mode"></iframe>
</div>

### Creating and Linking an Extension

The second video creates and links an extension. The mode from the first
video is modified to reference the extension.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884891718?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Create and link an extension"></iframe>
</div>

### Publishing an Extension to NPM

The third video shows how the extension created in the second video can
be published to NPM.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884891701?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Publish an extension to NPM"></iframe>
</div>

### Publishing a Mode to NPM

The fourth video shows how the mode created in the first video can be
published to NPM.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884893445?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Publish a mode to NPM"></iframe>
</div>

### Adding a Mode from NPM

The fifth video adds the mode and extension published in NPM to OHIF. Note
that since the mode references the extension both are added with one CLI
command.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884893388?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Add a mode from NPM"></iframe>
</div>

### Submitting a Mode to OHIF

The sixth video demonstrates how a mode can be submitted to OHIF to have it
appear in OHIF's mode gallery.
<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
    <iframe src="https://player.vimeo.com/video/884893372?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="Submit a mode to OHIF"></iframe>
</div>