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

#react #webcomponents #opensource #javascript

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 running against the published NPM package in a clean, isolated environment. No monorepo context. No local file paths. Just the package as a consumer would actually use it.

Both bugs were squashed before the Pens went live.

That alone made the effort worth it. A test suite tells you if components work in isolation. A CodePen tells you if they work in the real world.

CodePen 2.0

These Pens were built on the newly launched CodePen 2.0. The team has rebuilt the platform significantly and it shows: the editor feels snappier, embeds are cleaner, and the overall experience is noticeably better than it was. Worth firing up a Pen just to see it if you haven't recently.

Where to Find Them

Every component page on the AgnosticUI docs now has a CodePen button on the React tab. Navigate to any component, click React, scroll to the examples section, and hit the button. Fork it, break it, adapt it.

55 Pens later, I can say with confidence the NPM package path is solid. That's the confidence check StackBlitz couldn't give us.

AgnosticUI is an open source Web Components design system. Contributions welcome.