svelte-slides

Svelte Slides

šŸŖ„ Create beautiful presentations using Markdown in Svelte

Svelte Slides

Use Svelte and Markdown to create beautiful presentations. šŸŖ„

šŸš§ Work in progress šŸš§

  • Slides
  • Fullscreen mode
  • Speaker notes
  • Pre-built components
  • CLI
  • Deployment

Features

  • āœļø Write slides using Markdown and HTML
  • šŸ§ Use Svelte components
  • šŸŖ„ Syntax highlight
  • šŸŽØ Themable

Getting Started

  1. Clone the project: git clone https://github.com/mattcroat/svelte-slides.git
  2. Install dependencies: npm i
  3. Run the development server: npm run dev
  4. Start working on your slides: routes/index.md

Creating Slides

Slides are separated with --- representing <hr>.

# Slide 1

Content

---

# Slide 2

Content

---

You can navigate using ArrowLeft and ArrowRight but you can change and extend the behavior inside src/layout.svelte.

Theming

  • Global styles are inside styles/global.css
  • Syntax highlight styles are inside styles/syntax.css using Night Owl as the default theme but you can find more Prism themes or create your own
  • You can change the slide styles in slide.svelte

Custom Components

You can import and use any Svelte component inside the <script> tag in routes/index.md.

<script lang="ts">
  import Counter from '$lib/components/mdsvex/counter.svelte'
</script>

# Slide

<Counter />

---

You can create custom elements by creating a Svelte component named as the HTML element you want to replace and import and export it inside src/layout.svelte.

<script context="module">
  import h1 from '$lib/components/mdsvex/h1.svelte'
  export { h1 }
</script>

How Does It Work?

  • šŸ§ mdsvex is used for preprocessing Markdown, syntax highlight and custom components
  • šŸŖ„ It uses a preprocessor that separates the slides by --- and turns each slide into a <Slide /> component that is made navigatable by showing and hiding slides and styled using CSS with animations on transitions
  • šŸŖ A store is used to update the slide based on the URL hash and subscribe to when a slide is updated
  • šŸŽØ The style and animations for the slides is inside lib/components/mdsvex/slide.svelte
  • šŸŽ The layout.svelte component is a special mdsvex component that wraps everything and has your custom components, styles and navigation logic

Top categories

Loading Svelte Themes