@allons-y/webcdoc

Documentation metadata for WebC components, from the comments already in the file.

webcdoc reads a .webc file and writes one JSON record describing the component: props, slots, CSS custom properties, parts, events, examples, and the page data and helpers the template reaches for. The docs live in WebC's own server-only comments, so nothing ships to the page, and a component with no comments at all still yields a usable record.

Packages

Package	Role
@allons-y/webcdoc-schema	TypeScript types and the JSON Schema for the record and the grouped document
@allons-y/webcdoc	The parser, the webcdoc CLI, and a Custom Elements Manifest adapter
@allons-y/webcdoc-tools	Pure helpers for filtering, looking up, and ordering the components in a webcdoc document
@allons-y/webcdoc-lint	Validates a webcdoc document against its JSON Schema and lints its components
@allons-y/eleventy-plugin-webcdoc	The recommended setup: an Eleventy plugin that generates the document with the site's helpers and global data in view
@allons-y/cem-plugin-webc	A Custom Elements Manifest analyzer plugin that reads .webc files; opt-in for projects already running the analyzer

The documentation site lives in site and is not published.

Quick start

In an Eleventy project, add the plugin next to @11ty/eleventy-plugin-webc:

yarn add --dev @allons-y/eleventy-plugin-webcdoc

// eleventy.config.js
import webcPlugin from "@11ty/eleventy-plugin-webc";
import webcdocPlugin from "@allons-y/eleventy-plugin-webcdoc";

export default function (eleventyConfig) {
	eleventyConfig.addPlugin(webcPlugin, { components: "src/_components/**/*.webc" });
	eleventyConfig.addPlugin(webcdocPlugin);
}

Every build writes webcdoc.json and exposes the document to templates as webcdoc.

For WebC outside Eleventy, run the CLI:

yarn add --dev @allons-y/webcdoc
yarn webcdoc "components/**/*.webc" --out webcdoc.json

Each package README covers its install, usage, and options.

Development

corepack enable
yarn install
yarn ci      # build every workspace and render the site
yarn lint    # opx lint
yarn test    # vitest, every workspace

Node 24 and Yarn 4 (via Corepack). Releases use changesets: add one with yarn changeset for any change a consumer would notice.

Contributing

Contributions are welcome & appreciated! Please open an issue (before submitting a pull request) if you find a bug, have a feature request, or have a question. Be sure to follow the contribution guidelines and code of conduct but most importantly, be excellent to each other. 💖

License

This project is licensed under the MPL-2.0 License - see the LICENSE file for details. This means you can use this freely, modify as needed; changes to MPL-licensed files should be shared back under the same license.

Funding ☕️

If you find this plugin useful and would like to buy me a coffee/beer as a small thank you, I would greatly appreciate it!