Viewers are the interactive elements you add to a StoryKit post. Each one is added with a single include tag in your Markdown — you describe what to show, and StoryKit handles the presentation, interactivity, and layout.

This page lists every available viewer so you can pick the right one. Each viewer has its own reference page with a full attribute list, worked examples, and troubleshooting tips.

The Viewers at a Glance

Viewer	Include tag	Use it for
Image	embed/image.html	Zoomable high-resolution images: maps, artworks, archival photos. First-class support for Wikimedia Commons and IIIF.
Map	embed/map.html	Interactive maps with markers, GeoJSON overlays, and historical map layers. Text links can fly the map to a location.
Image Compare	embed/image-compare.html	Before/after sliders: then-and-now photographs, restorations, X-rays of paintings.
YouTube	embed/youtube.html	Video with a clean inline preview. Text links can play a specific segment.
Network	embed/vis-network.html	Node-and-edge relationship diagrams built from simple CSV data in your post.
Iframe	embed/iframe.html	Anything else — embed an external web page, exhibit, or widget.

There is one more interactive feature that isn’t a viewer include: Entity Info Popups turn a plain Markdown link like [Charles Darwin](Q1035) into a contextual popup powered by Wikidata.

The Common Pattern

Every viewer follows the same authoring pattern. You place an include tag in your Markdown where you want the viewer to appear:

{% include embed/image.html
    id="fig1"
    src="wc:Monument_Valley,_Utah,_USA.jpg"
    caption="Monument Valley, UT"
%}

A few attributes appear on every viewer and are worth knowing from the start:

Attribute	Purpose
id	A unique name for this viewer on the page. Required if you want action links to target it — without an id, links in your text cannot control the viewer.
caption	Text displayed below the viewer.
aspect	The width-to-height ratio of the viewer (e.g. 1.5 for landscape, 0.75 for portrait). Each viewer has a sensible default.
class	Size and position words like medium right float — see Formatting Tips.

Making Text Control a Viewer

The feature that sets StoryKit apart is that your prose can drive the viewers. A normal-looking Markdown link can zoom an image, fly a map to a location, or play a video segment:

Major formations include [West Mitten Butte](fig1/zoomto/pct:10.94,27.88,21.05,30).

The complete syntax, and the list of actions each viewer supports, is in the Action Links reference.

Layout

By default StoryKit floats a viewer beside the paragraph it follows and wraps the text around it. You can control size and placement per viewer, or switch the whole post to a two-column scrollytelling layout:

• Formatting Tips — sizing, positioning, and floating individual viewers
• Display Modes — flat pages vs. the two-column layout