🐊 The code is not the point

MOAT is a component library. But that's not really what it is.

The components are reference implementations. Proof that you can have a date picker, a command palette, a draggable tab bar — industry-standard UX, the stuff users expect — without abandoning the document model. Without Shadow DOM. Without a hydration cliff. Without a build pipeline.

The code is just evidence the pattern works.

Cold HTML is the architecture

Render on the edge. Ship complete HTML. Components boot on top of something that already exists.

No flash of unstyled content. No waiting for a bundle to decide what the page looks like. The HTML is the UI. JavaScript is the behavior layer that attaches to it — not the thing that generates it.

This is how the web was supposed to work. MOAT just takes it seriously.

You own the code

Distribution is cp -r. A pod is a directory: one .js, one .css, one pod.toml. No npm. No registry. No version conflicts. No maintainer to wait on.

The usual objection: what happens when something needs to change? Who maintains your fork?

Wrong question.

If a component doesn't do what you want, tell an AI to fix it. The pattern is simple enough — attributes in, events out, light DOM, no magic — that the fix takes thirty seconds. You're not maintaining a fork. You're editing your code.

"Is this maintained?" stops being a meaningful question when the cost of a fix approaches zero.

Pattern clarity over library quality

Most component libraries optimize for completeness. MOAT optimizes for understandability.

The difference: a complete library needs to handle every case. An understandable one needs to be readable enough that an AI can modify it confidently. Single files. No framework idioms. No compiler to accidentally break.

That's a different design target. And it turns out to be a more durable one. Libraries go unmaintained. Patterns don't.

What MOAT actually is

A demonstration that this architecture is viable for real UI.

Edge rendering, cold HTML, Light DOM, platform APIs — <dialog>, popover, custom elements, CSS custom properties, Intl. When the platform ships a primitive, use it. Less code. Fewer abstractions. Nothing to outgrow.

Thirty components showing the same pattern, consistently, at production quality.

Take the pattern. Use the components, or don't. Tell an AI to build you something new that fits the same shape. It'll work, because the shape is simple.

That's the point.