Writing slides with Webslides under Emacs

In my line of work, writing slides for different purposes is a regular task. To ensure seamless work without leaving Emacs, I typically use org mode to create my slides and then present directly via org-tree-slide or export the org file to beamer. These methods work well for most of my presentations as the slides turn out simple and visually appealing. However, for more complex presentations that require multimedia such as embedded videos, large background images, animations, like those created in PowerPoint, additional steps may be necessary.

I do not wish to use PowerPoint as it is not available on Linux. While there are alternatives such as LibreOffice, WPS, and online document services like Google Sheets, I prefer to write my slides in Emacs using text.

There is an Org exporter called “org-reveal” available on GitHub that helps users write Org files and export them to reveal.js files. If you are unfamiliar with reveal.js, please visit the official website (https://revealjs.com/) for more information. Simply put, reveal.js is a framework for creating HTML-based presentations. It is a powerful tool, and the slides produced by Reveal.js are visually stunning. However, I found org-reveal somewhat challenging to use. For simple slides, the process is quite straightforward; write an Org file and export it using org-reveal. Then, open the exported HTML in the browser to present the slides. However, to fully leverage Reveal.js's capabilities, you may need to customize your Org file using many “PROPERTIES.” Additionally, I found the layout definition of Reveal.js to be somewhat confusing. Of course, this is all subjective, and it could be that I simply do not have enough experience with Reveal.js or org-reveal. I'm sure there are many fans of org-reveal and Reveal.js out there; it's just not my favorite tool.

What I finally found is Webslides, an HTML-based presentation tool that is different from Reveal.js in that it is very easy to use. Here's how to use Webslides:

1. Download the Webslides files (a zip file) from the top page of index.html of Webslides.
2. Unzip the file.
3. Start creating your slides by editing index.html under the root of the folder you just unzipped (or first rename the index.html to a new file name of your choosing).
4. Open the file in a browser for presentation.
5. Leverage Webslides’ capabilities by simply copying and pasting HTML source code from files under the “demos” folder (HTML files under the “demos” folder are documents of Webslides).
6. After finishing your slide writing, you can delete the demo folder and other files under the static/image folder not used in your slides to make your slide folder clean.
7. Repeat the above steps for other slides writing.

Editing HTML files under Emacs is fairly simple, particularly when utilizing the web-mode mode. To streamline the process of writing content instead of designing slides, I created several Yasnippet snippets to insert HTML clips specifically for webslides. Here is an example:

# -*- mode: snippet -*-
# name: mywebslidesflexblock
# key: /mywebslidesflexblock
# --
<ul class="flexblock ${1:$$(yas-choose-value '("client" "client border" "steps" "features" "specs" "activity" "gallery" "metrics border" "plan blink"))}">
    <li>

    </li>
    <li>

    </li>
</ul>

The code snippet is used to insert a Webslides flexblock into the website. As shown, I have included options for various flexblock properties to customize the appearance of the block. With the help of these snippets, creating Webslides presentations becomes effortless, as I can concentrate on the content while leaving the design and layout aspects up to the code. This ensures that my pages look visually appealing and are easy to navigate using Webslides.

I still want to use org mode to make my slides, and I am considering writing an Org exporter for Webslides. I am not sure if I will be able to create it, but if I do, it will be the perfect tool for writing slides for me!