Twine, Twee, Tiddlywiki

It seems well documented that Twine is based on TiddlyWiki under the hood. From what I understand, Twine is merely the GUI editor for the Twee compiler. So, somehow Twee is powered by TiddlyWiki.

Now I’m looking at the twee core GitHub, and I’m confused. Apparently, Twee is a Python script. As far as I understand it, TiddlyWiki is completely front-end JavaScript. I’ve used TiddlyWiki enough to see its own tiddler markup spliced into CSS and JavaScript in a pretty strange combination. So, how is Twee built on TiddlyWiki?

I notice this comment in tiddlywiki.py:

So, is Twee essentially a pared-down Python port of TiddlyWiki? Or does Twee compile to JavaScript, so that a Twee/Twine game actually is a standard TiddlyWiki, perhaps with an additional or altered front-end UI?

I’m not a programmer. I know this would probably be immediately if I were, so I apologize for asking stupid questions. I’m a code-literate designer, and I’m working with TiddlyWiki in class. I might want to work with Twine in some way if I can get away with it, or else find out what is involved in making a new TiddlyWiki front-end from scratch.

This is my understanding, yes. The compiler is not based on TiddlyWiki, the output is.

In the Twine 1.x branch the version of Tiddlywiki is quite abit behind mainline Tiddlywiki. There’s also been enhancements to the macro writing. Twine 1.x is python based so used the tiddlywiki python classes to output it’s single .html files… embeded inside is the javascript to parse the twee code. I think that javascript “read time” engine is also called “tiddlywiki”.

I don’t know twine, the “front-end”, but I’m using twee with source code (in ascii text), and as said, twee is a compiler which is parsing this kind of code:

[code]:: Start

  • Start the game: [[1]]

:: 1

blabla
[/code]

into javascript suitable for tiddlywiki (and it builds a complete html file with js code and tiddlywiki stuff). What is sure is the final output is not containing the original source code. I guess the twine front-end has its own format, and export to twee source code before compiling to html.

Viewing the source of some Twine games in the browser (not the twee source), I can see that there are some differences in how the HTML tags for tiddlers are formatted in Twine games compared to standard Tiddlywikis.

This appears to be a tiddler definition from “Twine Starter” by Bharat Khiani:

<div tiddler="Eat potatoes" tags="" created="201411241721" modifier="twee" twine-position="1363,571">you eat boiled potatoes with salt and pepper\n\n[[&lt;&lt; Back|previous()]]</div>

And here is a tiddler from the HTML source from the Tiddlywiki I made out of the text of the novel Phantastes:

[code]

<<<
"Ev'n the Styx, which ninefold her infoldeth
<html>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</html>Hems not Ceres' daughter in its flow;
But she grasps the apple—ever holdeth
<html>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</html>Her, sad Orcus, down below."

-- Schiller, //Das Ideal und das Leben//
<<<
[/code]

Notably, the Twine HTML uses an attribute called “tiddler” instead of “title” and does not insert the actual displayed text between “pre” tags.

Juhana, stormrose, farvardin – thanks for explaining. Interesting that the HTML and JavaScript is compiled, because I typically think of TiddlyWiki as a mostly a UI instead of a back end system. (I’ve even experimented with adding tiddlers by typing them directly into the HTML file in a text editor, but the standard way to add tiddlers is simply to run the HTML file in a browser and use the default “new tiddler” interface.)

I’m still confused about how the UI is implemented. Based on the comments in the HTML of Twine games, I’m thinking that Sugarcane is the specific version/implementation of TiddlyWiki used for the Twine/Twee interface.

TiddlyWikis can import tiddlers and collections of tiddlers from other wikis, so I wonder if an IF-capable interface could be developed in HTML/JavaScript and then imported into standard TiddlyWikis to give them the right appearance and functionality. Then the story writer would simply use the standard browser interface to add tiddlers representing nodes of text that behave in various ways, perhaps based on tagging. Of course, this wouldn’t compete with actual Twine – it would probably be less flexible and have a more open and less narrative feel. Maybe I’ll try doing something like this – see how it goes.

Thanks for letting me brainstorm out loud.