# Astlide documentation

> Astlide is an Astro integration for slide decks: write slides in MDX, Markdown or HTML under src/content/decks/<deck>/, present them in the browser (presenter window, overview, pen), and export them to PDF, PNG or editable PowerPoint — also in a PowerPoint template's design.

---

# Astlide

Source: https://astlide.dev/

> Slides that live in your Astro site — many decks per site, written in MDX, Markdown or HTML, presented on the web and exported as editable PowerPoint in your own template.

## What sets it apart

**Many decks, one site**

Decks are content, not projects: every folder under `src/content/decks/` is a deck, with an index
page out of the box. Keep a year of talks, a team's reports or a product's training decks in one
repository — sharing themes, components and one deploy.

**An SDK, not an app**

`astlide()` goes into any Astro site — your blog, your Starlight docs, a portal of your own design.
The pieces work on their own too: the deck loader, PowerPoint import and templates, and the layout
engine behind the PPTX export.

**Your PowerPoint template, editable PPTX out**

Register a `.pptx` / `.potx` template as a theme and Markdown slides come out in its design. Export
turns them into real PowerPoint text boxes, tables and shapes — laid out without a browser.

**PowerPoint & Google Slides in**

Drop a `.pptx` into a deck and its pages become slides, or import it as editable HTML slides — text
stays text, placeholders keep their layout and master styles.

**React, Vue & Svelte inside**

Astro islands: put the charts, demos and design-system components you already have on a slide,
interactive while you present.

**Every slide a real page**

`/my-talk/7` is static HTML — link straight to a slide, load fast, host anywhere, including
sub-paths like GitHub Pages.

## What people build with it

**A talk archive**

Your own Speaker Deck: every talk at its own URL, searchable, with PDF and PPTX downloads for the
event's upload form.

**Slides next to the docs**

Product docs and the decks that explain them in one Starlight site, reusing the same components and
code samples.

**An internal deck portal**

Weekly reports, proposals and onboarding decks in the company template, reviewed as pull requests
and handed out as PowerPoint.

**Decks written by agents**

Markdown and HTML are what language models write best; Astlide turns them into on-brand, editable
PowerPoint without a browser in the loop.

## Everything you expect when presenting

**Presenter window**

Next-slide preview, steps left, notes and timer. Overview, go-to-slide, pen and laser — mirrored
to the audience screen.

**Reveals & code**

`<Fragment>` / `<Fragments>` with `until` and `hide`; Shiki code with `{1|3-5|all}` line steps.

**Diagrams & math**

Mermaid diagrams loaded on demand, KaTeX rendered at build time.

**Export**

PDF and PNG, editable PowerPoint with your speaker notes, or one-click PDF in the browser.

- [Is Astlide right for you?](https://astlide.dev/why/): How it compares to Slidev, Marp, reveal.js and Quarto — and when to pick something else.

---

# Why Astlide?

Source: https://astlide.dev/why/

> What Astlide is good at, how it compares to Slidev, Marp, reveal.js and Quarto, and when to choose something else.

Astlide is for people who want slides to be part of a website — and who still have to hand over PowerPoint.

## What makes it different

**Decks are content, not projects.** Most slide tools build one deck per project. In Astlide every folder under `src/content/decks/` is a deck of an Astro content collection, and the site serves an index of them. A year of talks, a team's weekly reports, a product's training decks: one repository, one set of themes and components, one deploy.

**It's an SDK, not an app.** Astlide is `astlide()` in your `astro.config.mjs`, so it goes into whatever site you build — a blog, Starlight docs, a portal with your own navigation. Its pieces work on their own too: the deck loader (`astlideDeckLoader`), PowerPoint import and templates (`@astlide/core/pptx`), and the layout engine behind the PPTX export (`@astlide/engine`).

**Your PowerPoint template, editable PowerPoint out.** Register a `.pptx` / `.potx` / `.thmx` [template as a theme](https://astlide.dev/guides/templates/) and Markdown slides take its backgrounds, fonts, colors and placeholder positions. [Export](https://astlide.dev/guides/export/) writes real PowerPoint text boxes, tables and shapes with your speaker notes, laid out by Astlide's own engine — no browser or LibreOffice involved, so it runs anywhere Node runs.

**PowerPoint and Google Slides in.** A `.pptx` dropped into a deck folder shows as slides; `astlide import` turns one into editable HTML slides ([Import](https://astlide.dev/guides/import/)). Moving an existing deck into the site — or updating last quarter's — doesn't start from scratch.

**Any framework's components.** Slides are Astro, so React, Vue, Svelte, Solid and Preact components work on them, interactive while you present ([guide](https://astlide.dev/guides/frameworks/)).

**Every slide is a static page.** Each slide is its own URL and HTML file (`/my-talk/7`): link to a single slide, load without a client app booting, host anywhere — including sub-paths such as GitHub Pages.

**HTML is a first-class slide format.** Alongside `.mdx` and `.md`, a slide can be a plain `.html` file rendered verbatim — hand-made layouts, or HTML written by an AI assistant.

## How it compares

| | Astlide | Slidev | Marp | reveal.js | Quarto |
|---|---|---|---|---|---|
| Built on | Astro (integration) | Vite + Vue (app) | Markdown converter | JavaScript library | Pandoc |
| Decks per project | Many (content collection) | One | One per file | One per page | One per file |
| Embed in an existing site | Yes (any Astro site) | Separate build | Separate output | Library | Separate output |
| Components | React, Vue, Svelte, Solid, Preact, Astro | Vue | — | — | — |
| Editable PPTX | Yes, without a browser | Yes, measured in a browser | Experimental (browser + LibreOffice) | No | Yes (Pandoc) |
| Company `.potx` template | Template as theme, any layout | — | — | — | Reference doc, fixed layouts |
| PPTX / Google Slides import | Yes | — | — | — | — |
| Presenter mode, pen, overview | ✓ | ✓ | Limited | ✓ (plugins) | ✓ (reveal.js) |
| Ecosystem & maturity | Young | Large, mature | Mature | Very mature | Mature |

*Summaries as of October 2026 — check each project's docs for current details.*

## When to choose something else

- **You want the biggest ecosystem of themes and add-ons** → [Slidev](https://sli.dev) is more mature and has far more community themes.
- **You want a single Markdown file and nothing else** → [Marp](https://marp.app) is simpler.
- **Your slides come out of notebooks or R / Python analysis** → [Quarto](https://quarto.org) fits that workflow.
- **You don't use Astro and don't want a build step** → reveal.js or Marp will be lighter.
- **You need to edit slides visually** → a GUI tool (Keynote, PowerPoint, Google Slides) fits better. Astlide is code-first.

## Where Astlide is still young

Astlide is new. Its theme and plugin ecosystem is small, and some features other tools have are still on the [roadmap](https://github.com/r-hashi01/astlide/issues) — contributions are welcome.

---

# Getting Started

Source: https://astlide.dev/getting-started/

> Create a new Astlide project or add Astlide to an existing Astro site.

Astlide is an [Astro](https://astro.build) integration. It needs **Astro 7.2.10 or later** and is developed with [Bun](https://bun.sh).

## Create a new project

```bash
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

```bash
bun add @astlide/core
```

Register the integration:

```js
// 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:

```ts
// 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](https://astlide.dev/tutorial/first-deck/) to build, present and publish a talk
- [Create your first deck](https://astlide.dev/guides/decks/)
- [Present it](https://astlide.dev/guides/presenting/) — keyboard shortcuts, presenter window, pen and laser
- See every layout and theme in the [Gallery](https://astlide.dev/gallery/), or [try the live demo](https://astlide.dev/demo/tour/1/)

---

# Tutorial: Your First Deck

Source: https://astlide.dev/tutorial/first-deck/

> Build a short talk from scratch, present it, export a PDF and publish it on GitHub Pages.

In this tutorial you'll build a five-slide talk, present it with the presenter window, export a PDF and publish it. It takes about 15 minutes.

You'll need [Bun](https://bun.sh) and a terminal.

## 1. Create a project

```bash
bun create astlide my-talks
cd my-talks
bun install
bun run dev
```

Open the URL the dev server prints. You'll see the **deck index** — every folder under `src/content/decks/` is a deck.

## 2. Create a deck

```bash
bunx create-astlide deck hello-astro --theme default --format mdx
```

This creates `src/content/decks/hello-astro/` with a `_config.json` and a few starter slides. Open `_config.json` and set your own details:

```json
{
  "title": "Hello, Astro",
  "author": "Your Name",
  "date": "2026-10-09",
  "theme": "default"
}
```

Delete the starter slides — we'll write our own. Slides are numbered files; the number sets the order.

## 3. A cover slide

Create `01-cover.mdx`:

```mdx
---
slideLayout: cover
notes: "Introduce yourself."
---

# Hello, Astro

Why I build my slides with code
```

The page updates as you save. `slideLayout: cover` centres the title; `notes` are only visible to you in the presenter window.

## 4. Reveal points one by one

Create `02-why.mdx`:

```mdx
---
slideLayout: default
---

# Why slides as code?

<Fragments>

- Version control and reviews
- Reuse components across talks
- Export to PDF and PowerPoint

</Fragments>
```

Press <kbd>→</kbd>: each bullet appears on its own step before the deck moves on. [Fragments](https://astlide.dev/guides/fragments/) can do much more — reveal several items together, hide them again, or highlight.

## 5. Walk through code

Create `03-code.mdx`. The `{1|3-5|all}` after the language steps through the highlighted lines:

````mdx
---
slideLayout: code
---

# A component

```astro {1|3-5|all}
<Card title="Hello">
  <p>
    Slides can render
    real components
  </p>
</Card>
```
````

## 6. Two columns and a diagram

Create `04-compare.mdx`:

```mdx
---
slideLayout: two-column
---

# Before and after

<Left>

### Before
Slides in a GUI app, exported by hand.

</Left>
<Right>

### After
Markdown in git, built by CI.

</Right>
```

And `05-flow.md` — a plain Markdown slide with a [Mermaid](https://astlide.dev/guides/diagrams/) diagram (run `bun add mermaid` first):

````md
---
slideLayout: default
---

# How it ships

```mermaid
flowchart LR
  Write --> Commit --> CI --> Pages
```
````

Mixing `.mdx` and `.md` (and `.html`) in one deck is fine.

## 7. Present

Go back to slide 1 and press <kbd>p</kbd> to open the **presenter window**. It shows the next slide, how many steps are left, your notes and a timer. Move it to your laptop screen and put the original window on the projector — they stay in sync.

![Presenter window: the current slide on the left; next-slide preview, steps left, notes and timer on the right](../../../assets/tutorial/presenter.png)

A few more keys worth knowing:

| Key | |
|---|---|
| <kbd>o</kbd> | Overview of all slides |
| <kbd>g</kbd> | Go to a slide by number or title |
| <kbd>d</kbd> / <kbd>l</kbd> | Pen / laser pointer — shown on the audience screen too |
| <kbd>f</kbd> | Fullscreen |

![Overview grid of all slides](../../../assets/tutorial/overview.png)

![Go-to dialog filtering slides by the word "code"](../../../assets/tutorial/goto.png)

![A pen annotation circling a diagram](../../../assets/tutorial/pen.png)

The full list is in [Presenting](https://astlide.dev/guides/presenting/).

## 8. Export a PDF

```bash
bunx playwright install chromium   # once — Playwright comes with @astlide/core
bun run export hello-astro         # or: bunx astlide export hello-astro
```

Astlide builds the site, renders it and writes `exports/hello-astro.pdf`, with every slide in its final state (all steps revealed). Add `--pptx` for an editable PowerPoint, or `--png` for images; see [Export](https://astlide.dev/guides/export/).

## 9. Publish on GitHub Pages

Tell Astro where the site will live:

```js
// astro.config.mjs
export default defineConfig({
  site: "https://<user>.github.io",
  base: "/my-talks",
  integrations: [astlide()],
});
```

Push the project to a GitHub repository named `my-talks`, enable **Settings → Pages → Source: GitHub Actions**, and add Astro's [GitHub Pages workflow](https://docs.astro.build/en/guides/deploy/github/). Your talk is then at `https://<user>.github.io/my-talks/hello-astro/1/`.

## What's next

- Browse every layout and theme in the [Gallery](https://astlide.dev/gallery/).
- Try the [feature tour deck](https://astlide.dev/demo/tour/1/).
- Make it yours with [themes, plugins and decorators](https://astlide.dev/guides/themes-and-plugins/).

---

# Gallery

Source: https://astlide.dev/gallery/

> Every built-in layout and theme, rendered from the feature tour deck.

Screenshots come from the [feature tour deck](https://astlide.dev/demo/tour/1/) — open it to see each slide live, then press <kbd>o</kbd> for the overview.

## Layouts

Set with `slideLayout` in a slide's frontmatter. See [Layouts & Components](https://astlide.dev/guides/layouts-and-components/) for the markup each one expects.

**cover**

(Picture: cover layout: centred title, subtitle and hint)
Centred title — opening and closing slides.

**section**

(Picture: section layout: a chapter divider)
Chapter divider.

**default**

(Picture: default layout: heading, text and a table)
Standard content slide.

**two-column**

(Picture: two-column layout with a full-width title above Left and Right columns)
`<Left>` / `<Right>` under a full-width title.

**image-left**

(Picture: image-left layout: illustration on the left, text on the right)
`<ImageSide>` + `<TextPanel>`.

**image-right**

(Picture: image-right layout: text on the left, illustration on the right)
The same, mirrored.

**image-full**

(Picture: image-full layout: full-bleed background image with white text)
Full-bleed `background` image.

**code**

(Picture: code layout: a CodeBlock with highlighted lines)
Tighter padding for code.

**quote**

(Picture: quote layout: a centred blockquote)
Centred blockquote.

**statement**

(Picture: statement layout: one large sentence)
One large sentence.

## Themes

Set per deck with `"theme"` in `_config.json`. The same slide in each built-in theme:

**default**
(Picture: Slide in the default theme)

**dark**
(Picture: Slide in the dark theme)

**minimal**
(Picture: Slide in the minimal theme)

**corporate**
(Picture: Slide in the corporate theme)

**gradient**
(Picture: Slide in the gradient theme)

**rose**
(Picture: Slide in the rose theme)

**forest**
(Picture: Slide in the forest theme)

Want your own? See [custom themes](https://astlide.dev/guides/themes-and-plugins/#custom-theme).

---

# Creating a Deck

Source: https://astlide.dev/guides/decks/

> Deck folders, _config.json, slide files in .mdx, .md and .html, and frontmatter.

A deck is a folder under `src/content/decks/`. Its slides are numbered files that sort by name.

## Scaffold with the CLI

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

## Or create it by hand

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

   ```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:

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

The slide number in the URL (`/my-talk/2`) follows the sorted file order.

## Slide formats

- **`.mdx`** — Markdown plus components (`<Fragment>`, `<Columns>`, `<SpeakerNotes>`, …). Astlide's components are available without imports.
- **`.md`** — plain Markdown, including code highlighting and diagrams.
- **`.html`** — a self-contained HTML slide. The body is rendered verbatim (inline `<style>` and markup preserved — the same trust level as MDX), which is handy for pasting hand-crafted or AI-generated markup.

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

## Frontmatter

```yaml
---
slideLayout: default
transition: fade
title: "Optional — used by the go-to-slide dialog"
background: "#1e293b"
class: "text-light"
notes: "Speaker notes shown in presenter / notes mode"
hidden: false
---
```

:::caution
Use **`slideLayout`**, not `layout` — Astro's MDX pipeline reserves `layout`.
:::

See the [frontmatter reference](https://astlide.dev/reference/frontmatter/) for every field, and [layouts](https://astlide.dev/guides/layouts-and-components/) for the built-in `slideLayout` values.

## Speaker notes

Notes are hidden from the audience and show in the presenter window (`p`) and the notes overlay (`n`). Write them in whichever way suits the slide:

- **`<SpeakerNotes>`** — full Markdown, in `.mdx` slides:

  ```mdx
  # My Slide

  Content here.

  <SpeakerNotes>
  Key points to mention:
  - **First** important thing
  - Second point with `code`
  </SpeakerNotes>
  ```

- **A comment at the end of the slide** — like Slidev and Marp; works in `.md`, `.mdx` and `.html` slides, Markdown included:

  ```md
  # My Slide

  Content here.

  <!--
  Key points to mention:
  - **First** important thing
  -->
  ```

  Only a comment that *ends* the slide becomes notes — comments elsewhere stay comments. (In `.mdx`, HTML comments are otherwise not allowed; use `{/* … */}` for those.)

- **Frontmatter** — `notes: "…"` for a short line.

If a slide has more than one, `<SpeakerNotes>` wins, then frontmatter `notes`, then the trailing comment. `<Notes>` still works as an alias of `<SpeakerNotes>`.

## Editing in the browser

While `astro dev` is running, press <kbd>e</kbd> on a slide to open its source file in a panel next to it, and just type: changes are saved a moment after you stop typing (or right away with <kbd>Cmd</kbd>/<kbd>Ctrl</kbd>+<kbd>S</kbd>) and the slide updates **live, without a page reload**: only the parts of the slide you changed are swapped in, so nothing flickers — your caret, the current fragment step, rendered diagrams and things like the camera or a running recording stay as they are. <kbd>Esc</kbd> (or ✕) saves and closes the panel.

Speaker notes follow along too — frontmatter `notes` and `<Notes>` alike: the notes overlay and every other window showing the same slide (such as the presenter window) update in place.

Adding, removing or renaming slide files is picked up live too: every window on the deck updates its slide count and outline and stays on the slide it was showing (now perhaps at a different number), at the same step. If that slide's file was removed, it shows the slide now at that position.

The panel stays open as you move between slides and switches to each slide's source.

- Dev server only: the editor and its endpoint don't exist in production builds.
- It edits slide files (`.mdx`, `.md`, `.html` under `src/`) and nothing else; writes must come from the dev server's own page.
- Edits are written to disk as you type — use undo in the panel or your version control to roll back.

## Hidden slides

`hidden: true` keeps a slide in development but skips it in production builds: <kbd>←</kbd> / <kbd>→</kbd>, <kbd>Home</kbd> / <kbd>End</kbd>, the toolbar, the presenter window's next-slide preview, the overview and the go-to dialog all jump over it, and a direct link redirects to the next visible slide.

---

# Layouts & Components

Source: https://astlide.dev/guides/layouts-and-components/

> Built-in slide layouts and the components available in MDX slides.

## Layouts

Choose a layout per slide with `slideLayout`:

| `slideLayout` | Description |
|---|---|
| `default` | Standard content slide |
| `cover` | Centred title / closing slide |
| `section` | Chapter divider |
| `two-column` | Side-by-side with `<Left>` / `<Right>` |
| `image-full` | Background image with text overlay |
| `image-left` | Image on the left, text on the right |
| `image-right` | Image on the right, text on the left |
| `code` | Optimised padding for code blocks |
| `quote` | Centred blockquote |
| `statement` | Single large sentence |

Plugins can add more — see [Themes & Plugins](https://astlide.dev/guides/themes-and-plugins/).

### Two columns

```mdx
---
slideLayout: two-column
---
# Comparison

<Left>
### Before
Old approach
</Left>
<Right>
### After
New approach
</Right>
```

### Image + text

```mdx
---
slideLayout: image-left
---
<ImageSide src="/photo.jpg" alt="Photo" />
<TextPanel>
## Caption
Description text here.
</TextPanel>
```

## Components

All components are available in `.mdx` slides without imports.

### `<Columns>`

```mdx
<Columns columns={3} gap="1.5rem">
<div>

### Option A
First option details.

</div>
<div>

### Option B
Second option details.

</div>
<div>

### Option C
Third option details.

</div>
</Columns>
```

| Prop | Description |
|---|---|
| `columns` | Number of columns (detected from children if omitted) |
| `gap` | Gap between columns (CSS value, default `2rem`) |
| `align` | `start` \| `center` \| `end` \| `stretch` |
| `widths` | Custom widths, e.g. `1fr 2fr 1fr` |

### `<CodeBlock>`

Wraps a code fence with a filename header and a copy button:

````mdx
<CodeBlock title="src/content.config.ts">
```ts
export const collections = { decks };
```
</CodeBlock>
````

See [Code](https://astlide.dev/guides/code/) for line highlighting.

### `<Math>`

KaTeX, rendered at build time:

```mdx
Inline: <Math formula="\frac{x^2}{2}" />

<Math formula="\sum_{i=1}^n i^2 = \frac{n(n+1)(2n+1)}{6}" display />
```

### `<YouTube>`

Privacy-enhanced embed; accepts an ID or a full URL:

```mdx
<YouTube id="dQw4w9WgXcQ" start={42} />
```

Exported slides (PDF / PPTX) can't run the player: they show the video's thumbnail with a play button instead, linked to the video.

#### Static stand-ins for your own embeds

Mark an element with `data-astlide-static` to show it in place of a live embed when slides are printed or exported. It is hidden everywhere else; give it its own `display` and position it over the embed:

```html
<div class="map" style="position: relative">
  <iframe src="https://maps.example.com/…"></iframe>
  <a href="https://maps.example.com/…" data-astlide-static style="position: absolute; inset: 0; display: block">
    <img src="/images/map.png" alt="" style="width: 100%; height: 100%; object-fit: cover" />
  </a>
</div>
```

An `<iframe>` without one is exported by what it shows:

- a page of your own site (`srcdoc`, or a path in the build) is laid out inside the frame like the slides are;
- another site (YouTube, Vimeo, Figma, CodePen, or any page with oEmbed / Open Graph data) becomes its thumbnail and title, linked to it. This is looked up when you export and cached; offline, it is a card naming the page.

### `<Tweet>`

A static, styled card — no external API calls:

```mdx
<Tweet
  url="https://x.com/astrodotbuild/status/1234567890"
  text="Astro 5.0 is here! 🚀"
  author="Astro"
  handle="@astrodotbuild"
  date="Dec 3, 2024"
/>
```

### `<Fragment>`, `<Fragments>`, `<SpeakerNotes>`

See [Fragments](https://astlide.dev/guides/fragments/) and [speaker notes](https://astlide.dev/guides/decks/#speaker-notes).

---

# React, Vue & Svelte components

Source: https://astlide.dev/guides/frameworks/

> Use components from React, Vue, Svelte, Solid or Preact in your slides — interactive in the browser, in their first state in PDF and PPTX.

Astlide is an Astro integration, so a slide can use components from any framework Astro supports: React, Vue, Svelte, Solid, Preact. Bring the chart, demo widget or design-system component you already have instead of rewriting it for your slides.

## Set up

Add the framework's Astro integration next to Astlide:

```bash
bunx astro add react    # or: vue, svelte, solid-js, preact
```

```js
// astro.config.mjs
import astlide from "@astlide/core";
import react from "@astrojs/react";
import { defineConfig } from "astro/config";

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

## Use a component in a slide

Import it at the top of an `.mdx` slide and use it like any element:

```mdx
---
title: Live demo
---
import Counter from "../../../components/Counter.tsx";
import PriceChart from "../../../components/PriceChart.vue";

# Live demo

<PriceChart quarter="Q3" />

<Counter label="Clicks" client:load />
```

Without a `client:*` directive a component is rendered to HTML at build time and ships no JavaScript — fine for charts and diagrams that don't need to react. Add [`client:load`](https://docs.astro.build/en/reference/directives-reference/#client-directives) (or `client:visible`, `client:idle`) to make it interactive while you present.

Components from different frameworks can sit on the same slide.

## In PDF and PPTX

Exports show a component **as it is first rendered**:

- **PDF / PNG** (rendered in a browser): what the slide shows when it loads, after `client:*` components have started.
- **PPTX** (laid out without a browser): the component's server-rendered HTML — its text, boxes and SVG become editable shapes like the rest of the slide.

A component rendered only in the browser (`client:only`) has no HTML at build time, so it is missing from the PPTX. Give it a server-rendered state, or a [static stand-in](https://astlide.dev/guides/layouts-and-components/#static-stand-ins-for-your-own-embeds): an element marked `data-astlide-static` is shown over it in prints and exports, and hidden while you present.

```mdx
<div style="position: relative">
  <LiveMap client:only="react" />
  <img data-astlide-static src="/map-snapshot.png" alt="Map of our offices"
       style="position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover" />
</div>
```

---

# Fragments

Source: https://astlide.dev/guides/fragments/

> Reveal content step by step with <Fragment> and <Fragments>.

Fragments reveal content one step at a time — press `→` / `Space` to go forward and `←` to go back. Once a slide has no steps left, `→` moves to the next slide.

## `<Fragment>`

```mdx
<Fragment index={1}>First point</Fragment>
<Fragment index={2}>Second point</Fragment>
<Fragment index={2} effect="zoom">Appears together with the second</Fragment>
<Fragment index={3} effect="highlight">Third — highlighted</Fragment>
```

| Prop | Description |
|---|---|
| `index` | Step number. Fragments sharing an index reveal **together**. Unindexed fragments reveal one per step in document order, before indexed ones. |
| `until` | Hide the fragment again when step `until` is reached. |
| `hide` | Start visible and disappear at the fragment's step. |
| `effect` | `fade` (default) \| `slide-up` \| `zoom` \| `highlight` |

```mdx
<Fragment index={1} until={3}>Visible for steps 1–2 only</Fragment>
<Fragment index={3} hide>Visible until step 3</Fragment>
```

## `<Fragments>`

Reveal a list one item at a time. Each first-level list item — or each child element when there's no list — becomes its own step:

```mdx
<Fragments effect="slide-up">

- Problem
- Approach
- Result

</Fragments>
```

:::note
Keep blank lines around the list inside `<Fragments>` so MDX parses it as Markdown.
:::

## Ordering

Fragments and [code highlight steps](https://astlide.dev/guides/code/#highlight-steps) share one sequence per slide:

1. unindexed steps, in document order;
2. then indexed steps, by `index` (steps sharing an index happen together).

## Presenting and exporting

- Steps are **mirrored between the presenter and audience windows** — reveal from the presenter screen and the audience sees it.
- The presenter panel shows how many steps are left on the current slide.
- PDF export and the `/<deck>/all` print view show each slide's **final** state (fragments revealed, `until` / `hide` fragments hidden).

---

# Code

Source: https://astlide.dev/guides/code/

> Syntax highlighting, line highlighting and highlight steps.

Code fences are highlighted with [Shiki](https://shiki.style) (theme `github-dark` by default — change it with the [`shikiTheme`](https://astlide.dev/reference/configuration/) option).

## Line highlighting

Add a `{…}` range after the language to highlight lines; the rest are dimmed:

````md
```ts {2,4-6}
// highlights line 2 and lines 4–6
```
````

## Highlight steps

Separate ranges with `|` to step through them with `→` / `Space`, like [fragments](https://astlide.dev/guides/fragments/). `all` or `*` highlights every line:

````md
```ts {1|3-6|8|all}
import { defineCollection } from "astro:content";

const decks = defineCollection({
  loader: astlideDeckLoader(),
  schema: slideSchema,
});

export const collections = { decks };
```
````

- The first range is the initial state; each further range is one step.
- Steps interleave with fragments in document order (code steps count as index `0`).
- Works in `.mdx` and `.md` slides, including inside `<CodeBlock>`.
- PDF export shows the last step.

Adjust the dimming with the `--code-dim-opacity` CSS variable (default `0.35`).

## Filename header and copy button

Wrap a fence in [`<CodeBlock title="…">`](https://astlide.dev/guides/layouts-and-components/#codeblock).

## Using the transformer elsewhere

The Shiki transformer behind this is exported, so you can use it in your own Shiki setup:

```ts
import { astlideCodeHighlight } from "@astlide/core/utils/code-highlight";
```

---

# Diagrams

Source: https://astlide.dev/guides/diagrams/

> Mermaid diagrams from ```mermaid code fences.

Write [Mermaid](https://mermaid.js.org/) diagrams in a `mermaid` code fence. Rendering uses the optional `mermaid` package — install it to enable diagrams:

```bash
bun add mermaid
```

````md
```mermaid
flowchart LR
  Write --> Present --> Export
```
````

- **Loaded on demand** — only slides that contain a diagram fetch `mermaid`; projects without it build normally.
- **Theme** follows the deck: `dark` / `gradient` → Mermaid `dark`, `forest` → `forest`, everything else → `default`.
- **Sized for slides** — labels are scaled to match the slide's body text.
- Works in `.mdx` and `.md` slides, the presenter preview, and PDF export (exporters wait for diagrams to finish rendering).
- Without `mermaid` installed — or when a diagram has a syntax error — the source is shown as code and a message is logged to the browser console.

---

# Presenting

Source: https://astlide.dev/guides/presenting/

> Keyboard shortcuts, the presenter window, overview, go-to-slide, pen and laser pointer, and the toolbar.

## Keyboard shortcuts

| Key | Action |
|---|---|
| `→` / `Space` | Next step or slide |
| `←` | Previous step or slide |
| `Home` / `↑` | First slide |
| `End` / `↓` | Last slide |
| `o` | Overview — all slides in a grid |
| `g` | Go to slide — type a number or part of a title, `↑`/`↓` to pick, `Enter` to jump |
| `d` | Pen — draw on the slide; `c` clears the current slide, `Shift+C` the whole deck |
| `l` | Laser pointer |
| `v` | Camera bubble |
| `r` | Start / stop recording |
| `p` | Open the presenter window |
| `n` | Notes overlay |
| `s` | Share mode — hide all chrome for screen sharing |
| `f` | Fullscreen |
| `Esc` | Exit pen / laser, fullscreen, close overlays |
| `e` | Live-edit the slide's source in the browser (`astro dev` only — see [Creating a Deck](https://astlide.dev/guides/decks/#editing-in-the-browser)) |

On touch devices, swipe left / right to navigate.

## Presenter window

Press `p` to open the presenter window. It shows:

- the current slide, a **live preview of the next slide** and how many **steps remain** on this one;
- speaker notes (font size adjustable with `A−` / `A+` or `Shift+,` / `Shift+.`);
- a timer.

The two windows stay in sync over `BroadcastChannel`: slide changes, [fragment and code steps](https://astlide.dev/guides/fragments/), pen strokes and the laser pointer. Drive the talk from the presenter window; the audience window follows.

## Go to slide

`g` opens a dialog listing every slide by number and title. Type a number or part of a title to filter. Titles come from frontmatter `title`, else the slide's first heading.

## Pen & laser pointer

- `d` toggles the **pen**. Strokes are kept per slide while you navigate and come back when you return; `c` clears the current slide, `Shift+C` the whole deck.
- `l` toggles the **laser pointer**.
- Both are drawn in slide coordinates, so they line up in every window even when the slides render at different sizes — annotate in the presenter window and it shows on the audience screen.
- Colors: `--astlide-pen-color`, `--astlide-laser-color`.

## Camera & recording

- `v` shows your **webcam** in a round bubble over the slides. Drag it anywhere — the position is remembered — and it keeps playing as you change slides. Resize it with `--astlide-camera-size` (default `220px`).
- `r` **records the talk**: the browser asks which screen, window or tab to capture (it suggests the current tab), the microphone is mixed in, and a red indicator with the elapsed time appears. Press `r` again — or stop sharing from the browser — to download `<deck>-<date>.webm`. Recording continues while you move through the deck.

Turn the camera on first if you want it in the recording. Both need a secure context (`https://` or `localhost`) and your permission; recording relies on the browser's screen-capture support (Chromium-based browsers and Firefox; Safari's support is more limited).

### Keeping drawings

By default drawings last for the browser session. To keep them across reloads — and the next time the deck is opened in the same browser — enable persistence:

```js
astlide({ drawings: { persist: true } });
```

Drawings are stored per deck in `localStorage`. `Shift+C` (with the pen active) clears them.

## Toolbar

Compose the floating bottom toolbar from an ordered list of actions. It reveals on hover and keyboard focus, and stays visible on touch devices.

```js
astlide({
  toolbar: ["home", "prev", "counter", "next", "spacer", "notes", "overview", "goto", "draw", "laser", "presenter", "fullscreen", "download"],
});
```

| Action | |
|---|---|
| `home` | Back to the deck index |
| `prev` / `next` / `counter` | Navigation and `n / total` |
| `notes` | Notes overlay |
| `overview` | Overview grid |
| `goto` | Go-to-slide dialog |
| `draw` / `laser` | Pen / laser pointer |
| `camera` / `record` | Camera bubble / recording |
| `presenter` | Open the presenter window |
| `fullscreen` | Toggle fullscreen |
| `print` / `share` | Print mode / share mode |
| `download` | In-browser PDF ([experimental](https://astlide.dev/guides/export/)) |
| `spacer` | Flexible gap |

Default: `["prev", "counter", "next"]`.

The toolbar, progress bar and presenter panel read CSS custom properties (`--astlide-nav-bg`, `--astlide-nav-fg`, `--astlide-nav-btn-bg`, `--astlide-progress-color`, `--astlide-presenter-bg`, `--astlide-presenter-fg`, `--astlide-presenter-accent`, …) so themes can restyle them without `!important`.

---

# Themes & Plugins

Source: https://astlide.dev/guides/themes-and-plugins/

> Built-in themes, custom themes, the plugin API, slide decorators, deck metadata and fonts.

## Themes

Built-in: `default`, `dark`, `minimal`, `corporate`, `gradient`, `rose`, `forest`. Set one per deck in `_config.json`:

```json
{ "theme": "gradient" }
```

### Custom theme

A theme is CSS scoped to `[data-theme="<name>"]` that sets Astlide's custom properties:

```css
/* themes/my-theme.css */
[data-theme="my-theme"] {
  --color-background: #fef3c7;
  --color-foreground: #78350f;
  --color-primary: #d97706;
  --color-secondary: #92400e;
  --color-accent: #fbbf24;
  --color-muted: #fde68a;
  --code-background: #451a03;
}
```

Register it through a plugin (below), then set `"theme": "my-theme"` in the deck's `_config.json`.

### From a PowerPoint template

A `.pptx` / `.potx` / `.thmx` template can be a theme too — its backgrounds, fonts, colors and placeholder positions: `astlide({ templates: { brand: './brand.pptx' } })`. See [PowerPoint templates](https://astlide.dev/guides/templates/).

## Plugin API

Plugins contribute themes, layouts, transitions, Shiki languages / themes and slide decorators.

```js
// astro.config.mjs
import { defineConfig } from "astro/config";
import astlide from "@astlide/core";
import { defineAstlidePlugin } from "@astlide/core/plugin";

const myPlugin = defineAstlidePlugin({
  name: "astlide-plugin-midnight",
  themes: [{ name: "midnight", cssEntrypoint: "./themes/midnight.css" }],
  layouts: [{ name: "split-quote" }],
  transitions: [{ name: "iris" }],
  shiki: {
    langs: [/* additional Shiki langs */],
    themes: [{ name: "neon-night" /* shiki theme JSON */ }],
  },
});

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

`cssEntrypoint` is resolved as a Vite import — any module specifier that resolves to CSS works (relative path, npm package, …).

A layout can register a **name** only (a `.slide-<name>` class is applied so plugin CSS can target it), or supply a `componentEntrypoint` so a plugin `.astro` component owns the slide markup:

```js
layouts: [
  { name: "split-quote", componentEntrypoint: "astlide-plugin-acme/SplitQuote.astro" },
],
```

### Publishing a plugin

| Field | Value |
|---|---|
| Package name | `astlide-plugin-*` or `@scope/astlide-plugin-*` |
| `keywords` | include `"astlide-plugin"` |
| `peerDependencies` | `{ "@astlide/core": "^x.y" }` |
| Default export | `defineAstlidePlugin({ … })` |

## Slide decorators

Render a component on **every** slide — logo, footer, page number, back link — without editing each file:

```js
astlide({ slideDecorators: ["./src/components/DeckFooter.astro"] });
```

Plugins can contribute decorators too (`decorators: [{ componentEntrypoint: "…" }]`).

## Deck & slide metadata

Read the deck name, slide number, total, layout, transition and parsed config:

```astro
---
// server-side, inside any slide component or decorator
import { getDeckContext } from "@astlide/core/context";
const ctx = getDeckContext(Astro);
---
<footer>{ctx?.config.title} — {ctx?.slideNumber}/{ctx?.totalSlides}</footer>
```

In the browser, `getClientDeckContext()` returns the same shape.

## Fonts

Astlide injects Inter (text) and JetBrains Mono (code) from Google Fonts by default, so slides and exported PDFs use the same fonts on every machine:

```js
astlide({ font: false }); // use whatever your CSS specifies
astlide({ font: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" });
```

## Custom home page

Astlide serves a deck index at `/`. If you add your own `src/pages/index.{astro,md,mdx,html}`, Astlide detects it and skips its index route. Force either way with `injectIndexRoute: false | true`.

---

# Export

Source: https://astlide.dev/guides/export/

> Export decks to PDF, PNG or PowerPoint.

## One command

```bash
bunx astlide export my-talk                 # → exports/my-talk.pdf
bunx astlide export my-talk --pptx          # → exports/my-talk.pptx (editable PowerPoint)
bunx astlide export my-talk --png           # → exports/my-talk-slides/*.png
bunx astlide export --all --pdf --pptx      # every deck, both formats
```

Projects created with `bun create astlide` also have it as a script: `bun run export my-talk --pptx`.

A deck can also be given as a path (`src/content/decks/my-talk`, `dist/my-talk`, …); the project is found from it, as it is when you run the command in any folder inside the project.

- **PDF / PNG** are rendered in a headless browser ([Playwright](https://playwright.dev); run `bunx playwright install chromium` once). `astlide export` builds your site and serves it on a free port for the export, so there's no server to start, and Astro's [`base`](https://astlide.dev/guides/deploy/) is picked up automatically. Every slide is shown in its final state (all fragment / code steps applied), and diagrams finish rendering first.
- **PPTX** needs no browser: the built slides are laid out by Astlide's own CSS layout engine and written as native shapes and editable text boxes. The fonts your theme loads are embedded in the file, so PowerPoint shows the slides in them without the fonts installed (fonts whose license forbids embedding are left out). Tables become PowerPoint tables, and boxes, CSS `::before` / `::after` text and simple inline SVG drawings (rectangles, circles, lines and arrows, paths, text) become shapes you can edit. Mermaid diagrams are rendered without a browser too (the project's `mermaid` install) and placed as pictures, as are SVG drawings that use more than that (gradients, arcs …); PNG and SVG images are included. Speaker notes go into PowerPoint's notes pane. Japanese (and other East Asian) text is given an East Asian font — the CJK font your CSS names, else Yu Gothic, which comes with Office — and is laid out with a Japanese font, so lines break as in the browser.

| Option | |
|---|---|
| `--pdf` `--pptx` `--png` | Formats, combine as needed (default `--pdf`) |
| `--all` | Every deck |
| `--out-dir <dir>` | Where exports go (default `exports/`) |
| `-o, --output <path>` | Exact output path (one deck, one format) |
| `--no-build` | Use the existing `dist/` instead of building first |
| `--base-url <url>` | PDF / PNG: render from a dev / preview server you already run (include the `base`, e.g. `http://localhost:4321/my-repo`) |
| `--width` / `--height` | PDF / PNG: slide size in px (default 1920×1080) |

If `astro dev` is running for the same project, pass `--base-url` so a PDF / PNG export doesn't build alongside it.

## In-browser PDF (experimental)

Add `"download"` to the [toolbar](https://astlide.dev/guides/presenting/#toolbar) for a one-click PDF of the current deck. It uses the optional, pre-1.0 [`@astlide/crispdf`](https://www.npmjs.com/package/@astlide/crispdf), whose output may still change — prefer the CLI for stable results.

```bash
bun add -D @astlide/crispdf
```

---

# Import PowerPoint & Google Slides

Source: https://astlide.dev/guides/import/

> Show a .pptx as Astlide slides, or turn it into an editable deck.

Astlide reads PowerPoint files: each page becomes an Astlide slide, with its text kept as text and its shapes, pictures and tables in place. Placeholders get their position and text style from the slide layout and master, theme colors and fonts are resolved, and speaker notes, titles and hidden slides carry over.

Google Slides and Keynote work through their PowerPoint export. To write new slides in Markdown with a template's design, see [PowerPoint templates](https://astlide.dev/guides/templates/).

## Show a .pptx as it is

Put the file in a deck folder, next to your other slides:

```
src/content/decks/q3-review/
├── _config.json
├── 01-intro.md
├── 02-numbers.pptx      ← every page of it, in place
└── 03-next-steps.mdx
```

Its pages sort with the other files by name (`02-numbers.pptx` → `02-numbers--001`, `02-numbers--002` …), and presenter view, overview, notes and PDF / PPTX export work as for any slide. Edit the `.pptx` and the deck follows on save. Pictures and fonts embedded in the file are served by Astlide (from `/_astlide/pptx/`).

## Import into an editable deck

```bash
bunx astlide import ~/Downloads/kickoff.pptx --deck kickoff
```

This writes one `.html` slide per page to `src/content/decks/kickoff/` (title, notes and `hidden` in frontmatter, one shape per line), pictures to `public/pptx/kickoff/`, and a `_config.json`. From then on the slides are plain files: edit them, mix in Markdown slides, change the theme.

| Option | |
|---|---|
| `--deck <name>` | Deck folder name (default: from the file name) |
| `--force` | Replace an existing deck folder |
| `--cwd <dir>` | Project root (default: found from the current directory) |

### Google Slides

Pass the deck's URL. It is downloaded as PowerPoint, which works when the deck is shared as "Anyone with the link"; otherwise download it (File → Download → Microsoft PowerPoint) and import the file.

```bash
bunx astlide import https://docs.google.com/presentation/d/1AbC…/edit
```

## From code

```ts
import { pptxToSlides } from "@astlide/core/pptx";

const deck = pptxToSlides(await readFile("talk.pptx"), {
  // Where pictures and embedded fonts go (default: pictures inlined as data: URLs).
  media: ({ name, data, type }) => saveSomewhere(name, data, type),
});
deck.slides[0].html;   // an Astlide .html slide body (1920×1080)
deck.slides[0].notes;  // speaker notes
deck.theme;            // the master's theme colors and fonts
```

## What converts

| In PowerPoint | In Astlide |
|---|---|
| Text boxes and placeholders: fonts, sizes, colors, bold / italic / underline, alignment, bullets and numbering, spacing, links | Positioned text |
| Rectangles, rounded rectangles, ellipses, arrows, callouts, common preset shapes, freeforms | CSS boxes and SVG |
| Solid, gradient, picture, tiled and pattern fills; outlines, dashes, arrowheads | CSS / SVG |
| Pictures (PNG, JPEG, GIF, SVG), cropping | `<img>` |
| Tables: cell fills, borders, merged cells | `<table>` |
| Groups, rotation, flips | Transforms |
| Backgrounds (slide, layout, master), master and layout artwork | The slide canvas |
| Embedded fonts | `@font-face` |

Charts, SmartArt and embedded objects show as a marked frame, and EMF / WMF pictures (which browsers can't display) as an outline — re-insert those as pictures. Slides other than 16:9 are letterboxed.

---

# PowerPoint templates

Source: https://astlide.dev/guides/templates/

> Use a PowerPoint or Google Slides template as a theme, and write the slides in Markdown.

Register a PowerPoint template as a theme, and Markdown slides come out in its design: the template's backgrounds and artwork, its theme colors and fonts, and its slide numbers. Each slide's content goes where the template's placeholders are, with their text style.

```js
// astro.config.mjs
import astlide from "@astlide/core";
import { defineConfig } from "astro/config";

export default defineConfig({
  integrations: [
    astlide({
      templates: { brand: "./templates/brand.pptx" },
    }),
  ],
});
```

```json
// src/content/decks/q3-review/_config.json
{ "title": "Q3 review", "theme": "brand" }
```

The template can be a `.pptx`, a `.potx` template, or an Office theme file (`.thmx`). For Google Slides, download the template with File → Download → Microsoft PowerPoint. Editing the file reloads the deck in `astro dev`.

## Where content goes

In a slide, the first heading goes into the layout's title placeholder and everything else into its body placeholder, styled like the template's text: font, size, color, alignment and insets.

```md
---
slideLayout: default
---

# What we shipped        ← the title placeholder

- Import PowerPoint      ← the body placeholder
- Templates as themes
```

In a layout with two content placeholders side by side, `<Left>` and `<Right>` fill them, with the template's gap between them. A layout's slide-number placeholder shows the slide's number.

## Layouts

The built-in layouts use the template's own:

| `slideLayout` | Template layout |
|---|---|
| `cover` | Title Slide |
| `section` | Section Header |
| `default` | Title and Content |
| `two-column` | Two Content |
| `code` | Title Only (else Title and Content) |

They are found by the layout's type in PowerPoint, or by name ("Title slide", "Section header" …), as in Google Slides exports. Every layout of the template is also available by its name as a slug: `slideLayout: comparison`, `slideLayout: title-only`, `slideLayout: picture-with-caption` …

Other built-in layouts (`quote`, `statement`, `image-left` …) keep their own arrangement on the template's master background. A slide with its own `background` shows that instead of the template's artwork.

## Theme variables

The template's theme sets the theme variables, so components and custom CSS follow it:

| Variable | From the template |
|---|---|
| `--color-background` / `--color-foreground` | Light 1 / Dark 1 |
| `--color-primary` / `--color-accent` | Accent 1 / Accent 2 |
| `--color-secondary` / `--color-muted` | Dark 2 / Light 2 |
| `--font-heading` / `--font-body` | Heading / body font |
| `--font-size-base` / `--font-size-h1` | Body / title text size of Title and Content |

Install the template's fonts where the slides are viewed (or embed them in the template: PowerPoint's "Embed fonts in the file"), as for any theme.

## From code

```ts
import { pptxToTemplate, templateCss } from "@astlide/core/pptx";

const template = pptxToTemplate(await readFile("brand.pptx"), {
  media: ({ name, data, type }) => saveSomewhere(name, data, type),
});
template.layouts;   // per layout: name, id, artwork HTML, title / body / slide-number boxes
template.aliases;   // built-in layout → template layout
templateCss(template, "brand"); // the theme's CSS
```

## Limits

- Slides are 16:9. A 4:3 template is drawn centered, with its background color at the sides.
- Placeholders for pictures, charts and tables, and date and footer placeholders, are not filled.
- Exported PPTX files draw the template's artwork as shapes, not as a PowerPoint master.

---

# Render service (HTTP API)

Source: https://astlide.dev/guides/server/

> Run Astlide as an HTTP service — Markdown in, PowerPoint / PDF / PNG out — with an OpenAPI spec for Dify, n8n and other tools.

`@astlide/server` (`packages/server` in the repository) wraps Astlide in a small HTTP API, so tools that can call an API but don't run Node or Astro can make slides: Dify or n8n custom tools, chat bots, internal apps.

- `POST /render` — Markdown slides, with a built-in theme or an uploaded PowerPoint template → editable **PPTX**, **PDF**, or **PNG** (a ZIP, one image per slide)
- `POST /import` — a `.pptx` (or a Google Slides URL) → the slides as HTML, with titles and speaker notes
- `POST /templates/layouts` — a PowerPoint template → its layouts and where their placeholders are
- `GET /openapi.json` — the OpenAPI 3.1 spec · `GET /health` — health check

Nothing is kept: each render builds a throwaway Astro project, and it is deleted as soon as the response is ready. Uploaded files are never written anywhere else.

## Run it with Docker

The image has everything a render needs: Node and Bun, Chromium for PDF / PNG, and Noto CJK fonts so Japanese, Chinese and Korean text renders. Build it from the repository root:

```bash
docker build -f packages/server/Dockerfile -t astlide-server .
docker run --rm -p 8787:8787 astlide-server
```

```bash
curl localhost:8787/health
# {"status":"ok","version":"0.0.0","queue":{"running":0,"waiting":0}}
```

Without Docker, from a clone of the repository (Node 22.12+ and Bun; for PDF / PNG also `bunx playwright install chromium`):

```bash
bun install
bun packages/server/src/cli.ts
```

## Render slides

Send all slides as one Markdown string, separated by lines that are exactly `---`. A slide can start with a frontmatter block — the same keys as in a deck (`slideLayout`, `title`, `notes`, `background`, `hidden` …):

```bash
curl -o review.pptx -H 'content-type: application/json' localhost:8787/render -d '{
  "markdown": "---\nslideLayout: cover\n---\n# Quarterly review\n\nQ3 2026\n---\n# Highlights\n\n- Revenue up 12%\n- Two new regions",
  "theme": "corporate",
  "title": "Quarterly review",
  "format": "pptx"
}'
```

Or send `slides` as an array — Markdown strings, or objects with `markdown` (or `html`) and frontmatter:

```json
{
  "slides": [
    { "markdown": "# Quarterly review\n\nQ3 2026", "slideLayout": "cover" },
    { "markdown": "# Highlights\n\n- Revenue up 12%", "notes": "Mention the new regions" },
    { "markdown": "# Thanks", "frontmatter": { "background": "#0b132b" } }
  ],
  "format": "pdf"
}
```

| Field | |
| --- | --- |
| `markdown` / `slides` | The slides (one of them). |
| `theme` | A built-in theme: `default`, `dark`, `minimal`, `corporate`, `gradient`, `rose`, `forest`. |
| `template` | A PowerPoint template (`.pptx` / `.potx` / `.thmx`) to use as the theme instead — a file field in multipart, or `{ "filename": "brand.pptx", "data": "<base64>" }` in JSON. |
| `format` | `pptx` (default), `pdf`, or `png` (a ZIP of one PNG per slide). |
| `output` | `file` (default): the file itself. `base64`: JSON `{ filename, contentType, size, data }` for clients that only handle JSON. |
| `title`, `author`, `date` | Deck metadata; the title also names the file. |

Slides are Markdown (`.md`), not MDX: components and imports aren't available, which keeps requests from running code on the server. A middle segment made only of `key: value` lines is read as the next slide's frontmatter.

### With a PowerPoint template

Upload the template with the slides (multipart here). The built-in layouts map to the template's (`cover` → its title slide, `default` → title and content …), and every template layout can be picked by its id:

```bash
curl -o q3.pptx localhost:8787/render \
  -F template=@brand.pptx \
  -F 'markdown=---
slideLayout: cover
---
# Q3 review
---
slideLayout: comparison
---
# Before / after'
```

`POST /templates/layouts` lists those ids, with each layout's title / body / slide-number placeholder boxes (px on a 1920×1080 canvas) — handy for an LLM choosing a layout per slide:

```bash
curl -F file=@brand.pptx localhost:8787/templates/layouts
# {"fonts":{…},"aliases":{"cover":"title-slide",…},"layouts":[{"id":"title-slide","name":"Title Slide","title":{"left":72,…},"body":[…]},…]}
```

See [PowerPoint templates](https://astlide.dev/guides/templates/) for how content fills the placeholders.

## Import a deck

```bash
curl -F file=@kickoff.pptx localhost:8787/import
curl -H 'content-type: application/json' -d '{"url":"https://docs.google.com/presentation/d/…"}' localhost:8787/import
```

The answer has each slide as an Astlide HTML slide (pictures inlined as `data:` URLs), its title, speaker notes and whether it's hidden. The HTML can be sent back to `/render` as `{ "html": "…" }` slides. Google Slides decks must be shared as "Anyone with the link"; only `docs.google.com/presentation` URLs are fetched.

## Use it from Dify, n8n and others

The service describes itself at `GET /openapi.json` (OpenAPI 3.1, with `servers` set to the URL it was reached at — or `PUBLIC_URL`):

- **Dify** — Tools → Custom → Create Custom Tool → *Import from URL*, and enter `http://<host>:8787/openapi.json`. Each operation (`renderSlides`, `importPresentation`, `listTemplateLayouts`) becomes a tool an agent or workflow can call. Use `output: base64` where a tool must answer JSON. If you set an API key, choose *API Key* → *Bearer* as the authorization.
- **n8n** — an *HTTP Request* node (`POST /render`, response format *File*), or import the spec in tools that read OpenAPI.

## Settings

Environment variables:

| Variable | Default | |
| --- | --- | --- |
| `PORT` / `HOST` | `8787` / `0.0.0.0` | Where the server listens. |
| `ASTLIDE_API_KEY` | — | When set, requests need `Authorization: Bearer <key>` (or `X-API-Key`). `/health` and `/openapi.json` stay open. |
| `PUBLIC_URL` | from the request | The URL put in the OpenAPI spec's `servers`. |
| `MAX_BODY_MB` | `50` | Largest request (413 beyond). |
| `MAX_SLIDES` | `200` | Most slides per render. |
| `RENDER_TIMEOUT_MS` | `180000` | A render taking longer is stopped (504). |
| `CONCURRENCY` / `MAX_QUEUE` | `2` / `16` | Renders at once, and how many may wait; more get 503. |
| `ASTLIDE_WORK_DIR` | `.astlide-work` next to `node_modules` | Where per-request projects are made. It must share a parent directory with the installed packages. |

Errors are JSON `{ "error": "…" }`: 400 for bad input (checked before anything is built — e.g. a frontmatter value the slide schema rejects), 422 when the build or export fails, with the end of its log.

## Limits

- Each render is a full Astro build: a small deck takes about 3–5 seconds (PPTX or PDF), more with many slides.
- Raw HTML in the Markdown is rendered as is, and PDF / PNG load the slides in Chromium. Run the service where its users are trusted (an internal network, or behind `ASTLIDE_API_KEY`).
- PPTX export fetches web fonts and images the slides use, so the server needs outbound internet access for them.

---

# Coding agents

Source: https://astlide.dev/guides/agents/

> Let Claude Code, Codex or Gemini CLI write, check and export decks — the MCP server, the agent skill and llms.txt.

Coding agents can write Astlide decks like any other files. Three things help them do it well:

- the **MCP server**, whose tools read PowerPoint templates, import `.pptx` files, find text that doesn't fit and export decks;
- the **agent skill**, which teaches the slide syntax, layouts and the write → check → fix → export loop;
- the **docs as plain text**, at [`/llms.txt`](https://astlide.dev/llms.txt) and [`/llms-full.txt`](https://astlide.dev/llms-full.txt).

## MCP server

The server comes with `@astlide/core`: `astlide mcp` runs it over stdio, with [Bun](https://bun.sh). Nothing else to install — any project with Astlide has it.

Each call names the Astlide project to work on, and uses that project's own `@astlide/core`.

### Tools

| Tool | Arguments | Returns |
|---|---|---|
| `template_layouts` | `templatePath` (`.pptx` / `.potx` / `.thmx`) | The template's layouts: the id to use as `slideLayout`, PowerPoint name and type, title / body / slide-number placeholders, and which built-in layouts (`cover`, `section`, `default`, `two-column`, `code`) are drawn with each; theme colors and fonts |
| `import_pptx` | `path`, optional `projectRoot`, `deck`, `force`, `includeHtml` | Each slide's title, speaker notes and text as Markdown. With `projectRoot`, also writes an editable deck, like [`astlide import`](https://astlide.dev/guides/import/) |
| `check_deck` | `projectRoot`, `deck`, optional `build` | Text and boxes that don't fit, per slide (below) |
| `render_deck` | `projectRoot`, `deck`, `formats` (`pptx`, `pdf`), optional `outDir`, `build` | The exported files' paths, as [`astlide export`](https://astlide.dev/guides/export/) writes them |

`check_deck` and `render_deck` build the site themselves (`check_deck` only when `dist/` is older than the deck), so no dev server is needed. PDF export needs Playwright's Chromium (`bunx playwright install chromium`).

### Claude Code

```bash
claude mcp add astlide -- bunx astlide mcp
```

Add `--scope project` to share it with your team through `.mcp.json`.

### Codex

```toml
# ~/.codex/config.toml
[mcp_servers.astlide]
command = "bunx"
args = ["astlide", "mcp"]
```

### Gemini CLI

```json
// ~/.gemini/settings.json (or .gemini/settings.json in the project)
{
  "mcpServers": {
    "astlide": {
      "command": "bunx",
      "args": ["astlide", "mcp"]
    }
  }
}
```

Other MCP clients take the same command: `bunx astlide mcp`, started in the project folder.

## Checking a deck

`check_deck` lays the deck out with the engine behind the [PowerPoint export](https://astlide.dev/guides/export/) — at 1920×1080, with the theme's fonts, without a browser — and reports, per slide:

| Kind | Meaning |
|---|---|
| `text-clipped` | Text cut off by the slide or a box with `overflow: hidden` — part of it can't be seen |
| `text-overflow` | Text spilling out of its box (a fixed-height card, a column, the slide's content area) |
| `box-clipped` / `box-overflow` | The same for pictures, tables and embeds |
| `off-slide` | Outside the slide, where nothing clips it |

Each issue has the slide number and title, the text, the element and what it overflows, and how far in px on which side:

```text
2 problem(s) in 2 of 12 slides:
- Slide 4 "Results": 5 text blocks, "Churn fell to 2%" to "Next: EMEA", are cut off by the slide (186px bottom)
- Slide 9 "Pricing": text "Enterprise plans include single sign-on, audit logs and…" (p) is cut off by div.card (48px bottom)
```

so the agent can shorten the text, split the slide or pick another layout, and check again.

Text is measured with the fonts the deck loads (its `@font-face` rules and Google Fonts); when one can't be found, the result says so and widths are approximate. Not checked: Mermaid diagrams (laid out by the browser) and pages of `.pptx` files shown as they are.

## Agent skill

[`skills/astlide/SKILL.md`](https://github.com/r-hashi01/astlide/tree/main/skills/astlide) is an [Agent Skill](https://agentskills.io): deck structure, frontmatter, layouts, components, PowerPoint templates, export, the check loop and the usual mistakes (such as `slideLayout`, not `layout`).

- **Claude Code**: copy the folder to `.claude/skills/astlide/` in your project (or `~/.claude/skills/astlide/` for every project).

  ```bash
  mkdir -p .claude/skills && cp -r /path/to/astlide/skills/astlide .claude/skills/
  ```

- **Other agents** that read Agent Skills load the same folder from their skills directory; for the rest, point the agent at the file from its instructions (`AGENTS.md`, `GEMINI.md`).

## llms.txt

The docs are published for language models as well:

- [`https://astlide.dev/llms.txt`](https://astlide.dev/llms.txt) — every page with a one-line summary ([llms.txt format](https://llmstxt.org));
- [`https://astlide.dev/llms-full.txt`](https://astlide.dev/llms-full.txt) — all pages as Markdown in one file.

Give an agent the second one when it should know all of Astlide at once.

---

# Deploying

Source: https://astlide.dev/guides/deploy/

> Build a static site and host it anywhere — including under a sub-path such as GitHub Pages.

`astro build` produces a static site in `dist/` that any static host can serve.

## Under a sub-path (GitHub Pages)

Astlide honours Astro's [`base`](https://docs.astro.build/en/reference/configuration-reference/#base) option — every internal link, the presenter preview, overview thumbnails and PDF export resolve against it. For a GitHub Pages project site:

```js
// astro.config.mjs
export default defineConfig({
  site: "https://<user>.github.io",
  base: "/<repo>",
  integrations: [astlide()],
});
```

Slide links also follow Astro's [`trailingSlash`](https://docs.astro.build/en/reference/configuration-reference/#trailingslash) and [`build.format`](https://docs.astro.build/en/reference/configuration-reference/#buildformat): with the default `directory` format they end in `/` (`/<repo>/my-deck/3/`), matching the `index.html` files static hosts serve, so moving between slides costs no redirect.

Then deploy `dist/` with GitHub Actions — see Astro's [GitHub Pages guide](https://docs.astro.build/en/guides/deploy/github/).

:::note
Root-relative paths in `<ImageSide src>` and image `background`s (e.g. `/photo.jpg`) are resolved against `base` for you. Other absolute URLs you write yourself — Markdown images like `![](https://astlide.dev/photo.jpg)`, raw `<img>` or links — are not rewritten; use relative paths or `import.meta.env.BASE_URL` for those.
:::

## Search engines

Decks are `noindex` by default. Set [`indexable: true`](https://astlide.dev/reference/configuration/) to let search engines index them.

---

# Embedding a deck

Source: https://astlide.dev/guides/embed/

> Show a deck inside a blog post, a docs page or a React / Vue app with the <astlide-deck> element.

A built deck can be placed inside any other page — a blog post, a docs page, a Next.js or Nuxt app. The `<astlide-deck>` custom element loads the deck in an iframe, keeps it at 16:9 at the width of its container, and lets the page drive it: next / previous / go to slide, fullscreen, and an event whenever the slide changes.

Inside the frame the deck hides its own chrome (toolbar, progress bar, notes) and only shows the slide. Click into it and the arrow keys, Space, Page Up / Down, Home and End move through it; moving through slides doesn't add entries to the host page's history.

## In another page of the same Astro site

Use the `DeckEmbed` component — it resolves the deck's URL against Astro's [`base`](https://astlide.dev/guides/deploy/):

```astro
---
import DeckEmbed from "@astlide/core/components/DeckEmbed.astro";
---

<DeckEmbed deck="my-talk" />
<DeckEmbed deck="my-talk" start={3} controls title="My talk" />
```

It works in `.mdx` pages too. Without JavaScript a link to the deck is shown instead.

| Prop | Default | |
| --- | --- | --- |
| `deck` | — | Deck name (its directory under `src/content/decks/`) |
| `start` | `1` | Slide shown first |
| `controls` | `false` | Show previous / next, a slide counter and fullscreen below the deck |
| `title` | deck name | Accessible name of the frame |
| `class` | — | Extra CSS class |

## In any HTML page

Import the element once — from a bundler (`import "@astlide/core/embed"`) — and point `src` at the deck's root URL:

```html
<script type="module">
  import "@astlide/core/embed";
</script>

<astlide-deck src="https://example.com/talks/my-talk/" start="2" controls></astlide-deck>
```

The trailing slash of `src` decides the slide URLs: `…/my-talk/` loads `…/my-talk/2/`, `…/my-talk` loads `…/my-talk/2` — match how the deck's site is built (the default `directory` format uses slashes).

### Attributes

| Attribute | | |
| --- | --- | --- |
| `src` | required | URL of the deck root, absolute or relative to the page |
| `start` | `1` | Slide shown first. Changing it later moves the deck there |
| `controls` | off | Show the control bar (previous, counter, next, fullscreen) |
| `label` | `"Slide deck"` | Accessible name of the frame |

### Methods and properties

```js
const deck = document.querySelector("astlide-deck");

deck.next();              // next step, or next slide
deck.prev();              // previous step, or previous slide
deck.goTo(5);             // slide 5
deck.requestFullscreen(); // the standard fullscreen API

deck.slide; // current slide (0 until loaded)
deck.total; // number of slides
deck.step;  // steps revealed on the current slide
```

Calls made before the deck has loaded are queued and sent once it reports in. When the element itself has focus, ← / → / Home / End and `f` (fullscreen) work too.

### Events

`slidechange` fires once the deck has loaded and every time the slide or step changes. It bubbles, and `event.detail` is:

```ts
interface SlideChangeDetail {
  deck: string;  // deck name
  slide: number; // 1-based
  total: number;
  step: number;  // steps revealed on this slide (0 = none)
  steps: number; // steps this slide has
}
```

```js
deck.addEventListener("slidechange", (e) => {
  console.log(`slide ${e.detail.slide} of ${e.detail.total}`);
});
```

### Sizing

The element is a block as wide as its container, with a 16:9 frame. For decks of another shape, set `--astlide-aspect-ratio`:

```css
astlide-deck {
  max-width: 960px;
  --astlide-aspect-ratio: 4 / 3;
}
```

The parts are stylable with `::part(frame)`, `::part(iframe)` and `::part(controls)`.

## React

```tsx
import { useRef } from "react";
import { AstlideDeck, type AstlideDeckElement } from "@astlide/core/embed/react";

export function Talk() {
  const deck = useRef<AstlideDeckElement>(null);
  return (
    <>
      <AstlideDeck
        ref={deck}
        src="https://example.com/talks/my-talk/"
        controls
        onSlideChange={(e) => console.log(e.detail.slide)}
      />
      <button onClick={() => deck.current?.next()}>Next</button>
    </>
  );
}
```

The ref is the element, so its methods and properties are available. The component renders on the server too (Next.js, Remix …); the element comes alive in the browser. `react` is an optional peer dependency of `@astlide/core`.

## Vue

```vue
<script setup lang="ts">
import { ref } from "vue";
import { AstlideDeck } from "@astlide/core/embed/vue";

const deck = ref();
</script>

<template>
  <AstlideDeck
    ref="deck"
    src="https://example.com/talks/my-talk/"
    :start="2"
    controls
    @slidechange="(d) => console.log(d.slide)"
  />
  <button @click="deck.next()">Next</button>
</template>
```

`slidechange` is emitted with the event's detail. The component exposes `next()`, `prev()`, `goTo(n)`, `requestFullscreen()` and `element`. It renders on the server too (Nuxt …). `vue` is an optional peer dependency of `@astlide/core`.

## How it works

The element and the deck talk over `postMessage`. The deck page only listens when it is framed, and only to its parent window; it reports to the origin of the page that greeted it. The element only accepts messages from its own frame and the deck's origin. Commands can only move within the deck.

A deck hosted on another domain can be embedded as long as that host allows framing — check for `X-Frame-Options` or a `frame-ancestors` Content Security Policy on the deck's server.

---

# Configuration

Source: https://astlide.dev/reference/configuration/

> Options for the astlide() integration and deck _config.json.

## Integration options

```js
// astro.config.mjs
import astlide from "@astlide/core";

export default defineConfig({
  integrations: [
    astlide({
      toolbar: ["prev", "counter", "next"],
      slideDecorators: [],
      plugins: [],
      shikiTheme: "github-dark",
      font: undefined,
      csp: true,
      indexable: false,
      injectIndexRoute: undefined,
      drawings: { persist: false },
    }),
  ],
});
```

| Option | Type | Default | Description |
|---|---|---|---|
| `toolbar` | `ToolbarItem[]` | `["prev", "counter", "next"]` | Ordered toolbar actions — see [Presenting](https://astlide.dev/guides/presenting/#toolbar). |
| `slideDecorators` | `string[]` | `[]` | Components rendered on every slide (module specifiers). |
| `plugins` | `AstlidePlugin[]` | `[]` | Themes, layouts, transitions, Shiki langs / themes, decorators — see [Plugin API](https://astlide.dev/guides/themes-and-plugins/#plugin-api). |
| `shikiTheme` | `string` | `"github-dark"` | Shiki theme for code fences. |
| `font` | `false \| string \| { href?, preconnect? }` | Inter + JetBrains Mono from Google Fonts | Web font stylesheet to inject, or `false` for none. |
| `favicon` | `string \| false` | auto | Favicon for deck pages and the index. Default: `favicon.svg` / `.ico` / `.png` from `public/` if present, else an empty icon (no request to `/favicon.ico` at the domain root). A root-relative path gets Astro's `base`. `false`: no icon link. |
| `csp` | `boolean \| string` | `true` | Inject a default Content-Security-Policy meta tag, disable it, or provide your own policy. In `astro dev`, `worker-src 'self' blob:` is added (unless set) for Vite's client; the build keeps the policy as is. |
| `indexable` | `boolean` | `false` | When `false`, pages carry `noindex, nofollow`. |
| `injectIndexRoute` | `boolean` | auto | Inject the deck index at `/`. Auto-skipped when you have your own `src/pages/index.*`. |
| `drawings.persist` | `boolean` | `false` | Keep pen drawings in `localStorage` across reloads — see [Presenting](https://astlide.dev/guides/presenting/#keeping-drawings). |

Astro's own [`base`](https://astlide.dev/guides/deploy/) option is honoured as well.

## Deck `_config.json`

| Field | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | folder name | Shown on the deck index and in the browser tab. |
| `author` | `string` | — | Shown on the deck index. |
| `date` | `string` | — | ISO date shown on the deck index. |
| `theme` | `string` | `"default"` | Built-in or plugin theme name. |

## Package entry points

| Import | Contents |
|---|---|
| `@astlide/core` | the integration (default export), `astlideDeckLoader`, `slideSchema`, `deckConfigSchema`, `THEMES`, `defineAstlidePlugin`, context helpers |
| `@astlide/core/plugin` | `defineAstlidePlugin` and plugin types |
| `@astlide/core/context` | `getDeckContext`, `getClientDeckContext` |
| `@astlide/core/utils/code-highlight` | `astlideCodeHighlight` Shiki transformer |
| `@astlide/core/utils/mermaid` | `astlideMermaid` Shiki transformer |

Full API: [TypeDoc reference](https://astlide.dev/api/).

---

# Slide Frontmatter

Source: https://astlide.dev/reference/frontmatter/

> Every frontmatter field a slide accepts.

The same frontmatter works in `.mdx`, `.md` and `.html` slides.

```yaml
---
slideLayout: default
transition: fade
title: "Agenda"
background: "#1e293b"
class: "text-light"
notes: "Speaker notes"
hidden: false
---
```

| Field | Type | Default | Description |
|---|---|---|---|
| `slideLayout` | `string` | `"default"` | Layout — `default`, `cover`, `section`, `two-column`, `image-full`, `image-left`, `image-right`, `code`, `quote`, `statement`, or a plugin layout. |
| `transition` | `string` | `"fade"` | `none`, `fade`, `slide-left`, `slide-right`, `slide-up`, `zoom`, or a plugin transition. |
| `title` | `string` | first heading | Slide title for the go-to-slide dialog. |
| `background` | `string` | — | CSS background (color, gradient or `url(…)`). Values containing script-like patterns are rejected. |
| `class` | `string` | — | Extra classes on the slide — e.g. `text-light`, `text-dark`. |
| `notes` | `string` | — | Speaker notes (Markdown). `<SpeakerNotes>` in the body takes priority; a trailing `<!-- … -->` comment is used when this is not set. |
| `hidden` | `boolean` | `false` | Skip the slide in production builds. |

:::caution
Use `slideLayout`, not `layout` — Astro's MDX pipeline reserves `layout`.
:::

Unknown layouts, transitions or themes don't fail the build; they log a warning and show an overlay in development.

---

# Astlide

Source: https://astlide.dev/ja/

> Astro サイトの中に置くスライド。1 つのサイトにデッキをいくつでも置け、MDX・Markdown・HTML で書いて Web で発表し、自社テンプレートの PowerPoint として編集できる形で書き出せます。

## Astlide の特徴

**1 つのサイトにデッキをいくつでも**

デッキはサイトのコンテンツの 1 つです。`src/content/decks/` 以下のフォルダが 1 つずつ
デッキになり、一覧ページも最初から付いてきます。1 年分の登壇資料も、チームの報告資料も、製品の研修資料も
1 つのリポジトリに入れて、テーマ・コンポーネント・デプロイを共有できます。

**アプリではなく SDK**

`astlide()` は、ブログでも Starlight のドキュメントでも独自デザインのポータルでも、どの Astro サイトにも
組み込めます。デッキローダー、PowerPoint の取り込みとテンプレート、PPTX エクスポートの裏で動くレイアウト
エンジンは、それぞれ単体でも使えます。

**自社の PowerPoint テンプレートで、編集できる PPTX を出力**

`.pptx` / `.potx` テンプレートをテーマとして登録すると、Markdown のスライドがそのデザインで表示されます。
エクスポートすると、PowerPoint のテキストボックス・表・図形として書き出され、そのまま編集できます。
配置の計算にブラウザは使いません。

**PowerPoint と Google スライドを取り込める**

`.pptx` をデッキに置くだけで各ページがスライドになります。編集できる HTML スライドとして取り込むこともできます。
文字は文字のまま残り、プレースホルダーはレイアウトとマスターのスタイルを引き継ぎます。

**React・Vue・Svelte をスライドに**

Astro のアイランドを使って、手元にあるグラフやデモ、デザインシステムのコンポーネントをそのままスライドに置けます。
発表中も操作できます。

**スライド 1 枚ごとに独立したページ**

`/my-talk/7` は静的な HTML です。特定のスライドに直接リンクでき、表示も速く、ホスティング先を選びません。
GitHub Pages のようにサブパスで公開する場合も同じです。

## Astlide で作れるもの

**登壇資料のアーカイブ**

自分専用の Speaker Deck のようなサイトです。発表ごとに URL があり、検索もでき、イベントに提出する
PDF や PPTX もそこからダウンロードできます。

**ドキュメントの隣にスライド**

製品ドキュメントと、それを説明するデッキを 1 つの Starlight サイトにまとめられます。コンポーネントやコード例も
共通で使えます。

**社内のデッキポータル**

週次報告や提案書、オンボーディング資料を会社のテンプレートで作り、プルリクエストでレビューしてから
PowerPoint で配布できます。

**エージェントが書くデッキ**

言語モデルが一番うまく書けるのは Markdown と HTML です。Astlide はそれを、ブラウザを使わずに、
自社のデザインに沿った編集できる PowerPoint に変換します。

## 発表に必要な機能はひととおり

**発表者ウィンドウ**

次のスライドのプレビュー、残りのステップ数、ノート、タイマーを 1 画面で確認できます。一覧表示、スライドへの移動、
ペン、レーザーポインターの操作は、聴衆側の画面にもそのまま映ります。

**段階表示とコード**

`<Fragment>` / `<Fragments>` で要素を順に表示でき、`until` と `hide` も使えます。Shiki で色付けしたコードは、
`{1|3-5|all}` の指定で行ごとに順に強調できます。

**図と数式**

Mermaid の図は必要なときに読み込み、KaTeX はビルド時に描画します。

**エクスポート**

PDF と PNG に加え、スピーカーノート付きの編集できる PowerPoint に書き出せます。ブラウザからワンクリックで
PDF を作ることもできます。

- [Astlide を選ぶべきか](https://astlide.dev/ja/why/): Slidev、Marp、reveal.js、Quarto との比較と、ほかのツールのほうが向いている場面。