I Built 55+ CodePens for Every AgnosticUI Component. Here's What I Learned.

AgnosticUI is a Web Components design system built on Lit, with React and Vue wrappers. The docs already had StackBlitz embeds proving the CLI install path works. But I wanted to prove the NPM package path too — and CodePen is the obvious place to do that. One click, zero setup, live and editable in the browser. So I set a goal: every component gets a Pen. The Setup Each Pen imports directly from the AgnosticUI NPM package via CDN — no local install, no bundler, no CLI. If it works in the Pen, it works from NPM. That's the whole point. The implementation side was straightforward. FrameworkExample.vue already had a CODEPEN_URLS map keyed by component name. Adding a new component was a two-step loop: create the Pen on codepen.io, add the URL to the map, commit. Repeat 55 times. What I Didn't Expect: The Bugs Building these Pens wasn't just documentation work, it was dogfooding at scale. And dogfooding finds things that unit tests miss. Two components had real bugs that only surfaced when