Links are the main navigation element in Hypstory. They enable the readers to move from one card to another. Hence, links make a story interactive and, potentially, nonlinear.


Create a link

In its most basic form, a link starts with the :LINK: tag followed by the unique name of the card it connects to.

:CARD: first

I love pizza.

:LINK: next

:CARD: next

And oh boy do I love ice cream, too.

In this example there are two cards, each with a unique name. The card named first contains a link that leads to the card with the name next. That name is also displayed as the link's text.

Practice tip: Try changing the word "next" in line 3 to "second", hit the update button and click on the link. Do you see why the link didn't work? Now change the name of the card on line 4 to "second", hit update again and click the link.

Link text

In many situations you will want links to display text other than the name of the target card. For that, simply write the link text before adding the unique card name. Separate the two blocks with a pipe character: |.

:CARD: pizza

Pizza is awesome.

:LINK: Do you know what else is good? | ice cream

:CARD: ice cream


:LINK: But what about pizza? | pizza

In this example the :LINK: elements have two building blocks separated by a pipe (|) character. The first one is the text that will be displayed to the readers. The second one is the unique name of the target card.

Links in paragraphs

In the examples above each link has its own line. There is no text before or afterwards on the same line.

But you can also use links inside text paragraphs. Just mark the end of the :LINK: element with a double colon (::).

:CARD: awesome pizza

And then I said: "You make an :LINK: awesome pizza pie | special recipe ::, my dear Francesca."

:CARD: special recipe

By the way, Francesca's pizza is made of dough, tomatos, cheese and a special ingredient that she refuses to tell me about.

The double colon is the closing tag for a number of tags in Hypstory.

Link shorthands

There are two handy alternatives for the :LINK: tag: the short generic :L: tag and the double pipe tag ||.

Everything you can do with the first can be accomplished with the other two in the exact same way. The only difference: The closing tag for a || element is another double pipe.

:CARD: pick a slice

"Pick any slice you want from the margherita. It's on the house."

:LINK: "I'd like this one." | munch munch
:L: "I'd like that one there." | munch munch
|| "This one looks like it is the most delicious." | munch munch

:CARD: munch munch

You start munching. "That is one tasty pizza pie. ||Can I have another slice?| pick a slice|| It's just so darn good!"

Workflow tip: As with all Hypstory tags, you can choose between uppercase and lowercase letters. :LINK: and :link: work just the same. You can even use :Link: or :LiNk: if that's how you like it.