> For the complete documentation index, see [llms.txt](https://developer.supervisely.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.supervisely.com/app-development/widgets/media.md).

# Media

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td><img src="/files/PzrMkRSPamR5RFBucJ70" alt=""></td><td><mark style="color:purple;">Integrates images into your application for display and examination</mark></td><td><a href="/pages/FBl4UkIt6bbBvYpJtGzh">/pages/FBl4UkIt6bbBvYpJtGzh</a></td></tr><tr><td><strong>Labeled Image</strong></td><td><img src="/files/mPNNOdY8QYDYO2mEuBti" alt=""></td><td><mark style="color:purple;">Showcases images with interactive labels and annotations for detailed visualization</mark></td><td><a href="/pages/ScY2WtSRznCbeNKrwoRA">/pages/ScY2WtSRznCbeNKrwoRA</a></td></tr><tr><td><strong>Grid Gallery</strong></td><td><img src="/files/J3lDlbvPaYBeLcvS891v" alt=""></td><td><mark style="color:purple;">Composite view to exhibit a collection of images in an organized grid layout, with support for annotations</mark></td><td><a href="/pages/WowWcyotX0BlSXZJWrtE">/pages/WowWcyotX0BlSXZJWrtE</a></td></tr><tr><td><strong>Video</strong></td><td><img src="/files/P6YHQtJEY5Mu152nK2uR" alt=""></td><td><mark style="color:purple;">Preview video and annotation frame by frame</mark></td><td><a href="/pages/g8MXszHuiP8qz900zGuz">/pages/g8MXszHuiP8qz900zGuz</a></td></tr><tr><td><strong>Video Player</strong></td><td><img src="/files/B5DpEFim3vLT6h6nlsgi" alt=""></td><td><mark style="color:purple;">Video playback component leveraging the HTML <code>&#x3C;video></code> element for embedded media streaming</mark></td><td><a href="/pages/zECqQeglCUlAqMVOKEYW">/pages/zECqQeglCUlAqMVOKEYW</a></td></tr><tr><td><strong>Image Pair Sequence</strong></td><td><img src="/files/dMHtg37PeeU8En2m36hG" alt=""></td><td><mark style="color:purple;">Side-by-side comparison of image pairs, with annotation capabilities for in-depth analysis</mark></td><td><a href="/pages/ajk9hn6pOiubquOAQV8t">/pages/ajk9hn6pOiubquOAQV8t</a></td></tr><tr><td><strong>Icons</strong></td><td><img src="https://user-images.githubusercontent.com/120389559/225039036-991b1dd3-c348-4145-bf54-74f49187b183.png" alt=""></td><td><mark style="color:purple;">Display a set of icons within the user interface</mark></td><td><a href="/pages/hpc9pqYclcHv53l9tOsM">/pages/hpc9pqYclcHv53l9tOsM</a></td></tr><tr><td><strong>ObjectClassView</strong></td><td><img src="https://user-images.githubusercontent.com/79905215/218079475-c5c5c032-8420-4850-b3fc-19dfc19c266a.png" alt=""></td><td><mark style="color:purple;">Displays information about a single object classs</mark></td><td><a href="/pages/V8Weys9F4sRvJC6PFvZZ">/pages/V8Weys9F4sRvJC6PFvZZ</a></td></tr><tr><td><strong>ObjectClassesList</strong></td><td><img src="https://user-images.githubusercontent.com/79905215/218096273-0a52cc67-0ba8-4886-95a0-660e61d6a4eb.png" alt=""></td><td><mark style="color:purple;">Organized list of object classes</mark></td><td><a href="/pages/106cbcgMiMP538oM1orb">/pages/106cbcgMiMP538oM1orb</a></td></tr><tr><td><strong>ImageSlider</strong></td><td><img src="/files/hncIH8mPjeRaJZscp7OR" alt=""></td><td><mark style="color:purple;">Scrollable display to showcase a series of images, providing multiple examples or variations</mark></td><td><a href="/pages/W56aFqwdXBO2nT4HYNm9">/pages/W56aFqwdXBO2nT4HYNm9</a></td></tr><tr><td><strong>Carousel</strong></td><td><img src="/files/NeDdvh0Pdy0fpSSeiau3" alt=""></td><td><mark style="color:purple;">Interactive slider component designed to present a sequence of images in a rotating carousel format</mark></td><td><a href="/pages/TKvL59EoTsCvJQ84YxwX">/pages/TKvL59EoTsCvJQ84YxwX</a></td></tr><tr><td><strong>TagMetaView</strong></td><td><img src="/files/B4DbT6m0JYU0ecwLzrFA" alt="" data-size="original"></td><td><mark style="color:purple;">Component for presenting metadata associated with a single tag</mark></td><td><a href="/pages/0HhIKsHaX5MV1Aq3SCel">/pages/0HhIKsHaX5MV1Aq3SCel</a></td></tr><tr><td><strong>TagMetasList</strong></td><td><img src="/files/uuc0a1BybAVhaAwFTuxh" alt="" data-size="original"></td><td><mark style="color:purple;">Component that lists multiple metadata tags</mark></td><td><a href="/pages/SdvKcc5HyZCxw3wkmwV4">/pages/SdvKcc5HyZCxw3wkmwV4</a></td></tr><tr><td><strong>ImageAnnotationPreview</strong></td><td><img src="/files/FdOCsYZ6JBPyuRc1SJMR" alt="" data-size="original"></td><td><mark style="color:purple;">Updated version of the original LabeledImage widget, offering improved features for viewing and interacting with image annotations</mark></td><td><a href="/pages/kYGGBW2NFRVEv3Czczz7">/pages/kYGGBW2NFRVEv3Czczz7</a></td></tr><tr><td><strong>ClassesMappingPreview</strong></td><td><img src="/files/P7kGwnw2Wh0kFgqL4JSs" alt="" data-size="original"></td><td><mark style="color:purple;">Display classes mapping with original and new class names</mark></td><td><a href="/pages/Erx1q0DMCmxX3Zl8GW89">/pages/Erx1q0DMCmxX3Zl8GW89</a></td></tr><tr><td><strong>ClassesListPreview</strong></td><td><img src="/files/TObQra9bBiRMGW7ExmsS" alt="" data-size="original"></td><td><mark style="color:purple;">Display list of classes with shapes</mark></td><td><a href="/pages/TJ0C5ZSlhnqsVl0DeTcT">/pages/TJ0C5ZSlhnqsVl0DeTcT</a></td></tr><tr><td><strong>TagsListPreview</strong></td><td><img src="/files/oXRlvqf3str0pZt6wYuY" alt="" data-size="original"></td><td><mark style="color:purple;">Display list of tags with value types</mark></td><td><a href="/pages/RCH9cAldn51RsaFthyHg">/pages/RCH9cAldn51RsaFthyHg</a></td></tr><tr><td><strong>MembersListPreview</strong></td><td><img src="/files/kqhqLfRWRmbppdzeLnTI" alt="" data-size="original"></td><td><mark style="color:purple;">Display list of given users with roles within the team</mark></td><td><a href="/pages/twE44RPYlS3XVXQrDrHF">/pages/twE44RPYlS3XVXQrDrHF</a></td></tr><tr><td><strong>Heatmap</strong></td><td><img src="/files/gtwpPvnYQvSZwxIFyx0D" alt="" data-size="original"></td><td><mark style="color:purple;">Display interactive heatmap overlays on top of background images</mark></td><td><a href="/pages/n72tKtNNSetYLK9j6wCF">/pages/n72tKtNNSetYLK9j6wCF</a></td></tr></tbody></table>