Shoji

Playground

Every GalleryOptions/plugin-option field as a live form below the gallery — flip settings, pick dynamic (JSON items) vs. selector (DOM markup) mode, and the gallery rebuilds itself immediately, no separate step. All 24 items are generated inline (SVG placeholders, one real HTML5 video, one YouTube link, one Vimeo link) — no external image assets, so this page has no dependency beyond dist/ and one small sample clip.

Shoji options

Bundle

Combined loads dist/shoji.min.js/.css — every official plugin class exists regardless of which checkboxes below are ticked; the checkboxes just choose what's passed into plugins. Core + plugins loads dist/core/shoji-core.min.js/.css plus, for each ticked plugin checkbox, that plugin's own dist/plugins/{name}.min.js/.css — a plugin class genuinely doesn't exist here until its checkbox is ticked, so an unticked plugin's own options fieldset below is disabled in this mode (nothing to configure yet).

Data source

DOM mode generates the same 24 items as data-shoji-* markup instead of passing items — same content either way, different construction path.

Core options
gestures (blank = default)
Plugins

MyPlugin/ThemePicker/CustomVideoControls are this page's own custom plugins (not official Shoji ones) — toggleable like the rest. CustomVideoControls replaces the native HTML5 video controls with a custom bar; off by default so it doesn't fight the native controls on the storm.mp4 slide unless you opt in.

Zoom options
Autoplay options
ActiveThumbnail options
Layout options

Blank number fields are left out of the options object entirely (plugin default applies), not sent as 0/empty-string.

All --shoji-* CSS variables (advanced, blank = default — placeholder shows shoji.css's own default; only fields you fill in are applied to :root)