HTML Artifacts

A single HTML file that loads matchina and a view library from a CDN. JSX works too via esm.sh/tsx (see the React Artifact below); for a build-step React project, the React page covers the usual hooks pattern. For adapter patterns across libraries, see Frontend Integration Overview.

Imports

Demos load from esm.sh. For other CDNs, see Use from a CDN.

Progressive Enhancement

Try it with JS off

Disable JS and open each demo. The Progressive column says what you’ll see.

Artifact	Size (gz)	Progressive	Authoring shape	Notes
Stimulus Artifact	~10 KB	Yes	Controller	HTML has initial values; controllers attach on connect
Vanilla Artifact	—	Yes	Vanilla	Matchina alone, no view library; HTML is the card
Alpine Artifact	~15 KB	Yes	Attribute	HTML has initial values; Alpine bindings overlay on mount
petite-vue Artifact	~6 KB	Yes	Attribute	HTML has initial values; v-scope mounts on top
Vue 3 Artifact	~40 KB	Yes	Attribute	HTML has initial values; Vue replaces them reactively on mount
React Artifact	~45 KB	No	TSX (no build)	esm.sh/tsx compiles TSX on load; React mounts into empty <article>
VanJS Artifact	~1.5 KB	No	Declarative DOM	Empty <article>; JS builds the card
Solid Artifact	~7 KB	No	Fine-grained	Empty <article>; JS builds the card
Preact Artifact	~10 KB	No	JSX-ish (htm)	Empty <article>; JS builds the card
ArrowJS Artifact	~3 KB	No	Tagged template	Empty <article>; JS builds the card

• Stimulus Artifact
  Yes ~10 KB Controller

  HTML has initial values; controllers attach on connect

• Vanilla Artifact
  Yes — Vanilla

  Matchina alone, no view library; HTML is the card

• Alpine Artifact
  Yes ~15 KB Attribute

  HTML has initial values; Alpine bindings overlay on mount

• petite-vue Artifact
  Yes ~6 KB Attribute

  HTML has initial values; v-scope mounts on top

• Vue 3 Artifact
  Yes ~40 KB Attribute

  HTML has initial values; Vue replaces them reactively on mount

• React Artifact
  No ~45 KB TSX (no build)

  esm.sh/tsx compiles TSX on load; React mounts into empty <article>

• VanJS Artifact
  No ~1.5 KB Declarative DOM

  Empty <article>; JS builds the card

• Solid Artifact
  No ~7 KB Fine-grained

  Empty <article>; JS builds the card

• Preact Artifact
  No ~10 KB JSX-ish (htm)

  Empty <article>; JS builds the card

• ArrowJS Artifact
  No ~3 KB Tagged template

  Empty <article>; JS builds the card

Considerations

• Static HTML. Need the card to render before JS runs? Stimulus, Vanilla, Alpine, petite-vue, Vue 3.
• Footprint. ~1.5 KB (VanJS) to ~40 KB (Vue 3).