Reveal.js + Svelte + Vite

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

How to start using this template

Using a recent version of pnpm

• pnpm install
• pnpm run dev

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

src/Title.svelte

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

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

<h2>Sample code</h2>

    <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.

<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

This project is inspired by svelte-reveal-boilerplate

Recommended IDE Setup

VS Code + Svelte.

References

• Svelte
• Vite.js
• Reveal.js