Creative Coding with Twine

Workshop for RUSS233 Experimental Literature

2026.02.11

Alice McGrath & Cameron Boucher

View slideshow

Getting started with Twine

About Twine

  • Twine is an open-source tool for creating interactive fiction, text-based games, and hypertext narratives
  • Twine has a no-code editor that uses simple markup, shows connections between passages as a network, and can be used in browser or as a standalone application
  • Twine games are stored in a markup language called Twee and can be edited in a text editor
  • Twine is designed to emphasize interactivity (user-input, randomness, variables)
  • Story format options change syntax and functionality
    • Harlowe - default format (this what we are using for this workshop).
    • Other options: Chapbook (beginner-friendly), SugarCube, Snowman (advanced)

To create a story in Twine

  1. Navigate to https://twinery.org/
  2. Click ‘Use in your browser’
  3. In the top-left corner, click + New to create a new story. Give yours a name
  4. The editor has an overall map with a single passage – double click to edit
  5. Enter some text and rename your passage
  6. Click Test From Here to preview your game in a new tab

Basics

  • Link to a new passage using double square brackets [[pasage name]]
  • Use hash marks to create headers: # Header 1 and ## Header 2
  • Use ** for **bold** and * for *italic*
  • Use the WYSIWYG editor for other types of customizations

Vocabulary

  • Markup - How data is structured, displayed, and organized (general term)
  • Story - A Twine project (i.e. a website, game, or book)
  • Passage - A contained section of a Twine story (a page or “node” in the network)
  • Macro - A bit of code used to change functionality or style of text, indicated with parentheses
  • Hook - The passage of text that a macro acts on, indicated with square brackets (font: "Arial")[This text will be in Arial.]
  • Variable - A container for values and words that can change within the game (set: $myName to "Alice") Hello, $myName!

Tips

  • Preview/test your work often to make sure everything works
  • When using the browser editor, export your game every time you are finished
  • Create an outline or storyboard before you try to build complex functionality
  • To check your story format: from the story editor, select ‘Details’ and select ‘Harlowe 3.3.9’

How To

Use this guide to make a few basic customizations. There are many more you can find in the Harlowe Documentation and the Twine Cookbook.

Style your text

Harlowe uses macros to style text, following this basic syntax:

(text-style:"fade-in-out")[This text blinks]

(color:magenta)[This text is magenta]

(text-rotate-z:90)[This text is rotated 90 degrees]

(bg:green)[This text has a green background]

(font:"courier")[This text uses a different font]

(text-size:0.5)[This text is smaller than other text]

(align:"=><=")+(box:"X")[This text is centered]

For style that will refer to the entire passage, use an open bracket at the end:

(color:cyan)[=
    The rest of the passage will be cyan

Macros can be nested inside other macros. To include two macros that apply to the same passage, use a + between them:

(color:green)+(font:"courier")[This text has two style macros applied]

You can also style the entire page using “enchant” macros:

(enchant:?page,(bg:lime))

Color and Font options

  • Colors
    • Twine supports a few colors without quotation marks – you’ll find these as options in the Editor.
    • You can also use any of the CSS named colors by putting the name in quotation marks: (bg:"blueviolet").
    • You can also use hex values to specify a color: (text-color: #cce6ff)[This is a hex value color].
  • Fonts

Hide and show content

  • Link macros can create clickable text that gets replaced by other text (link:"Click me to reveal")[This text is revealed]
  • You can display another passage within a passage (useful if you want to repeat bits of code): (show:"passage")
  • To go to another passage: (go-to:"passage")
  • To display text after a delay: (after:1s)[Wait one second before displaying this]
  • You can create a passage that unveils slowly by embedding choices within choices:
You are going down (link: "a passageway")[an extremely long passageway]
Do you want to turn left?
(link:"yes, let's turn left")[You turn left and the hallway goes on (link:"forever")[for what feels like forever]
Next you have the option to go (link:"right")[right, 
which you take, and then you find yourself at another (link: "fork")[fork. 
Do you go left or right?
(link:"Left")[You've reached a dead end.]
(link:"Right")[You've reached your destination!]]]]
  • You can also create a pop-up that will display before page content: (dialog:[Welcome to my game!],"OK")

Introduce variety

  • Use ‘either’ to randomly select a value from a list: The sky is (either:"blue", "pink", "orange", "green")

  • Use ‘random’ to generate random numbers: Rolling six-sided die: (random: 1,6)

Set and change variables

  • To set a variable: (set: $name to "Alice")

  • To display a variable: Hello, $name

  • You can also get user input and store it in a variable: What's your name? (input:2bind $name,"X","")

  • To use the variable on the same passage, use a prompt for this: (set: $name to (prompt: [What's your name?], "Name"))

  • Variables can also hold numbers: (set: $score to 1)

  • And you can do math on them: (set: $score to it + 1)

Use conditionals

Conditional syntax can use variables to introduce game-like elements,

(if: $score > 10)[You win!!]
(else:)[You lose.]
(if: $door is "locked")[Sorry, the door is locked]
(else:)[(go-to:"door")]

Publishing guide

A twine game can be deployed to a web server so that others can play the game. There are many options for webhosting services – here are a few that are free to you:

Export your game from Twine

  • From the Twine top menu, go to Build -> Publish to File to export your game as html
  • Open it in a browser app to play it locally
  • Note on Filenames:
    • By default, the filename of your game will include the title
    • Edit the filename so it has no spaces in it - this will be part of your URL
    • Pro tip: change the filename to index.html

Deployment using DoOO or Haverford Sites

  • Navigate to digital.brynmawr.edu or sites.haverford.edu and click on “Get Started” to log in
    • If you haven’t already, choose a domain name that is relatively short and unique to you
  • Upload your game:
    • From your Dashboard, locate the “File Manager”
    • Navigate to the folder called “public_html”
    • Create a new sub-folder called “game”
    • Upload your game to the “game” folder
  • Navigate to your game’s URL
    • Your game should now be public at yourdomain.digital.brynmawr.edu/game/filename.html
    • If you changed the filename to index, your url will be yourdomain.digital.brynmawr.edu/game

Resources

CSS Guides

Twine tutorials

NB: If you are using a tutorial, make sure you know which story format it describes because syntax can be quite different. My guides refer to Harlowe.

Twine game examples

Workshop examples

  • Digital Scholarship Adventure Game (live) - an educational game to learn about digital scholarship services at Bryn Mawr
  • Critters (live) - a short and goofy game for this workshop
  • Twee code for both games is available on the GitHub for this workshop
    • To view the code, click on either file (e.g. “Critters.twee”)
    • To download, use the download icon
    • You can import the Twee code into Twine to see what it looks like in the editor
  • Life of Pasha - A day in the life of Pasha, the betta fish (by Cameron Boucher)

Examples in the wild

Other tools for Creative Coding