Chris Salter explores the Tiddlywiki software
Wikipedia is one of the top ten websites on the internet, in term of unique users. It has more than five million articles and pages in English, and a large number of these pages are also translated into different languages. The site allows easy access to the world’s knowledge and allows anyone to update specific articles as and when more information is available, presenting everything in a clear, concise format.
The idea of the wiki is to create different articles or pages linked together by a number of links within an article or for searching for each article individually. They’re usually collaboratively edited and are usually edited using a simplified markup language. All the editing is done directly on the website itself. Wikis tend to be run on a web server, storing data in a database and using PHP or similar to display data, though there are some exceptions.
Wikipedia is collaborative in nature, but that doesn’t stop wikis being locked down and only accessible to specific people. They can be a great way of storing information that can be linked together in specific fashion. Wikis are ideally suited for storing related information.
As there are many different wiki software programs available, how do you know which one to use? The majority of them run on a web server and are accessed from a browser. Some require you to set up databases and therefore can require some knowledge to get used to. Yet it needn’t be this hard to create your own wiki, and that’s where Tiddlywiki comes in. This article covers Tiddlywiki in more detail, enough to get you started using it for your own work.
Getting Started
Unlike other wikis, Tiddlywiki is a single HTML file; the code for running the wiki is contained within the file itself. This means that you can happily carry it around on a USB stick or access it via a cloud sync service and use it without any extra software. The empty wiki file runs using JavaScript and can therefore be accessed in a standard browser on your desktop or mobile device.
Tiddlywiki can be downloaded from the Tiddlywiki website (www.tiddlywiki.com), itself a Tiddlywiki file. Note that a blank Tiddlywiki file is 1.5M. While internet speeds are generally increasing, this doesn’t really lend itself well to be accessed across the internet, especially if you start adding in file attachments. See the node.js boxout if you want to consider this; running Tiddlywiki under Node.js saves all the tiddlers (equivalent to a Wikipedia page, though Tiddlywiki is all viewed in a single page) separately.
On downloading, the website detects the browser and gives you some warnings on how saving the file works. Because a Tiddlywiki is a local file, some browsers’ security settings prevent saving the file directly and will instead download a copy of the file (with the changes) each time you save the file. As Tiddlywiki by default tries to save after every change to a tiddler, this means you could be downloading a lot of files regularly.
However, there are some workarounds: by using Firefox and the TiddlyFox plug-in, the file can be saved directly from the browser without interaction from the user. There are some thirdparty options as well: TiddlyDesktop is a desktop program for Windows, Mac and Linux, designed to interact and save Tiddly files without any user interaction. If you don’t want to autosave the files, then manually saving the file might not be a big deal, though it’ll download to your browser’s download folder, rather than where you want to keep it. There are apps available, allowing you to edit the Tiddlywiki file on both Android and iOS.
Once downloaded, you’re good to get started!
Layout
On opening a blank Tiddlywiki file, you’re presented with a Getting Started tiddler. This allows you to make some changes; you can change the title of the wiki, the subtitle and what tiddlers are opened when you open the wiki file. At the minute, the title should be called:
My ~TiddlyWiki
Note the tilde character. This has been inserted (and is invisible), because by default, Tiddlywiki creates a tiddler for any word that is formatted in CamelCase. The tilde character acts as an escape and prevents this from happening.
If we leave the default tiddler as it is for now, we can create our own tiddlers, and then on next starting up, we can add tiddlers we want here and remove the Getting Started tiddler.
Using the default layout, on the right of the screen, the title of the wiki should be displayed with three icons below it. I’ll call this the control toolbar. The + sign creates a new blank tiddler for you to name and type in, the cog opens the control panel tiddler, and the tick in a circle is the save button for the wiki. If you’re using one of the auto save features above, the wiki will save automatically, but if you’re not, this will appear red until you click it and save the file.
Below this is the search box; this will search the entire Tiddlywiki. As you type, the drop-down box indicates if it’s found the word in a title of a tiddler or if it’s in the text of a tiddler. Clicking the small magnifying glass will bring up the advanced search tiddler, which lists all the tiddlers better than the dropdown autocomplete within the search bar!
Finally, below this in the menu are a range of tabs. ‘Open’ displays all the currently open tiddlers. Unless you close a tiddler with the cross in the top right of the tiddler, it’ll remain open, so this list can get quite long. The ‘Recent’ tab shows the recently edited and created tiddlers. The ‘Tools’ tab allows you to change what buttons are shown in the control toolbar. The ‘More’ tab brings up some more tabs going vertically now.
In the More tab, there are many different tabs; these all related to tiddlers you might have created, so in a blank wiki, they should be fairly blank. Tags allows you to search the tiddlers that have been tagged in that way. The Missing tab displays all the notes that have been created, either from CamelCase or by a link in a tiddler, but which hasn’t actually yet been created. Orphans indicate tiddlers that have not been linked to by another tiddler. This may be intentional, and there isn’t anything wrong with having orphaned tiddlers, but this allows you to view them at a glance. The Type tab describes the type of tiddlers you have, so if you start importing files, the file types will be grouped here. Finally, the ‘Shadows’ and ‘System’ tabs describe the tiddlers that control the back-end of the wiki file itself. You don’t need to edit these if you don’t want to change anything of the theme or how the file works.
Markup
Tiddlywiki uses WikiText to create tiddlers. It doesn’t have rich text formatting, so if that’s something you need, unfortunately, Tiddlywiki isn’t for you.
WikiText is pretty easy to pick up though, so it shouldn’t take to long before you can start editing tiddlers with ease. For those who already know Markdown, check the plug-ins; you can use a mixture of WikiText and Markdown in your wiki if you download a plug-in.
The basics of WikiText can be seen in the following table:
''Bold'' Bold
//Italic// Italic
~~Strikethrough~~ Strikethrough
`Code` Code
This allows easy customisation of text while writing.
All this is useless if you can’t create a link to another tiddler. This is done by either using CamelCase, or if you want the tiddler to contain a space, you surround the text for the name of the tiddler in square brackets:
[[Cup of Tea]]
This will link to a tiddler called ‘Cup of Tea’. If this doesn’t exist, the link will be highlighted as a link but will open the create new tiddler if clicked (and will let you edit it there and then). Occasionally, you will want to link to a tiddler but not use the tiddler title. This can be done in a similar fashion to BBCode for forums.
[[Displayed Link Title|Tiddler Title]]
The same process can be used to link to external websites.
Images
Images can be imported into Tiddlywiki so it isn’t just text in your notes. This is done relatively easily by dragging and dropping the image file onto the open TiddlyWiki. This will bring up an import tiddler, asking if you want to import the file. This creates a tiddler with the name of the file being imported.
Viewing the tiddler should display the image. Opening up the edit tiddler menu on a graphic tiddler will allow you to add and remove tags just like a normal tiddler. You can also change the file dimensions here. Note that this crops the image and doesn’t resize it.
By default, Tiddlywiki supports GIF, ICO (icons), JPEG, PNG and SVG (vector graphic files, which are commonplace on Wikipedia). Images can then be inserted into a text tiddler to be displayed alongside the text by using the following command:
[img[Image Name.jpg]]
You can also set the size of the file to be different to how it’s stored in the document (useful for displaying thumbnails of a larger image) by setting the height or width in the image code:
[img width=640 [Image Name.jpg]]
Note that when you import the image file, it becomes inaccessible to the file system (other than the original file you imported from), and the image data is stored within the HTML file itself. This means if you later want access to the image file, you’ll have to download it from the wiki file. If you don’t want images to be stored in the Tiddlywiki file itself (can assist in keeping the file size of the file down), you can link to files on your hard drive. Ideally, create an image folder in the same directory as the Tiddlwiki file, and you can make them appear in the wiki by using a relative file link (which, if you sync the Tiddlywiki file and the image folder means it’ll display the images on all devices).
[img[./Folder/Image Name.jpg]]
You can display images external images hosted on the internet by using the URL of the image within the image tags.
Tables
Tiddlywiki supports creating tables in text. This is can be confusing to start with, especially with large complicated tables where it might actually be better to import an image from a table created in a spreadsheet. However, for smaller tables, it allows tables to be created easily and quickly.
A table is created with the following code:
|!Header 1 |!Header 2 |
|Cell 1 |Cell 2 |
You can align text within the columns by changing the location of the space. In the example above, there’s a space at the right end of the cell (after the Header and Cell data). This will create left aligned data. A space on the left (before the data) and no space between the | and the data will align the data to the right. With a space at either end, the data will be centred in the column.
HTML
If you don’t want to learn WikiText or you have a good knowledge of HTML, you can write directly into Tiddlywiki in HTML.
As Tiddlywiki supports HTML, you can use HTML to override the location of items within the tiddler if you require, such as the text wrapping of text around an image.
Conclusion
Hopefully this guide has given you enough information on Tiddlywiki and getting started in using it. It has a number of uses – blogging, note taking, journaling and, as in my use for it, revising and storing linked data. This has been a very quick and limited look at the abilities of Tiddlywiki. If you visit the website, you can browse the full extent of its editing powers. I haven’t discussed lists, headings and other items you may require for longer notes. I also haven’t covered how to change the theme, other than the default theme or the ones available through the plug-in library.
Tiddlywiki is flexible and is able to store data in a format that makes it accessible on any device that has a web browser, so you don’t need to be locked into a single platform, though editing the file is restricted, ironically, due to browser security settings. The single file nature means that the data is highly portable, so you shouldn’t be without your information when it’s needed.
Wiki Software
Tiddlywiki isn’t the only wiki software that will run on the desktop and allow you to create wiki-style brain dumps. Voodoopad is a Mac program, while there’s Zim, WikidPad or LinkedNotes that will run in either Windows or Linux. Of course, you can create your own online wiki for editing on any device, using something like PmWiki, DokuWiki or MediaWiki (the software behind Wikipedia). However, these options require a server and, in some cases, knowledge of PHP and MySQL to get started.
Node.js
Node.js is a cross platform runtime environment for developing server-side web applications. It’s possible to install Tiddlywiki using a Node.js server, and this then saves all Tiddlers individually, making it more suited to being served over the internet. However, doing so makes the wiki less portable if you want to sync between machines or use it from a USB stick.
Plug-ins
Tiddlywiki supports the installation of plug-ins to improve the editing experience. This is usually achieved by simply opening the control panel of the Tiddlywiki and downloading from the plug-in library. Plug-ins range from Markdown plug-ins (allowing you to create Tiddlers using the Markdown format, rather than the Tiddlywiki markup) to different themes and tools to assist in using Tiddlywiki as a blogging platform.
CamelCase
CamelCase is formed by creating a phrase and removing the spaces between them and capitalising the first letter of each word.