Whakerexa in action:

Make easily slides with the ES6 Slides package

Brigitte Bigi

Whakerexa Slides

A lightweight, dependency-free ES6 package that turns a plain HTML page into a full-featured slide presentation — no build step, no framework, no bundler required.

• One <script> block — protocol-aware, works on http:// and file://
• Keyboard, touch, and overview-panel navigation
• Four view modes: presentation, overview, handout, speaker notes
• Theming, dark mode, high-contrast accessibility built in
• Incremental reveals, logo overlay, fullscreen — all optional

How it works

Write your slides as <section class="slide"> elements. Whakerexa Slides scans the page, wires up every control, and handles navigation, progress tracking, and view switching for you.

The package exposes a single public object — window.app — and fires a wexa:slides:ready event when initialisation is complete, so you can hook in your own code without timing gymnastics.

You write the content. The package handles everything else.

Integration

Integration — one block

Drop one <script> before </body>. Works on http:// and file:// — same code, same result.

<script>
    (function () {
        const s = document.createElement('script');
        s.dataset.themes = 'wexa:wexa_theme.css,aurora:wexa_theme_aurora.css';
        s.dataset.default = 'wexa';
        s.dataset.themesPath = 'wexa_statics/css/themes/';
        s.dataset.logo = 'images/logo.png';
        if (window.location.protocol === 'file:') {
            s.src = 'wexa_statics/js/wexa.bundle.js';
        } else {
            s.type = 'module';
            s.src = 'wexa_statics/js/extras/slides/slides.init.js';
        }
        document.head.appendChild(s);
    })();
</script>

• data-themes — omit to skip ThemeManager entirely
• data-logo — omit to disable the logo overlay
• data-progress="false" — hides the progress bar

Full control — overridable elements

Write any of these elements in the page with the exact id; the initializer will use yours instead of creating a default one.

• nav-content — navigation bar (Prev / Next / … / Fullscreen + view-mode radios)
• progress-container + progress-bar — progress bar
• overview-container — overview panel
• accessibility-controls — theme-switcher + color-scheme button
• logo-container — logo overlay (only when data-logo is set)

Full control — JS

Import Slides and pass the elements you wrote.

import Slides from 'wexa_statics/js/extras/slides/slides.js';

const app = new Slides({
    slides:               document.querySelectorAll('section.slide'),
    controls:             document.getElementById('nav-content'),
    controlsView:         document.getElementById('slides-controls-view'),
    overviewContainer:    document.getElementById('overview-container'),
    progressBarContainer: document.getElementById('progress-container'),
    progressBar:          document.getElementById('progress-bar'),
    logo:                 document.getElementById('logo-container'),
    accessibility:        document.getElementById('accessibility-controls'),
    mode: 'presentation'  // 'presentation' | 'overview' | 'handout' | 'note'
});
app.init();

Themes

Themes — case 1: no theme

Plain wexa.css only. No ThemeManager, no switcher button.

Examples below show the http:// form. For file://, use the detection block from the Integration slide and set data-* on s.

<script type="module" src="slides.init.js"></script>

Themes — case 2: built-in, switch on the fly

All themes share the same folder → use data-themes-path as prefix.

<script type="module" src="slides.init.js"
        data-themes="wexa:wexa_theme.css,
                     aurora:wexa_theme_aurora.css,
                     highcontrast:wexa_theme_highcontrast.css"
        data-default="wexa"
        data-themes-path="wexa_statics/css/themes/">
</script>

Themes — case 3: own overrides, no switching

Write overrides in @layer theme directly in the page. Always active, no ThemeManager needed.

<style>
    @layer theme {
        :root { --a-color: rgb(200, 0, 0); }
        .dark { --a-color: rgb(255, 120, 80); }
    }
</style>
<script type="module" src="slides.init.js"></script>

Themes — case 4: own theme, no switching

Load the theme as a static CSS link. No data-themes, no switcher.

<link rel="stylesheet" href="my_theme.css">
<script type="module" src="slides.init.js"></script>

Themes — case 5: own theme + built-in, switch on the fly

Themes are in different folders → omit data-themes-path, write each path in full.

<script type="module" src="slides.init.js"
        data-themes="mine:./my_theme.css,
                     wexa:wexa_statics/css/themes/wexa_theme.css,
                     aurora:wexa_statics/css/themes/wexa_theme_aurora.css"
        data-default="mine">
</script>

Incremental

Incremental lists

• Item incremental 1
• Item incremental 2
• Item 3
  • Item 3.1
  • Item 3.2

• Item incremental invisible 1
• Item incremental invisible 2

Whakerexa with slides

Accessibility

The Whakerexa Slides package is designed so that accessibility is not an add-on, but a built-in principle. Every component, interaction and visual element aims to be usable by as many people as possible.

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI) — "Introduction to Web Accessibility".

Lists in action

A simple list

• Item 1
  • Item 1.1
  • Item 1.2
• Item 2
• Item 3
  1. Item 3.1
  2. Item 3.2

Main figure example

Nested figure example

This slide contains a nested figure inside a paragraph. It must follow normal document flow (not the full-page layout).

• Text before the figure.

  

  Text after the figure.

These slides are powered by the Whakerexa ES6 Slides module.

Focus

Media

A documentation here...

Image Example

Video Example

►

Table with sortable columns

Features overview

Keyboard shortcuts

• Toggle fullscreen with  f 

Check that fullscreen mode works correctly.

Overflow tests

Overflow test 1

Very large and tall image:

Overflow test 2

Very tall block:

Hash navigation

• Go to #5.1 in the URL bar → slide 5, step 1.
• Go to #5.2 → slide 5, step 2.
• Go to #5.0 → slide 5, no incremental active.
• Slide and incremental step must be restored correctly each time.

Robustness tests

Empty incremental

This block should not crash the slide engine.

Incremental with missing items

The slide should remain stable even without list items.

Slide with minimal content

This slide contains almost nothing. It must still display correctly.

Overview mode

Press  o  to enter overview mode.

Press  Escape  or  s  to return to presentation.

In overview, click a GoTo button → must navigate to that slide and return to presentation mode automatically.

Handout mode

Press  d  to enter handout mode.

Press  Escape  or  s  to return to presentation.

Handout mode prints all slides as a scrollable, printable document — no incremental reveals, no per-slide navigation.

Note mode

Press  m  to enter note mode.

Press  Escape  or  s  to return to presentation.

Note mode lists every slide as a scrollable, printable document, each one paired with its speaker notes from a matching <aside for="slide-id">.

Controls visibility —  n 

• Press  n  : the navigation buttons should appear.
• Press  n  again : they should disappear.
• Repeat several times — toggle must stay stable.

Progress bar —  b  & logo —  l 

• Press  b  : the progress bar at the bottom should disappear.
• Press  b  again : it should reappear.
• Press  l  : the logo at the top-right should disappear.
• Press  l  again : it should reappear.
• Alternate both — they must be independent.

Inline video — autoplay

Navigate away from this slide, then return to it.

If autoPlayEnabled: true is set in the config, playback starts automatically on arrival.

The video must also pause automatically when leaving this slide.

Legal notices

About

• Document author: Brigitte Bigi
• Last modification: 2025-11-19
• https://github.com/brigitte-bigi/Whakerexa

License

Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. Attribution: please credit the Whakerexa project.