quarto-timeline

Styled timelines for Quarto documents and presentations

quarto-timeline is a Quarto extension that renders nested div syntax into styled timeline visualizations. It works in HTML documents and RevealJS presentations with no JavaScript configuration required.

Installation

quarto add EmilHvitfeldt/quarto-timeline

Then add the filter to your document YAML:

filters:
  - timeline

Basic usage

Timelines are written as nested divs. The outer .timeline div sets the layout; each inner .event div is one entry.

::: {.timeline .vertical}
::: {.event data-label="2020"}
**Project Started**
Initial concept and planning phase.
:::
::: {.event data-label="2021"}
**First Release**
Launched version 1.0 to early users.
:::
::: {.event data-label="2022"}
**Major Update**
Rewrote core engine for performance.
:::
:::

Project Started Initial concept and planning phase.

First Release Launched version 1.0 to early users.

Major Update Rewrote core engine for performance.

What’s next

  • Layouts — all five layout variants and grouped events
  • Fragments — RevealJS fragment reveal and pan modes
  • Images & Plots — inline images and R code chunk output in events
  • Programmatic — generating events from data with R (htmltools) or Python
  • Customization — CSS variables, modifier classes, dot icons, and user-defined styles