vexy-stax-js — ES Module

import { createStax } — each example shows its minimal source on the left and the live result on the right. ← all demos

Drop-in CDN (no build step): import { createStax } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js"; — these pages load the co-located local bundle, but the same code works verbatim from jsDelivr.

Minimal — a list of slides

import { createStax } from
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/vexy-stax.element.js";

await createStax(el, {
  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",
});

Playable — gap + transition kind

const stax = await createStax(el, {
  slides: [/* … */],
  gap: 480,
  transition: "expand_collapse",
  mode: "playable",     // plays the transition once when ready
});

Inline scene OBJECT — no URL, no fetch (issue 342)

// Pass a full scene object straight into createStax (scene-in-init):
await createStax(el, {
  scene: {
    version: 1,
    size: { width: 1246, height: 806 },
    slides: [
      { src: "airbl-lores/airbl-020-source.png", caption: { text: "Source" } },
      { src: "airbl-lores/airbl-030-pink.png" },
    ],
  },
  view: "expanded",
});

Click to toggle + imperative API

// Click-to-toggle is ON by default — clicking the deck fluently
// toggles compact↔expanded. (Opt out with clickToggle: false.)
const stax = await createStax(el, { slides: [/* … */] });

// …or drive it by hand:
await stax.toggleView();          // fluent compact↔expanded
await stax.transition("collapse_expand");