Beginner
Dark Mode
A flicker-free light/dark theme toggle built on CSS custom properties, a data-theme attribute, and localStorage.
Real 11ty examples, not tutorials.
I kept rebuilding the same Eleventy features on every project, so I put them all in one place. Every demo here actually works, not just written about.
Featured
Intermediate
Multi-level Navigation
A recursive, front-matter-driven navigation tree using @11ty/eleventy-navigation — no hand-maintained nav array.
Beginner
Tags
Auto-generated tag pages built from a custom collection — every demo tag gets its own page with zero…
Beginner
Syntax Highlighting
Build-time code highlighting with @11ty/eleventy-plugin-syntaxhighlight — zero client-side JavaScript.
Intermediate
Table of Contents
A heading-extraction filter that builds a page's table of contents from its own rendered HTML — no separate…
Advanced
Search
A hand-rolled, dependency-free client-side search: a build-time JSON index plus a small scored-match script.
Adding a new demo
Want to add one? Drop a Markdown file into src/demos/ with a title, description, tags, and a difficulty level. That's it. It shows up on the listing page, gets its own tag pages, becomes searchable, and slots into the previous/next navigation on its own. You don't touch anything else.