These examples are small, self-contained Snowman stories that each demonstrate one idea. Every example includes a full .twee source file you can download and open directly in Twine, plus a short guide explaining how it works and how to adapt it for your own story.

Beginner examples

No prior HTML, CSS, or JavaScript experience is assumed.

  1. Basic Links & Multiple Endings — connecting passages with [[ ]] links and branching to different endings.
  2. Basic Text Formatting — Markdown shorthand vs. raw HTML tags.
  3. Initializing Story Variables — setting up starting variables in UserScript.
  4. Simple Score Counter — tracking and displaying a running number in story state.
  5. External Links — linking safely to outside websites.
  6. Simple Image Gallery — swapping an image on click with jQuery.
  7. Random Flavor Text — picking random text with Underscore’s _.sample().
  8. Yes or No Quiz with Scoring — combining links, conditionals, and a score variable.
  9. Restarting the Story — clearing state and returning to the start passage.
  10. Organizing Passages with Tags — reading a passage’s own tags in code.

Advanced examples

Comfort with JavaScript, CSS, and jQuery is assumed.

  1. Working with JSON Data — parsing and looping over structured JSON data.
  2. Finite-State Machine Branching — managing branching logic with a lookup table.
  3. Custom Events for Notifications — firing and listening for your own custom events.
  4. Enhancing Markdown Output — post-processing rendered Markdown after a passage is shown.
  5. Accessible Passage Announcements — ARIA live regions and keyboard focus management.
  6. Two-Column Layout with CSS Grid — a persistent sidebar laid out with CSS Grid.
  7. Custom CSS Keyframe Animations — defining and triggering a @keyframes animation.
  8. Debug State Inspector Panel — a toggleable panel showing live story state as JSON.
  9. Multiple Save Slots — supporting several independent localStorage save slots.
  10. Drag-and-Drop Inventory — the native HTML5 drag-and-drop API.

Narrative Structures

These examples each demonstrate one classic narrative structure — the shapes a branching story can take. Every example ships a full .twee source plus a pre-compiled, playable HTML file (built with Extwee and the Snowman 2.X story format).

Linear

The baseline every other structure departs from, plus two variants where repetition, not divergence, carries the experience.

  1. Linear — one track, one order; the only choice is pacing.
  2. Gauntlet — a single success path where failure sends you back to retry.
  3. Loop and Grow — the same loop repeats, but accumulated knowledge unlocks new options.

Branching

Choices that lead to different content — from pure divergence to the foldback and gating patterns that make branching affordable.

  1. Branching — a pure “Time Cave” tree that splits and never rejoins.
  2. Branch and Bottleneck — branches re-converge at authored checkpoint beats, then branch again.
  3. Gate / Quest — branches converge on a systemic condition (a count or flag), not a scene.
  4. Sorting Hat / Diamond — distinct openings reconverge into one shared main path.
  5. Hub and Spoke — a central hub with order-independent, self-contained spokes.

Self-contained

Structures with little or no forced sequence, where the player assembles meaning or the story emerges from rules.

  1. Modular / Threaded — self-contained modules read in any order; the player assembles the story.
  2. Systemic / Emergent — no authored plot graph; the story emerges from interacting systems.