The easiest starter kit for building SugarCube stories with Twine / Tweego.
- Automatic Tweego & SugarCube Install ✅
- Fully Configurable ✅
- Automatic Builds ✅
- Live Reload with Browser-Sync ✅
- CSS Injection (no full reload) ✅
- Directory for custom fonts ✅
- Directory for third-party scripts ✅
- Up to date packages and frameworks ✅
Built in to this template are a number of frameworks to get you going.
- Vite — Fast build tooling
- TypeScript
- Sass with Modern CSS Support
- Browser-Sync — Live reloading
- Node.js 18+
- Clone the repository
npx degit nijikokun/sugarcube-starter <project-name> - Install modules
npm install - Start developing
npm start
New to SugarCube?
- Check out our SugarCube Basics
| Command | Description |
|---|---|
npm start |
Start development server with live reload |
npm run dev |
Same as npm start |
npm run build |
Production build to dist/ |
npm run tweego |
Run tweego manually |
npm run tweego:install |
Install/reinstall tweego |
.build/ # Build scripts
├── dev.ts # Development server
└── tweego.ts # Tweego installer & runner
src/ # Source files
├── assets/
│ ├── app/ # Your JS/TS and SCSS
│ │ ├── index.ts
│ │ └── styles/
│ ├── fonts/ # Custom fonts
│ ├── media/ # Images and videos
│ └── vendor/ # Third-party scripts
├── story/ # Twine .twee files
└── head-content.html
dist/ # Compiled output (auto-generated)
.tweego/ # Tweego installation (auto-generated)
How do I disable Debug View?
Debug View is automatically enabled in development and disabled in production builds (npm run build).
To disable it in development, create src/story/PassageReady.twee:
:: PassageReady
<<run DebugView.disable()>>How should I initialize variables?
Use the StoryInit passage in src/story/Start.twee:
:: StoryInit
<<set $health = 100>>
<<set $maxHealth = 100>>
:: Start
HP: <<= $health>> / <<= $maxHealth>>How do I install macros?
Macros scripts and styles go into src/assets/vendor
How do I link to media files?
To reference images at src/assets/media/<asset_path>:
src/assets/media/favicon.png→media/favicon.png
Example in HTML:
<link rel="icon" type="image/png" href="media/favicon.png" />How do I add Google Analytics?
Paste into src/head-content.html:
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TAG_HERE"></script>Replace YOUR_TAG_HERE with your Google Analytics ID.
Official Resources
Third-Party Macros
- Chapel's Custom Macro Collection
- Hogart's SugarCube Macros and Goodies
- SjoerdHekking's Custom Macros
- GwenTastic's Custom Macros
- Cycy Custom Macros
- Hituro's Macro Repository
- HiEv SugarCube Sample Code
- Akjosch SugarCube Resources
- Mike Westhad SugarCube Resources
- HiEv Universal Inventory
We are grateful to these individuals for their ideas and contributions.
Licensed under the MIT License.