This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Customising TiddlyWiki's user interface

4th December 2021 at 12:00pm

TiddlyWiki’s user interface is designed to be highly extensible. Every element can be augmented, removed, or rearranged.

Several different mechanisms are used to achieve this:

  • special fields
  • special titles
  • special tags
  • cascades

Here we provide an overview of those mechanisms and how they relate together.

Special Fields

Special fields are used to assign an appearance or behaviour to individual tiddlers. They can be thought of as flags or values that directly control the tiddler to which they are applied.

For example:

  • Set the icon field to the title of an image tiddler to be used as the icon for this tiddler
  • Set the color field to a CSS colour that is then used for icons and tag pills associated with this tiddler
  • Set the hide-body field to yes to hide the view template body for this tiddler

See TiddlerFields for details of all the special fields.

Special Titles

Certain special titles identify configuration tiddlers that customise TiddlyWiki's appearance or behaviour. They can be thought of as global settings that affect an entire wiki.

For example:

Many of TiddlyWiki's configuration tiddlers are presented as options in $:/ControlPanel. Less commonly used configuration tiddlers do not have a user interface, but are documented in Hidden Settings.

Special Tags

Special tags assign special behaviour or appearance to all of the tiddlers to which they are applied. They can be thought of as establishing ordered lists of tiddlers that are processed or displayed in a particular way.

For example:

See SystemTags for details of all the special tags.

The entire TiddlyWiki user interface is constructed from lists formed from special system tags.

The ordering of these lists is determined by the order of tagged tiddlers rules. Users can re-order tags using drag and drop within a tag dropdown.

Cascades

Cascades provide a means to select one of multiple values based on flexible, extensible criteria. They can be thought of as a list of conditions that are evaluated in turn until one of them matches.

For example, the core uses the template $:/core/ui/ViewTemplate to display tiddlers in view mode, and $:/core/ui/EditTemplate to display tiddlers in edit mode. A cascade is used to choose which template to use for a particular tiddler:

  1. If the tiddler is a draft, then use $:/core/ui/EditTemplate
  2. Otherwise, use $:/core/ui/ViewTemplate

The list of conditions is defined via a special tag, making it possible to insert additional conditions anywhere in the list.

For example, a plugin might add a special template $:/plugins/example/map-template for tiddlers that have the tag $:/tags/Map by inserting an additional rule:

  1. If the tiddler is a draft, then use $:/core/ui/EditTemplate
  2. If the tiddler is tagged $:/tags/Map, then use $:/plugins/example/map-template
  3. Otherwise, use $:/core/ui/ViewTemplate

See Cascades for more details.