Svelte Slides

A Reveal.js boilerplate with Svelte, TailwindCSS and Vite

Reveal.js + Svelte + Vite + TailwindCSS

This template should help get you started creating awesome slide decks using Reveal.js with Svelte in Vite. You can also use TailwindCSS utility classes to style your slide contents.

How does it work?

  • 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
  • That's it, you are good to go.

Configuring Reveal.js

You can customize the Reveal.js setup in src/config.js.

Sample slide


You can insert code blocks using template literals inside <pre> and <code> elements.

<h1>This is a sample slide</h1>

<h2>Sample code</h2>

    <code data-line-numbers data-trim data-no-escape>
      const name = "hello world";
      if(name === 'hello') {


The slide order is the order in which you layout your Svelte components.

    import Title          from './slides/Title.svelte';
    import Love           from './slides/Love.svelte';
    import GettingStarted from './slides/GettingStarted.svelte';

    const partner = ['Svelte', 'Reveal.js'];

<Love {partner}/>

Built-in Components


A component for slide with all the options supported

<Slide bgColor="red">
<h1>This is a sample slide</h1>

Please refer to src/lib/Slide.svelte for more information about the props.


A component to render code blocks

<Code trim={true} lineNumbers="1|2-4" >
      const name = "hello world";
      if(name === 'hello') {

Please refer to /src/lib/Code.svelte for more information about the props.


A component for speaker notes

Hello Everyone, I am using svelte-slides for this presentation


A component embedding YouTube videos

<Youtube url=""/>

Please refer to /src/lib/Youtube.svelte for more information about the props.


This project is inspired by svelte-reveal-boilerplate

VS Code + Svelte.


Top categories

Loading Svelte Themes