How to Create a Portable Wiki with TiddlyWiki

Portable Wiki With Tiddlywiki Featured

TiddlyWiki is a very clever piece of JavaScript code that allows you to create interlinked notes which look and act like “Wikipedia Lite.” Any notes, add-ons, or themes you add are saved back into it. This quirk makes it incredibly versatile. You can also use it as a locally saved file, copy it to your favorite cloud service to access its contents from everywhere, or zip it and send it to a friend with an email. Since it is created with pure JavaScript and HTML, the only thing you will need to check it out will be your browser.

Read on to find out how you can create your own portable (Tiddly)wiki!

Setting up TiddlyWiki

Visit TiddlyWiki’s official site. Scroll down and check the “Getting Started” section. Choose your operating system, your favorite browser, and pick the solution you prefer for your OS and browser combination.

Portable Wiki With Tiddlywiki Tiddlywiki Site

Since we are using Firefox, we decided to go with “timimi.” As suggested by the provided instructions, we visited the project’s page at GitHub and downloaded the latest release.

Portable Wiki With Tiddlywiki Download Timimi

We then installed it with:

cd linux-firefox
Portable Wiki With Tiddlywiki Install Timimi

The second part of the equation is a browser add-on that can connect to the Timimi client. We added it to our Firefox installation from its page at Mozilla’s official add-ons collection.

Portable Wiki With Tiddlywiki Timimi In Firefox

With the hard part out of the way, it’s time to start using TiddlyWiki.

Set Up Your Wiki

Go back to TiddlyWiki’s site and, from the “Getting Started” entry, click on the big green “Download Empty” button.

Portable Wiki With Tiddlywiki Download Empty

Save the file wherever you like. Next, open it in your browser. (Press Ctrl + o in your browser to open the file.)

One thing you should know is that every entry in TiddlyWiki is displayed as a separate, individual card, known as a “tiddler.” The first thing you will see is the “Getting Started” tiddler. You can play around with the “GettingStarted” tiddler, or click the “+” button at the side to start a new tiddler.

For every tiddler, you can enter the title and a subtitle you want.

Notice the icon with a “tick” in a circle on the right side under your TiddlyWiki’s title and subtitle. Whenever you make any changes to the contents of your TiddlyWiki, this icon will change color to show that there are unsaved updates. Clicking on it saves the changes to the TiddlyWiki file.

Portable Wiki With Tiddlywiki Personalize Tiddlywiki

Working with Tiddlers

While still looking at the “Getting Started” tiddler, note the “Default tiddlers” field. You can use this as a list of the tiddlers you want to show up whenever you open your TiddlyWiki. You can add “placeholder” links to them and don’t have to create the actual tiddlers beforehand.

There are two ways to create links between tiddlers: you can use two words for their name but type them attached as one while keeping their initial letters capitalized – just like the “Getting Started” tiddler. Or you can enclose them in double brackets. The brackets approach allows you to use whatever name you wish and also include spaces in it, but is a bit more cumbersome. You can see both methods in our screenshot.

Portable Wiki With Tiddlywiki Tiddler Links

After we added three links to nonexistent tiddlers and clicked on them, TiddlyWiki showed empty placeholder tiddlers for them.

Portable Wiki With Tiddlywiki Tiddler Placeholders

If you click on the “X” icon at the top right of a tiddler, you cancel any changes to a tiddler. In this case, clicking this would discard the placeholder tiddlers.

By clicking the “pencil” icon right next to the “X,” you can edit a tiddler. This will also turn the placeholder into an actual tiddler.

Portable Wiki With Tiddlywiki Edit Tiddler

While editing, the pencil “edit” option is replaced with a trashcan, allowing you to delete a tiddler. The other two buttons, for accepting or discarding any changes, remain intact (but for some reason their placement changes).

At the top of a tiddler card, you will find its title. Right under that is a field you can use to enter tags to categorize your tiddlers’ contents, organize them in groups, and use as navigational points in your TiddlyWiki.

Portable Wiki With Tiddlywiki Tagging

Following that is the equivalent of a fully-featured markdown editor you can use to write down and style your notes. It’s here where you do the bulk of your writing and editing. If you have used any text editor during the last decade, this works in the same way.

Portable Wiki With Tiddlywiki Content Type

Under the editor, you will find a pull-down menu that allows you to define the content type of your tiddler, as well as the option to add custom fields to it. Feel free to ignore both options for now.

As you can see, TiddlyWiki has everything you need: add some notes, edit them, and link them together. Turning any phrase into a new tiddler is only a matter of enclosing it in double brackets. You just have to bring the single file with you to have your own portable personal wiki.

Odysseas Kourafalos
Odysseas Kourafalos

OK's real life started at around 10, when he got his first computer - a Commodore 128. Since then, he's been melting keycaps by typing 24/7, trying to spread The Word Of Tech to anyone interested enough to listen. Or, rather, read.

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox