Stencil component for viewing SCORM e-learning courses offline.

Usage no npm install needed!

<script type="module">
  import teamhiveStencilScormViewer from 'https://cdn.skypack.dev/@teamhive/stencil-scorm-viewer';


Hive Stencil SCORM Viewer

Web component that allows you to render SCORM (e-learning) courses in your web (and Ionic native) applications. Injects custom event hooks and binding to support offline tracking of courses without a 3rd party library.

The SCORM course must be served on the same origin (host:port) as the consuming application to avoid cross-frame injection.


  • npm install @teamhive/stencil-scorm-viewer


  • <hive-scorm-viewer src="http://www.mydomain/index.html"></hive-scorm-viewer>

Angular (6+) / Ionic (4+)

In your angular.json file add the following assets matcher in your projects.app.architect.build.options.assets collection:

    "glob": "**/*",
    "input": "node_modules/@teamhive/stencil-scorm-viewer/dist/scormviewer",
    "output": "./scormviewer"

In your main AppModule (i.e. app.module.ts) add the following import statement:

import '@teamhive/stencil-scorm-viewer/dist/scormviewer';


Event Description
onSetValue Emitted when the course captures form data. Locally tracks data to courseData object.
onCommit Emitted when a value is committed to the API.
onInitiailize Emitted when the course initializes against the LMS.
onFinish Emitted when the course finishes.
onTerminate Emitted when the course is terminated.


Local Development

  • npm i
  • npm run start

Note: You will need to drop SCORM assets into www/ to test in the browser.

Building the Stencil Component

  • npm run build
  • npm publish or npm pack for local deployments


  • npm run test


Sean Perkins | :---: |Sean Perkins|