TiddlyWiki: An Open Source Alternative to Notion or Obsidian

In most cases I come across new software, use it, and then write about it. This post is a little different, because I have known about this software for a rather long time, I know the creator (the inimitable Jeremy Ruston), and I’ve even worked with him.

TiddlyWiki is a “non-linear personal web notebook,” as well as an exemplar project in the open source community. It can be a note-taking or information-ordering system in a similar vein to Obsidian or Notion, although TiddlyWiki was launched back in 2004. It can also be thought of as producing a wiki with interactive components.

However, as I discovered to my cost, TiddlyWiki has never had a strong “start here,” because it is not tailored to one specific task.  Obsidian, by comparison, has the advantage of a clear vision of what it does. TiddlyWiki bewilders you with options at first because it hasn’t been designed to be sold. The community focus is on adapting it to different use cases.

So I’m going to take the advice in this explainer and use TiddlyDesktop while mentioning that there are plenty of other arrangements. It is, after all, just HTML and JavaScript. Let’s get started…

By going to the GitHub release we can select the right version. For my old Mac, I’ll be using the mac64 version.

👁 Image

If you unzip this you will see an app in the folder, and you will need to do the standard security dance before running this:

👁 Image

When you run the app, you are confronted with this:

👁 Image

It looks a little austere with the lack of friendly installation options. We want to start with a new blank wiki.

👁 Image

Choose a folder, and a filename ending in .html, and you should now have a new “GettingStarted” page looking back at you.

👁 Image

Now, first of all a TiddlyWiki is a list of tiddlers. Yes, I know. This list, on the left side in this setup, is also referred to as the “Story River.” So we are looking at the “GettingStarted” tiddler.

The column on the right, or sidebar, is a general control panel for this TiddlyWiki project, which is called “My TiddlyWiki” right now because I haven’t altered it, but the current tiddler seems to be offering us the chance to alter that. To create our first tiddler, I’ll use the plus symbol in the sidebar, above the search box.

You may well see TiddlyWiki projects where the look and feel is not as above. But again, this is because TiddlyWiki isn’t in any way opinionated software — it is very customizable and will quickly do a Homer Simpson and slink backwards into the hedge to get out of your way. Kind of.

A tiddler is effectively a contents container. You can see the expected context controls in the top right corner (which have very slow responding tooltips). The sidebar includes a search for any tiddlers in your wiki. If you click the “retain story ordering,” you’ll get the open tiddlers as you start. If you make changes you might see a red circle, where currently there is a tick in the sidebar — this is the save button.

In TiddlyWiki, everything is a tiddler, even things that aren’t wiki content. And tiddlers are made up of fields. Each field is a key value pair. So the obvious fields are “title” and “text.”  Tiddlers can have tags, and have the usual internal modification data as if they were files. And you can add your own fields. So the fields provide the metadata for the tiddler.

For display of rich text, TiddlyWiki uses wikitext, which sadly isn’t exactly markdown but close enough.

OK, so when I hit the create tiddler button in the sidebar, I get a nice editing screen:

👁 Image

So I was easily able to make my first tiddler, with a tag. The process was much like using Obsidian, including writing internal or external links. For later images, I’ll split the text display so that you can see what wikitext would display.

👁 Image

Note that tags are not just stray metadata. Tags (like “tutorial” above) set up a bidirectional searchable relationship. So my tiddler “The NewStack.io on TiddlyWiki” is tagged by “tutorial,” and “tutorial” is tagging that tiddler. And guess what? The tag is also a tiddler. Did I mention that everything is a tiddler? Clicking on the yellow pill shows us the one member of “tutorial”:

👁 Image

I can create a specific type of tiddler, modified for a specific task. You can see here that I can make a journal tiddler from the available options in the sidebar tools menu:

👁 Image

Which if you think of it as a diary entry, looks like the new tiddler earlier on, but adjusted for a diary-like entry. Here is the top bit:

👁 Image

Of course, you might already think that it would be useful if you could create template tiddlers — and you can. However, we need to press things along to show what work you need to do, so you can appreciate if you would find this type of control useful.

We can use widgets, which are effectively extensions of HTML. And these can control various variables and the underlying mechanics. Below I can define a simple button.

👁 Image

Easy enough. What if I want to create a Contact tiddler template?  We can also create a widget that will trigger an action that responds to a button to create a new tiddler for us:

👁 Image

Note that I’ve defined the usual title and text fields, but added some contact specific fields, and the “Contact” tag. So what happens if I press the New Contact button? My new contact tiddler appears below the button tiddler in my story river:

👁 Image

So that created a new tiddler, with a tag and two fields entered for me.

I think you can see that this is a bit beyond the remit for products like Notion and Obsidian. I was able to start metaprogramming remarkably quickly. Again, this will either appeal to you, or you have already started reading a different article.

Once you use TiddlyWiki for yourself and approach the community with issues, you will be in the zone where the project is at its strongest. So if it does appeal to you, give it a try and see why this open source project is still going strong after 20 years.