slides-grab 1.0.0 → 1.1.2

package/README.md

@@ -9,7 +9,7 @@ Simple things like text, size, or bold can still be edited manually, just like i
 
 <p align="center">
 The whole slides are HTML & CSS, the programming langauge (which is not) that outperformed by AI agents.<br>
-So the slides are beautiful, easily editable by AI agents, and can be converted to pdf and pptx.
+So the slides are beautiful, easily editable by AI agents, and can be converted to PDF or to experimental / unstable PPTX formats.
 </p>
 
 <p align="center">
@@ -56,31 +56,62 @@ There are many AI tools that generate slide HTML. Almost none let you **visually
 - **Plan** — Agent creates a structured slide outline from your topic/files
 - **Design** — Agent generates each slide as a self-contained HTML file
 - **Edit** — Browser-based editor with bbox selection, direct text editing, and agent-powered rewrites
-- **Export** — One command to PPTX or PDF
+- **Export** — One command to PDF, plus experimental / unstable PPTX or Figma-export flows
 
 ## CLI Commands
 
 All commands support `--slides-dir <path>` (default: `slides`).
 
+On a fresh clone, only `--help`, `list-templates`, and `list-themes` work without a deck. `edit`, `build-viewer`, `validate`, `convert`, and `pdf` require an existing slides workspace containing `slide-*.html`.
+
 ```bash
 slides-grab edit              # Launch visual slide editor
 slides-grab build-viewer      # Build single-file viewer.html
 slides-grab validate          # Validate slide HTML (Playwright-based)
-slides-grab convert           # Export to PPTX
-slides-grab pdf               # Export to PDF
+slides-grab convert           # Export to experimental / unstable PPTX
+slides-grab figma             # Export an experimental / unstable Figma Slides importable PPTX
+slides-grab pdf               # Export PDF in capture mode (default)
+slides-grab pdf --mode print  # Export searchable/selectable text PDF
 slides-grab list-templates    # Show available slide templates
 slides-grab list-themes       # Show available color themes
 ```
 
+## Image Contract
+
+Slides should store local image files in `<slides-dir>/assets/` and reference them as `./assets/<file>` from each `slide-XX.html`.
+
+- Preferred: `<img src="./assets/example.png" alt="...">`
+- Allowed: `data:` URLs for fully self-contained slides
+- Allowed with warnings: remote `https://` images
+- Unsupported: absolute filesystem paths such as `/Users/...` or `C:\\...`
+
+Run `slides-grab validate --slides-dir <path>` before export to catch missing local assets and discouraged path forms.
+
+`slides-grab pdf` now defaults to `--mode capture`, which rasterizes each rendered slide into the PDF for better visual fidelity. Use `--mode print` when searchable/selectable browser text matters more than pixel-perfect parity.
+
 ### Multi-Deck Workflow
 
+Prerequisite: create or generate a deck in `decks/my-deck/` first.
+
 ```bash
 slides-grab edit       --slides-dir decks/my-deck
 slides-grab validate   --slides-dir decks/my-deck
 slides-grab pdf        --slides-dir decks/my-deck --output decks/my-deck.pdf
+slides-grab pdf        --slides-dir decks/my-deck --mode print --output decks/my-deck-searchable.pdf
 slides-grab convert    --slides-dir decks/my-deck --output decks/my-deck.pptx
+slides-grab figma      --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
 ```
 
+> **Warning:** `slides-grab convert` and `slides-grab figma` are currently **experimental / unstable**. Expect best-effort output, layout shifts, and manual cleanup in PowerPoint or Figma.
+
+### Figma Workflow
+
+```bash
+slides-grab figma --slides-dir decks/my-deck --output decks/my-deck-figma.pptx
+```
+
+This command reuses the HTML to PPTX pipeline and emits a `.pptx` deck intended for manual import into Figma Slides via `Import`. It does not upload to Figma directly. The Figma export path is **experimental / unstable** and should be treated as best-effort only.
+
 ## Installation Guides
 
 - [Claude Code setup](docs/prompts/setup-claude.md)
@@ -117,4 +148,3 @@ docs/             Installation & usage guides
 ## Acknowledgment
 
 This project is built based on the [ppt_team_agent](https://github.com/uxjoseph/ppt_team_agent) by Builder Josh. Huge thanks to him!
-

package/bin/ppt-agent.js

@@ -5,10 +5,25 @@ import { readFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Command } from 'commander';
+import {
+  getFigmaImportCaveats,
+  getFigmaManualImportInstructions,
+} from '../src/figma.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = resolve(__dirname, '..');
 const packageJson = JSON.parse(readFileSync(resolve(packageRoot, 'package.json'), 'utf-8'));
+const figmaHelpText = [
+  '',
+  'Creates an experimental / unstable PowerPoint file tuned for Figma Slides manual import.',
+  'Treat both PPTX and Figma export as best-effort only.',
+  '',
+  'Manual import:',
+  `  ${getFigmaManualImportInstructions()}`,
+  '',
+  'Figma import caveats:',
+  ...getFigmaImportCaveats().map((caveat) => `  - ${caveat}`),
+].join('\n');
 
 /**
  * Run a Node.js script from the package, with CWD set to the user's directory.
@@ -49,6 +64,10 @@ async function runCommand(relativePath, args = []) {
   }
 }
 
+function collectRepeatedOption(value, previous = []) {
+  return [...previous, value];
+}
+
 const program = new Command();
 
 program
@@ -69,16 +88,22 @@ program
 
 program
   .command('validate')
+  .alias('lint')
   .description('Run structured validation on slide HTML files (Playwright-based)')
   .option('--slides-dir <path>', 'Slide directory', 'slides')
+  .option('--format <format>', 'Output format: concise, json, json-full', 'concise')
+  .option('--slide <file>', 'Validate only the named slide file (repeatable)', collectRepeatedOption, [])
   .action(async (options = {}) => {
-    const args = ['--slides-dir', options.slidesDir];
+    const args = ['--slides-dir', options.slidesDir, '--format', options.format];
+    for (const slide of options.slide || []) {
+      args.push('--slide', String(slide));
+    }
     await runCommand('scripts/validate-slides.js', args);
   });
 
 program
   .command('convert')
-  .description('Convert slide HTML files to PPTX')
+  .description('Convert slide HTML files to experimental / unstable PPTX')
   .option('--slides-dir <path>', 'Slide directory', 'slides')
   .option('--output <path>', 'Output PPTX file')
   .action(async (options = {}) => {
@@ -94,14 +119,33 @@ program
   .description('Convert slide HTML files to PDF')
   .option('--slides-dir <path>', 'Slide directory', 'slides')
   .option('--output <path>', 'Output PDF file')
+  .option('--mode <mode>', 'PDF export mode: capture for visual fidelity, print for searchable text', 'capture')
   .action(async (options = {}) => {
     const args = ['--slides-dir', options.slidesDir];
     if (options.output) {
       args.push('--output', String(options.output));
     }
+    if (options.mode) {
+      args.push('--mode', String(options.mode));
+    }
     await runCommand('scripts/html2pdf.js', args);
   });
 
+program
+  .command('figma')
+  .description('Export an experimental / unstable Figma Slides importable PPTX')
+  .helpOption('-h, --help', 'Show this help message')
+  .option('--slides-dir <path>', 'Slide directory', 'slides')
+  .option('--output <path>', 'Output PPTX file (default: <slides-dir>-figma.pptx)')
+  .addHelpText('after', figmaHelpText)
+  .action(async (options = {}) => {
+    const args = ['--slides-dir', options.slidesDir];
+    if (options.output) {
+      args.push('--output', String(options.output));
+    }
+    await runCommand('scripts/figma-export.js', args);
+  });
+
 program
   .command('edit')
   .description('Start interactive slide editor with Codex image-based edit flow')

package/convert.cjs

@@ -5,11 +5,36 @@ const fs = require('fs');
 const sharp = require('sharp');
 
 // Inline a simplified version that uses Playwright Chromium (not Chrome)
-const PT_PER_PX = 0.75;
-const PX_PER_IN = 96;
-const EMU_PER_IN = 914400;
 const DEFAULT_SLIDES_DIR = 'slides';
 const DEFAULT_OUTPUT = 'output.pptx';
+const DEFAULT_CAPTURE_VIEWPORT = { width: 960, height: 540 };
+const DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR = 2;
+const TARGET_RASTER_DPI = 150;
+const TARGET_SLIDE_SIZE_IN = { width: 13.33, height: 7.5 };
+
+function normalizeDimension(value, fallback) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return fallback;
+  }
+  return Math.max(1, Math.round(value));
+}
+
+function buildPageOptions() {
+  return {
+    viewport: {
+      width: DEFAULT_CAPTURE_VIEWPORT.width,
+      height: DEFAULT_CAPTURE_VIEWPORT.height,
+    },
+    deviceScaleFactor: DEFAULT_CAPTURE_DEVICE_SCALE_FACTOR,
+  };
+}
+
+function getTargetRasterSize() {
+  return {
+    width: Math.round(TARGET_SLIDE_SIZE_IN.width * TARGET_RASTER_DPI),
+    height: Math.round(TARGET_SLIDE_SIZE_IN.height * TARGET_RASTER_DPI),
+  };
+}
 
 function printUsage() {
   process.stdout.write(
@@ -88,7 +113,7 @@ function parseArgs(args) {
 async function convertSlide(htmlFile, pres, browser) {
   const filePath = path.isAbsolute(htmlFile) ? htmlFile : path.join(process.cwd(), htmlFile);
 
-  const page = await browser.newPage();
+  const page = await browser.newPage(buildPageOptions());
   await page.goto(`file://${filePath}`);
 
   const bodyDimensions = await page.evaluate(() => {
@@ -101,8 +126,8 @@ async function convertSlide(htmlFile, pres, browser) {
   });
 
   await page.setViewportSize({
-    width: Math.round(bodyDimensions.width),
-    height: Math.round(bodyDimensions.height)
+    width: normalizeDimension(bodyDimensions.width, DEFAULT_CAPTURE_VIEWPORT.width),
+    height: normalizeDimension(bodyDimensions.height, DEFAULT_CAPTURE_VIEWPORT.height)
   });
 
   // Take screenshot and add as full-slide image
@@ -110,11 +135,10 @@ async function convertSlide(htmlFile, pres, browser) {
   await page.close();
 
   // Resize to exact slide dimensions (13.33" x 7.5" at 150 DPI)
-  const targetWidth = Math.round(13.33 * 150);
-  const targetHeight = Math.round(7.5 * 150);
+  const targetSize = getTargetRasterSize();
 
   const resized = await sharp(screenshot)
-    .resize(targetWidth, targetHeight, { fit: 'fill' })
+    .resize(targetSize.width, targetSize.height, { fit: 'fill' })
     .png()
     .toBuffer();
 
@@ -144,6 +168,8 @@ async function main() {
   pres.layout = 'LAYOUT_WIDE'; // 16:9
 
   const slidesDir = path.resolve(process.cwd(), options.slidesDir);
+  const { ensureSlidesPassValidation } = await import('./scripts/validate-slides.js');
+  await ensureSlidesPassValidation(slidesDir, { exportLabel: 'PPTX export' });
   const files = fs.readdirSync(slidesDir)
     .filter(f => f.endsWith('.html'))
     .sort();
@@ -178,7 +204,15 @@ async function main() {
   }
 }
 
-main().catch(err => {
-  console.error('Fatal error:', err);
-  process.exit(1);
-});
+if (require.main === module) {
+  main().catch(err => {
+    console.error('Fatal error:', err);
+    process.exit(1);
+  });
+}
+
+module.exports = {
+  buildPageOptions,
+  getTargetRasterSize,
+  parseArgs,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "slides-grab",
-  "version": "1.0.0",
-  "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PPTX/PDF",
+  "version": "1.1.2",
+  "description": "Agent-first presentation framework — plan, design, and visually edit HTML slides with Claude Code or Codex, then export to PDF or experimental/unstable PPTX/Figma formats",
   "license": "MIT",
   "author": "vkehfdl1",
   "repository": {
@@ -30,13 +30,30 @@
   "bin": {
     "slides-grab": "./bin/ppt-agent.js"
   },
+  "files": [
+    "bin/",
+    "convert.cjs",
+    "scripts/build-viewer.js",
+    "scripts/editor-server.js",
+    "scripts/figma-export.js",
+    "scripts/html2pdf.js",
+    "scripts/html2pptx.js",
+    "scripts/install-codex-skills.js",
+    "scripts/validate-slides.js",
+    "skills/",
+    "src/",
+    "templates/",
+    "themes/",
+    "LICENSE",
+    "README.md"
+  ],
   "scripts": {
-    "html2pptx": "node .claude/skills/pptx-skill/scripts/html2pptx.js",
+    "html2pptx": "node scripts/html2pptx.js",
     "build-viewer": "node scripts/build-viewer.js",
     "validate": "node scripts/validate-slides.js",
     "convert": "node convert.cjs",
     "codex:install-skills": "node scripts/install-codex-skills.js --force",
-    "test": "node --test tests/editor/editor-codex-edit.test.js tests/pdf/html2pdf.test.js",
+    "test": "node --test tests/editor/editor-codex-edit.test.js tests/pdf/html2pdf.test.js tests/pdf/html2pdf.e2e.test.js tests/figma/figma-export.test.js tests/image-contract/image-contract.test.js tests/validation/validate-slides.test.js",
     "test:e2e": "node --test tests/editor/editor-ui.e2e.test.js tests/editor/editor-concurrency.e2e.test.js"
   },
   "dependencies": {

package/scripts/build-viewer.js

@@ -0,0 +1,349 @@
+#!/usr/bin/env node
+
+/**
+ * build-viewer.js
+ *
+ * Builds a single viewer.html from slide-*.html files in selected --slides-dir.
+ * Works with file:// protocol — each slide is embedded via <iframe srcdoc="...">
+ * for perfect CSS isolation (no regex scoping needed).
+ */
+
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { join, resolve } from 'path';
+
+import { buildSlideRuntimeHtml } from '../src/image-contract.js';
+
+const DEFAULT_SLIDES_DIR = 'slides';
+
+function printUsage() {
+  process.stdout.write(
+    [
+      'Usage: node scripts/build-viewer.js [options]',
+      '',
+      'Options:',
+      `  --slides-dir <path>  Slide directory (default: ${DEFAULT_SLIDES_DIR})`,
+      '  -h, --help           Show this help message',
+    ].join('\n'),
+  );
+  process.stdout.write('\n');
+}
+
+function readOptionValue(args, index, optionName) {
+  const next = args[index + 1];
+  if (!next || next.startsWith('-')) {
+    throw new Error(`Missing value for ${optionName}.`);
+  }
+  return next;
+}
+
+export function parseCliArgs(args) {
+  const options = {
+    slidesDir: DEFAULT_SLIDES_DIR,
+    help: false,
+  };
+
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+
+    if (arg === '-h' || arg === '--help') {
+      options.help = true;
+      continue;
+    }
+
+    if (arg === '--slides-dir') {
+      options.slidesDir = readOptionValue(args, i, '--slides-dir');
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--slides-dir=')) {
+      options.slidesDir = arg.slice('--slides-dir='.length);
+      continue;
+    }
+
+    throw new Error(`Unknown option: ${arg}`);
+  }
+
+  if (typeof options.slidesDir !== 'string' || options.slidesDir.trim() === '') {
+    throw new Error('--slides-dir must be a non-empty string.');
+  }
+
+  options.slidesDir = options.slidesDir.trim();
+  return options;
+}
+
+export function findSlideFiles(slidesDir) {
+  return readdirSync(slidesDir)
+    .filter((file) => /^slide-\d+\.html$/i.test(file))
+    .sort((a, b) => {
+      const numA = parseInt(a.match(/\d+/)[0], 10);
+      const numB = parseInt(b.match(/\d+/)[0], 10);
+      return numA - numB || a.localeCompare(b);
+    });
+}
+
+/**
+ * Escape HTML for safe embedding inside srcdoc="..." attribute.
+ * Must escape &, ", < so the srcdoc attribute value is valid.
+ */
+export function escapeForSrcdoc(html) {
+  return html
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;');
+}
+
+export function loadSlides(slidesDir) {
+  return findSlideFiles(slidesDir).map((file) => {
+    const html = readFileSync(join(slidesDir, file), 'utf-8');
+    return {
+      file,
+      html: buildSlideRuntimeHtml(html, {
+        baseHref: './',
+        slideFile: file,
+      }),
+    };
+  });
+}
+
+export function buildViewerHtml(slides) {
+  return `<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Slide Viewer</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #111;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+    .viewer-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Navigation bar */
+    .nav-bar {
+      height: 48px;
+      background: #1a1a1a;
+      border-bottom: 1px solid #333;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+      flex-shrink: 0;
+      z-index: 100;
+    }
+
+    .nav-bar button {
+      background: #333;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      padding: 6px 16px;
+      font-size: 13px;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    .nav-bar button:hover {
+      background: #555;
+    }
+
+    .nav-bar button:disabled {
+      opacity: 0.3;
+      cursor: default;
+    }
+
+    .slide-counter {
+      color: #aaa;
+      font-size: 14px;
+      font-weight: 500;
+      min-width: 60px;
+      text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .btn-fullscreen {
+      position: absolute;
+      right: 16px;
+      background: transparent !important;
+      font-size: 18px;
+      padding: 6px 10px !important;
+    }
+
+    /* Slide viewport */
+    .slide-viewport {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .slide-scaler {
+      width: 720pt;
+      height: 405pt;
+      position: relative;
+      transform-origin: center center;
+    }
+
+    /* Slide frames (iframes) */
+    .slide-frame {
+      position: absolute;
+      inset: 0;
+      width: 720pt;
+      height: 405pt;
+      border: none;
+      overflow: hidden;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+    }
+
+    .slide-frame.active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="viewer-container">
+    <!-- Navigation -->
+    <div class="nav-bar">
+      <button id="btn-prev" title="Previous (\\u2190)">Prev</button>
+      <span class="slide-counter" id="counter">1 / ${slides.length}</span>
+      <button id="btn-next" title="Next (\\u2192)">Next</button>
+      <button class="btn-fullscreen" id="btn-fs" title="Fullscreen (F)">&#x26F6;</button>
+    </div>
+
+    <!-- Slide viewport -->
+    <div class="slide-viewport" id="viewport">
+      <div class="slide-scaler" id="scaler">
+${slides.map((s, i) => `        <iframe class="slide-frame${i === 0 ? ' active' : ''}" data-slide="${i + 1}" srcdoc="${escapeForSrcdoc(s.html)}" sandbox="allow-same-origin"></iframe>`).join('\n')}
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const TOTAL = ${slides.length};
+    let current = 1;
+
+    const frames = document.querySelectorAll('.slide-frame');
+    const counter = document.getElementById('counter');
+    const btnPrev = document.getElementById('btn-prev');
+    const btnNext = document.getElementById('btn-next');
+    const scaler = document.getElementById('scaler');
+    const viewport = document.getElementById('viewport');
+
+    function goTo(n) {
+      n = Math.max(1, Math.min(TOTAL, n));
+      if (n === current) return;
+      frames[current - 1].classList.remove('active');
+      current = n;
+      frames[current - 1].classList.add('active');
+      counter.textContent = current + ' / ' + TOTAL;
+      btnPrev.disabled = current === 1;
+      btnNext.disabled = current === TOTAL;
+    }
+
+    function next() { goTo(current + 1); }
+    function prev() { goTo(current - 1); }
+
+    btnPrev.addEventListener('click', prev);
+    btnNext.addEventListener('click', next);
+    btnPrev.disabled = true;
+
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); next(); }
+      else if (e.key === 'ArrowLeft') { e.preventDefault(); prev(); }
+      else if (e.key === 'Home') { e.preventDefault(); goTo(1); }
+      else if (e.key === 'End') { e.preventDefault(); goTo(TOTAL); }
+      else if (e.key === 'f' || e.key === 'F') {
+        e.preventDefault();
+        toggleFullscreen();
+      }
+    });
+
+    // Fullscreen
+    function toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen().catch(() => {});
+      } else {
+        document.exitFullscreen();
+      }
+    }
+    document.getElementById('btn-fs').addEventListener('click', toggleFullscreen);
+
+    // Auto-scale to fit viewport (95% fit)
+    function rescale() {
+      const vw = viewport.clientWidth;
+      const vh = viewport.clientHeight;
+      const slideW = scaler.offsetWidth;
+      const slideH = scaler.offsetHeight;
+      const scale = Math.min(vw / slideW, vh / slideH) * 0.95;
+      scaler.style.transform = 'scale(' + scale + ')';
+    }
+
+    window.addEventListener('resize', rescale);
+    document.addEventListener('fullscreenchange', () => setTimeout(rescale, 100));
+    rescale();
+  </script>
+</body>
+</html>`;
+}
+
+export function main(args = process.argv.slice(2)) {
+  const options = parseCliArgs(args);
+  if (options.help) {
+    printUsage();
+    return null;
+  }
+
+  const slidesDir = resolve(process.cwd(), options.slidesDir);
+  const output = join(slidesDir, 'viewer.html');
+
+  let slides;
+  try {
+    slides = loadSlides(slidesDir);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    process.stderr.write(`Failed to read slide directory: ${slidesDir}\n${message}\n`);
+    process.exitCode = 1;
+    return null;
+  }
+
+  if (slides.length === 0) {
+    console.error(`No slide-*.html files found in: ${slidesDir}`);
+    process.exitCode = 1;
+    return null;
+  }
+
+  console.log(`Found ${slides.length} slides`);
+  writeFileSync(output, buildViewerHtml(slides), 'utf-8');
+  console.log(`Built viewer: ${output}`);
+  return { slidesDir, output, slides };
+}
+
+const isMain = process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+
+if (isMain) {
+  try {
+    main();
+  } catch (error) {
+    process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+    process.exit(1);
+  }
+}

package/scripts/editor-server.js

@@ -18,6 +18,7 @@ import {
   scaleSelectionToScreenshot,
   writeAnnotatedScreenshot,
 } from '../src/editor/codex-edit.js';
+import { buildSlideRuntimeHtml } from '../src/image-contract.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -431,6 +432,7 @@ async function startServer(opts) {
   const app = express();
   app.use(express.json({ limit: '5mb' }));
   app.use('/js', express.static(join(PACKAGE_ROOT, 'src', 'editor', 'js')));
+  app.use('/slides/assets', express.static(join(slidesDirectory, 'assets')));
 
   const editorHtmlPath = join(PACKAGE_ROOT, 'src', 'editor', 'editor.html');
 
@@ -461,7 +463,11 @@ async function startServer(opts) {
     const filePath = join(slidesDirectory, file);
     try {
       const html = await readFile(filePath, 'utf-8');
-      res.type('html').send(html);
+      const runtimeHtml = buildSlideRuntimeHtml(html, {
+        baseHref: '/slides/',
+        slideFile: file,
+      });
+      res.type('html').send(runtimeHtml);
     } catch {
       res.status(404).send(`Slide not found: ${file}`);
     }