Use Svelte and Markdown to create beautiful presentations. 🪄
🚧 Work in progress 🚧
- Slides
- Fullscreen mode
- Speaker notes
- Pre-built components
- CLI
- Deployment
- ✍️ Write slides using Markdown and HTML
- 🐧 Use Svelte components
- 🪄 Syntax highlight
- 🎨 Themable
- Clone the project:
git clone https://github.com/mattcroat/svelte-slides.git
- Install dependencies:
npm i
- Run the development server:
npm run dev
- Start working on your slides:
routes/index.md
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
.
- 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
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>
- 🐧 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 specialmdsvex
component that wraps everything and has your custom components, styles and navigation logic