Creating awesome presentations using Reveal.js with Svelte and Vite

In this post we are going to take a look at a boilerplate project for creating Reveal.js presentations using Svelte and Vite.

Before diving into the topic, let's have some context about the different tools and technologies we are using.

Reveal.js

Reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

The framework comes with a broad range of features including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes, LaTeX support and syntax highlighted code.

Svelte

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Vite

Vite is a new breed of frontend build tooling that significantly improves the frontend development experience.It consists a dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR) and a build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.

svelte-slides

This is a Github template repository called svelte-slides with all the batteries included. You can just clone the repository in your local machine

git clone https://github.com/rajasegar/svelte-slides

or just use this template by clicking on the Use this template button in Gihub. And start creating your slides.

This template should help get you started creating awesome slide decks using Reveal.js with Svelte in Vite.

How does it work?

To start using this boilerplate, you just have to remember four things about how can you create and place your slides:

• Your slides are both Svelte components and Reveal.js slides.
• You can have one or more slides (using <section/>) within a single Svelte component.
• Create new slides as Svelte components under src/slides
• Just import and include your components inside the src/Presentation.svelte component

Please refer to the sample slides inside the examples folder for more detailed information.

Configuring Reveal.js

If you want to customize the Reveal.js setup you can do so by modifying the src/config.js file. It has got all the Reveal.js config and some plugins like Markdown and Highlight are imported and configured by default.

For configuring Reveal.js, you can refer to the official config documentation.

Sample slide

This is a sample slide and a Svelte component called Title created under the src folder.

src/Title.svelte

<section>
<h1>This is a sample slide</h1>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>

<h2>Sample code</h2>
You can insert code blocks using template literals inside `<pre>` and `<code>` elements.

    <pre>
    <code data-line-numbers data-trim data-no-escape>
    {`
      const name = "hello world";
      if(name === 'hello') {
        console.log('world');
      }
    `}
    </code>
    </pre>
</section>

src/Presentation.svelte

The slide order is the order in which you layout your Svelte components. In this example , the Title is the first slide followed by Love and GettingStarted

<script>
    import Title          from './slides/Title.svelte';
    import Love           from './slides/Love.svelte';
    import GettingStarted from './slides/GettingStarted.svelte';

    const partner = ['Svelte', 'Reveal.js'];
</script>

<Title/>
<Love {partner}/>
<GettingStarted/>

Inspiration

The main motivation for me to build this template to improve the tooling used in the default Reveal.js project. Since it is using some outdated tooling and plugins for building your presentation like gulp and so on. Also I wanted to build slides with a JavaScript framework like Svelte, I was looking for whether there is already something there. Then I found this project created by Michael Schwarz called svelte-reveal-boilerplate.

I borrowed the ideas from this one and made some improvements on top it to create svelte-slides.

Recommended IDE Setup

VS Code + Svelte.

Source Code

The source code for this Github template is here. If you are facing any issues or need any additional capabilities please feel free to raise an issue.

Demo

You can view the demo for the template with sample sites here

References

• Svelte
• Vite.js
• Reveal.js