vexy-stax-js — <vexy-stax>

Declarative custom element — minimal markup on the left, the live element on the right. Tip: click any deck to fluently toggle compact↔expanded (on by default; opt out with click-toggle="false"). ← all demos

Drop-in CDN (no build step): <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js"></script> — these pages load the co-located local bundle, but the same code works verbatim from jsDelivr.

Easiest: a list of slide URLs (the slides attribute)

<vexy-stax
  slides="airbl-lores/airbl-020-source.png
          airbl-lores/airbl-030-pink.png
          airbl-lores/airbl-040-stars.png
          airbl-lores/airbl-050-backdrop.png"
  view="compact"
  mode="playable">
</vexy-stax>

Captions on, expanded view (static)

<vexy-stax
  scene="airbl-demo.scene.json"
  view="expanded"
  mode="static">
</vexy-stax>

Scene URL + playable transition

<vexy-stax
  scene="airbl-demo.scene.json"
  view="compact"
  mode="playable">
</vexy-stax>

Issue 701: the whole scene inline — a <script type="application/json"> child (no external scene URL)

<vexy-stax view="compact" mode="playable">
  <script type="application/json">
  {
    "version": 1,
    "transition": { "kind": "expand_collapse" },
    "slides": [
      { "src": "airbl-lores/airbl-020-source.png" },
      { "src": "airbl-lores/airbl-030-pink.png" },
      { "src": "airbl-lores/airbl-040-stars.png" },
      { "src": "airbl-lores/airbl-050-backdrop.png" }
    ]
  }
  </script>
</vexy-stax>

Issue 701: a short, wide deck — the aspect attribute (here 3, i.e. 3:1)

<vexy-stax
  scene="airbl-demo.scene.json"
  view="expanded"
  aspect="3">
</vexy-stax>

Issue 343: a built-in toggle button (relabels Explain ⇄ Preview)

<vexy-stax
  scene="airbl-demo.scene.json"
  view="compact"
  buttons="toggle">
</vexy-stax>

A pair of buttons, custom labels + position + theme (--vexy-btn-*)

<vexy-stax
  scene="airbl-demo.scene.json" view="compact"
  buttons="pair"
  explain-label="Break apart" preview-label="Reassemble"
  buttons-position="top"
  style="--vexy-btn-color:#fff;
         --vexy-btn-bg:rgba(0,0,0,0.45);
         --vexy-btn-blur:14px">
</vexy-stax>