Creative Coding with Twine

RUSS B233 - Experimental Literature

Alice McGrath & Cameron Boucher

2026-02-11

Outline

• Introduction to Twine and Hypertext
• Twine editing interface
• Customization basics
• Publishing guide

Introduction

Twine and Hypertext

Hypertext!

• Hypertext - context is created immediately with hyperlinks; networked structure that is multilinear
• Similar technologies existed for print (i.e. footnotes, choose-your-own adventures, etc) but now it was easier
• Experimental forms of literature using hypertext emerged in the early-mid 1990s, originally distributed via CD-Rom
• HTML = hypertext markup language (all the internet)

• While other book forms had been linear (scroll) or sequential but segmented (a book), hypertext was inherently multilinear, network-based, interactive
• Fun fact: Vladimir Nabokov’s Pale Fire (1962) was almost used to demonstrate an early hypertext system in an IBM presentation in 1969

Hypertext Literature

Patchwork Girl: A Modern Monster by Shelley Jackson (1995, Eastgate Systems)

In hypertext, everything is there at once and equally weighted. It is a body whose brain is dispersed throughout the cells, fraught with potential, fragile with indecision, or rather strong in foregoing decisions, the way a vine will bend but a tree can fall down”

Shelley Jackson, “Stitch Bitch: the patchwork girl”, 1997 (qtd. in Wikipedia)

So what?

• Twine is an open-source tool for creating hypertext narratives, interactive fiction, text-based games
• Twine stories evoke this early hypertext era: they are networks with interconnected nodes
• All of the internet is hypertext, but most websites have open navigation technologies - each bit of context in Twine is built intentionally

• context is created by hyperlinks that can be followed backwards and forwards and read in any order
• Twine: navigation is controlled, interactive

Twine

• Can be used in browser or as standalone application
• Output is a flat HTML (Hypertext Markup Language) file
• Editor interface shows connections between passages
• WYSIWYG editor that uses simple markup
• Many options for interactivity (user input, randomness, variables) without advanced technical skill

• What’s cool is that most no-code website builders do not include functional programming options
• Instead of learning html and javascript, you get a little bit of the uses of each

Using Twine

Before we begin

• 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)
• Twine games are stored in a markup language called Twee and can be edited in a text editor

Getting started

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
• Variable - A container for values and words that can change within the game
• 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.]`

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’

Your turn!

• Create a few passages and practice linking between them.
• Test out your game to see how it looks.
• Explore the editor interface options to try out more complex stuff.

Customization

Make your Twine story pretty and interactive

Macros

You can create macros using buttons in the main editor or by using text markup

• Change the background - (bg:purple)[Text]
• Change the text color - (color:yellow)[Text that is yellow]
• Add some whimsy - (text-style:"shudder")[Text that moves]

Usage examples

Go to the how-to section of the home page for more

(link: "Click here please")[Thank you for clicking!]
(display: "Cellar")

(set: $points to 5)
(set: $points to it + 1)

The weather was (either: "snowy", "rainy", "sunny")

Things to try

• Style customizations
• Hide and show page content with links
• Variety and randomness using (either:) and (random:)
• Variables and conditionals

Your turn!

• Give your game a makeover with some styling and customization.
• Need inspiration? Check out the Digital Scholarship Adventure Game or Critters

Advanced: HTML

• Twine is designed to be text-based, however, you can add images using html if they are hosted somewhere else:

<img src="exampleurl.com/cat.jpg" alt="a cat in a box">

• Other HTML syntax may work (but will sometimes break)

Advanced: Style

• If you have some experience with CSS, you can apply style to the whole story by going to Story -> Stylesheet
• Use CSS selectors tw-passage tw-story and tw-link to apply style changes to your entire site
• Macros are recommmended for this purpose see these instructions

Deployment

How to let others play your game

Hosting options

• Bryn Mawr: Domain of One’s Own - digital.brynmawr.edu
• Haverford: Haverford Sites - sites.haverford.edu
• GitHub Pages - with free GitHub account

Export your story

• From the Twine top menu, go to Build -> Publish to File to export your game as html
• Filenames: the html filename will be part of the URL for your game
  • Edit the filename so it has no spaces in it
  • If you change the filename to index.html your URL will just include the folder
• You can open your story in a browser app to play it locally

Log in to Domain of One’s Own

• Navigate to digital.brynmawr.edu and click on “Get Started” to log in
• If you haven’t already, choose a domain name that is relatively short and unique

Upload your story

• From your DoOO 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

Sharing your story

• Your story 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

Congratulations, you are a published author of interactive fiction!

Tips and Resources

Best Practices for Web Publishing

• Copyright, Credit, & Attribution - Do not publish copyrighted material without permission: find licensing information for images and media. Credit your sources for media and data.
• Accessibility - Use alternative text for images, high-contrast colors, and heading structures to make your content accessible to users with disabilities.
• Privacy & Permission - Never publish a person’s photo, name, or any personal information without consent. Make sure all collaborators are represented the way they wish.
• Design & Style - Think about your audience: try to make the presentation eye-catching, organized, and easy to understand.
• Reviewing & User Testing - Have someone else view and interact with your content and build in time to fix any issues. Try different devices and browsers

Twine Documentation

• Twine Cookbook
• Harlowe documentation - this is the standard story format
• Twine and Interactive Fiction Handbook (slides)
• Programming Historian: Interactive Text Games Using Twine (text tutorial)

Get help!

• Come to Digital Scholarship Office Hours, 1-3 PM in the Carpenter DMCL!
• Email digitalscholarship@brynmawr.edu or help@brynmawr.edu
• For questions about Domain of One’s Own, see AskAthena