🏕️ twine-campfire

A cozy story format for Twine.

Explore the Storybook documentation for interactive examples of each component.

Installation

1. Copy this link URL: https://github.com/magicink/twine-campfire/releases/latest/download/format.js.
2. Start Twine and navigate to Twine > Story Formats.
3. Click Add, paste the copied URL into the form, then confirm.
4. To activate the format, open a story and choose campfire 1.x.x from the Story Format dropdown in Story > Details.

Directives

Campfire extends Markdown with remark-directive syntax. Directives begin with a colon and let passages interact with the game state. They come in leaf, text, or container form, each serving a different role.

• Leaf – ::name[LABEL]{attr=value} — a standalone directive that performs an action or emits markup without wrapping other content.

• Text – :name[LABEL]{attr=value} — an inline directive used inside paragraphs to inject values or generate small spans of text.

• Container – a block directive that wraps content between :::name{attr=value} and a closing ::: marker.

  :::name{attr=value}
  CONTENT
  :::

Example

Here's a practical example showing how directives can be combined to create interactive content:

::createRange[testRange=0]{min=0 max=10}

The value is currently :show[testRange]

:::trigger{label="add"}
::setRange[testRange=(testRange.value+1)]
:::

:::if[testRange.value === testRange.max]

[[Next Page->Next]]

:::

This example creates a numeric range with a minimum of 0 and maximum of 10, displays the current value, provides a button to increment the value, and shows a link to the next passage when the maximum value is reached.

See the dedicated docs for detailed usage:

• Variables, ranges & arrays
• Data retrieval & evaluation
• Conditional logic & iteration
• Inputs and events
• Navigation, composition & transitions
• Asset management
• Persistence
• Localization & internationalization
• Helper functions reference

Campfire prints descriptive error messages to the browser console when it encounters invalid markup.

Twine links

Campfire recognizes Twine's [[Link]] syntax. The text inside becomes a button that jumps to the target passage. Use an arrow to specify a different target.

[[DISPLAY TEXT->PASSAGE NAME]]

Markdown formatting

Campfire accepts standard Markdown and extras from remark-gfm. This includes tables, strikethrough, task lists, autolinks and more.

Examples:

• Table

  Precede and separate columns with |.

  | NAME  | HP  |
  | ----- | --- |
  | ALICE | 10  |
  | BOB   | 8   |

• Strikethrough

  ~~THIS TEXT IS CROSSED OUT~~

• Task list

  - [x] FIND THE KEY
  - [ ] OPEN THE DOOR

• Autolink

  <https://twine-campfire.dev>

For more on internal classes and default styling, see Styling elements.

Further reading

• Twine documentation
• Campfire Storybuilder VS Code extension
• remark-directive
• i18next

AI Disclosure

See AI disclosure.