How to use Twine as a branching story creation tool?

The “Welcome” screen of Twine when you create your first project.

Twine is actually a free, open-source tool designed to create interactive/hypertext games that can be stored as HTML. It essentially allows you to create text-based games and publish them online.

However, today we won’t be discussing this aspect of Twine. If we backtrack a bit, you might recall that I’m developing a non-linear psychological thriller game, if you’re one of my close followers. As I worked on the story, I needed software to track how the story branches based on different actions.

During my research, I stumbled upon this software. It’s so easy to use and create branches that lead to the next storyline or events with it, I wanted to mention it for those who might not be aware of its existence and write a small tutorial about it. In this tutorial, I’ll cover the essential aspects that we need to know to create branching stories, without overwhelming you with Twine’s game development aspect. (Again, Twine was actually created to make text-based web games). If you’re ready, let’s begin!

How to save your projects, how to rename your passages/nodes in Twine?

Two things you need to know immediately are: Twine auto-saves your project, which is why there is no save button.

Secondly, when I suggested this software to a friend of mine, he had a hard time figuring out how to name passages/nodes. So, I thought it might be worth mentioning how to do that as well:

When you double click on a passage, it’ll bring up this editor here.

How to create branches in Twine

Now we’ll talk about the most useful aspect of Twine for us: branching the storyline. To create branches, all we need to do is take the action/story that creates a branch and put them inside double square brackets, like so:

• [[Player opens the left door.]]

Creating branches in action

Your advertisement can be placed here for $200 permanently. Suggested resolutions: 1800x663 or 1400x1400. Contact us.

How to stylize individual branches

Twine doesn’t offer extensive customization on the page where we create these storylines, but we can still customize the passages here to some extent. For instance, if the user opens the right door, I want this area to be dangerous and as a future reference, I can add the following tag to this passage, so I know that there should be some kind of threat the player is facing in this area:

Then I can select a color of my choice:

This’ll add a red line to the passage of my choice.

Note: If you are tired of watching video tutorials and would like to see more text-based tutorials like this one from me, you can support me on Patreon so I can dedicate more time to creating them.

Additional Notes (Optional Read)

Now, if you wish, you can customize these passages and the home page even further with CSS. However, to do so, you need to launch the project in a web browser. Styling things can become time-consuming in the browser, and I won’t be covering that aspect here as I’m primarily using this software as a branching story creation tool. Nevertheless, I wanted to mention it in case you’re wondering if it’s possible. Yes, it is, and you can search for tutorials online if you wish to learn more!