Skip to content

Link Directive

Swaps the target frame to the passage specified, through altering the frame's state.

Standard Twine Link Markup gets transformed into an x-link directive under the hood. I.e. [[Go into the dark->The Dark][quest]] will be rendered as the following: 

<button x-link:quest="'The Dark'">Go into the dark</button>
Using x-link directly offers you the ability to style and customize the link however you want, at the cost of syntax convenience.

x-link="passage name"

You can pass anything that resolves to a valid passage name. 

<button x-link="'Next Up'">Go to the next passage!</button>
Like the frame directive, links target the unnamed frame by default.

Tip

It is advised to use x-link on exclusively button elements. It is the easiest way to keep accessibility features (keyboard navigation, etc) functioning as they should.

x-link:frame

To target another frame, pass the frame name as the value. 

<button x-link:menu="'Quest Menu'">Open Quest Log</button>
This will target any frames named "menu".

Modifiers

The following modifiers are available for the x-link directive.

!play

Prevents the new state from being pushed to the history.

!fade

Prevents the target frame from fading in and out when the link is clicked.