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:
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.
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.
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").