Examples Showcase

Copy these snippets to jump-start your technical productions.

1. Markdown Presentation (talk.md)

A basic deck with speaker notes and a run block.

# Technical Deep Dive

This is sample markdown with examples.
Each slide is separated using `---` marking the end and beginning of the next slide.

## Running the tool
```bash run
slides-tape serve talk.md --port 8080
```

> Note: Intro goes here. Keep it brief! This will show up as a speaker note

---

# 🌐 Live UI Tour
```web run
# @goto http://localhost:3000
# @wait 1s
```
```

---

### 2. Bash Logic Script (`demo.sh`)

Advanced directives for specific terminal visuals.

```bash
# @title "Building Docker Image"
# @echo off
# @wait 1s
# @type "docker build -t app:v1 ."
echo "Step 1/3 : FROM node:20"
sleep 0.5
echo "---> Successfully built app:v1"

# @clear
# @title "Launch"
# @type "npm run start"
echo "Listening at http://localhost:3000"
```

---

### 3. Web Automation (`demo.md`)

Direct browser interactions using natural language.

```web run
# @goto https://github.com/alex-migwi/slides-tape
# @waitUntilIdle

# Search for the repository
# @type input[name="q"] "slides-tape"
# @press Enter
# @waitUntilIdle

# Click the first result using text
# @clickText "alex-migwi/slides-tape"
# @wait 2s
```

4. Advanced Web Interactions (ecommerce.md)

Targeting nested elements and labels in complex layouts.

```web run
# @viewport 1920 1080
# @goto https://example-store.com/products
# @waitUntilIdle

# Scroll to a specific product section
# @scrollToFirst ".catalog-grid" "article.product-item"
# @highlight ".product-item:first-child"

# Interact with forms using labels
# @clickLabel "Add to Wishlist"
# @wait 1s

# Click a button with a specific test ID
# @clickTestId "checkout-btn"
```

5. .tre Event Log (JSON Snippet)

The underlying event serialization format.

[
  {"e":"ps1","ps1":"$ "},
  {"e":"typing","cmd":"npm install"},
  {"e":"output","data":"\r\nadded 12 packages...\r\n","t":450},
  {"e":"cmd_end","exit":0},
  {"e":"session_end","exit":0}
]

### 6. More Examples in Github

You can find more demos in our community github repo [https://github.com/alex-migwi/slides-tape-community](https://github.com/alex-migwi/slides-tape-community)