Folder Structure for Twee?

Hi! I’m starting out with Twee after experimenting with Twine for a long time.
I’m using VSCode with the Twee Extension and Live Server, but I’m a bit confused about the ideal folder structure for the project, and where to output the html file (using TweeGo) relative to those folders.

I plan on having images and sound effects, as well as various .tw files, of course.

Any insight or suggestions would be greatly appreciated!

So you essentially want a source folder that Tweego can find, with the relevant .tw / .js / .css files (you can have subfolders in there, no problem), and an output location. Both these locations should be indicated in the command when you tell Tweego to compile.

I have a Tweego folder where everything is already structured, as in input+tweego+output (it only has the SugarCube format, but you can add to it in the relevant folder there).

And here’s a screen shot of one of my projects:

The extra folder has all the assets of the game.


I don’t use Twee but I think the same principles apply.

I have a project folder. “Elements” is a work folder for media used and unused.

I publish index.html to the “Publish” folder which contains a “media” folder with all in-use media.

All media is called relative to this folder (Chapbook example, yours may differ) basically media/[media filename]

sound.ambient.aquarium.url: 'media/Aquarium.mp3'
sound.ambient.tide.url: 'media/Rising Tide.mp3'
sound.ambient.cafeteria.url: 'media/cafeteria.mp3'

Then I compress index.html and the media folder together for release. Here it’s, but you can name it as your project name.

Screen Shot 2023-06-06 at 5.41.12 PM

In my example/structure, your zip file should have index.html and the media folder in the top level (showing it unzipped):

Screen Shot 2023-06-06 at 5.48.57 PM

1 Like

Interesting, thank you! I’m still a bit confused based on the info you sent.
In your folder screenshots, where do you keep your .tw files? (Beyond Base and Widget)
And can you show an example path to link to media?
Thank you!

Thank you for the info! So you duplicate your media between your in-development folder and your release folder?

Yes, “elements” is a folder where I gather media I may or may not use. If something is changed or removed from the game I throw it in there just to get it out of the way but also keep it all together in case I change my mind. Kind of a local project resource folder/trash bin. Like I’ll keep the full music track in elements and then if I chop it into pieces for the game those go into “media” but the entire track is in elements.

You actually do need to duplicate your in-use tracks in the “media” folder so the html file can access them with your relative urls. My “elements” folder is just for bits I don’t yet want to delete or haven’t been processed to use in the game yet.

1 Like

In the docs folder, in src.

the path to media in this case is extras/relevant-file.extention

1 Like