Astlide

Slides that live in your Astro site.

Astlide is an Astro integration for presentations. Write slides in MDX, Markdown or plain HTML, present them in the browser, and export them to PDF or to PowerPoint files anyone can edit.

📖 Documentation: https://astlide.dev/ · 🎬 Live demo: https://astlide.dev/demo/tour/1/ · 🇯🇵 日本語ドキュメント

Why Astlide

• Keep every deck in one site. A deck is a folder under src/content/decks/. Talks, weekly reports and training decks sit side by side: they share themes and components, deploy together and get an index page. Most slide tools give you one project per deck.
• Add it to the site you already have. astlide() is an Astro integration, so it works in a blog, a Starlight docs site or any other Astro project. Some parts also work on their own: the deck loader, PowerPoint import and templates (@astlide/core/pptx), and the layout engine (@astlide/core/engine).
• Use your company's PowerPoint template. Register a .pptx or .potx as a theme and your Markdown slides take on its layouts, fonts and colors. astlide export --pptx writes real text boxes, tables and shapes, with your speaker notes, that anyone can edit in PowerPoint. Astlide lays the slides out itself, so the export needs no browser and no LibreOffice.
• Bring in the slides you already have. Put a .pptx from PowerPoint or Google Slides in a deck folder and its pages show up as slides. Or run astlide import to turn it into HTML slides you can edit.
• Run the same decks in Next.js, Nuxt, React or Vue. @astlide/next, @astlide/nuxt, @astlide/react and @astlide/vue serve the same deck folders, MDX included, with the presenter window and PDF / PPTX export. See the docs.
• Use React, Vue or Svelte components. Slides are Astro pages, so components from any of these work on a slide and stay interactive while you present.
• Link to any slide. Each slide is a static page: /my-talk/7 loads on its own and can be hosted anywhere, including under a sub-path such as a GitHub Pages project site.
• Pick the format slide by slide. One deck can mix .mdx, .md and .html files. HTML is rendered as written, so you can paste in markup you wrote by hand or got from an AI tool. Frontmatter is checked with Zod.

It also has what you'd expect from a presentation tool:

• Presenting: a presenter window with your notes, the next slide, the remaining steps and a timer; an overview, go-to-slide, a pen and a laser pointer, all shown on the audience screen too
• Reveals and code: <Fragment> / <Fragments> (with until / hide), and Shiki highlighting that steps through lines with {1|3-5|all}
• Diagrams and math: Mermaid (loaded only on slides that use it) and KaTeX
• Export: PDF and PNG via Playwright, editable PowerPoint (in your template, with notes), and a one-click PDF button in the browser
• Make it yours: 7 themes, PowerPoint templates as themes, a plugin API (themes, layouts, transitions), slide decorators and a toolbar you put together yourself

How it compares to Slidev, Marp, reveal.js and Quarto: Why Astlide?

Quick Start

# Scaffold a new project
bun create astlide my-slides
cd my-slides
bun install
bun run dev

Or add to an existing Astro project:

bun add @astlide/astro

Then configure:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import astlide from '@astlide/astro';

export default defineConfig({
  integrations: [astlide()],
});

// src/content.config.ts
import { defineCollection } from 'astro:content';
import { astlideDeckLoader, slideSchema } from '@astlide/astro';

const decks = defineCollection({
  // Renders .mdx, .md, and .html slides from src/content/decks/<deck>/
  loader: astlideDeckLoader(),
  schema: slideSchema,
});

export const collections = { decks };

Creating a Deck

Scaffold one with the CLI:

bunx create-astlide deck my-talk --theme dark --format mdx   # or md | html

Or create it by hand:

1. Create src/content/decks/my-talk/_config.json:

{
  "title": "My Talk",
  "author": "Your Name",
  "date": "2025-01-15",
  "theme": "default"
}

2. Add slides as numbered files — .mdx, .md, and .html can be mixed and sort by name:

src/content/decks/my-talk/
├── _config.json
├── 01-cover.mdx
├── 02-intro.md
└── 03-demo.html

HTML & Markdown slides

Any slide can be a plain .md or self-contained .html file with the same frontmatter as MDX. HTML bodies are rendered verbatim (inline <style> and markup preserved — same trust level as MDX), which is handy for pasting in AI-generated or hand-crafted markup:

---
slideLayout: cover
background: "#0b132b"
---
<style>.hero { font-size: 3rem; }</style>
<h1 class="hero">Everything in one HTML file</h1>

Slide Frontmatter

Important: Use slideLayout (not layout) — Astro MDX reserves the layout key.

---
slideLayout: default
transition: fade
background: "#1e293b"
class: "text-light"
notes: "Speaker notes shown in presenter/notes mode"
hidden: false
---

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗