Reveal.js + Svelte + Vite

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

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