Type to search.

↵ to open ↑↓ to navigate Esc to close

eleventy-apidocs

An Eleventy plugin for HTML-first product documentation. Authored content is plain HTML, wrapped in a responsive shell with light/dark themes, syntax highlighting, a per-page table of contents, prose and API-symbol search, image processing, and View-Transition-driven navigation.

At a glance

This sample site is generated by version 0.1.18 of @carrotsearch/eleventy-apidocs. Every page you see here is a single HTML file in src/content/, processed through a small pipeline of cheerio passes and wrapped in the apidocs layout.

If you’re new, start with Getting started for install and configuration, then browse the authoring chapter to see what the theme renders.

What it does

Page structure

<article> → <section> with id-bearing headings. Anchor icons, scroll-margin, and the right-hand ToC are generated from that shape alone.

Code blocks

Shiki dual-theme highlighting, highlight-line and hide-line directives, copy-to-clipboard, file embeds with fragment and JSONPath selectors.

Images

Raster <img> tags become responsive <picture> with AVIF/WebP/fallback and LQIP backgrounds. SVGs inline. <figure> opens in a View-Transition zoom.

Callouts

.info, .warning, .box — plain <div> markup with optional heading icons.

API reference style

Monospace section headings and definition-list options. Symbols are harvested into a fuzzysort index for instant lookup.

Search

Pagefind builds a static prose index after each build; an in-page fuzzysort symbol index is loaded on demand.

Themes

Light/dark switch with FOUC-prevention, theme-aware image variants, and CSS light-dark() tokens throughout.

Portable URLs

Every emitted link is relative to the current page, so the site works from any subpath without rebuilding.

Design goals

The theme is shaped around three commitments:

  1. Author in HTML. The browser’s native language is the most expressive substrate available, and authoring directly in it keeps the source close to what ships in the browser.

  2. Stay close to the platform. Web Components, View Transitions, Speculation Rules, container queries, light-dark() — if the browser ships it, prefer it to a framework abstraction.

  3. One build pipeline, no plugin churn. A small set of cheerio passes covers anchors, ToC, code, embeds, images, and symbol extraction; new behavior is added as another pass, not as a new tool.