Scrollycoding in OCaml

Five approaches to the same tutorial — pattern matching explained step-by-step, with different rendering and editing strategies.

01

CSS Demo

Hand-crafted HTML spans with CSS keyframe animations. Lines slide in and out with staggered timing, focus dims unfocused code. No JavaScript editor — just pure DOM and CSS transitions on a warm light theme.

vanilla HTML CSS keyframes no editor
02

CodeMirror Demo

Uses CodeMirror 6 as the code panel with OCaml syntax highlighting via the legacy mllike mode. Step transitions animate through the editor's transaction API. Read-only, but with real editor chrome.

CodeMirror 6 ESM imports mllike mode
03

x-ocaml Demo

Powered by the <x-ocaml> web component (art-w/x-ocaml) backed by a merlin-js worker. Step transitions are typewriter-animated via LCS diff. Hover any identifier for Merlin type-on-hover — a real OCaml IDE in the browser.

x-ocaml Merlin types typewriter animation
04

Diff Demo

Same x-ocaml engine but with a split diff view showing what changed between steps. Deleted lines appear red, inserted lines green. Useful for teaching how code evolves incrementally.

x-ocaml diff view LCS
05

Merlin Hover Demo

Combines the CSS demo's visual approach (manual spans, keyframe animations, warm theme) with runtime type inference via merlin-js. No editor component — vanilla HTML talks directly to the Merlin worker for type-on-hover tooltips.

CSS keyframes OcamlWorker client type tooltips