twine sugarcube template
NOTE: this has not been updated to work with sugarcube 2.37. update tba!
now updated for 2.37!
---
nothing fancy, just a quick ui template slapped together with some old code i found while digging around my codepen. requires some css / html knowledge.
there are some comments in the file, but my coding process is generally quite messy. feel free to give a shout about any questions you may have!
edit: added a live demo of the template that you can click around in to test things out. updated to the latest version (v3) as of writing this.
instructions:
- download index.html, open in twine.
- if you use tweego, download the .zip file, drop it in your folder of choice, and open directly into visual studio code.
- have a poke around in the code! feel free to modify and use it however you wish.
useful links:
Download
Click download now to get access to the following files:
Development log
- updated for 2.37.3Aug 21, 2025
- update: centering dialog boxesNov 15, 2021
- update to mobile + menu adjustmentsOct 03, 2021
- minor updateJul 20, 2021
Comments
Log in with itch.io to leave a comment.
Hello, thank you very much for your great template. I'm enjoying it a lot for a small project.
As I am completely new to twine, I'm pretty much progressing through trial and error.
I started from your html file which is probably my mistake since I'm customizing the look and feel by adding a HUD sidebar, keyboard navigation...
It seems that the only way for me to add js or css is by adding <style> or <script> tags in the StoryInterface passage, my eventual Story JavaScript or StoryStylesheet aren't taken into account.
It works but as a developer I'm not loving that at all !
I guess that's because the ones from the theme are used instead, but I can't see them and thus edit them in Twine, should I have used tweego instead of working on your html in Twine ?
In fact I really need to add some macros, but since I can't get Story Javascript passage to be taken into account, it seems that I can't do it... Can someone guide me ?
the html file can be imported into twine's default editor via the "import from file" option, which should give you access to the "Edit Story Javascript" and "Edit Story Stylesheet" options when clicking on the story name (and not floating around with the other special passages like StoryInterface etc). not sure if this is the case, but if you're creating new passages manually and naming them story javascript or stylesheet i don't think those get combined without the use of tweego to compile them. i'm not sure what else might be causing this issue though without more info on how it looks, feel free to dm me on twitter or tumblr if this continues to be a problem !
Heya! I'd like to know how to edit the "Settings" dialog box because I can't seem to find the code for it. Can you clarify where the code is?
heyo! the setting API is probably what you want to look at, it goes directly into your story's javascript https://www.motoslave.net/sugarcube/2/docs/#setting-api
My thanks! ^^
I love this template, thank you so much! However I do have a question on something that I can't figure out.
Whenever I load the template, I have to change "#story" to something else so Twine doesn't terminate the loading (probably because of the updated SugarCube). However, now the menu toggle won't work. Do you know of any way to fix this, or is this just a problem with the outdated version? I don't know much about coding lol
ur in luck! i just updated the template to the newest version of sugarcube, so give that a go and hopefully it should work 🫰
Thank you!
thanks for letting me know! i'll put a note up in the description for now until i can get around to fixing it :)
just started planning out my first twine project and this was quite helpful! Thank you so much
Thank you so much, adore this template!
I love your template but I can't figure out how to add another border around the text. Help.
Thank you for releasing this beautiful template! Just a quick question: how can I change the toggle icon for the menu? I cannot find it for the life of me 🤦♀️
hello! i wrote up a small tutorial on tumblr for customizing the template - instructions on changing the toggle icon should also be there, so hopefully that helps !
Thank you for creating such an excellent template! 💗
This is so funny, I play Wayfarer so often, and was wondering how you developed such a beautiful UI! So ironic that I find one of my favourite interactive fiction creators on the page of a UI template I had chosen to use for my very own Twine project!