Twine cheatsheet

Harlowe 3 · Creative Media 2026

Create a passage

Write a name between double brackets inside a passage. Twine creates the new passage and draws the arrow between them.

[[Axolotl]]

To rename a passage, double click its title. Twine updates the links that point to it.

Link passages

An arrow or a vertical bar separates what the reader sees from where it goes. The four forms below lead to the same place.

`[[Heron]]`	The passage name is also the visible text
`[[hides from->Heron]]`	The arrow points to the passage
`[[Heron<-hides from]]`	The same, reversed
`[[hides from\|Heron]]`	The bar separates text and destination

Vertical bar |: Shift + \ on US and UK keyboards · AltGr + 6 on French AZERTY · Option + Shift + L on a French Mac.

Images and video

Normal HTML inside the passage. The file must be online, with its full address. Right click on an image, then copy image address.

<img src="https://example.com/axolotl.jpg">
<img src="https://example.com/axolotl.jpg" width="400">

<video src="https://example.com/clip.mp4" autoplay loop muted width="100%"></video>

<iframe width="100%" height="400" src="https://www.youtube.com/embed/ID"></iframe>

The YouTube ID is the part after watch?v= in the link.

CSS: where it goes

In the story stylesheet, not in a passage. Open the Story menu and press Stylesheet. It affects the whole story.

`tw-story`	The whole story: background, text color, typeface
`tw-passage`	Only the visible passage: margins and width
`tw-link`	The links. Without it they stay default blue. Takes color, font-weight, text-decoration
`tw-link:hover`	A link under the mouse
`tw-sidebar`	The undo and redo arrows
`[tags="..."]`	Passage tags, to give each tag its own look

CSS: recipes

Copy, paste, change the values.

tw-story {
  background-color: #111111;
  color: #eeeeee;
  font-family: Georgia, serif;
  font-size: 18px;
}

tw-link {
  color: #d4a017;
  font-weight: bold;
}

tw-link:hover {
  color: #ffffff;
}

[tags="amphibian"] {
  background-color: #0d2b2b;
}

CSS: more recipes

An image behind everything

tw-story {
  background: url("https://example.com/bg.jpg") center / cover;
}

A box to read on

tw-passage {
  background: rgba(0, 0, 0, 0.6);
  padding: 2em;
}

A Google font. The import goes on the very first line of the stylesheet

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

tw-story {
  font-family: "Inter", sans-serif;
}

Hide the undo arrows

tw-sidebar {
  display: none;
}

Effects inside a passage

Harlowe changers style one part of one passage.

(text-colour: #ff2bd6)[The signal is back]
(text-style: "blur")[a memory]
(font: "Courier New")[BREAKING NEWS]
(transition: "dissolve")[It is 2050]

Sign it

In the first passage: “Created by” and the full names of every team member.

Created by
Name Surname, Name Surname, Name Surname

Export and save

Build menu, Publish to File. You get an .html file that opens in any browser and can be uploaded to a server.

Twine saves inside your browser. Use Library › Archive to keep a backup file.