TiddlyWiki Lightning Talk

init 2025-02-14 mod 2025-03-05

Foreword

I recently gave a talk on TiddlyWiki. I made an outline (at the bottom) and spoke about my use of the software. This is a written version of the talk's contents.

Intro

TiddlyWiki is a wiki. It's all in one file - your data, the chrome, the styling, the JavaScript. This makes it very unique (there are similar projects like Feather Wiki). I think everyone should have a personal wiki and knowledge base. I maintain 2, and use them every day.

TiddlyWiki is a quine, in that saving it produces an HTML file of it. It's also older than Firefox, having been around since September of 2004.

You can also run TiddlyWiki as a traditional server, on top of Node.js. I prefer the single-file wiki for reasons we'll see below.

Personal Use Cases

I use my wiki to maintain my notes, ideas, to-dos, thoughts, packing lists, movie and soda reviews, recipes, projects, and everything in between. I keep it all in a git repo, where my computer and other devices automatically pull and push to it on a schedule.

I use TiddlyDesktop on my Mac, and Quine on my iOS devices. Tiddloid is an app for Android, but I haven't used it very much.

A script runs after every push on my server to generate my personal website. This looks for tiddlers tagged "Public" to generate a new wiki (and static versions of files).

Getting Started

To get started, go to TiddlyWiki.com and download the "Blank" wiki (scroll down until you find the green "Download" button). This HTML file is the entire wiki software for TiddlyWiki.

Once you open the wiki (in your web browser, or in a client like the ones above), you'll be at the Getting Started page. Here we can edit the title and description of your wiki. Notice how TiddlyWiki reacts instantly to title changes, updating them in the sidebar of the wiki.

Note that you should open the wiki in a client, or be very conscious of the "save" state of the wiki. The red circle in the right sidebar will be red when the wiki needs to be saved to disk. A client will catch the download requests and replace the file on disk. If you're using a browser, you'll just get a new HTML file in your downloads.

Each "file" or "note" or "card" is called a tiddler in TiddlyWiki, a British reference to a small fish.

Editing the Wiki

Delete the starting tiddlers from Getting Started and close it to clear the story river (the currently open tiddlers). We can now add new tiddlers with the plus button. The philosophy of tiddlers states that each tiddler should be as small as possible. For example, if we were making a Wiki about dogs, we'd make one tiddler for each dog. We'd also have each asset - images, video, documents - be a tiddler.

The tiddler editor toolbar has a closed eyeball on the far right. Click this to open up a live preview (I find this handy).

We can tag tiddlers in the tag area (for example, "Dog"). We can link to tiddlers using [[wiki style]] links and embed them within each other using {{curly braces}}, something called "transclusion". The latter is a creation by the inventor of Hypertext, Ted Nelson. When we're done editing a tiddler, don't forget to hit the checkmark in the upper right.

Once we have our collection of tiddlers, we can start using TiddlyWiki's powerful grouping and filtering tools. For example, to list all "Dog" tagged tiddlers, we can put some wikitext in an "All Dogs" tiddler: 

<$list filter="[tag[Dog]!is[draft]]>
<h2> <<currentTiddler>> </h2>
<$transclude mode="block"/>
</$list>

This little snippet uses the <$list> widget. It's like an HTML element, but has special properties - it takes a filter that can slice and dice through the tiddlers in our wiki. Here, we're filtering for tiddlers tagged "Dog" and ones that aren't drafts (tiddlers being actively edited).

Try adding a new tiddler tagged "Dog". Notice that after saving it with the checkmark, it's added to "All Dogs" automatically. TiddlyWiki widgets automatically re-render themselves, reacting to changes to the wiki.

We can also re-order a tag. Click on the "Dog" tag under any of our Dog tiddlers, and click and drag the items in the dropdown. Notice how "All Dogs" also reflows in response. We can also sort a <$list> filter if we want.

Going Pro

Let's start customizing the non-content parts of the wiki. Make a new tiddler called "stylesheet". Put this as its contents: 

body.tc-body {
  background-color: #ff880033;
}

and give it the tag $:/tags/Stylesheet. Save it. Cool! We can add new styles to TiddlyWiki, and use the power of the web inspector to find the various types of elements we can style.

Let's go deeper and customize the chrome. Make another tiddler called "down the rabbit hole" and put this as its contents: 

<<tag $:/tags/SideBarSegment>>

This lists all the tiddlers tagged $:/tags/SideBarSegment. Notice how we see the elements of the sidebar. We can also add our own tiddlers here. Let's go back to editing "All Dogs", and add $:/tags/SideBarSegment to that tiddler. We can use this to customize the UI of our wiki.

Wilder Use Cases

Using these tools, I've integrated TiddlyWiki deeply into my digital life. I use a Hammerspoon script to host TiddlyWiki as a custom sidebar on my computer desktop:

I also use TiddlyWiki and a Siri shortcut to automatically set my phone wallpaper to a page powered by my TiddlyWiki. This is really nice for keeping a calendar, the weather, a shopping list, or anything else close to hand:

I use my phone's Action Button to show a menu. The first option on this menu lets me "Peek" at the wiki (in a read-only way) from anywhere:

This also works great with Assistive Touch on Apple Vision Pro:

Conclusion

I hope this has inspired you to try TiddlyWiki for yourself. Personal knowledge apps are experiencing a renaissance, and I think TiddlyWiki is a great option in this space.

Original Talk Outline

Included here is the original outline for the talk I gave.

  • Quick explanation
    • It's a wiki
    • All in one file, including your data and the Chrome and the JS.
    • It's the only piece of software I have found like it.
    • I think everyone should have one. Hopefully, I can convince you of that.
  • Show my personal use cases:
    • Get a screenshot of the website.
  • Jump into a blank wiki:
    • Go to TiddlyWiki.com.
    • Download a blank wiki.
    • Open it in Safari.
    • Hit cmd-+ to make it larger for display.
    • Start editing it.
  • Editing the wiki:
    • We need a theme! Dogs are cute and fun. Maybe those?
    • Create a sample tiddler for each dog. Explain that tiddlers are like notes or files.
    • Show that you can edit the tiddler, giving it a title and body.
    • Tag the tiddlers "Dog".
    • Maybe drag in images, show that this transcludes them:
      • Show images in the "Recent" tab.
    • Make an "all dogs" page that uses <$list filter="[tag[Dog]!is[draft]]>. It should first link to them with <$link/>.
    • Then make each dog in the list have an <h2> wrapping it. Then transclude each dog with <$transclude mode="block"/>.
    • Add a new Dog to prove that it works when I save it if it's tagged correctly.
    • Show that you can reorder dogs in the tag dropdown.
    • Close all the tiddlers with the "Close all" tool in "More".
  • Going "pro”:
    • Make another tiddler called "stylesheet" and tag it as a stylesheet. Set the background to a nice aesthetic orange:
body.tc-body {
  background-color: #ff880033;
}
  • Make another tiddler called "down the rabbit hole" and look for all tiddlers that are sidebar tiddlers:
    • Use <<tag $:/tags/SideBarSegment>>.
  • Show that you can jump in and edit these. Explain the "shadow" concept.
  • Delete the edited shadow tiddler, show that it goes back to the built-in one.
  • Show that you can tag your own tiddlers with these system tags to put them in the UI. Finish by putting the dogs in the sidebar.
  • Even wilder use cases:
    • Get a screenshot of my personal sidebar.
    • Get a screenshot of my phone wallpaper.
    • Show off my Shortcut "peek" function (maybe in video format) on the phone.
      • Show the peek thing on Vision Pro, too? That could be fun!
    • Show off my prototype 3D wiki on the playground page.
  • Wrap Up
    • Encourage people to try TiddlyWiki. Mention it has TiddlyDesktop (the app) and Quine on iOS.

Material:

Personal Use Cases (1)

Demo

Wilder Use Cases