Getting Started

Astlide is an Astro integration. It needs Astro 7.2.10 or later and is developed with Bun.

Create a new project

bun create astlide my-slides
cd my-slides
bun install
bun run dev

Open the dev server URL — you’ll see the deck index; pick a deck to start presenting.

Add to an existing Astro project

bun add @astlide/core

Register the integration:

astro.config.mjs

import { defineConfig } from "astro/config";
import astlide from "@astlide/core";

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

Define the decks content collection with Astlide’s loader and schema:

src/content.config.ts

import { defineCollection } from "astro:content";
import { astlideDeckLoader, slideSchema } from "@astlide/core";

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

export const collections = { decks };

Caution

Use astlideDeckLoader() rather than glob({ pattern: "**/*.mdx" }) — it also handles .md and .html slides and keeps them in numeric order.

Project structure

src/
├── content.config.ts
└── content/
    └── decks/
        └── my-talk/
            ├── _config.json      # title, author, date, theme
            ├── 01-cover.mdx
            ├── 02-intro.md
            └── 03-demo.html

Every directory under src/content/decks/ is a deck, served at /<deck>/<slide-number>. The deck index lives at /.

Next steps

• Follow the tutorial to build, present and publish a talk
• Create your first deck
• Present it — keyboard shortcuts, presenter window, pen and laser
• See every layout and theme in the Gallery, or try the live demo