Everything you need to create, present, and share beautiful presentations.
Sardius Slides is a presentation platform that lets you create beautiful, branded slide decks using simple Markdown. Present live and sync with remote viewers in real-time via WebSockets.
Write your presentation in Markdown with simple directives for themes, layouts, and illustrations.
Navigate slides with keyboard shortcuts or on-screen controls. See all slides in the thumbnail panel.
Click "Go Live" to sync your presentation with remote viewers. They see exactly what you see.
Copy the viewer link and share it with your audience. No login required for viewers.
Slides are separated by --- (three dashes on their own line). Each slide can have directives in HTML comments at the top.
# Main Title
## Subtitle with **Bold Accent**
Regular paragraph text goes here.
> This is a quote or callout.
- Bullet point 1
- Bullet point 2
- Bullet point 3
---
# Next Slide Title
Content for the next slide...Add directives at the top of each slide using HTML comments:
<!-- theme: dark -->
<!-- layout: split -->
<!-- illustration: rocket -->
# Your Slide Title
## With **Accent** Text| Directive | Values | Description |
|---|---|---|
<!-- theme: --> |
dark, light |
Sets the slide background color scheme |
<!-- layout: --> |
hero, split, center, left, top, bg, roadmap |
Controls content positioning |
<!-- illustration: --> |
See all 13 illustrations | Adds a branded SVG illustration (auto-detected from content if omitted) |
<!-- date: --> |
Any text | Displays a date badge (hero layout) |
Create icon cards by starting lines with an emoji followed by a pipe:
- 🔍 | Feature Name | Description of the feature
- 🚀 | Another Feature | More description here
- ✨ | Third Feature | And one moreCreate stat cards using brackets with percentages:
- [90%] | Metric Name
- [75%] | Another Metric
- [50%] | Third MetricCreate a horizontal timeline with the roadmap layout. Use * to mark completed items:
<!-- layout: roadmap -->
# Timeline Title
- * Q1 | Completed milestone
- * Q2 | Also completed
- Q3 | In progress
- Q4 | UpcomingFull-screen title slide with animated network background. Perfect for opening slides.
Content on the right, illustration on the left. Great for feature explanations.
Centered content with even padding. Ideal for quotes or key points.
Content aligned left, illustration on right. Standard content layout.
Content at top, illustration below. Good for closing slides.
Horizontal timeline with progress rail. Perfect for project timelines.
Two themes are available to create visual contrast in your presentation:
| Theme | Background | Best For |
|---|---|---|
dark |
Navy blue (#08162B) | Technical content, emphasis slides, dramatic effect |
light |
White (#FFFFFF) | Detailed content, readability, professional look |
💡 Tip: Alternate between dark and light themes to create visual rhythm and keep your audience engaged.
The live presenting feature uses WebSockets to sync your slides with remote viewers in real-time.
⚠️ Note: Viewers cannot navigate slides themselves — they follow the presenter's view only.
Use these shortcuts in Presenter View for smooth navigation:
| Key | Action |
|---|---|
→ or Space |
Next slide |
← |
Previous slide |
Esc |
Exit to dashboard (stops live if active) |
💡 Tip: Use Space for a natural presentation flow — it advances one slide at a time just like traditional presentation software.
The engine includes 13 SVG illustrations that adapt to the slide theme (dark/light) and play entrance animations when the slide becomes active. If you don't specify an illustration, the engine auto-detects the best match from your slide text.
🎨 Tip: Visit the Illustration Gallery to preview all illustrations side-by-side on both dark and light themes with animations playing.
| Name | Description | Auto-detect Keywords |
|---|---|---|
streaming |
Broadcast tower with signal waves | live, stream, broadcast, signal |
video |
Video player with play button and progress bar | video, vod, content, library, on demand, media |
ai |
Neural network heptagon with connected nodes | ai, artificial, intelligence, analysis, tagging, neural, discover |
distribution |
Central hub with device endpoints connected by data lines | distribution, channel, roku, device, screen, platform, ott, tv |
growth |
Upward trending chart with peak indicator | growth, analytics, data, metrics, results, stats, revenue, financial |
security |
Shield with checkmark | security, uptime, reliable, sla, trust, shield, infrastructure |
globe |
World globe with connection points and data paths | global, reach, audience, worldwide, everywhere |
roi |
Pentagon frame with dollar sign | roi, value, cost, pricing, revenue, money, investment, budget |
calendar |
Calendar card with date markers | calendar, schedule, event, timeline, date, demo, quarter |
team |
Three-person group with connection lines | team, partner, people, collaborate, support, together |
workflow |
Three numbered hexagon steps with flow lines | workflow, process, steps, automation, how, works, framework |
cloud |
Cloud shape with data lines to server rack | cloud, infrastructure, server, hosting, scale, architecture, transcode |
rocket |
Rocket with fins and engine flames | launch, rocket, ambition, speed, accelerate, future |
All illustrations play a stroke draw-in effect when the slide becomes active — lines appear to draw themselves on screen. Some illustrations also have looping ambient animations:
| Animation | Effect | Used In |
|---|---|---|
anim-pulse |
Gentle opacity/scale pulse | ai, globe, cloud, security, rocket |
anim-signal |
Signal wave broadcast | streaming, growth |
anim-dash |
Dashed stroke flows along path | distribution, globe, team, workflow, cloud |
anim-rotate |
Slow continuous rotation | ai |
<!-- illustration: distribution -->
<!-- layout: split -->
# Platform Expansion
## Every Screen, **One Architecture**
Reach every screen from a single dashboard.💡 Tip: You can omit the illustration directive entirely — the engine will automatically pick the best illustration based on your slide's text content.
Here's a complete example showing various features:
# Company Name
## 2026 **Product Roadmap**
Running together at speed.
<!-- date: February 2026 -->
<!-- layout: hero -->
---
<!-- theme: light -->
<!-- illustration: team -->
<!-- layout: split -->
# The Big Idea
## Everyone Running at **Full Speed**
> Clarity happens when everyone sees where we're headed.
This is what the roadmap is for.
---
<!-- theme: dark -->
<!-- layout: center -->
# Key Themes
## Four Pillars, **One Direction**
- 🔍 | Discovery | Help users find what they need
- 🚀 | Expansion | Open new markets and capabilities
- ✨ | Polish | Make the experience feel right
- 🔗 | Integration | Meet users where they are
---
<!-- theme: light -->
<!-- layout: roadmap -->
# The Year Ahead
- * Q1 | Product launch and migrations
- * Q2 | Platform expansion
- Q3 | New product launch
- Q4+ | Infrastructure and growth
---
<!-- theme: dark -->
<!-- illustration: rocket -->
<!-- layout: top -->
# What's Next
## Let's **Build This Together**
Your input shapes what comes next.
**→ Let's go build.**