demo.html not working in latest version (Chrome, Windows 11)

[MisterABK]

Hello! I've been using Reveal.js for several years and I just downloaded the latest version from https://github.com/hakimel/reveal.js/archive/master.zip, but the demo.html is not opening as a slideshow out of the box.

index.html works like it used to, as do the .html files in the examples folder. But the demo doesn't work, nor does an old demo.html file if I copy and paste it from an older download. I guess something has changed, but the installation guide doesn't make it clear what I need to do to make it work.

[hakimel]

In reveal.js 6.0 I modernized the code to use a new build system. As part of this, I changed demo.html to use uncompiled asset paths which means that it now requires that you run the a development server (npm install + npm start).

This was done to make it easier to work on the source code but if it's disrupting peoples workflows I'll consider rolling it back.

Here's a fix in the meantime:

1. Scroll down to the bottom of demo.html:
2. Uncomment these lines

<!-- Use the built assets if you want to run reveal.js without a web server -->
<!--
<script src="dist/reveal.js"></script>
<script src="dist/plugin/zoom.js"></script>
<script src="dist/plugin/notes.js"></script>
<script src="dist/plugin/search.js"></script>
<script src="dist/plugin/markdown.js"></script>
<script src="dist/plugin/highlight.js"></script>
-->

3. Change <script type="module"> to <script> and remove all of these imports:

<script type="module">
  import Reveal from 'reveal.js';
  import RevealZoom from 'reveal.js/plugin/zoom';
  import RevealNotes from 'reveal.js/plugin/notes';
  import RevealSearch from 'reveal.js/plugin/search';
  import RevealMarkdown from 'reveal.js/plugin/markdown';
  import RevealHighlight from 'reveal.js/plugin/highlight';

You should end up with this:

<script src="dist/reveal.js"></script>
<script src="dist/plugin/zoom.js"></script>
<script src="dist/plugin/notes.js"></script>
<script src="dist/plugin/search.js"></script>
<script src="dist/plugin/markdown.js"></script>
<script src="dist/plugin/highlight.js"></script>

<script>
 // Also available as an ES module, see:
 // https://revealjs.com/initialization/
 Reveal.initialize({
  controls: true,
  progress: true,
  center: true,
  hash: true,

  // Learn about plugins: https://revealjs.com/plugins/
  plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight],
 });
</script>

[MisterABK]

Hi Hakim, thanks for the reply, and for developing reveal.js in the first place!

That explains it. I got as far as point 2 on my own, but couldn't work out stage 3. I don't know whether I'm representative of the average user. I use reveal.js to run slideshows for performances, because it's faster than PowerPoint and I can make last-minute changes very easily. For me, I think it would help to have a bit more info in the Basic Setup section of the Installation page. Because, it's true that index.html works if you follow those steps, but demo.html doesn't and that was a bit confusing. Or a non-server version of the demo alongside demo.html in the master.zip.

Thanks again!

[hakimel]

I've updated demo.html to use compiled assets, so that it works when downloading master as a ZIP and double-clicking the demo.html file.

After giving this some thought, I realized I've always cherished how easy it is to get started with reveal.js. I don't want there to be a barrier of entry or friction getting started. I'll just keep a separate HTML file for my local development and ignore it from the repo.