Lectures that annotate themselves.

Notes, an outline, or a rough set of bullets go in; a polished, self-contained interactive slide deck comes out — one that scales to any screen, takes in-class handwriting, exports to PDF, draws live diagrams, and runs by double-click with no build step and no server.

What it does

tian2-html-interactive converts any source — markdown, an outline, the text of a PPTX or PDF, plain notes — into a single HTML deck built in the house editorial system (cream/ink/coral, Playfair/Inter/Bebas). Every deck gets keyboard, click, and touch navigation; auto-scaling to any display; in-class handwriting annotation with pen, highlighter, and eraser; export of those annotations as JSON and as a baked-in standalone archive; one-slide-per-page PDF export through the browser; reveal animations; live canvas-widget diagrams; and optional offline LaTeX. It is the tool behind the interactive decks in Tian2's teaching — including the ten-lesson AI curriculum.

Inputs & outputs

In

Any source content — markdown, an outline, notes, or a PPTX/PDF's text
Optional design overrides (the tian2 system is the default)

Out

One self-contained HTML deck — no build, no server, runs from a double-click
Handwriting annotation + annotation export (JSON + standalone archive)
One-slide-per-page PDF export
Live canvas diagrams and optional offline LaTeX

A worked example

An outline becomes a deck

A few lines of markdown become a title slide in the house style. In the live deck the coral note below would be real ink drawn during class, and the whole thing would export to a clean one-slide-per-page PDF. The slide here is a static illustration.

Sample input · lesson-05.md

# Attention & Transformers
## The modern engine

- Every word looks at every other word
- "Attention" = a weighted average, learned
- Stack the blocks → a transformer
- This is what powers modern speech + language models

Rendered output · a title slide (static mock)

Lesson 05 · The modern engine

Attention & Transformers

Every word looks at every other word; "attention" is just a learned weighted average. Stack the blocks and you have a transformer — the engine behind modern speech and language models.

05 / 10

The "key idea!" mark stands in for live handwriting annotation; in the real deck it is drawn on a canvas layer and exports with the slides.

AnnotatePen, highlighter, eraser with undo — over the live slide, in class.

ExportOne-slide-per-page PDF, plus annotations as JSON and a standalone archive.

DiagramLive canvas widgets for the things a static image can't show.

No serverOne HTML file, opens on a double-click, works offline.

← Back to all AI skills