Hive Content Viewers

Usage no npm install needed!

<script type="module">
  import teamhiveContentViewers from 'https://cdn.skypack.dev/@teamhive/content-viewers';


Built With Stencil

Hive Content Viewers

Various content viewer web components for displaying different types of content.

Supported Content Types

Content Type Component
Images hive-image-viewer
Videos hive-video-viewer
Audio hive-audio-viewer
Microsoft Documents hive-document-viewer
HTML Interactives hive-iframe-viewer
HTML Courses hive-iframe-viewer



npm i @teamhive/content-viewers

Somewhere in your app (e.g. main.ts for Angular):

import { defineCustomElements } from '@teamhive/content-viewers/dist/loader';


Or if you already have another stencil component library, define them separately:

import { defineCustomElements as defineHiveContentViewers } from '@teamhive/content-viewers/dist/loader';


Image Viewer

To leverage viewerjs built in styling, you will need to import the global stylesheet into your application (instead of us bundling it with each image-viewer instance).

@import '~viewerjs/dist/viewer.min.css';


Attribute Description
src The location of the content.


Viewer Component Description
hive-image-viewer The image sized to the maximum width and height without cropping or stretching.
hive-video-viewer The video sized to the maximum width and height without cropping or stretching in the browser default player. Controls are enabled.
hive-audio-viewer The audio loaded in the browser default player.
hive-document-viewer Microsoft documents are loaded in an iframe using the Office Web Viewer.
hive-iframe-viewer Interactives or Courses are loaded in an iframe.