Skip to content



In a script module element import the extension from CDN or local install:

<script type="module">
  import VizzuPlayer from 


In order to initialize a VizzuPlayer with a VizzuController that will contain the rendered story, create a vizzu-player HTML element:

<vizzu-player controller></vizzu-player>


Vizzu-Story tries to apply the ideal size for the story, but you can also set them manually via the width and height style properties of the vizzu-player HTML element:

Set size in HTML

    vizzu-player {
      width: 100%;
      height: 400px;
  <vizzu-player controller></vizzu-player>

or in JavaScript:

const vp = document.querySelector('vizzu-player'); = 'width: 100%;height: 400px;';

HTML attributes


Vizzu-Story requires and downloads the Vizzu JavaScript/C++ library from jsDelivr CDN, but you can also use a different or self-hosted version of it.

Set Vizzu via the vizzu-url HTML attribute

<vizzu-player controller vizzu-url="<url>/vizzu.min.js"></vizzu-player>

or add it to window:

import Vizzu from '<url>/vizzu.min.js';

window.Vizzu = Vizzu;


After initialization, you can access the imported Vizzu library via the Vizzu getter.

const vp = document.querySelector('vizzu-player');

vp.initializing.then((chart) => {
    const Vizzu = vp.Vizzu;


If you add hash-navigation attribute, slides can be selected using the URL hash (# part), for example presentation.html#3 selects slide 3. You can also use negative numbers, where -1 means the last slide.

<vizzu-player controller hash-navigation></vizzu-player>


You can start the story on a specific slide via the start-slide HTML attribute. You can also use negative numbers, where -1 means the last slide.

<vizzu-player controller start-slide="3"></vizzu-player>


You can use a custom loading animation. Set spinner via the custom-spinner HTML attribute:

<vizzu-player controller custom-spinner="loadinganim.svg"></vizzu-player>