Building Hackathon Presentations with Slidev and Asciinema: Lessons from a Nebula Fog Talk

Hook

The best way to kill a hackathon presentation isn't bad code—it's a live demo that crashes. That's why smart presenters are ditching screencasts for reproducible terminal recordings.

Context

Developer presentations face a unique challenge: how do you demonstrate terminal workflows, CLI tools, and code generation without the risk of live-demo disasters? Traditional approaches fall short. PowerPoint slides with static screenshots feel lifeless. Screen recordings become outdated the moment your tool updates. Live coding is authentic but fragile—one typo, one network hiccup, one unexpected error, and you've lost your audience's attention.

The nebulafog-aider repository represents a different approach to this problem. Created for a Nebula Fog hackathon presentation about Aider (an AI pair programming tool), this repository combines Slidev—a modern presentation framework for developers—with Asciinema terminal recordings to create reproducible, version-controlled presentations. While the repository itself has limited utility outside its original context, it exemplifies a pattern worth understanding: treating presentations as code artifacts with the same rigor we apply to software projects.

Technical Insight

At its core, this repository uses two complementary tools to solve the hackathon presentation problem. Slidev transforms Markdown files into interactive presentations with hot-reload capabilities, while Asciinema captures terminal sessions as lightweight JSON files that can be replayed with pixel-perfect accuracy.

The Slidev setup is refreshingly minimal. Your entire presentation lives in a single slides.md file with frontmatter configuration:

---
theme: default
background: https://source.unsplash.com/collection/94734566/1920x1080
class: text-center
highlighter: shiki
lineNumbers: false
info: |
  ## Aider Presentation
  Nebula Fog Hackathon
drawings:
  persist: false
---

# Aider: AI Pair Programming

Your AI partner in the terminal

---

# What is Aider?

- Terminal-based coding assistant
- Works with Claude, GPT-4, and other LLMs
- Edits files directly in your codebase

This approach gives you the full power of web technologies—CSS animations, component embedding, syntax highlighting—while maintaining the simplicity of Markdown. Running npm run dev starts a local server with hot-reload, letting you iterate on slides with the same feedback loop you'd expect from modern frontend development.

The real innovation is the Asciinema integration. Instead of recording video (which produces large, uneditable files), Asciinema captures terminal sessions as structured data. The demo.cast file is actually a JSON-lines format where each line represents a timestamped event:

{"version": 2, "width": 120, "height": 30, "timestamp": 1699564234, "env": {"SHELL": "/bin/zsh", "TERM": "xterm-256color"}}
[0.123, "o", "$ aider --model gpt-4\r\n"]
[1.456, "o", "Aider v0.20.0\r\n"]
[2.789, "o", "Model: gpt-4\r\n"]
[3.012, "o", "Git repo: /home/user/project\r\n"]

This format has profound implications for demo reliability. You can edit timing, search and replace output text, and even version control your demos alongside your code. When Aider's output format changes, you regenerate the recording rather than re-recording video. When you need to demonstrate a 15-minute workflow, you can speed up the boring parts programmatically.

The architecture pattern here is worth extracting: presentation content lives in version control, slides are code, and demos are data. You can embed the Asciinema player directly in Slidev slides using a custom component:

<template>
  <div class="asciinema-container">
    <div ref="player"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'asciinema-player/dist/bundle/asciinema-player.css'
import * as AsciinemaPlayer from 'asciinema-player'

const player = ref(null)

onMounted(() => {
  AsciinemaPlayer.create('/demo.cast', player.value, {
    speed: 1.5,
    theme: 'monokai',
    idleTimeLimit: 2
  })
})
</script>

This setup transforms a hackathon presentation from a one-time performance into a reproducible artifact. Other team members can run the presentation locally, contributors can submit pull requests to fix typos, and you can deploy the slides to Netlify or GitHub Pages for persistent access. The terminal demo plays identically every time, immune to network conditions, API rate limits, or unexpected errors.

Gotcha

The elephant in the room: this is a presentation repository with minimal reusability. You're not getting a tutorial on Aider, detailed documentation, or reusable code patterns. The two-star GitHub count tells the story—this repository served its purpose at a specific hackathon and hasn't found broader utility. If you're looking to learn Aider itself, you'll need to visit paul-gauthier/aider for the actual tool and its comprehensive documentation.

The Slidev-plus-Asciinema pattern also has sharp edges. Asciinema recordings are fantastic for terminal workflows but useless for GUI applications, browser interactions, or anything outside the terminal. The JSON-lines format is theoretically editable but practically tedious without specialized tools. And while the recording is lightweight compared to video, you're still capturing every keystroke—if you make mistakes during recording, you'll need to either accept the errors or start over. The repository doesn't include scripts for cleaning up recordings or automating common edits, leaving you to handle that complexity yourself. For complex demos requiring multiple terminal windows or split-pane views, you'd need to orchestrate multiple Asciinema recordings or fall back to traditional screen recording.

Verdict

Use if: You're preparing technical presentations for developer audiences and want reproducible terminal demos, you're building hackathon or conference talk materials that need version control, you want to experiment with treating presentations as code artifacts, or you need examples of Slidev and Asciinema integration patterns. Skip if: You're looking for Aider tutorials or documentation (go to the official repository instead), you need to demonstrate GUI applications or browser-based workflows, you want a plug-and-play presentation template with extensive customization, or you're expecting a general-purpose tool rather than a specific hackathon artifact. This repository's value is in demonstrating a pattern, not in the content itself.