guide

Installation and Eleventy setup

Install WTFM, connect a Custom Elements Manifest, and create the first portable Eleventy reference page.

Install the packages

Install WTFM beside Eleventy in the documentation workspace. WTFM expects the component library to produce a Custom Elements Manifest; TypeScript is needed only when the optional type extractor is part of the project.

npm install --save-dev @11ty/eleventy @taprootio/wtfm

The package declares Lit, TypeScript, and @taprootio/espalier as peer dependencies because different consumers use different portions of the toolchain. Install the peers used by the project rather than adding them solely for an authored Markdown site.

Register the plugin

Create an Eleventy configuration that points at the generated manifest. A project installed from npm imports the package entry point:

import wtfmPlugin from "@taprootio/wtfm";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(wtfmPlugin, {
    cemPath: "custom-elements.json",
  });
}

This repository's own documentation intentionally imports src/server/eleventy-plugin.js instead. That makes local builds exercise the current working tree rather than a previously published WTFM release.

Render a declaration

The plugin registers renderDocs(name). A JavaScript template can ask WTFM for the manifest-derived Markdown and pass it through the shared Markdown renderer:

export default async function () {
  const markdown = await this.renderDocs("ExampleButton");
  return this.renderMarkdown(markdown);
}

The declaration name must match a declaration in the CEM or optional type manifest. Unknown names warn and render no reference content, so validate the manifest before treating a generated page as complete.

Build the portable site

Add an Eleventy command appropriate for the consuming repository and keep the output directory ignored. A conventional command is:

npx eleventy

Open the output without a Taproot service. Links and assets should be either document-relative or site-root-relative, with deployment prefixes applied once through Eleventy's HtmlBasePlugin when the site is hosted below /.

Continue with plugin configuration for the full option surface or documents and surfaces for the authoring model.