How to develop a custom toolbar like Harlowe's?

The reason you can’t find any documentation about extending the User Interface of the existing releases of the Twine 2.x applications (eg. the versions pre 2.4) is because there isn’t any, as currently extending that UI is done via a “hack” which exposed parts of the CodeMirror widget’s internals (1).

For examples on how Harlowe builds it’s Twine v2.3.x implementation I would look at Line 24 and lines 76 to 83 of the Makefile for the v3.2.3 tagged build.
For examples on how Harlowe interfaces with the application’s UI I would look at the files in the codemirror folder of the v3.2.3 tagged source.

The expected v2.4 and later releases of Twine 2.x will include a formal method of extending the application’s UI, and information about this can be found in the EXTENDING.md file of the Twinejs project’s GitHub repository. There are also v2.4 and “Extending Twine” related issues in the repository’s Issues section.

(1) so that Harlowe could add its “toolbar” and code highlighter functionality, and which is why no other Story Format currently has such features.

1 Like