TiddlyWiki Everywhere

30th June 2024 at 8:59pm

As I've written previously, I really like TiddlyWiki. It's future-proof (it is written in itself, and everything is open source), and the community is friendly[1]. I maintain a personal wiki (phajas-wiki) as my life operating system.

TiddlyWiki's strength - its default flat HTML file[2] - is also its weakness. How can you easily integrate a giant HTML file with the rest of your computing life? I've been working on some ways to more deeply use TiddlyWiki with my computers to let me "live life out of the Wiki".

Background and Infrastructure

What is TiddlyWiki?

TiddlyWiki is a wiki that lives entirely in an HTML file. Your wiki data, the renderer, the user interface, and any plugins that you've installed are all inside this file. I use TiddlyWiki as my personal knowledge management system, task tracker, and wiki. TiddlyWiki has been around since September 2004 (older tools tend to last longer - the Lindy effect in action).

Clients

While TiddlyWiki works well in the browser, it's nice to have a client. Clients can interact with TiddlyWiki's "Download Saver" option, which will replace the on-disk wiki whenever the contents change. On the desktop, I use TiddlyDesktop. On my other devices, I use Quine. It is a good no-frills TiddlyWiki client.

Keeping it in Sync

I want my wiki in-sync on all my devices. Version control is a must if I'm using something as my outboard brain[3]. To accomplish this, I've done a few things:

  • I store my wiki in git
  • On my computers, I have a script that runs at an interval to automatically commit, pull, merge with upstream changes, and push my Wiki
  • On my other devices, I have Siri Shortcuts that mimic the script. I have one for fetching the Wiki whenever I launch some apps on my phone (browser, mail client, RSS reader). I have another for pushing the Wiki that runs when I close the Quine app. I use Working Copy as my git client

This setup keeps the wiki up to date on all my devices.

Avoiding Conflicts

Using git is great, but there may be conflicts given my setup. Consider if:

  1. I edit on my computer
  2. I edit on my phone
  3. I get back to my computer, and edit without reloading from disk

This happened once, so I needed to solve it (Use Systems You Can Trust). I also run some Hammerspoon tricks to kill TiddlyDesktop when my computer sleeps, and launch it again when the computer wakes up. This lets me jump back in when I get to my machine with any changes that I may have made on another device.

Using TiddlyWiki for Everything

Storing Data

I store my dotfiles publicly, but I have other data I want to keep private. I keep this in the wiki. I often want to use this data with scripts. I wrote a simple tiddlywiki_render script (which wraps the tiddlywiki command line program) that gives me the plaintext version of any wiki entry.

Heads Up Display

I have some content from my wiki that I always want to be visible. A calendar, the current project I'm working on, and any scratch content (shopping, packing, tasks).

In the context where I'm showing this, I want to hide the rest of TiddlyWiki's UI and chrome. I have a simple tiddler which is always visible[4] that will apply some selective styling:

<$list filter="[[$:/phajas/hud/hud_contents]get[text]!suffix[NONE]]">
<$list filter="[[$:/phajas/hud/hud_contents]get[text]]">
<div style="z-index: 9999; padding: 0px; position: fixed; left: 0px; top: 0px; min-width: 100%; min-height: 100%; background-color: #2d2d2d;">
<$transclude
$tiddler=<<currentTiddler>>
$mode=block
/>
</div>
</$list>
</$list>

This means "if the text of $:/phajas/hud/hud_contents does not end with NONE, transclude the tiddler it points to". $:/phajas/hud/hud_contents has the contents HUDNONE on-disk so that I can still use the wiki normally. I use the suffix preview to avoid issues with simple text replacement .

On my Mac, I use a Hammerspoon script to put this next to my open windows. This reloads every time the wiki changes on disk, so it's always up to date. My window manager (yabai) keeps an inset area on the left for my wiki's contents. Before rendering the wiki's HTML, I replace HUDNONE with Heads Up Display Desktop. This loads my "Desktop" heads up display, with the styling from above. I also have another text replacement (for the string HUDOPTIONSNONE to HUDOPTIONS_SIDEBARWIDGET). This applies some desktop-specific styling that I'd like on the Heads Up Display.

On my phone and tablet, I have a Siri Shortcut (it runs after the "git pull" shortcut described above) that updates the wallpaper with the Heads Up Display. It grabs the wiki file, replaces HUDNONE with "Heads Up Display Phone", and then makes an image using the "Image from HTML" action. This is set as my home screen wallpaper, letting me always keep an eye on the Heads Up Display.

Text Expansions

I use TiddlyWiki as a text expansion tool. I tag any tiddler which acts as a text expansion with Expansion, and name it with the Expansion/ prefix and the short text I want as a suffix. For example, to type today's date, the tiddler is called Expansion/today. The body of the tiddler contains the wikitext to render to generate the expanded text.

On my computers, I run a script which takes these and formats them into YAML for use with the Espanso text expander.

On my phone and tablet, I show a Heads Up Display of a list of expansions. Tapping any of these copies the expanded text to the clipboard. I show this list with a Siri Shortcut that I can run from the dock / Action Button.

Public Notes

I use TiddlyWiki to power my public notes. Another script is run on an interval which extracts the tiddlers I want to be Public. Then it imports and publishes them as a fresh wiki for hosting on my website (and rsyncs that over to my web server). You can read these notes on /notes.html.

Projector (for at a glance viewing)

This is my newest, and most exotic, use of TiddlyWiki. I have an inexpensive projector attached to my computer in my home office. Using the "Heads Up Display" technique from above, I can show any tiddler on the projector. I am still figuring out what sort of tiddlers are most useful to see at a glance in the room.


  1. The only downside to TiddlyWiki is its inexplicably small community. I am not sure why there aren't 10x or 100x more users - it's the ultimate app.↥︎

  2. I know you can self-host TiddlyWiki, but I don't want to have an internet connection all the time. I have tried TiddlyPWA, which is an awesome project, but it has some restrictions for living life out of the Wiki. If I could use TiddlyPWA and a flat file Wiki, I would be very interested.↥︎

  3. I cribbed this term from Merlin Mann.↥︎

  4. This is as simple as tagging the tiddler with $:/tags/TopLeftBar.↥︎