Getting Started

SvelteShow is a library that makes it easy to create fun and dynamic presentations / slideshows with SvelteKit and TailwindCSS. Check out a demo presentation here: Demo / Example. This library is inspired by svelte-slides and reveal.js.

or...

You also need to install TailwindCSS for this library. You might also need to update your tailwind.config.cjs file to make sure that this library gets processed properly by Tailwind:

Project Structure

The structure of the project should look something like shown below (you can find an example in the GitHub repo). The individual folder structures are explained in more detail in the following sections.

Slides Folder

Each slide is created by creating a new page. To create new slides we first need to set up the (slides)/+layout.svelte file. Here we need to import the <Deck> component, as well as the $slides store, and tell it what slides make up the presentation. You can also import animate.css here, so that it is available for all slides.

routes tells the library which page to access to get to the slide. title is the name of the slide that will appear in the table of contents menu that you acn access by pressing the m key ("m" stands for "Menu"). notes is an optional boolean value that specifies, whether the slide has a notes/+page.svelte file. You also need to pass the notesURL to Deck, which by default is in the /notes route. If you want to put your notes somewhere else you can also specify a notesRoute attribute in the slides store.

Notes Folder

To create a note for a slide that will then be shown in the speaker's view, create a sub-folder in the slide folder called notes/, with a +page.svelte file. If you do not create notes for a slide, the speaker's view will simply show a standard page with the slide number & title, as well as a small view of the slide.

To make notes visible we first need to set up the (notes)/+layout.svelte file. Here you need to import Speaker component, which renders the notes through an <iframe>. Once this is set up you can access the presentation notes by pressing the s key ("s" stands for "Speaker").