Layout sample
Every slide layout and element in one deck
awesome-ai-stack · demo
Default layout
A small subtitle under the title — added with ::sub[text]
<Slide> — with no class, the title is pinned to the top (the default slide).
- unordered list
- inline: bold, italic,
code, link
- ordered list
- second item
Blockquotes render like this.
Source: awesome-ai-stack docs · example.com/docs
A good talk is remembered as a story, not as slides.
— awesome-ai-stack · class="quote"
Table
| Layout | Syntax | Note |
|---|---|---|
| cover | class="cover" | large centered title |
| background image | bg={img} | full-bleed |
| columns | :::cols | split with --- |
| media split | aas-split | image · code · diagram |
| align/fill | img-top·fill | vertical position · cover |
| subtitle · source | ::sub[…] · source="…" | under title · bottom-right |
| quote · stats | class="quote" · :::stats | hero quote · number cards |
| callout · compare | :::note/tip/warning · :::compare | boxes · side-by-side |
| steps · compact | :::steps · class="compact" | reveal one-by-one · natural size |
| TOC-excluded | toc={false} | heading hidden |
Tables use standard Markdown syntax. Hover a diagram or image for an Enlarge button, and press o for an overview of every slide. A long diagram scrolls inside its box — aas-split scroll (vertical) or class="scroll-x" (horizontal).
Image on top, text below
A large image on top with a short caption underneath. Hover the image for an Enlarge button.
Image: awesome-ai-stack sample asset
Complex flowchart
Click to enlarge — if it’s bigger than the screen, scroll inside the lightbox
flowchart TD
A[User request] --> B{Validate input}
B -->|valid| C[Classify intent]
B -->|invalid| Z[Return error]
C --> D{Tool needed?}
D -->|yes| E[Select tool]
D -->|no| F[Answer directly]
E --> G[Run tool]
G --> H{Success?}
H -->|yes| I[Merge result]
H -->|no| J[Retry / fallback]
J --> G
I --> K[Generate response]
F --> K
K --> L[Output to user]Complex flowchart + notes
aas-split scroll — the diagram on the left scrolls vertically inside its column
flowchart TD
A[User request] --> B{Validate input}
B -->|valid| C[Classify intent]
B -->|invalid| Z[Return error]
C --> D{Tool needed?}
D -->|yes| E[Select tool]
D -->|no| F[Answer directly]
E --> G[Run tool]
G --> H{Success?}
H -->|yes| I[Merge result]
H -->|no| J[Retry / fallback]
J --> G
I --> K[Generate response]
F --> K
K --> L[Output to user]How the agent handles a request.
- Validate input — invalid requests return an error immediately
- Classify intent → decide if a tool is needed
- If so, select → run → check success, retry / fall back on failure
- Merge the result or answer directly, then output
The diagram is long, so it scrolls vertically inside its column. Click it to enlarge.
Scroll walkthrough
Press → and the flowchart on the left scrolls to that spot while the notes on the right change
flowchart TD
A[User request] --> B{Validate input}
B -->|valid| C[Classify intent]
B -->|invalid| Z[Return error]
C --> D{Tool needed?}
D -->|yes| E[Select tool]
D -->|no| F[Answer directly]
E --> G[Run tool]
G --> H{Success?}
H -->|yes| I[Merge result]
H -->|no| J[Retry / fallback]
J --> G
I --> K[Generate response]
F --> K
K --> L[Output to user]① Validate — check the request is valid, else return an error right away.
② Decide — classify the intent and decide whether a tool is needed.
③ Run & check — run the tool; on success merge the result, on failure retry / fall back.
④ Output — generate the response and hand it to the user.
Diagram + long text (compact)
class="compact" — the diagram keeps its natural size (just padded) and the text flows below
flowchart LR a[Collect] --> b[Clean] --> c[Train] --> d[Evaluate]
A normal diagram slide fills the height, but <Slide class="compact"> keeps the diagram at its natural size so you can write a longer explanation underneath.
- when you walk through each pipeline stage in prose
- when the diagram is a reference and the text carries the point
- when you need several paragraphs
Adding paragraphs like this doesn’t push the diagram up — it stays put, with just a little padding around the box.
Wide diagram (horizontal scroll)
class="compact scroll-x" — a wide flowchart keeps its natural size and scrolls sideways inside the box
flowchart LR a[Collect] --> b[Clean] --> c[Label] --> d[Extract features] --> e[Train] --> f[Cross-validate] --> g[Evaluate] --> h[Tune] --> i[Deploy] --> j[Monitor]
A flowchart with many stages runs wide; shrinking it to fit makes the labels tiny. With scroll-x the diagram keeps its natural size and the box scrolls horizontally instead.
- good for data / ML pipelines with many stages
- every node stays a readable size
- click it to see the whole thing enlarged in the lightbox
Horizontal scroll walkthrough
Press → and the pipeline above scrolls sideways to that stage while the note below changes
flowchart LR a[Collect] --> b[Clean] --> c[Label] --> d[Extract features] --> e[Train] --> f[Cross-validate] --> g[Evaluate] --> h[Tune] --> i[Deploy] --> j[Monitor]
① Prepare data — collect, clean, and label to build the training set.
② Train — extract features and train the model.
③ Evaluate — cross-validate and evaluate, then tune.
④ Operate — deploy, monitor, and retrain when needed.
Code walkthrough
Press → to scroll the code and highlight the whole line(s) being explained
const SYSTEM = 'You can call tools.';
async function runAgent(input: string) {
const messages = [
{ role: 'system', content: SYSTEM },
{ role: 'user', content: input },
];
for (let turn = 0; turn < MAX_TURNS; turn++) {
const res = await model.chat(messages);
messages.push(res.message);
if (!res.toolCalls?.length) {
return res.message.content;
}
for (const call of res.toolCalls) {
const out = await tools[call.name](call.args);
messages.push({
role: 'tool',
content: out,
});
}
}
throw new Error('max turns exceeded');
}① Entry — start from the system and user messages.
② Call the model — each turn, call the model and record the reply.
③ Stop condition — with no tool calls, return the result.
④ Run tools — call each tool and feed the output back in.