ThyWeaver

A starter template for a modern Twine development workflow

Runtime Support

---

Why?

For some time now, I have been using SugarCube Starter by nijikokun, he did a amazing job, but coming from using Vite, the slowness of Webpack really started to bother me

Then, as a bit of a challenge to myself, I wanted to remake it without Webpack

You can consider this a "spiritual successor" (Event though, as far as I know, Nijikokun still is working on SG Starter), and it's mostly based on it

Features

• Automatic Tweego setup (Thanks to Tweenode)
• Includes updated story formats, like:
  • SugarCube v2.37.3
  • Harlowe v3.3.9
  • Chapbook v2.2.0
• Highly customizable, easy to configure
• Lighting fast automatic builds
• Local live reload server
• Directory for custom fonts
• Directory for third-party scripts
• Modern workflow

Tech Stack

• Rollup (In place of Webpack)
• Typescript
• SWC (In place of Babel)
• PostCSS with:
  • Tailwindcss
  • SASS
  • Modern CSS support (If you want to use vanilla CSS)

Requirements

• Bun or Node 22
• pnpm (NPM probably works, but is untested, same for Bun package manager)

For using with Node, highly recommend using Fast Node Manager (fnm)

Getting started

It's recommended to use degit to clone and detach from this repo or use the Github template

1. Clone this repo

pnpm dlx degit greatsquare0/thy-weaver <project-name>

2. Install its dependencies

pnpm install

3. Generate your story IFID, you can use TADS IFID Generator Then place your new IFID on :: StoryData passage under ./src/story/StoryData.twee, in the ifid field

:: StoryData
{
  "ifid": "<your-new-ifid>",
  "format": "SugarCube",
  "format-version": "2.37.3"
}

4. Start developing

pnpm run dev 

For node, prefix the command with node: (example: pnpm run node:dev)

By default, this template comes setup for SugarCube If you are new to it, check out Nijikokun SugarCube Basics

Commands

Command	What it does
pnpm run dev	Starts development server and watches src/ directory
pnpm run dev:withProd	Starts development server and watches src/ directory in production mode (NODE_ENV=production)
pnpm run build	Compiles and bundles the story in the dist/ directory
pnpm run build:withDev	Compiles and bundles the story in the dist/ directory without production mode

The same commands prefixed with node: have been added for Node 22 support (example: pnpm run node:dev)

Directory Structure

thy-weaver
├── .build/ # Where all build scripts are located
├── .vscode/ # Some recommended VSCode configs
├── .prebuilt/ # Staging directory, files are processed and moved to dist/ (Auto-generated)
├── .tweenode/ # Tweego setup folder, handled by Tweenode (Auto-generated)
├── dist/ # Compiled output directory (Auto-generated)
├── src/ # Story and Story Assets directory
│   ├── assets/ # Story Assets (Scripts, Styles, Media, Fonts)
│   │   ├── app/ # Story JavaScript and Stylesheets
│   │   │   └── styles/ # Story Stylesheets
│   │   ├── fonts/ # Static Fonts to be hosted / distributed
│   │   ├── media/ # Images and Videos
│   │   └── vendor/ # Third-Party Scripts and Modules that aren't available on NPM
│   └── story/ # Twine .twee files
├── tailwind.config.ts # Tailwind configuration
└── thyweaver.config.ts # Builder and dev server configuration

Documentation

Check out the docs, available here (WIP)

---

Planned features

• Add Node 22 support
• Add Deno support
• Add support for packaging dist directory.
• Add support for compiling to Electron or Tauri application.

Want to suggest a feature? Create a Github issue with your suggestion

Helpful Resources

Starter Kit Resources

• Nijikokun's SugarCube Basics

Official Resources

• SugarCube Docs

Third-Party Resources

• Chapel's Custom Macro Collection
• Hogart's SugarCube Macros and Goodies
• SjoerdHekking's Custom Macros
• GwenTastic's Custom Macros
• Cycy Custom Macros
• HiEv SugarCube Sample Code
• Akjosch SugarCube Resources
• Mike Westhad SugarCube Resources
• HiEv Universal Inventory

Huge thanks to:

• @Nijikokun, a lot of this project is based on his SugarCube Starter