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.

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

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

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>

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

A component for slide with all the options supported

<Slide bgColor="red">
<h1>This is a sample slide</h1>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>
</Slide>

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') {
        console.log('world');
      }
    `}
</Code>

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

A component for speaker notes

<Notes>
Hello Everyone, I am using svelte-slides for this presentation
</Notes>

A component embedding YouTube videos

<Youtube url="https://www.youtube.com/watch?v=1lcPGnRL4Qo"/>

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

This project is inspired by svelte-reveal-boilerplate

VS Code + Svelte.

• Svelte
• Vite.js
• Reveal.js