Creating awesome presentations using Reveal.js with Svelte and Vite
Tags: revealjs, svelte, vite, productivity
Published: 2022-08-22 05:59:58

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](https://revealjs.com/) 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](https://svelte.dev) 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](https://vitejs.dev/) 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](https://github.com/rajasegar/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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9fptffgzglaedtums6d.png)


This template should help get you started creating awesome slide decks using [Reveal.js](https://revealjs.com) 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](https://github.com/rajasegar/svelte-slides/tree/main/src/slides/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](https://revealjs.com/config/).


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

### src/Title.svelte
```html
<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`

```html
<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](https://github.com/micschwarz) called [svelte-reveal-boilerplate](https://github.com/micschwarz/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](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).

## Source Code 
The source code for this Github template is [here](https://github.com/rajasegar/svelte-slides). If you are facing any issues or need any additional capabilities please feel free to raise an [issue](https://github.com/rajasegar/svelte-slides/issues).

## Demo
You can view the demo for the template with sample sites [here](http://svelte-slides-three.vercel.app/)

## References
- [Svelte](https://svelte.dev)
- [Vite.js](https://vitejs.dev)
- [Reveal.js](https://revealjs.com)