feat: validate marimo notebooks with styling improvements

README.md

@@ -0,0 +1,118 @@
+# Slidev + Marimo
+
+How amazing would it be to have Python code running on slides? And what if those slides were interactive?
+
+> **Enter `slidev` + `marimo`**
+
+## Two implementations
+
+This repo has two ways to run marimo notebooks as slides:
+
+### 1. Marimo Islands
+
+```bash
+slidev islands-example.md
+```
+
+Powered by Pyodide and WebAssembly. Your slides run fully in the browser - no server, no kernel, just open and go. The tradeoff: you're limited to packages available in Pyodide, and compute happens in your browser.
+
+### 2. Marimo Live
+
+```bash
+# Start the kernel (with sandbox for automatic deps)
+marimo edit examples/notebook.py --sandbox --headless --port 2718 --no-token --allow-origins "*"
+
+# Start slidev
+slidev examples/marimo-live-test.md
+```
+
+A live marimo kernel runs on your machine. Instead of the traditional marimo notebook UI, your frontend is Slidev slides. This lets you use any Python package, any dependency, full compute power - no Pyodide limitations.
+
+## Ergonomics
+
+Since Slidev slides are just markdown files, we made it possible to write marimo cells as simple code blocks:
+
+~~~markdown
+```marimo
+import matplotlib.pyplot as plt
+plt.plot([1, 2, 3], [1, 4, 9])
+```
+~~~
+
+These code blocks power the interactive cells you see on the slides.
+
+For Marimo Live, you can reference cells from your notebook by name or index:
+
+~~~markdown
+```marimo-live cell=plot_chart
+```
+
+```marimo-live cell=2
+```
+~~~
+
+This keeps your Python code in one place with full IDE support.
+
+---
+
+## Installation
+
+```bash
+# Clone the repo
+git clone <repo-url>
+cd slidev-marimo-nb-validation
+
+# Install dependencies
+bun install
+```
+
+## Usage
+
+### Marimo Live (recommended for full Python)
+
+1. **Start the marimo kernel** with sandbox mode (auto-installs deps from notebook):
+
+```bash
+marimo edit examples/notebook.py --sandbox --headless --port 2718 --no-token --allow-origins "*"
+```
+
+2. **Start Slidev**:
+
+```bash
+slidev examples/marimo-live-test.md
+```
+
+3. Open http://localhost:3030 (or the port shown in terminal)
+
+### Marimo Islands (browser-only)
+
+```bash
+slidev islands-example.md
+```
+
+No kernel needed - runs entirely in the browser.
+
+## Examples
+
+See `examples/` directory:
+
+- `marimo-live-test.md` - Demo slides with sliders, charts, data explorer
+- `notebook.py` - Marimo notebook with polars, altair, and UI elements
+
+## Adding dependencies to your notebook
+
+For `--sandbox` mode to work, add a PEP 723 script header to your notebook:
+
+```python
+# /// script
+# requires-python = ">=3.11"
+# dependencies = [
+#     "marimo",
+#     "polars",
+#     "altair",
+# ]
+# ///
+
+import marimo
+# ... rest of notebook
+```

examples/marimo-live-test.md

@@ -2,151 +2,118 @@
 theme: default
 addons:
   - slidev-marimo-live
+highlighter: shiki
 ---
 
-# Marimo Live Bug Fix Validation
+# Marimo Live
 
-Testing the 5 bug fixes in slidev-addon-marimo-live
+Interactive Python notebooks embedded in your slides
 
 ---
 
-# Test 1: Double Execution Prevention
+# Interactive Slider
 
-Click the Run button multiple times rapidly. Should only execute once.
+Drag the slider and watch the output update in real-time.
 
-```marimo-live autoRun=false
-import time
-print(f"Executed at: {time.time()}")
-```
+<MarimoCell cell="slider_demo" />
 
-**Expected:** Console shows single execution, not multiple.
+<MarimoCell cell="slider_output" />
 
 ---
 
-# Test 2: Plain Text Output
+# Load Data
 
-Basic text output with auto-run.
+First, let's load the Titanic dataset (shared across slides).
 
-```marimo-live
-print("Hello from marimo!")
-print("Plain text output works!")
-```
+<MarimoCell cell="load_titanic" />
 
 ---
 
-# Test 3: Markdown Mimetype Support
+# Dropdown + Altair Chart
 
-Tests that markdown content renders correctly.
+Select a column to visualize.
 
-```marimo-live
-import marimo as mo
-mo.md("""
-# Markdown Test
+<MarimoCell cell="dropdown_demo" />
 
-This is **bold** and this is *italic*.
+<MarimoCell cell="chart_demo" />
 
-- Item 1
-- Item 2
-- Item 3
-""")
-```
+---
+
+# Data Explorer
 
-**Expected:** Rendered markdown with headings, bold, italic, and list.
+Browse and filter the Titanic dataset interactively.
+
+<MarimoCell cell="data_explorer_demo" />
 
 ---
 
-# Test 4: JSON Output Handling
+# Checkbox & Switch
 
-Tests valid JSON formatting.
+Toggle states that react immediately.
 
-```marimo-live
-import json
-data = {"name": "test", "values": [1, 2, 3], "nested": {"a": 1, "b": 2}}
-print(json.dumps(data))
-```
+<MarimoCell cell="checkbox_demo" />
 
-**Expected:** Pretty-printed JSON output.
+<MarimoCell cell="checkbox_output" />
 
 ---
 
-# Test 5: Inline Code with Manual Run
+# Text Input
 
-Inline code (not from notebook) to test auto-run=false.
+Type your name and see a greeting.
 
-```marimo-live autoRun=false
-print("Manual run test")
-import json
-# This outputs invalid JSON-like string to test error handling
-print("{not valid json")
-```
+<MarimoCell cell="text_input_demo" />
 
-**Expected:** Click Run to execute. Invalid JSON shows as raw text.
+<MarimoCell cell="text_output" />
 
 ---
 
-# Test 6: Interactive Slider
+# Greeting Demo
 
-Interactive widget to test UI element communication.
+Enter your name and see the greeting update!
 
-```marimo-live
-import marimo as mo
-slider = mo.ui.slider(0, 100, value=50, label="Value")
-slider
-```
+<MarimoCell cell="greeting_input" :displayCode="false" />
 
-```marimo-live
-import marimo as mo
-mo.md(f"Slider interaction test")
-```
+<MarimoCell cell="greeting_output" :displayCode="false" />
 
 ---
 
-# Test 7: Timeout Cleanup Test
-
-Navigate away from this slide and back.
-No console errors should appear about unmounted components.
+# How It Works
 
-```marimo-live autoRun=true
-print("Timeout cleanup test cell")
+```
+┌─────────────────┐     WebSocket      ┌─────────────────┐
+│   Slidev        │◄──────────────────►│  Marimo Kernel  │
+│   (Browser)     │                    │  (Python)       │
+└─────────────────┘                    └─────────────────┘
 ```
 
-**Instructions:**
-1. Navigate to next slide
-2. Come back
-3. Check browser console for cleanup errors
+- Write code in your marimo notebook
+- Reference cells by name in slides
+- Full Python kernel running locally
+- UI elements sync bidirectionally
 
 ---
 
-# Test 8: Reconnection Test
+# Get Started
 
-Test that reconnection works after disconnect.
+```bash
+# Start the marimo kernel
+marimo edit notebook.py --sandbox --headless --port 2718 --no-token --allow-origins "*"
 
-```marimo-live autoRun=false
-import time
-print(f"Reconnection test: {time.time()}")
+# Start slidev
+slidev slides.md
 ```
 
-**Instructions:**
-1. Stop the marimo kernel (Ctrl+C in terminal)
-2. Wait for "Not connected" warning
-3. Restart kernel
-4. Click Reconnect button
-5. Verify it reconnects and works
-
----
-
-# Summary
+Reference cells with the `<MarimoCell>` component:
 
-| Bug Fix | Test Method |
-|---------|-------------|
-| Double execution race | Rapid click Run button on slide 2 |
-| Timeout cleanup | Navigate between slides 7-8, check console |
-| reconnectAttempts reset | Disconnect/reconnect on slide 8 |
-| JSON parse error | Run invalid JSON code on slide 5 |
-| Markdown mimetype | View rendered markdown on slide 3 |
+```markdown
+<MarimoCell cell="plot_chart" />
+<MarimoCell cell="2" :displayCode="false" />
+```
 
 ---
 
-# End
+# Thanks!
+
+**slidev-addon-marimo-live**
 
-All tests completed!
+Live Python notebooks in your presentations.