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

"A free, open source wiki revisited" by Mark Gibbs, NetworkWorld

4th February 2016 at 10:53pm

Interesting article giving the perspective of someone who has been away from TiddlyWiki for a few years:

https://web.archive.org/web/20180911094717/https://www.networkworld.com/article/3028098/open-source-tools/tiddlywiki-a-free-open-source-wiki-revisited.html

Way back in the mists of time (actually, January 2009) I wrote about a really cool tool called TiddlyWiki, a “non-linear personal web notebook”. Fast forward to today and I just had an out of body experience: Completely by accident I found a TiddlyWiki that I started when I wrote that piece and it still works!

Finding code that works flawlessly after just two or three years is magical enough but after seven years?! And given that TiddlyWiki is written as a single page Web application and considering how different browsers are now than they were in 2009, the fact that the old version of TiddlyWiki still works is not short of miraculous.

"A Thesis Notebook" by Alberto Molina

2nd March 2013 at 8:45am

A thesis notebook based on TiddlyWiki.

http://tesis.tiddlyspot.com/

This is an example of a thesis notebook powered by TiddlyWiki 5.0.8-beta.

TiddlyWiki is a great piece of software created by Jeremy Ruston. It allows you, among other things, to take notes, organise ideas, store information, and display all your stuff the way you want. It is an incredibly flexible tool you can adapt to fit almost all your needs.

This TiddlyWiki has been customized to serve as a philosophy notebook centered around authors, books and papers, concepts and theories, and personal notes. I use it along with Zotero, which is a dedicated bibliography software. Both are free, open source projects. TiddlyWiki can be downloaded at https://tiddlywiki.com.

"ATWiki" by Lamusia Project

6th January 2021 at 3:10pm

A desktop application for TiddlyWiki, running on Windows.

https://lamusia.github.io/#ATWiki

TiddlyWiki for Windows. A unique non-linear notebook for capturing, organising and sharing complex information.

"BJTools" by buggyj

6th January 2021 at 3:10pm

"BrainTest - tools for a digital brain" by Danielo Rodriguez

6th January 2021 at 3:10pm

A collection of customisations and macros from Danielo Rodriguez.

http://braintest.tiddlyspot.com/

This is my personal tiddlywiki file for testing.

Here I will post the tools and Macros that I develop for this awesome tool. That way, all the help the community gave me can came back to the community again.

"Cardo - Task and Project Management Wiki" by David Szego

6th January 2021 at 3:10pm

Task & Delegation Tracking, Meetings & Agenda Items, Project Roles, Progress & Status Updates, Reference Items, Tickler Calendar, Conversation Logging, Book Notes & Library, and More!

https://web.archive.org/web/20181114094516/http://cardo.wiki/#Joe%20Cardo:%5B%5BJoe%20Cardo%5D%5D

Cardo is a standalone, browser-based tool that can be used as a simple task manager, or as a complex Project Management system (and indeed, I do use it this way in my daily work) as well as a fully Wiki-ized personal knowledge store. It runs completely independently in the browser, even without an Internet connection, making it possible to carry around on a USB stick, or to use on the morning commute.

"CouchDB Adaptor" by William Shallum

6th January 2021 at 3:10pm

An adaptor to enable TiddlyWiki to sync changes with a CouchDB database.

https://github.com/wshallum/couchadaptor

CouchDB sync adaptor for TiddlyWiki 5. Requires TiddlyWiki >= 5.1.2.

Works in limited testing. Not sure how well it handles conflicts.

"Creating a baby journal with TiddlyWiki 5" from A Penguin in Redmond

20th February 2014 at 8:45am

A guide to creating a baby journal with TiddlyWiki.

http://a-penguin-in-redmond.blogspot.co.uk/2014/02/creating-baby-journal-with-tiddlywiki-5.html

Keeping a journal about your baby is fun. It allows you to keep track of those events in your baby's life and development that are most important to you, and to tell them in your own words. [...]

There are plenty of online services that can help to keep such a diary, but you need to have an internet connection to access them, and you have to trust them to keep your data safe.

"Dracula - a dark palette for TiddlyWiki" by SlyBouhafs & zenorocha

1st January 2021 at 4:36pm

A dark palette for TiddlyWiki.

https://draculatheme.com/tiddlywiki

Install manually

Open the Control Panel > Appereance > Palette, scroll down and clone a platte, rename it to Dracula and copy the code from the website.

Activating theme

  • Open the Control Panel > Appereance > Palette
  • Scroll down and select Dracula
  • Boom! It's working

"Drift - Collect, Organise, Grow." by Tony K

10th January 2023 at 10:00pm

A adaptation of TiddlyWiki perfect for using as a Notebook sysetem.

https://github.com/bmann/drift-tiddlywiki-template/tree/master/drift

Drift is an adaptation of TiddlyWiki with the goal of helping you Collect. Organise. and Grow. your ideas while keeping tab on how they interconnect together and fluidly Drift from one to another.

The 2 main components of Drift are TWCrosslinks and DailyNotes so you never miss an idea

Drift was inspired by TiddlyBlink / Stroll and adapted to fit my needs.

"Dropboard" by Reid Gould

6th January 2021 at 3:10pm

A TiddlyWiki plugin for kanban-like organisation in the style of Trello™ using boards, lists, and cards.

https://github.com/reidgould/tiddlywiki-dropboard

"Dynamic Tables" by Jed Carty

13th November 2021 at 1:06am

"Encrypt single tiddler plugin" by Danielo Rodriguez

13th November 2021 at 1:06am

A plugin that allows to encrypt your tiddlers individually Danielo Rodriguez.

http://danielorodriguez.com/TW5-EncryptTiddlerPlugin/

Advantages:

  • You can specify a different password for each tiddler if you want.
  • You don't have to encrypt your whole wiky.
  • If you forget your password, you only lose a tiddler.
  • It's possible to edit the tiddler content , tags and fields except the encrypt field after encryption.
  • [...]

"file-backups" Extension for Firefox by pmario

6th January 2021 at 3:10pm

An extension for Mozilla Firefox that smoothes out some of the friction from TiddlyWiki's built-in HTML5 saver, making it almost as easy to use as TiddlyFox. The workflow is intended to work out of the box, without configuration.

https://github.com/pmario/file-backups which contains links to the documentation and introduction video(s).

A chrome version is planned!

"Filter Examples" by Tobias Beer

6th January 2021 at 3:10pm

This wiki gives examples for various filters and their use in the list widget

http://tobibeer.github.io/tw/filters/#Filter%20Examples

This wiki gives examples for various filters and their use in the list widget. A good starting point to understand what filters yield which results also is test-filters.js.

"Font Awesome 5 Free SVGs for TiddlyWiki" by morosanuae

6th January 2021 at 3:10pm

"Ghostwriter theme by Rory Gibson" adapted for TW5 by Riz

6th January 2021 at 3:10pm

An adaption of the "Ghostwriter" theme for TiddlyWiki.

https://ibnishak.github.io/ghostwriter/

Ghostwriter is a popular, minimalist and mobile responsive theme for the blogging platform ghost. This is an adaptation for TiddlyWiki.

"Gospel Bubbles" by Rev. David Gifford

6th January 2021 at 3:10pm

Creates bubble maps of Biblical texts.

http://giffmex.org/gospels.bubbles.html#Gospels%20Bubbles

This TiddlyWiki, which is still under construction, has several features that together make it lightning fast to find passages, types of passages, themes, people, places and images in the New Testament Gospels. The bubblemaps are color-coded overviews of each Gospel. Each type of passage (miracle story, parable, etc) was assigned a color. Bubblemaps allow you to do three things:

  1. The bubblemaps are color-coded overviews of each Gospel. Each type of passage (miracle story, parable, etc) was assigned a color. Bubblemaps allow you to do three things:
    1. See how the different types of passages are distributed throughout each Gospel.
    2. Hover over passages to see the verses and titles.
    3. Click on a passage to open it and see the themes and other data it mentions.
  2. The themes by passage indexes are lists of the passages in each Gospel, followed by the themes and other data found in the passage. Clicking on a theme calls up a list of all the passages that mention that theme.
  3. The indexes of themes contain lists of links to each theme, person, group, place and image. Clicking on a theme calls up a list of all the passages that mention that theme.
  4. There is a search window hidden in the right hand menu. Use the search window to find passages quickly, by typing things like sower or paralytic. Click the arrows in the upper right of the screen to open the menu and search.

"Grok TiddlyWiki" by Soren Bjornstad

21st October 2024 at 4:10pm

Grok TiddlyWiki by Soren Bjornstad is an interactive learning environment for TiddlyWiki. It bundles three complementary modes of learning into one TiddlyWiki:

  • It explains concepts using English text and code examples
  • It assigns exercises that help you apply and practice what you've learned
  • It presents takeaways, questions about key terms, concepts, or skills, for review as you continue through the book, to help you retain what you've learned over a longer period of time

https://groktiddlywiki.com/read/

"GSD5" by Roma Hicks

26th February 2022 at 8:52pm

"Hacks" by Thomas Elmiger

6th January 2021 at 3:10pm

A collection of helpers by Thomas Elmiger, among them a tweet button macro, a text-stretch solution, a snippet extraction macro and a tiddler that installs a scroll-to-top button via drag-and-drop.

http://tid.li/tw5/hacks.html

Quick Extensions for TiddlyWiki 5 – […] As I take from the community, I am happy if I can give back. You can use my stuff to do whatever you like, but remember to save a back-up first.

Thomas

"Heeg.ru" by sini-Kit

6th January 2021 at 3:10pm

A guide in Russian to creating an online shop with TiddlyWiki. No serverside code is needed, instead orders are handled by Disqus.

http://heeg.ru/

"In My Socks" by Jed Carty

6th January 2021 at 3:10pm

An extensive collection of hints and tips from Jed Carty.

http://inmysocks.tiddlyspot.com

I made this so that some of my friends with absolutely no coding experience could use some of the better features of TW5 without having to learn much. I am hopefully going to continue updating it as I learn new things. There isn't really anything here that isn't available in plenty of other places, but I figured that since I spent a while putting it together and people keep saying that TW needs more documentation I would post it here.

"JD Mobile Layout plugin" by JD

6th January 2021 at 3:10pm

"JD's palettes" by JD

1st January 2021 at 4:45pm

Some palettes by JD.

http://j.d.palette.tiddlyspot.com/

You can install any or all of these by dragging any of the below links into your Tiddlywiki:

  • Brown One
  • C8 Dark
  • Cool Mint
  • Neonize
  • Spartan Day
  • Spartan Night

"Lucky Sushi" online shop by sini-Kit

6th January 2021 at 3:10pm

"Mal's Sandbox" by Mal

6th January 2021 at 3:10pm

A collection of extensions by @malgam

http://malsandbox.tiddlyspot.com

The "loadnew" plugin provides the JavaScript module $:/plugins/malgam/loadnew/loadnew.js that implements an incremental load command for Tiddlywiki 5.

The javascript code is based on the built-in module $:/core/modules/commands/load.js that loads tiddlers from a Tiddlywiki file into a node.js Tiddlywiki instance. This command loads all non-system tiddlers, irrespective of whether they have been modified since last loaded. As a result, all tiddlers in the node.js tiddlers folder will end up with a new modification date.

In contrast, the loadnew command only loads tiddlers that either don't already exist in the tiddlers folder, or have a newer modified date than the existing tiddler.

With a backup strategy that uses a file system snapshot process to preserve historical versions of tiddlers, the loadnew command minimises the sizes of the resulting snapshots.

"MathCell" by Stephen Kimmel

6th January 2021 at 3:10pm

Mathcell allows spreadsheet-like abilities in a completely contained TiddlyWiki.

http://mathcell.tiddlyspot.com/

Mathcell allows spreadsheet-like abilities in a completely contained TiddlyWiki. Additional abilities allow it work as a general math engine.

"Microblogging con Tiddlywiki" by Juan

8th October 2014 at 1:43pm

A Spanish guide to using TiddlyWiki on Android.

http://3palmeras.wordpress.com/2014/11/05/microblogging-con-tiddlywiki/

Tiddlywiki software is prodigious based on javascript which is capable of holding a notepad that can be edited with Internet Explorer or function as a full blog, contained in a single file.

Translation by Google Translate

"Moments: A little color won't hurt" by Riz

6th January 2021 at 3:10pm

An adaption of the "Moments" theme for TiddlyWiki.

http://tesseractmoments.surge.sh/

Moments is a beautiful free and responsive theme available for wordpress from here: http://www.s5themes.com/theme/moments/. This is an adaptation of the same for TW5 platform. All the design credits goes to the site and the original designer. If TW5 is going to be here for 25 years, might as well suit up.

"Mono theme" by JD

1st January 2021 at 3:46pm

"muritest" by Simon Huber

13th November 2021 at 11:06pm

"Notebook theme" by Nicolas Petton

31st January 2024 at 2:33pm

Notebook is a clean, uncluttered theme for TiddlyWiki.

https://saqimtiaz.github.io/sq-tw/notebook.html

Notebook is a clean, uncluttered theme for TiddlyWiki.

  • The theme is responsive and comes with mobile support through the included notebook-mobile plugin.
  • Notebook comes with 3 default colour palettes, a grey, beige and dark one. To switch between colour palettes, click the color palette switch button in the top bar.
  • Notebook uses a custom left sidebar, with another sticky bar at the top of the page (or at the bottom on mobile).

"Noteself" by Danielo Rodríguez

13th November 2021 at 1:08am

NoteSelf is your personal, private, customisable, Evernote-like experience. You want cloud? Fine! You don't? Fine too! It's all yours, It's your decision! Why not be a bit selfish?

https://noteself.github.io/

NoteSelf is the perfect place to store your ideas, notes, thoughts, tips, tricks, recipes... whatever you want to put into it! NoteSelf will store, index, and make it easily searchable, so you will find it instantly whenever you need it!

You already know and love Evernote, we know it. It is comfortable, it syncs, has search capabilities... Wow, it's almost perfect, but what about:

  • Privacy - Everything is stored on the Evernote's servers!
  • Customisation - If you don't like the interface of Evernote, there's nothing you can do

NoteSelf is built on top of TiddlyWiki, a powerful, free, highly customisable and open-source personal wiki. We took the best of it, it's powerful customisation system, and mixed it with one of the best embedded databases available, PouchDb, for bringing the synchronisation capabilities you need.

"Notizen mit TiddlyWiki systemübergreifend nutzen" by Michael Sonntag

10th September 2014 at 10:28am

A quick guide to using TiddlyWiki (written in German)

http://michaelsonntag.net/notizen-mit-tiddlywiki-systemuebergreifend-nutzen

Those using multiple different computer platforms (if only PC and Android) knows for certain: You would like to sync notes across computers and thereby be independent of any apps or services. I am concerned at any rate so and so I am constantly looking for the perfect solution.

With TiddlyWiki I found it mostly. As the name suggests, it TiddlyWiki is a Wikisystem. In contrast to all other wikis, TiddlyWiki is a single HTML file that runs in the browser and thus can be used on all modern operating systems. And because there is only one file, it can be very easily via the well-known cloud services (Dropbox, Google Drive, ownCloud) or synchronized with FTP or used on a USB stick.

(Translation from German by Google Translate)

"PETTIL - Forth for the Commodore PET" by Charlie Hitselberger

16th July 2014 at 8:45am

A fast Forth interpreter for the Commodore PET, written in 6502 assembly language. The TiddlyWiki containing program documentation is automatically generated from the source code: see https://github.com/chitselb/pettil.

http://pettilmobile.com

Objectives of the project are, in no particular order:

  • make a Forth that runs on my Commodore PET 2001
  • have fun
  • improve my "6502 assembly golf" skills
  • find other people who are interested in this project

"Reveal.js" by Devin Weaver

13th November 2021 at 11:05pm

Embed Reveal.js presentations inside your TiddlyWiki.

https://sukima.github.io/tiddlywiki-reveal-js/

reveal.js enables you to create beautiful interactive slide decks using HTML.

With the power of TiddlyWiki and Reveal.js one can…

  • …make an interactive tiddler with fancy animations
  • …Make it go full screen for professional keynote
  • …Distribute the slideshow with examples and additional resources in one HTML file

"Setting Up a Personal TiddlyWiki Server on OS X" by Kris Johnson

3rd April 2015 at 10:42am

Detailed description of setting up TiddlyWiki on Node.js on OS X.

http://undefinedvalue.com/2015/04/02/setting-personal-tiddlywiki-server-os-x

For a new job, I decided to set up a personal wiki to keep notes. I wanted to keep it simple, meeting these requirements:

  • All the data is in a Dropbox folder (so it can be automatically synced between machines)
  • It must support Markdown syntax

After looking at the options, I settled on TiddlyWiki. I've used "classic TiddlyWiki" before, and liked its simplicity, but I was always a little annoyed with the weird steps you have to go through to save changes. The new version of TiddlyWiki includes support for running it as a real HTTP server, so you can use it just like an online wiki.

But it took me a couple of hours to figure out how to set that up. The TiddlyWiki documentation is not clear ("not clear" is a euphemistic way of saying "terrible"). So, I've written up these instructions in the hope it will spare somebody else all the frustration I had.

"Shining Ark Using TiddlyWiki" by Helu

7th September 2013 at 8:45am

A gamers guide to using TiddlyWiki.

http://helugame.wordpress.com/2013/09/07/shining-ark-7-using-tiddlywiki/

I’ve been using TiddlyWiki for this game mainly to record the monsters’ locations and the items that they drop. This is so that when I need a certain item to upgrade/create weapons, I can quickly look it up; which monsters drop it and which quests have those monsters.

As I play the game, as I encounter new information, I just input them into my Shining Ark TiddlyWiki. It’s like I’m building a wiki from scratch. The reason why I don’t just use online wikis is that 1) it’s too easy to get spoiled and 2) sometimes online wikis provide too much information (who cares about the non-gameplay related descriptions that can be found in the game, etc).

"SK Plugins" by Stephen Kimmel

6th January 2021 at 3:10pm

A collection of plugins by Stephen Kimmel, including a number of additional editor toolbar buttons.

http://skplugins.tiddlyspot.com/

In keeping with the general spirit of the TiddlyWiki community, ie, you develop something useful and/or potentially interesting you share it with others, I'm sharing some of the plugins I've developed to go with the new Editor Toolbar. You'll find them and a more extensive discussion of what each does at http://skplugins.tiddlyspot.com/

"Slides and Stories" by Jan

6th January 2021 at 3:10pm

Slides and Stories is a repository of the tools to optimise TW for scientific research and for presenting and publishing results.

http://slidesnstories.tiddlyspot.com

SlidesnStories

...is a tool to save and reload sets of Tiddlers. This is already working, The aim is to develop a mechanism to transform these into instant slideshows.

MetaTabs

is a tool which gives you the possibility to attach and show specific information in tabs at the bottom of each Tiddler: ideas, notes, tasks, stories and presentations, comments, annotations and footnotes.
It is inspired by MagicTabs and Tiddlyscholar by Alberto Molina Pérez, which are very elaborated tools that alas do not seem to be in active development any more. I wanted to change the behaviour in some ways. For example I wanted show tabs only if they have content.

...furthermore there is

  • an export-plugin,
  • a footnote-plugin,
  • and a plugin to rearrange Tiddlers in the StoryRiver

"Stroll - a Roam-like experience" by David Gifford

1st January 2021 at 8:14pm

A adaptation of TiddlyWiki perfect for using as a Notebook sysetem.

https://giffmex.org/stroll/stroll.html

Stroll is a TiddlyWiki adaptation imitating certain features of Roam to help users easily see connections between their notes and navigate between them. Features include:

  • bi-directional links,
  • autocompletion when linking,
  • renaming of links upon changing tiddler titles,
  • side-by-side editing of multiple notes.

"TB5 - a pocket full of tips" by Tobias Beer

6th January 2021 at 3:10pm

"Tekan: Kanban that stays with you" by Riz

6th January 2021 at 3:10pm

A Kanban implementation for TiddlyWiki with a familiar look and feel (see the demo).

https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.html

This is Tekan, a TW based kanban. The easiest way to know tekan is to use it. So let us begin, shall we?

"TiddlyServer" by Matt Lauber

13th November 2021 at 11:07pm

Note: This is an older version of TiddlyServer. A modern version can be referenced here.


TiddlyServer is a special purpose Desktop app, designed to facilitate managing multiple instances of TiddlyWiki running as a server. It does not require internet acess to access the wikis.

https://github.com/mklauber/TiddlyServer/releases/

TiddlyServer can import both TiddlyWiki files and TiddlyFolder wikis. For each wiki, you specify a prefix to serve it with and the source to import from. It will copy the wikis to its own internal store and begin serving them up at http://localhost:8080/{prefix}/. The export button for each wiki will convert it to a single file wiki.

"TiddlyStudy" by Kebi

10th January 2023 at 10:04pm

A adaptation of TiddlyWiki perfect for using as a Notebook sysetem.

https://postkevone.github.io/tiddlystudy/

Tiddly Research is a free and local note-taking environment based on TiddlyWiki

Core Features:

  • Bidirectional note linking on multiple levels
  • Tags
  • Linked references
  • Unlinked references
  • Transclusions
  • Bullet point based hierarchical note taking structure
  • Integration with the spaced repetition flashcards tool Anki
  • TODOs
  • and more

"TiddlyWiki 5 im Betatest" by besim

5th January 2014 at 8:45am

Reaction to TiddlyWiki5 from the translator of the German edition of TiddlyWikiClassic.

http://blog.netplanet.org/2014/01/03/tiddlywiki-5-im-betatest/

There is little software that can still inspire me so even after years, as on the first day. This includes TiddlyWiki, the "pocket-wiki". The latter is because the Wiki completely fits into an HTML file, and this HTML file brings everything - JavaScript program logic, CSS appearance and the entire Wiki content as stored records. So a TiddlyWiki file is then sometimes happy times some megabytes in size, but just has the unbeatable advantage that it works just as fast file created locally in a variety of browsers.

(Translation from German by Google Translate)

"TiddlyWiki for Scholars" by Alberto Molina

6th January 2021 at 3:10pm

An early release of an edition of TiddlyWiki customised for rigorous, academic notetaking.

http://tw5.scholars.tiddlyspot.com/

TiddlyWiki for Scholars is a personal customisation of TiddlyWiki 5.0.13-beta I made for note-taking from readings, but it can be useful for other purposes. The idea behind this adaptation is to show and to allow creating relevant data related to the current tiddler without leaving the tiddler.

"TiddlyWiki guide FR" by Sylvain Naudin

6th January 2021 at 3:10pm

A collection of tips and guides in French, introduced by this blog post:

http://sylvain.naud.in/post/2014/10/29/Ressources-pour-TiddlyWiki-5-%28FR%29

Ce guide de prise en main de TiddlyWiki vous permettra de débuter sur ce logiciel : rédiger du texte avec la syntaxe wiki, insérer des images, créer des Tiddler, faire une recherche, ajouter des fonctionnalités, et bien d'autres choses.. Bonne lecture ! Sylvain

"TiddlyWiki Knowledge Network" by Dmitry Sokolov

6th January 2021 at 3:10pm

A Knowledge Network about TiddlyWiki.

http://confocal-manawatu.pbworks.com/w/page/113574373/TiddlyWiki

Interconnected with the visual taxonomy at every node: http://debategraph.org/Stream.aspx?nid=457381&vt=bubble&dc=focus

TWKN will be transferred into TWederation/TiddlyMap format as soon as I am convinced in reliable and secure versioning and multi-user operation in TW format. Your assistance and support would be highly appreciated.

"TiddlyWiki Notes" by James Anderson

6th January 2021 at 3:10pm

Notes and tips by a developer working on writing TiddlyWiki plugins – including TWExe, a widget for running Windows scripts and executables.

http://welford.github.io

"TiddlyWiki Posts" by Jeffrey Kishner

5th August 2023 at 2:07pm

"TiddlyWiki Toolmap" by David Gifford

6th January 2021 at 3:10pm

A topical index of known plugins, tutorials, themes, and other helpful tools for TiddlyWiki.

https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

Some of the topics indexed so far include:

  • Background images and background colors
  • Breadcrumbs
  • Business - examples
  • CSS / Styles, general
  • Calendars, dates and timelines
  • Checklists
  • Collaboration
  • Color palettes
  • Colors
  • Data visualizations
  • Developer / advanced tools
  • Diplay tiddlers horizontally
  • Dropdowns
  • Educational
  • External files
  • Fields
  • Fonts
  • Fun and games
  • Home and lifestyle
  • IFrames and embedding media
  • Image galleries, modals and lightboxes
  • Images, icons, emojis
  • Importing and exporting between TiddlyWiki files
  • Includes scaffolding within a tiddler, dragging to reorder tiddlers, choosing the number of columns
  • Interfacing with, importing and exporting to and from other formats
  • Knowledge bases, dictionaries and glossaries
  • Layout/UI
  • Lightboxes
  • Links, linking
  • Lists and filters
  • Maps and geography
  • Masonry, scaffolding
  • Math
  • MindMapping
  • Mobile tools
  • Music and sound
  • Navigation
  • node.js
  • Note-taking
  • Open the "filter" tab
  • Partially hidden tiddlers
  • Personal websites (examples)
  • Presentations and slideshows
  • Printing
  • Project management
  • Publishing and hosting TiddlyWikis on the web
  • Searching tools
  • Security and backup tools
  • Social media, sharing, comments
  • Spreadsheets and math
  • Startup
  • Sticky titles
  • Story and screenplay creation
  • Table of contents
  • Tables, charts and graphs (cf data visualizations)
  • Tabs
  • Tags, tagging
  • Task management and productivity - to do lists
  • Themes
  • Understanding TiddlyWiki
  • Writing and editing

"TiddlyWiki 舞" by Bram Chen

6th January 2021 at 3:10pm

"TiddlyWiki" by Sander de Boer

27th November 2014 at 4:32pm

Dutch blog post about TiddlyWiki

https://breinbout.wordpress.com/2014/11/26/tiddlywiki/

I'm allergic to websites that are highly dependent on JavaScript. I think that JavaScript has many useful applications to add functionality to a site, but content needs to be visible if JavaScript is switched off. I use the NoScript extension for Firefox and surf with pleasure over the Internet without spontaneous things happen that I do not give permission. I love JavaScript on a short leash. More crazier maybe I'm so excited about TiddlyWiki.

(Translation from Dutch by Google Translate)

"TiddlyWiki5 Bourbon" by mkt_memory

6th January 2021 at 3:10pm

An extensive collection of tips and resources for users of TiddlyWiki in Japanese.

http://bacchus.ivory.ne.jp/bourbon/

TiddlyWikiをHTML5にしたTiddlyWiki5が正式にリリースされました。このTiddlyWiki5の使い方について、自分で試した機能を中心に解説します。

TiddlyWiki5は、非常に多機能なローカルWikiです。このブログに書いてあることは、TiddlyWiki5で出来ることのごく一部です。

"TiddlyWiki5 Forum on Reddit" by Riz

6th January 2021 at 3:10pm

A TiddlyWiki5 forum on Reddit.

https://www.reddit.com/r/TiddlyWiki5/

A TiddlyWiki5 forum on Reddit. As of 2016, it claims to have the most up-to-date list of plugins available for TW5.

"TiddlyWiki5 Playground" by Ton Gerner

6th January 2021 at 3:10pm

Huge collection of customisations and tweaks from Ton Gerner.

http://tongerner.tiddlyspot.com/

I am a longtime user of TiddlyWiki Classic and still use it daily since you can't do everything in TiddlyWiki 5 (yet) ;)

I started experimenting with TW5 at the end of September 2013 (alpha10). Since I missed a few things in the layout I got used to in TiddlyWiki Classic 1, I started with modifying the layout of TW5. To share my knowledge, I made a few guides about these 'modifications'. The guides started as a non-linear personal web notebook (yeah, the subtitle of TiddlyWiki!). I started experimenting with layout things and used TW5 to document my experiments.

"TiddlyWiki5^2 documenting while learning TiddlyWiki5" by Iannis Zannos

6th January 2021 at 3:10pm

A wealth of hints, tips and notes about using TiddlyWiki on Node.js:

TiddlyWiki is different from other wikis because of its principle of dynamically customizeable "storyline" based on tiddlers as basic units of information. That is, the user "composes" their own version of the webpage by clicking on tiddler links, which add tiddlers to the page in order to compose a storyline.

The Node.js implementation in TiddlyWiki5 adds all the advantages of flat-file markup language based type of site. This makes TiddlyWiki an excellent alternative to flat-file based CMS/webpage/blog authoring systems for the web.

Also very cool is the treatment of tags as menus everywhere.

http://larigot.avarts.ionio.gr/users/iani/wikis/tw5square.html

Also available on GitHub (download and save index.html and open it in your browser).

"TW Icons" by morosanuae

13th November 2021 at 10:59pm

"TW5 Magick" by Stephan Hradek

14th November 2021 at 8:53pm

Stephan Hradek's growing catalogue of tips, tutorials, and other resources. Stephan has also developed several plugins and macros that you can find at http://tiddlystuff.tiddlyspot.com/.

http://tw5magick.tiddlyspot.com/

Some things in TiddlyWiki seem like Magic. As my preferred nick is Skeeve, I felt that TW5 Magick is a proper name for this collection of some of the "magic" tricks one can do with TiddlyWiki.

"TW5 Tribal Knowledge" from Scott Kingery

21st March 2014 at 8:45am

Tips and guides for using TiddlyWiki.

http://techlifeweb.com/tw5tribalknowledge.html

I never used Node.js until a couple weeks ago when I wanted to try a TW5 installation on Node and expand my knowledge a bit. I figured someone else may be in the same boat so I wrote it all down

"TW5-TeXZilla" plugin by Joe Renes

6th January 2021 at 3:10pm

An alternative LaTeX plugin for TiddlyWiki5. It supports a wider set of LaTeX commands than KaTeX, though not as extensive as MathJax

http://tw5-texzilla.tiddlyspot.com

This plugin provides LaTeX support in TiddlyWiki5, using the TeXZilla latex parser to generate MathML.

Only Firefox and Safari support MathML at the moment, so the plugin is only useful if you're using one of these browsers. It might be possible to combine this plugin with MathJax to convert MathML to something that other browsers can understand, e.g. HTML+CSS, but I haven't tried this.

"Un wiki sur votre BiblioBox avec TiddlyWiki" from A Penguin in Redmond

16th July 2014 at 8:45am

A guide (in French) to using TiddlyWiki on the BiblioBox, a variation of the PirateBox mobile communication and file sharing system.

https://web.archive.org/web/20210305133610/http://bibliobox.net/blog/post/2014/07/16/un-wiki-sur-votre-bibliobox-avec-tiddlywiki

I've known TiddlyWiki since its beginning in 2004. For personal or professional needs, I used it regularly for notepad staff in 2007 and 2012. But I admit I ignored the tool during the past two years. And then I said yesterday: but why not put TiddlyWiki on a BiblioBox? Because it is a single HTML file with javascript. In addition I knew the existence of a server version for saving online amendments.

Hand optimised from a translation by Google Translate

"Whitespace, a negative-spacious, webapp-nostalgic theme" by JD

1st January 2021 at 3:46pm

"Wikilabs" by PMario

6th January 2021 at 3:10pm

A collection of references for testing concepts around TiddlyWiki 5...

https://wikilabs.github.io

This is PMario's playground with ramblings about TiddlyWiki and related stuff.

It basically is a "jump off" page to various TiddlyWiki sites, that show editions, themes and plugins.

"Wills Q&D gTD" by Matabele

6th January 2021 at 3:10pm

Matabele's stylish and clean system for personal task management.

http://wills.tiddlyspot.com

This is my work in progress version of TW5, incorporating various features and ideas as and when they intrigue me. To grab any feature you may wish to try, drag the listed tiddlers across to the dropzone of an empty TiddlyWiki 5.0.10-beta

"X3DOM for TiddlyWiki 5" by Jamal Wills

6th January 2021 at 3:10pm

"デザイン刷新。次の25年を目指すTiddlyWiki" by Moongift

11th November 2013 at 8:45am

@Arlen22

@Arlen22
fullname Arlen Beiler
first-sighting 2011-06-20
talk.tiddlywiki.org @arlen22
github @Arlen22

I make random software.

@Christian_Byron

@Christian_Byron

Hello TiddlyWikiers - I have been a long time fan, recent contributor to the TW community. Recently I have volunteered to run the TiddlyWiki Newsletter to spread the great news about TW.

I have been in the IT industry for about thirty years, mostly as a consultant and technical arcitect. More recently I went back to study a masters in IT focussing on AI and data science. Now my partner and I have started our own business (Sphere Innovations) - in consulting and building web applications for small to medium size businesses here in Australia.

@ericshulman

@ericshulman
fullname Eric Shulman
first-sighting 2005-06-21
talk.tiddlywiki.org @ericshulman

Hello! My name is Eric Shulman. I am the author of www.TiddlyTools.com (Small Tools for Big Ideas! ™), a popular collection of original plugins, macros, widgets, templates and stylesheets for TiddlyWiki that I have created and shared with the TiddlyWiki community.

Think of TiddlyTools as a virtual hardware store and "demonstration showroom", offering tools, parts and techniques that provide a rich variety of new functionality and feature enhancements to help you turn a general-purpose TiddlyWiki "info-house" into a comfortable, custom-built "info-home".

The TiddlyWiki core system provides the basic structure and utilities: the foundation, framing, walls, roof, windows/doors, plumbing, heating, and electrical systems. Then, TiddlyTools helps you with all the "finish work": the appliances, fixtures, lighting, cabinets, furniture, paint, wallpaper, carpeting, etc. to best suit your specific needs and personal style.

Since the early days of TiddlyWiki (April 2005), I have worked closely with its inventor, Jeremy Ruston, to help develop and improve TiddlyWiki's core functions. I am also a key contributor and administrator of the online TiddlyWiki Discourse and GoogleGroups discussion forums, providing ongoing assistance to the worldwide TiddlyWiki community. I have written over 15,000 detailed responses to individual questions posted online. For several years I was also the lead developer and maintainer of the TiddlyWiki Classic codebase.

I was born and raised in suburban Long Island, NY, and attended Carnegie Mellon University (CMU) in Pittsburgh, PA, where I studied Computer Science, Cognitive Psychology, Sociology, Human Factors Design, and Artificial Intelligence. As an undergraduate at CMU, I was privileged to work with some of the major luminaries in early software research and design, including Herbert Simon, Allen Newell, James Gosling, and Raj Reddy. I was also employed in several Computer Science Department research projects, including the development of speech recognition technologies, graphical interface systems, and interactive applications for instruction in physics, art and music. I received a Bachelor of Science in "Interactive Systems Design" from CMU in 1985.

During my early post-graduate years, I worked for several notable software development companies, including Honeywell Information Systems and Lotus Software. I was an integral member of the 1-2-3 spreadsheet development team where I helped create the first GUI-based application interfaces for Microsoft Windows and IBM OS/2.

Since 1998, I have been an independent design consultant, living and working in Silicon Valley, where I apply more than 40 years of experience to provide analysis, design and software development services for commercial companies and not-for-profit organizations, with emphasis on information architecture and interaction/visual design standards to improve ease-of-use for new and existing software products and online environments.

@Jermolene

@Jermolene

I'm the original inventor of TiddlyWiki. You can hire me through my consultancy company Intertwingled Innovations or contact me directly.

Further information:

@linonetwo

11th November 2025 at 6:45pm

@linonetwo
fullname Lin Onetwo
first-sighting 2019-03-01
talk.tiddlywiki.org @linonetwo

Since 2014, when I started college, I've been on a quest for a lifelong PKM tool. I cherish my life and all my experiences, and I don’t want to forget any of them. When I’m deeply focused on a task, it’s easy to lose sight of other important parts of my life—so I needed a system to help me stay balanced.

Early on, I tried TiddlyWiki several times, but I was initially put off by its save mechanism and markup editing. That changed when I discovered an auto-backup script, which gave me the confidence to fully commit. Over time, I improved the script and eventually transitioned to using TidGi-Desktop and TidGi-Mobile.

Today, my TiddlyWiki holds all my game design ideas and progress logs—it has truly become my second brain. With the help of LLM-powered programming tools, I’ve enhanced it with numerous plugins, allowing me to manage my mind in a more programmable and structured way. As a game developer, TiddlyWiki isn't the core of my professional work; But I've invested so much time because it's fundamentally about upgrading my mind.

Most of my notes are open by default and shared publicly on my homepage as a digital garden.

@MotovunJack

@MotovunJack
fullname Motovun Jack
first-sighting 2012-01-12

Motovun Jack is a robot that helps maintain the TiddlyWiki project infrastructure. It is not a person, but rather a set of automated scripts and tools that assist in managing the various services and resources used by the TiddlyWiki community.

The origin of the name "Motovun Jack" is a lovable and playful kitten encountered by @Jermolene in the beautiful medieval hill town of Motovun in Croatia. Jack was first adopted as the TiddlyWiki 5 mascot in 2012.

@pmario

10th November 2025 at 12:49pm

@pmario
fullname Mario Pietsch
first-sighting 2009-11-14
talk.tiddlywiki.org @pmario
github @pmario

Hi, My name is Mario Pietsch. Back in 2009 I was searching for a simple presentation tool and discovered TiddlyWiki Classic, Monkey Pirate TiddlyWiki (MPTW) with TagglyTagging, Eric Shulman's TiddlyTools, Saq Imtiaz's navigation macros, and more. — I was captivated.

After a deep dive, I combined these elements into my own "Presentation Manager", along 3 step by step tutorials to help others build it.

Thanks to the positive spirit of the TiddlyWiki community, I am proud to be part of it since 2009.

When Jeremy started developing TiddlyWiki 5 on GitHub, I joined in—opening issue no. 1 all the way up to 13. For what that’s good ;) Since then, I have submitted nearly 600 pull requests and more than 500 issues, many of which have been merged or resolved.

My TiddlyWiki 5 "laboratory" is at https://wikilabs.github.io, and I also share content on my YouTube channel: https://www.youtube.com/@pmario

Have fun!
Mario

A Gentle Guide to TiddlyWiki

19th May 2021 at 11:06am

TiddlyWiki is an incredibly flexible and versatile tool that is conceived and constructed differently than most software. This can make it hard to understand until the moment when it clicks, and becomes a seamless extension of your brain.

Starting with the basics, TiddlyWiki is a note-taking web application you can download for free, store wherever you like and customise however you wish. Use it to capture, organise and share your notes in ways that word processors and other note-taking tools cannot.

TiddlyWiki is designed to be non-linear, structuring content with stories, tags, hyperlinks, and other features. You can organise and retrieve your notes in ways that conform to your personal thought patterns, rather than feel chained to one preset organisational structure.

You can use TiddlyWiki as a single file that you view and edit through any web browser, whether you are online or offline. Or you can use it as a powerful Node.js application that stores each of your notes as a separate file.

How can you make TiddlyWiki work for you? We recommend you start with our introductory documentation listed below, and then browse the TableOfContents, available in the Contents tab in the sidebar. Or just follow our simple instructions and try it out for yourself!

Also see:

About

16th September 2014 at 1:20pm

abs Operator

11th June 2019 at 5:42pm
purposecalculate the absolute value of a list of numbers
inputa selection of titles
outputthe absolute value of the input numbers

Learn more about how to use Filters

abs Operator (Examples)

11th June 2019 at 5:42pm

[[-2000]abs[]]

=-1 =-2 =3 =4 =5 +[abs[]]

Ace Editor Plugin by Joerg Plewe

6th January 2021 at 3:10pm

A plugin to integrate the Ace editor into TiddlyWiki.

http://innoq.tiddlyspot.com

Being quite new to TW5 development I tried my best to draft a SyncAdaptor to store tiddlers in IndexedDb. This is quite useful if an application / plugin installation is not possible (we have quite some restrictions at work...).

Acknowledgements

12th September 2014 at 2:51pm

TiddlyWiki wouldn't be possible without the ongoing support of the TiddlyWiki Community. Their attention and feedback has made it possible to gain an understanding of what is wanted from the product, and their passion for it has taught me that it is worth the investment.

TiddlyWiki incorporates code from these fine OpenSource projects:

acos Operator

21st October 2021 at 10:28pm
purposecalculate the arccosine value (in radians) of a list of numbers
inputa selection of titles
outputthe arccosine (in radians) of the input numbers

Learn more about how to use Filters

Introduced in v5.1.21 See Mathematics Operators for an overview.

Tip
This is the inverse operation of cos: cos calculate the cosine of an angle (in radian), but acos calculate the angle (in radian) of a cosine.

Examples

acos Operator (Examples)

20th October 2021 at 2:27pm

[[2]acos[]]

=1 =2 =3 =4 +[acos[]]

ActionConfirmWidget

15th November 2020 at 4:03pm

Introduction

Introduced in v5.1.23The action-confirm widget is an action widget that prompts the user for confirmation and invokes other action widgets contained within it only if the user confirms. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-confirm widget is invisible. Any content within it is only processed if the user confirms the action, or the confirmation has been disabled by the $prompt attribute.

AttributeDescription
$messageOptional message displayed to the user when asking for confirmation.
$promptOptional flag, set to "no" to disable the prompt for confirmation. Defaults to "yes"

Examples

Here is an example of a button that asks the user for confirmation, before deleting the caption and tags fields of the current tiddler:

<$button>
<$action-confirm $message="Do you wish to delete the caption and tags?">
<$action-deletefield caption tags/>
Delete "caption" and "tags"
</$action-confirm>
</$button>

That renders as:

Here is an example of a button that uses the optional $prompt attribute to control whether to prompt the user before deleting the text field of the tiddler HelloThere:

<$button>
<$action-confirm $message="Do you wish to delete the text field?" $prompt={{$:/state/promptUser}}>
<$action-deletefield $tiddler="HelloThere" $field="text"/>
</$action-confirm>
Delete text from ~HelloThere
</$button>

That renders as:

ActionCreateTiddlerWidget

2nd June 2024 at 3:32pm

Introduction

The $action-createtiddler widget is an action widget that creates new tiddlers. Action widgets are used within triggering widgets such as the ButtonWidget.

There are several differences from the tm-new-tiddler message:

  • The new tiddler is not automatically displayed in the story river
  • The title of the new tiddler is made available for subsequent operations

Content and Attributes

The action-createtiddler widget is invisible.

AttributeDescription
$basetitleThe initial title that will be attempted. If a tiddler with that title already exists, then a numerical counter is added to the title and incremented until it is unique
$savetitleDeprecated fromv5.1.20(seeActionCreateTiddlerWidget Example 5) A text reference identifying a field or index into which the title of the newly created tiddler will be stored after it is created
$savedrafttitleDeprecated fromv5.1.20(seeActionCreateTiddlerWidget Example 5) A text reference identifying a field or index into which the draft title associated with the newly created tiddler will be stored after it is created. This is useful when using a sequence of action widgets to create a new tiddler, put it into edit mode, and position it within the list of its parent tag
$timestampSpecifies whether the timestamp(s) of the target tiddler will be updated (modified and modifier, plus created and creator for newly created tiddlers). Can be "yes" (the default) or "no"
$templateIntroduced in v5.1.22 The title of a template tiddler, that will be used to create a new tiddler
$overwriteIntroduced in v5.1.22 If set to "yes", it will overwrite existing tiddlers. Be careful!
{any attributes not starting with $}Each attribute name specifies a field to be created in the new tiddler

Variables

Introduced in v5.2.0 The content of the $action-createtiddler widget is executed after the new tiddler has been created. The title of the newly created tiddler is stored in the variable createTiddler-title.

VariablesDescription
createTiddler-titleThe tittle of the tiddler that has been created. See ActionCreateTiddlerWidget Example 5
createTiddler-draftTitleThis variable only exists to have feature parity with the deprecated parameters. It contains the title of a "draft tiddler"

Examples

Create a new page control button

Use the $action-createtiddler widget to create and open a new, non-functional page control button tiddler

titleOutput

Caption for new button:

Default widget with no attributes

The button in this example uses the $action-createtiddler widget to create "New Tiddler", "New Tiddler 1", " New Tiddler 2" and so on

titleOutput

Transcluded base title

The $action-createtiddler widget in this example uses the base title defined in $:/language/DefaultNewTiddlerTitle.

It will overwrite the tiddler if the button is clicked several times.

titleOutput

Template and custom base title

The $action-createtiddler widget in this example uses the basetitle attribute and template: ActionCreateTiddlerWidget Template.

Clicking the button will create: "base", "base 1", "base 2" and so on

titleOutput

Template with override fields and custom base title

The $action-createtiddler widget in this example uses the basetitle attribute and template: ActionCreateTiddlerWidget Template.

There will be new fields "aa" and "bb" which are added to the new tiddlers.

titleOutput

Child action widget uses the created tiddler title

The $action-createtiddler widget in this example uses the createTiddler-title variable to navigate to the created tiddler

titleOutput

ActionCreateTiddlerWidget Example

2nd June 2024 at 4:04pm

Create a new page control button

Use the $action-createtiddler widget to create and open a new, non-functional page control button tiddler

titleOutput

Caption for new button:

ActionCreateTiddlerWidget Example 1

2nd June 2024 at 3:44pm

Default widget with no attributes

The button in this example uses the $action-createtiddler widget to create "New Tiddler", "New Tiddler 1", " New Tiddler 2" and so on

titleOutput

ActionCreateTiddlerWidget Example 2

2nd June 2024 at 4:01pm

Transcluded base title

titleOutput

ActionCreateTiddlerWidget Example 3

2nd June 2024 at 3:52pm

Template and custom base title

titleOutput

ActionCreateTiddlerWidget Example 4

2nd June 2024 at 3:49pm

Template with override fields and custom base title

titleOutput

ActionCreateTiddlerWidget Example 5

2nd June 2024 at 3:50pm

Child action widget uses the created tiddler title

The $action-createtiddler widget in this example uses the createTiddler-title variable to navigate to the created tiddler

titleOutput

ActionCreateTiddlerWidget Template

16th November 2021 at 7:25pm

ActionDeleteFieldWidget

8th June 2024 at 3:13pm

Introduction

The action-deletefield widget is an action widget that deletes specified fields of a tiddler. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-deletefield widget is invisible. Any content within it is ignored.

AttributeDescription
$tiddlerThe title of the tiddler whose fields are to be modified (if not provided defaults to the current tiddler)
$fieldOptional name of a field to delete
$timestampNew in v5.3.4 Specifies whether the timestamp(s) of the target tiddler will be updated (modified and modifier, plus created and creator for newly created tiddlers). Can be "yes" (the default) or "no"
{any attributes not starting with $}Each attribute name specifies a field to be deleted. The attribute value is ignored and need not be specified

Examples

Delete currentTiddler fields using plain attributes

Use the $action-deletefield widget to delete the "caption" and "tags" fields of the current tiddler

titleOutput
captionA caption
tagstag1 tag2 tag3

Click and watch the "caption" and "tags" field disappear.

Delete fields from a specific tiddler

Use the $action-deletefield widget to delete the "list" and "tags" fields of the tiddler HelloThere

titleOutput

Click HelloThere, then click and watch the "list" and "tags" fields disappear

Delete field from a specific tiddler

Use the $field attribute of the $action-deletefield widget to delete the "text" field of the tiddler HelloThere

titleOutput

Click HelloThere, then click and watch the contents of the "text" field disappear

Delete a variable field name

Use the $field attribute of the $action-deletefield widget to delete a variable field name

titleOutput
descriptionThis field will be deleted

Click and watch the "description" field disappear.

Delete field without updating timestamps

Use the $timestamp attribute of the $action-deletefield widget to prevent creation/change of "modified" and "created" fields

titleOutput
descriptionThis field will be deleted

Click and watch the "description" field disappear without the "modified" and "created" fields getting added

ActionDeleteTiddlerWidget

8th June 2024 at 3:22pm

Introduction

The action-deletetiddler widget is an action widget that deletes tiddlers. ActionWidgets are used within triggering widgets such as the ButtonWidget.

There are several differences compared to the WidgetMessage: tm-delete-tiddler:

  • The user is not prompted to confirm the deletion
  • No automatic updating of the story list
  • No special handling of draft tiddlers

Content and Attributes

The action-deletetiddler widget is invisible. Any content within it is ignored.

AttributeDescription
$tiddlerOptional title of the tiddler to be deleted
$filterOptional filter identifying tiddlers to be deleted

Examples

Delete a specific tiddler

Use the $tiddler attribute of the $action-deletefield widget to delete the "HelloThere" tiddler

titleOutput

Delete tiddlers matching a filter

Use the $filter attribute of the $action-deletefield widget to delete all tiddlers tagged "TableOfContents"

titleOutput

ActionListopsWidget

9th May 2024 at 1:50pm

Introduction

The action-listops widget is an action widget that manipulates user lists in any field or data index. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-listops widget is invisible. Any content within it is ignored.

AttributeDescription
$tiddlerThe title of the tiddler whose lists are to be modified (if not provided defaults to the current tiddler)
$fieldThe name of a field to be manipulated as a list (defaults to 'list')
$indexOptional index of a property in a data tiddler index to be manipulated as a list
$filterAn optional filter expression, the output of which will be saved to the field/index being manipulated
$subfilterAn optional subfilter expression, which takes the list being manipulated as input, and saves the modified list back to the field/index being manipulated
$tagsAn optional subfilter expression, which takes the tags field of the target tiddler as input, and saves the modified list of tags back to the tags field

Note on subfilter expressions

If the manipulation depends on the current contents of the list, e.g. when using the toggle operator to toggle the presence of an element, the Filter Run would be prefixed with the + / :and filter run prefix so that it properly receives the list as input.

<$action-listops $subfilter="+[toggle[List Item]]"/>

The above widget will toggle the presence of the element List Item in the field list of the current tiddler, removing or adding the element as necessary.

Similarly, if an element is to always be removed when it is present, the - / :except filter run prefix can be used. Both of the following yield the same result:

<$action-listops $subfilter="-[[ListItem]]"/>
<$action-listops $subfilter="+[remove[ListItem]]"/>

Note that the parameter of the remove Operator is a Title List. To remove one or more titles containing spaces the individual titles must be wrapped in double square brackets, usually via a soft Filter Parameter. See Filtered List Variable Assignment in the SetWidget documentation to learn more.

Without any prefixes, the filter run output is simply dominantly appended to the list.

See also the Examples.

Using $filter or $subfilter

Standalone use of the $subfilter attribute can be replaced by using a (more complicated) $filter attribute value.

For example, the items "abc" and "123" can be appended to the field myfield using the $subfilter attribute:

<$action-listops $field="myfield" $subfilter="abc 123"/>

The same can be achieved using the $filter attribute and prepending the Filter Run [enlist{!!myfield}] to the Filter Expression:

<$action-listops $field="myfield" $filter="[enlist{!!myfield}] abc 123"/>

The short form is more convenient, but the long form is useful for live-debugging complicated $subfilter values using the filter tab of $:/AdvancedSearch. By using $:/AdvancedSearch, the Filter Expression can be tested before using action-listops to modify actual tiddler fields. For this use case, the all[current] portion of the expression needs to be changed to select the proper test tiddler.

Using $tags or $subfilter

Tagging is implemented using a tiddler's 'tags' field, so appending the tags "abc" and "123" using the $tags attribute like this:

<$action-listops $tags="abc 123"/>

is mostly equivalent to using $subfilter along with "tags" for the value of $field:

<$action-listops $field="tags" $subfilter="abc 123"/>

Comparison to ActionSetFieldWidget

In general, ActionSetFieldWidget is better for setting multiple fields at once and for replacing the value of a field, which can also be a list. The ActionListopsWidget is better for modifying a list field based on the existing list and for using a Filter Expression to derive the value of the field.

The ActionSetFieldWidget sets the value of a field using $field and $value attribute pairs or attributes that do not start with a $. A single ActionSetFieldWidget can be used to set any number of fields of a single tiddler.

The ActionListopsWidget replaces or modifies a single field's value using filter expressions.

The following widgets are functionally equivalent:

<$action-setfield $field="myfield" $value="abc 123"/>
<$action-setfield myfield="abc 123"/>
<$action-listops $field="myfield" $filter="abc 123"/>

Note that abc 123 in the first two cases is a literal string that is assigned to the field myfield, but in the third case a filter expression which evaluates to the same string.

Extended Filter Operators

A number of Extended Listops Filters are necessary for the manipulation of lists. These operators have been designed primarily for use in subfilter expressions whereby the modified current list is returned in place of the current list.

Notes on de-duplication

In some cases, there may occur unexpected de-duplication of lists.

Assignments to the list field

When assigning filter results to the list field (default), the generated list is automatically de-duplicated, so

<$action-listops $filter="[[1]] :and[[1]]"/>

will result in the list field of the current tiddler containing the string 1, but not 1 1.

Input to the subfilter expression

The input to the subfilter expression in the $subfilter attribute is also de-duplicated. If you rely on lists containing duplicates, consider using this alternative using the $filter attribute:

<$button>
<$action-listops $field="myfield" $filter="[enlist:raw{!!myfield}] :all[[abc]]" />
Add 'abc' to 'myfield'
</$button>

<$list filter="[enlist:raw{!!myfield}]" template="$:/core/ui/ListItemTemplate" />

That renders as:

The enlist Operator with raw suffix will enlist the list saved in myfield of the current tiddler without de-duplication, while e.g. the list Operator will always de-duplicate. The widget then adds the item abc – whether or not it is already included in the list – and replaces the original list in myfield.

Examples

ActionListopsWidget (Examples)

5th August 2023 at 10:36am

In this example we shall populate and then clear a list in an ordinary field (myfield) of this tiddler (the default).

<$button>
<$action-listops $field="myfield" $filter="efg hlm pqr"/>
Populate 'myfield'
</$button>
<$button>
<$action-listops $field="myfield" $subfilter="abc xyz"/>
Append More Items
</$button>
<$button>
<$action-listops $field="myfield" $subfilter="-abc -hlm"/>
Remove Items
</$button>
<$button>
<$action-listops $field="myfield" $filter="[[]]"/>
Clear 'myfield'
</$button>

<$list filter="[list[!!myfield]]">

</$list>

That renders as:


In this example we shall append and remove items from a list in an ordinary field (myfield) of this tiddler (the default) and sort the resultant list. We shall then remove some of the appended items and sort the resulting list in reverse order.

<$button>
<$action-listops $field="myfield" $subfilter="-efg ijk xyz [[this is a title]] +[sort[]]"/>
Mangle List
</$button>
<$button>
<$action-listops $field="myfield" $subfilter="-xyz -[[this is a title]] +[!sort[]]"/>
Unmangle List
</$button>

<$list filter="[list[!!myfield]]">

</$list>

That renders as:


The following example toggles the tag Examples for the current tiddler.

<$button>
<$action-listops $tags="+[toggle[Examples]]"/>
Toggle 'Examples' tag
</$button>

That renders as:


In this example we shall append a few tags to the 'tags' field of this tiddler (the default). We shall then remove some of the appended tags.

ActionLogWidget

5th January 2026 at 12:11pm

Introduction

Introduced in v5.1.23 The $action-log widget is an action widget that can be used to output debugging information to the JavaScript console supported by most browsers. This can be useful to observe and debug the behavior within a sequence of actions.

When the action is invoked, the names and values of all attributes are logged to the JavaScript console.

<$action-log name=value />

ActionWidgets are used within triggering widgets such as the ButtonWidget.

Note
For debugging outside of actions see LogWidget

Content and Attributes

The $action-log widget is invisible. Any content within it is ignored.

AttributeDescription
$$filter(Optional) All variables whose name matches the Filter Expression will be logged
$$message(Optional) A message to display as the title of the information logged. Useful when several $action-log widgets are used in sequence
$$all(Optional) Set to yes to log all variables

Note
If <$action-log /> is called without any attributes, all defined variables will be logged as if $$all=yes were set.

Note
When logging Variable Attribute Values, the body text of macros and procedures will be output as their value. Functions are evaluated and their first result is logged.

Examples

Basic Example

Log the value of variable name, the first result of the filter expression [tag[Learning]] and the value of field created of the current tiddler:

<$action-log name=<<name>> filter={{{ [tag[Learning]] }}} created={{!!created}} />

Example using $$filter and $$message

Log all core variables (which start with tv-) with a table title:

<$action-log $$message="Core Variables" $$filter="[prefix[tv-]]" />

Widget Debugging

Change a misbehaving $action-setfield widget to an $action-log widget to verify that currentTiddler and value match their expected values:

Tip
If an action widget is not behaving as expected it is often useful to temporarily change it to an $action-log widget so that the passed attributes can be verified.

<$action-log $tiddler=<<currentTiddler>> $field="text" $value=<<value>> />

This application is the primary reason that the attributes of the $action-log widget are prefixed with two dollar signs instead of one. Otherwise, the attributes of the original widget could be interpreted as attributes to $action-log and lead to unintended consequences.

Example with Function

Log the tiddlerList function definition and its first evaluation result:

\function tiddlerList() [tag[Learning]]

<$action-log $$filter="[title[tiddlerList]]" value=<<tiddlerList>> />

Note
The values output with the $$filter or $$all attributes will only contain the definition of functions instead of their values, as the evaluation of many functions can lead to significant performance penalties.

ActionNavigateWidget

20th February 2015 at 4:20pm

Introduction

The action-navigate widget is an action widget that sends a tm-navigate message back up the widget tree. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-navigate widget is invisible. Any content within it is ignored.

AttributeDescription
$toThe title of the target tiddler for the navigation (if not provided defaults to the current tiddler
$scrollOptional parameter determining whether the navigation will also cause a scroll to the target tiddler (see below)

Scroll handling

The optional $scroll attribute can be set to "yes" to force scrolling to occur to bring the target tiddler into view. If set to "no" then scrolling does not occur. If the $scroll attribute is omitted then scrolling occurs unless either:

  • the control key is pressed
  • the action was initiated with the middle mouse button (if available)

Note that if navigating to multiple tiddlers at once you should use the same $scroll setting for all of them.

Examples

Here is an example of button that navigates to two different tiddlers at once:

<$button>
<$action-navigate $to="ButtonWidget"/>
<$action-navigate $to="ActionWidgets"/>
Click me!
</$button>

That renders as:

ActionPopupWidget

31st July 2023 at 7:30pm

Introduction

The action-popup widget is an action widget that triggers the display of a popup defined via a state tiddler, or clears all displayed popups. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-popup widget is invisible. Any content within it is ignored.

AttributeDescription
$stateThe title of the state tiddler for the popup
$coordsOptional coordinates for the handle to which popup is positioned (see Coordinate Systems for the supported formats)
$floatingIntroduced in v5.2.0 Optional. Defaults to no. Set to yes to create a popup that must be closed explicitly.

Introduced in v5.1.23 If the $coords attribute is missing or empty then all popups are cancelled.
Introduced in v5.2.4 The $coords attribute supports absolute and relative coordinates. See Coordinate Systems for more information.

Tip
Delete the state tiddler for a floating popup to close it.

Examples

Here is an example of button that triggers the "more" button in the sidebar "Tools" tab. You may need to scroll to see the popup

<$button>
<$action-setfield $tiddler="$:/state/tab/sidebar--595412856" $value="$:/core/ui/SideBar/Tools"/>
<$action-popup $state="$:/state/popup/more--810643385" $coords="(0,20,0,0)"/>
Click me!
</$button>

That renders as:

ActionSendMessageWidget

23rd October 2021 at 4:01pm

Introduction

The action-sendmessage widget is an action widget that sends a message back up the widget tree. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-sendmessage widget is invisible. Any content within it is ignored.

AttributeDescription
$messageThe message to send (eg, WidgetMessage: tm-new-tiddler)
$paramOptional parameter string whose meaning is dependent on the message being sent
$nameOptional name of additional parameter
$valueValue for optional parameter whose name is specified in $name
$namesIntroduced in v5.2.1 Optional filter evaluating to a list of additional parameter names
$valuesIntroduced in v5.2.1 Optional filter evaluating to a list of parameter values corresponding to the parameters names specified in $names
{any attributes not starting with $}Multiple additional, optional named parameters that are attached to the message

Examples

Here is an example of button that displays both a notification and a wizard, and creates a new tiddler with tags and text:

<$button>
<$action-sendmessage $message="tm-modal" $param="SampleWizard"/>
<$action-sendmessage $message="tm-notify" $param="SampleNotification"/>
<$action-sendmessage $message="tm-new-tiddler" title="This is newly created tiddler" tags="OneTag [[Another Tag]]" text=<<now "Today is DDth, MMM YYYY">>/>
Click me!
</$button>

That renders as:

ActionSetFieldWidget

22nd March 2025 at 1:01am

Introduction

The action-setfield widget is an action widget that assigns values to the fields of a tiddler. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-setfield widget is invisible. Any content within it is ignored.

AttributeDescription
$tiddlerThe title of the tiddler whose fields are to be modified (if not provided defaults to the current tiddler)
$fieldOptional name of a field to be assigned the $value attribute
$indexOptional index of a property in a data tiddler to be assigned the $value attribute
$valueThe value to be assigned to the field or index identified by the $field or $index attribute. If neither is specified then the value is assigned to the text field. If no value is specified, $field or $index will be deleted.
$timestampSpecifies whether the timestamp(s) of the target tiddler will be updated (modified and modifier, plus created and creator for newly created tiddlers). Can be "yes" (the default) or "no"
{any attributes not starting with $}Each attribute name specifies a field to be modified with the attribute value providing the value to assign to the field

Examples

Here is an example of a pair of buttons that open the control panel directly to specified tabs. They work by using action-setfield to set the state tiddler for the control panel tabs.

<$button>
<$action-setfield $tiddler="$:/state/tab-1749438307" text="$:/core/ui/ControlPanel/Appearance"/>
<$action-navigate $to="$:/ControlPanel"/>
Go to Control Panel "Appearance" tab
</$button>

<$button>
<$action-setfield $tiddler="$:/state/tab-1749438307" text="$:/core/ui/ControlPanel/Settings"/>
<$action-navigate $to="$:/ControlPanel"/>
Go to Control Panel "Settings" tab
</$button>

That renders as:

Here is an example of a button that assigns tags and fields to the tiddler HelloThere, and then navigates to it and opens the tiddler info panel on the "Fields" tab:

<$button>
<$action-setfield $tiddler="HelloThere" tags="NewTag [[Another New Tag]]" color="red"/>
<$action-setfield $tiddler="$:/state/popup/tiddler-info--1779055697" text="(568,1443,33,39)"/>
<$action-setfield $tiddler="$:/state/tab--1890574033" text="$:/core/ui/TiddlerInfo/Fields"/>
<$action-navigate $to="HelloThere"/>
Modify ~HelloThere
</$button>

That renders as:

Here is an example of a button that assigns tags and fields to the tiddler HelloThere, and then initiates editing it:

<$button>
<$action-setfield $tiddler="HelloThere" tags="MoreTag [[Further More Tags]]" color="green"/>
<$action-sendmessage $message="tm-edit-tiddler" $param="HelloThere"/>
Edit ~HelloThere
</$button>

That renders as:

Here is an example of a button that opens the control panel directly to the "Appearance" tabs:

<$button>
<$action-setfield $tiddler="$:/state/tab-1749438307" $field="text" $value="$:/core/ui/ControlPanel/Appearance"/>
<$action-navigate $to="$:/ControlPanel"/>
Go to Control Panel "Appearance" tab
</$button>

That renders as:

Here is an example of a button that will update the value of an existing field in a tiddler

<$button>
<$action-setfield $tiddler="Test" existing_field_name="new field value"/>
Update Field existing_field_name in tiddler Test
</$button>

That renders as:

ActionSetMultipleFieldsWidget

23rd October 2021 at 4:01pm

Introduction

The action-setmultiplefields widget is an action widget that assigns multiple fields to a tiddler where the names and values of the fields are specified as separate filters. ActionWidgets are used within triggering widgets such as the ButtonWidget.

Content and Attributes

The action-setmultiplefields widget is invisible. Any content within it is ignored.

AttributeDescription
$tiddlerOptional title of the tiddler to modify (defaults to the current tiddler)
$fieldsOptional filter evaluating to the names of a list of fields to assign. Either $fields or $indexes must be specified
$indexesOptional filter evaluating to the names of a list of indexes to assign. Either $fields or $indexes must be specified
$valuesFilter evaluating to the values to be assigned to the fields or indexes
$timestampSpecifies whether the timestamp(s) of the target tiddler will be updated (modified and modifier, plus created and creator for newly created tiddlers). Can be "yes" (the default) or "no"

Examples

Here is an example of button that uses the data in Days of the Week to assign fields day-Monday, day-Tuesday etc. to the tiddler "HelloThere":

<$button>
<$action-setmultiplefields $tiddler="HelloThere" $fields="[list[Days of the Week]addprefix[day-]]" $values="[list[Days of the Week]]"/>
Click me!
</$button>

That renders as:

actionTiddler Variable

12th June 2024 at 11:52am

The variable actionTiddler is used in subtly different ways by different widgets:

actionTiddlerList Variable

12th June 2024 at 11:55am

ActionWidget Execution Modes

16th November 2021 at 7:32pm

Introduced in v5.2.0 The default behaviour of action widgets has some peculiarities that often cause confusion. There is now an improved mode that simplifies how things work, but due to BackwardsCompatibility constraints, it must be explicitly engaged in order to take advantage of it.

The peculiarities relate to the way that the results of previous action widgets are available to subsequent action widgets. By default, action widgets are refreshed before each execution which ensure that they reflect the results of previous actions. However, ordinary widgets are not updated in the same way.

In the following contrived example, a button triggers a series of actions that should result in the string foo being assigned to the text field of the tiddler ActionTestTiddler. However, it fails to produce the expected result because the <$set> widget is not refreshed with the new value of ActionTestTiddler after the execution of the first <$action-setfield> widget.

\define actions()
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
</$set>
\end

Current value of ActionTestTiddler: {{ActionTestTiddler}}

<$button actions=<<actions>>>
Click me
</$button>

That renders as:

Current value of ActionTestTiddler:

The new behaviour avoids these problems by refreshing all widgets before execution, not just action widgets. It is engaged by running the actions in a scope that includes the variable tv-action-refresh-policy set to the value always. (The default value for tv-action-refresh-policy is once).

The assignment can be done within an action string, or via a local variable declaration containing the widget triggering the action.

Warning
Do not attempt to set tv-action-refresh-policy globally; the core will only work correctly with the default setting

The example above works as expected with the addition of tv-action-refresh-policy:

\define tv-action-refresh-policy() always

\define actions()
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
</$set>
\end

Current value of ActionTestTiddler: {{ActionTestTiddler}}

<$button actions=<<actions>>>
Click me
</$button>

That renders as:

Current value of ActionTestTiddler:

ActionWidgets

31st October 2021 at 5:29pm

Action widgets are a special type of widget that have no visual appearance but perform an action when triggered (such as sending a message, navigating to a tiddler, or changing the value of a tiddler). Action widgets are used in association with other widgets that trigger those actions (for example, the ButtonWidget).

The following action widgets are provided:

There are two ways to use action widgets:

  • Placing them within an action string attribute (typically called actions) on the triggering widget (this is the preferred way)
  • Embedding the actions within the triggering widget (an older technique that is now deprecated)

Using action string attributes

The action widgets are passed as a string to the actions attribute of the triggering widget. Usually, it is more convenient to use a macro to assign the action widgets to a variable. For example, here is a button that triggers two actions of sending different messages:

\define my-actions()
<$action-sendmessage $message="tm-home"/>
<$action-sendmessage $message="tm-full-screen"/>
\end

<$button actions=<<my-actions>>>
Click me!
</$button>

Directly embedding action widgets

The action widgets need not be immediate children of their triggering widget, but they must be descendents of it. The actions are performed in sequence. Here is the above example rewritten to use embedding:

<$button>
<$action-sendmessage $message="tm-home"/>
<$action-sendmessage $message="tm-full-screen"/>
Click me!
</$button>

Action Execution Modes

Introduced in v5.2.0 The default behaviour of action widgets has some peculiarities that often cause confusion. There is now an improved mode that simplifies how things work, but due to BackwardsCompatibility constraints, it must be explicitly engaged in order to take advantage of it.

The peculiarities relate to the way that the results of previous action widgets are available to subsequent action widgets. By default, action widgets are refreshed before each execution which ensure that they reflect the results of previous actions. However, ordinary widgets are not updated in the same way.

In the following contrived example, a button triggers a series of actions that should result in the string foo being assigned to the text field of the tiddler ActionTestTiddler. However, it fails to produce the expected result because the <$set> widget is not refreshed with the new value of ActionTestTiddler after the execution of the first <$action-setfield> widget.

\define actions()
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
</$set>
\end

Current value of ActionTestTiddler: {{ActionTestTiddler}}

<$button actions=<<actions>>>
Click me
</$button>

That renders as:

Current value of ActionTestTiddler:

The new behaviour avoids these problems by refreshing all widgets before execution, not just action widgets. It is engaged by running the actions in a scope that includes the variable tv-action-refresh-policy set to the value always. (The default value for tv-action-refresh-policy is once).

The assignment can be done within an action string, or via a local variable declaration containing the widget triggering the action.

Warning
Do not attempt to set tv-action-refresh-policy globally; the core will only work correctly with the default setting

The example above works as expected with the addition of tv-action-refresh-policy:

\define tv-action-refresh-policy() always

\define actions()
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
</$set>
\end

Current value of ActionTestTiddler: {{ActionTestTiddler}}

<$button actions=<<actions>>>
Click me
</$button>

That renders as:

Current value of ActionTestTiddler:

add Operator

21st March 2023 at 1:06pm
purposetreating each input title as a number, add to each the numeric value of the parameter
inputa selection of titles
parameterN=a number
outputthe input as numbers, but with N added to each one

Learn more about how to use Filters

add Operator (Examples)

11th June 2019 at 12:55pm

[[23]add[19]]

=1 =2 =3 =4 +[add[4]]

Adding a table of contents to the sidebar

6th November 2018 at 10:41pm

The standard mechanisms in TiddlyWiki for creating Table-of-Contents are macros known collectively as "toc" macros (click on link to learn more about macros). They use Tagging as their means of creating relationships, so be sure to review the Tagging topic tiddler if tagging is a new concept for you.

A customisable table of contents can be added to the sidebar with the following steps:

  1. Create a tiddler called TableOfContents
  2. Give it the tag $:/tags/SideBar
  3. Set the text to
    
    <div class="tc-table-of-contents">
    
    <<toc-selective-expandable 'TableOfContents'>>
    
    </div>
  4. Add a caption field with the text Contents
  5. Add a list-after field with the text $:/core/ui/SideBar/Open

Add entries to the table of contents by creating tiddlers tagged TableOfContents. An easy way is to choose new here from the tiddler toolbar of the TableOfContents tiddler. (if you don't see the "new here" button, click on the down arrow to see more menu options.)

To create child tiddlers (tiddlers that come below other tiddlers), tag them with the name of the parent tiddler.

Adding a Twitter Follow button

19th September 2014 at 4:15pm

Here's a macro that provides a Twitter Follow button for a particular username:

\define twitterFollowButton(username)
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=$username$" style="width:300px; height:20px;"></iframe>
\end

The only change from the version published at https://dev.twitter.com/docs/follow-button is that new lines have been removed.

Note that the src URL is given without a protocol (ie "http" or "https"). It's done this way so that it works on sites whether they are hosted on a HTTP or HTTPS domain. If you want the Twitter button to work while using a TiddlyWiki offline on a "file://" URL, then you'll need to manually add the protocol. For example:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=jermolene" style="width:300px; height:20px;"></iframe>

addprefix Operator

3rd February 2015 at 6:18pm
purposeextend each input title with a prefix
inputa selection of titles
parameterS=a string of characters
outputthe input, but with S added to the start of each title

Learn more about how to use Filters

addprefix Operator (Examples)

18th January 2015 at 6:31pm

Cat Garden [[Favourite Armchair]] +[addprefix[My ]]

addsuffix Operator

3rd February 2015 at 6:32pm
purposeextend each input title with a suffix
inputa selection of titles
parameterS=a string of characters
outputthe input, but with S added to the end of each title

Learn more about how to use Filters

addsuffix Operator (Examples)

18th January 2015 at 6:31pm

[[London]addsuffix[ Underground]]

Adopt a Titles Policy

12th September 2014 at 3:01pm

As the structures within your TiddlyWiki documents get more complex it can be hard to keep the titles of tiddlers consistent. For example, should terms be defined in the plural or the singular? Camel case or separate words?

Recording a formal titling policy can help to reduce confusion. For example, the titling policies for this wiki are recorded in the Documentation Style Guide.

SystemTiddler Titles

A useful convention is to use the prefix $:/_ for any system tiddlers that you create to ensure that they are near the top of the system tiddler listing in the sidebar

after Operator

3rd February 2015 at 6:32pm
purposefind which input title follows a specified one
inputa selection of titles
parameterT=one of those titles
outputthe title that immediately follows T in the input

Learn more about how to use Filters

If T is not present in the input, or is the last title there, then the output is empty.

Examples

after Operator (Examples)

18th January 2015 at 6:31pm

These examples make use of the Days of the Week tiddler. The Thursday tiddler shows a further example.

[list[Days of the Week]after[Monday]]

[list[Days of the Week]after[Sunday]]

AlertMechanism

6th June 2016 at 12:59pm

Alerts are displayed as yellow boxes overlaying the main TiddlyWiki window. Each one corresponds to a tiddler with the tag $:/tags/Alert. Clicking the delete icon on an alert deletes the corresponding tiddler.

Here's a demo .

Alert tiddlers should have the following fields:

FieldDescription
titleBy default, alert titles have the prefix $:/temp/alerts/
textThe text of the alert message
modifiedDate of the alert (used for ordering the alerts on screen)
componentComponent name associated with the alert
tagsMust include $:/tags/Alert

Alice in Wonderland

All Filter Run Prefix

11th July 2023 at 8:46am
purposeunion of sets without de-duplication
inputall titles from previous filter runs
outputoutput titles are appended to the output of previous filter runs without de-duplication.
Introduced in v5.1.23
:allrun

This prefix has an optional shortcut syntax symbol =run

all Operator

21st March 2023 at 1:14pm
purposefind all titles of a fundamental category
inputignored, unless the parameter is empty
parameterzero or more categories
outputthe titles that belong to all the specified categories

Learn more about how to use Filters

The parameter specifies zero or more fundamental categories using the following filter step syntax:

all[<{missingcurrentorphansshadowstagstiddlers+]>}
CategoryMembersSorted
currentjust the current tiddler
missingall non-existent tiddlers to which there is at least one hard linkno
orphansall tiddlers to which there are no hard linksby title
shadowsall the shadow tiddlers that exist, including any that have been overridden with non-shadow tiddlersno
tagsall the tags in use on non-shadow tiddlersno
tiddlersall the non-shadow tiddlers that existno

If the parameter specifies more than one category, they are processed from left to right. The overall output is initially empty, and each category's output is dominantly appended to it in turn. Unrecognised categories contribute nothing to the output.

As a special case, if the parameter is empty, the output is simply a copy of the input. This can be useful when the parameter is a soft parameter.

The is operator is similar, but its scope is restricted to its input.

Examples

all Operator (Examples)

18th January 2015 at 6:31pm

[all[shadows]]

[all[shadows+tiddlers]]

[all[tiddlers+shadows]]

[all[orphans+missing+current]]

[all[current]]

[all[current]tag[Operator Examples]]

[all[current]tag[Recipes]]

Monday Thursday +[all[]]

allafter Operator

8th November 2015 at 5:15am
purposediscard all items except those after the marker
inputa list of items
suffixspecifying a suffix ('include') will include the marker in the output
parametermarker=the list item to be used as a marker
outputall items after the marker

Learn more about how to use Filters

allafter Operator (Examples)

8th November 2015 at 8:05am

These examples make use of the Days of the Week tiddler.

[list[Days of the Week]] +[allafter[Wednesday]]

[list[Days of the Week]] +[allafter:include[Wednesday]]

allbefore Operator

8th November 2015 at 5:15am
purposediscard all items except those before the marker
inputa list of items
suffixspecifying a suffix ('include') will include the marker in the output
parametermarker=the list item to be used as a marker
outputall items before the marker

Learn more about how to use Filters

allbefore Operator (Examples)

8th November 2015 at 5:14am

These examples make use of the Days of the Week tiddler.

[list[Days of the Week]allbefore[Wednesday]]

[list[Days of the Week]allbefore:include[Wednesday]]

A B C D E +[allbefore:include[C]count[]]

AllTiddlers

25th February 2014 at 9:19pm

Current tiddlers:

"A free, open source wiki revisited" by Mark Gibbs, NetworkWorld
"A Thesis Notebook" by Alberto Molina
"ATWiki" by Lamusia Project
"BJTools" by buggyj
"BrainTest - tools for a digital brain" by Danielo Rodriguez
"Cardo - Task and Project Management Wiki" by David Szego
"CouchDB Adaptor" by William Shallum
"Creating a baby journal with TiddlyWiki 5" from A Penguin in Redmond
"Dracula - a dark palette for TiddlyWiki" by SlyBouhafs & zenorocha
"Drift - Collect, Organise, Grow." by Tony K
"Dropboard" by Reid Gould
"Dynamic Tables" by Jed Carty
"Encrypt single tiddler plugin" by Danielo Rodriguez
"file-backups" Extension for Firefox by pmario
"Filter Examples" by Tobias Beer
"Font Awesome 5 Free SVGs for TiddlyWiki" by morosanuae
"Ghostwriter theme by Rory Gibson" adapted for TW5 by Riz
"Gospel Bubbles" by Rev. David Gifford
"Grok TiddlyWiki" by Soren Bjornstad
"GSD5" by Roma Hicks
"Hacks" by Thomas Elmiger
"Heeg.ru" by sini-Kit
"In My Socks" by Jed Carty
"JD Mobile Layout plugin" by JD
"JD's palettes" by JD
"Lucky Sushi" online shop by sini-Kit
"Mal's Sandbox" by Mal
"MathCell" by Stephen Kimmel
"Microblogging con Tiddlywiki" by Juan
"Moments: A little color won't hurt" by Riz
"Mono theme" by JD
"muritest" by Simon Huber
"Notebook theme" by Nicolas Petton
"Noteself" by Danielo Rodríguez
"Notizen mit TiddlyWiki systemübergreifend nutzen" by Michael Sonntag
"PETTIL - Forth for the Commodore PET" by Charlie Hitselberger
"Reveal.js" by Devin Weaver
"Setting Up a Personal TiddlyWiki Server on OS X" by Kris Johnson
"Shining Ark Using TiddlyWiki" by Helu
"SK Plugins" by Stephen Kimmel
"Slides and Stories" by Jan
"Stroll - a Roam-like experience" by David Gifford
"TB5 - a pocket full of tips" by Tobias Beer
"Tekan: Kanban that stays with you" by Riz
"TiddlyServer" by Matt Lauber
"TiddlyStudy" by Kebi
"TiddlyWiki 5 im Betatest" by besim
"TiddlyWiki for Scholars" by Alberto Molina
"TiddlyWiki guide FR" by Sylvain Naudin
"TiddlyWiki Knowledge Network" by Dmitry Sokolov
"TiddlyWiki Notes" by James Anderson
"TiddlyWiki Posts" by Jeffrey Kishner
"TiddlyWiki Toolmap" by David Gifford
"TiddlyWiki 舞" by Bram Chen
"TiddlyWiki" by Sander de Boer
"TiddlyWiki5 Bourbon" by mkt_memory
"TiddlyWiki5 Forum on Reddit" by Riz
"TiddlyWiki5 Playground" by Ton Gerner
"TiddlyWiki5^2 documenting while learning TiddlyWiki5" by Iannis Zannos
"TW Icons" by morosanuae
"TW5 Magick" by Stephan Hradek
"TW5 Tribal Knowledge" from Scott Kingery
"TW5-TeXZilla" plugin by Joe Renes
"Un wiki sur votre BiblioBox avec TiddlyWiki" from A Penguin in Redmond
"Whitespace, a negative-spacious, webapp-nostalgic theme" by JD
"Wikilabs" by PMario
"Wills Q&D gTD" by Matabele
"X3DOM for TiddlyWiki 5" by Jamal Wills
"デザイン刷新。次の25年を目指すTiddlyWiki" by Moongift
@Arlen22
@Christian_Byron
@ericshulman
@Jermolene
@linonetwo
@MotovunJack
@pmario
A Gentle Guide to TiddlyWiki
About
abs Operator
abs Operator (Examples)
Ace Editor Plugin by Joerg Plewe
Acknowledgements
acos Operator
acos Operator (Examples)
ActionConfirmWidget
ActionCreateTiddlerWidget
ActionCreateTiddlerWidget Example
ActionCreateTiddlerWidget Example 1
ActionCreateTiddlerWidget Example 2
ActionCreateTiddlerWidget Example 3
ActionCreateTiddlerWidget Example 4
ActionCreateTiddlerWidget Example 5
ActionCreateTiddlerWidget Template
ActionDeleteFieldWidget
ActionDeleteTiddlerWidget
ActionListopsWidget
ActionListopsWidget (Examples)
ActionLogWidget
ActionNavigateWidget
ActionPopupWidget
ActionSendMessageWidget
ActionSetFieldWidget
ActionSetMultipleFieldsWidget
actionTiddler Variable
actionTiddlerList Variable
ActionWidget Execution Modes
ActionWidgets
add Operator
add Operator (Examples)
Adding a table of contents to the sidebar
Adding a Twitter Follow button
addprefix Operator
addprefix Operator (Examples)
addsuffix Operator
addsuffix Operator (Examples)
Adopt a Titles Policy
after Operator
after Operator (Examples)
AlertMechanism
Alice in Wonderland
All Filter Run Prefix
all Operator
all Operator (Examples)
allafter Operator
allafter Operator (Examples)
allbefore Operator
allbefore Operator (Examples)
AllTiddlers
AlphaReleases
Alternative page layouts
Amazon Web Services Plugin
Anchor Links using HTML
And Filter Run Prefix
append Operator
append Operator (Examples)
Apple
applypatches Operator
Articles
asin Operator
asin Operator (Examples)
atan Operator
atan Operator (Examples)
atan2 Operator
atan2 Operator (Examples)
Attribute Selectors
Audio
AutoSave
average Operator
average Operator (Examples)
backlinks Operator
backlinks Operator (Examples)
backtranscludes Operator
backtranscludes Operator (Examples)
Bags and Recipes
Base64
before Operator
before Operator (Examples)
Behaviour of invoked variables depends on how the variable was declared
Behaviour of variables invoked via filter expression function call
Behaviour of variables invoked via filter operator parameter
Behaviour of variables invoked via normal wikitext
Behaviour of variables invoked via widget attributes
BetaReleases
bf Operator
Block Mode WikiText
Block Mode WikiText (Examples)
Block Quotes in WikiText
Blog Edition
Blurry Lawn.jpg
Brackets
Brownies
BrowserCompatibility
BrowserStorage Plugin
BrowseWidget
BT
BuildCommand
Building TiddlyWikiClassic
butfirst Operator
butlast Operator
butlast Operator (Examples)
ButtonWidget
CamelCase
Caruso - Ave Maria
Cascade Filter Run Prefix
Cascade Filter Run Prefix (Examples)
Cascades
Cascading Style Sheets
ceil Operator
ceil Operator (Examples)
changecount Macro
changecount Macro (Examples)
Changes to filters in 5.0.9-beta
charcode Operator
charcode Operator (Examples)
CheckboxWidget
CheckboxWidget (field Mode)
CheckboxWidget (filter Mode)
CheckboxWidget (indeterminate)
CheckboxWidget (index Mode)
CheckboxWidget (listField Mode)
CheckboxWidget (listIndex Mode)
CheckboxWidget (tag Mode)
Chick Peas
Chinese (Simplified) Edition
Chinese (Traditional) Edition
ClearPasswordCommand
Code Blocks in WikiText
Code styles and auto format settings for IDEs
CodeBlockWidget
CodeMirror Plugin
colour Macro
colour Macro (Examples)
colour-picker Macro
colour-picker Macro (Example 1)
colour-picker Macro (Examples)
ColourPalettes
Comma-Separated Values
Commands
commands Operator
commands Operator (Examples)
CommandsCommand
Community
Community Cards
Community Cards Caveats
Community Editions
Community Links Aggregator
Community Palettes
Community Plugins
Community Survey 2025
Community Themes
Community/Team
compare Operator
compare Operator (Examples)
Compose ballad
CompoundTiddlers
Concatenating a text reference to create a URL
Concatenating text and variables using macro substitution
Concatenating variables to create a URL
Concepts
Conditional Operators
Conditional Shortcut Syntax
Configuring startup tiddlers
Configuring the default TiddlerInfo tab
Consent Banner Plugin
Constructing JSON tiddlers
contains Operator
contains Operator (Examples)
Contents
ContentType
contrastcolour Macro
Contributing
ContributingTemplate
Contributor License Agreement
Contributors
Coordinate Systems
copy-to-clipboard Macro
copy-to-clipboard Macro (Examples)
Copying tiddlers between TiddlyWiki files
Core Classes
Core Functions
Core Icons
Core Macros
Core Messages
Core Procedures
Core Team
Core Variables
Core Widgets
cos Operator
cos Operator (Examples)
count Operator
count Operator (Examples)
CountWidget
Creating a custom export format
Creating a splash screen
Creating and editing tiddlers
Creating journal tiddlers
Creating new toolbar buttons
Creating SubStories
csvtiddlers Macro
Current Tiddler
currentTab Variable
currentTiddler Variable
currentTiddler Variable (Examples)
Custom data-styles
Custom styles by data-tags
Custom styles by data-tiddler-title
Custom styles by user-class
Custom Styles FAQ
Custom tag pill styles
Custom Widgets
Customise TiddlyWiki
Customising search results
Customising Tiddler File Naming
Customising TiddlyWiki's user interface
Customizing EditTemplate field rendering
cycle Operator
cycle Operator (Examples)
D3 Plugin
Dashes in WikiText
Data URI
DataTiddlers
datauri Macro
datauri Macro (Examples)
DataWidget
Date Fields
DateFormat
datepicker plugin based on Pikaday, by kixam
Days of the Week
days Operator
days Operator (Examples)
Debugging Stylesheets
decodebase64 Operator
decodebase64 Operator (Examples)
decodehtml Operator
decodehtml Operator (Examples)
decodeuri Operator
decodeuri Operator (Examples)
decodeuricomponent Operator
decodeuricomponent Operator (Examples)
DefaultTiddlers
Definitions
Definitions in WikiText
DeleteTiddlersCommand
Demo Tiddler List with Custom Story Tiddler Template
Demonstration: keyboard-driven-input Macro
Deprecated - What does it mean
Deprecated Core Classes
Description Lists in WikiText
deserialize Operator
deserialize Operator (Examples)
Deserializers
deserializers Operator
deserializers Operator (Examples)
Deutsch (Deutschland) Edition
Deutsch (Österreich) Edition
Developer Experience Team
Developers
DictionaryTiddlers
DiffTextWidget
Disabling Plugins
Discover TiddlyWiki
Displaying Community Cards
Disqus comments plugin by bimlas
divide Operator
divide Operator (Examples)
Document Object Model
Documentation Macros
Documentation Style Guide
Dominant Append
done
DraftMechanism
Drag and Drop
DragAndDropMechanism
DraggableWidget
DroppableWidget
DropzoneWidget
dumpvariables Macro
dumpvariables Macro (Examples)
duplicateslugs Operator
Dynaview Plugin
each Operator
each Operator (Examples)
eachday Operator
eachday Operator (Examples)
Edición en Castellano
Edit Template Body Cascade
EditBitmapWidget
Editing Tiddlers with Emacs
Editing Tiddlers with Vim
Édition en Français (France)
editiondescription Operator
Editions
editions Operator
EditionsCommand
Editor toolbar
EditTextWidget
EditWidget
Else Filter Run Prefix
else Operator
else Operator (Examples)
Emergency Tiddler Export
Empty Edition
encodebase64 Operator
encodebase64 Operator (Examples)
encodehtml Operator
encodehtml Operator (Examples)
encodeuri Operator
encodeuri Operator (Examples)
encodeuricomponent Operator
encodeuricomponent Operator (Examples)
Encrypted Wiki Import Problems
Encryption
EncryptWidget
enlist Operator
enlist Operator (Examples)
enlist-input Operator
enlist-input Operator (Examples)
EntityWidget
Environment Variables on Node.js
ErrorWidget
escapecss Operator
escapecss Operator (Examples)
escaperegexp Operator
escaperegexp Operator (Examples)
Eucaly's Tiddly World
EventCatcherWidget
Example config-tiddlyweb-host for IIS
Example for tag Macro
Example package.json for IIS
Example Table of Contents: Expandable
Example Table of Contents: Selectively Expandable
Example Table of Contents: Selectively Expandable (custom icons)
Example Table of Contents: Simple
Example Table of Contents: Sorted Expandable
Example Table of Contents: Tabbed External
Example Table of Contents: Tabbed Internal
Example tiddlywiki.info for IIS
Example web.config for IIS
Examples
Except Filter Run Prefix
exponential Operator
exponential Operator (Examples)
Extended Listops Filters
External Attachments Plugin
ExternalImages
Favicon template.svg
Favorites by Mohammad
Features
FetchCommand
Field Editor Cascade
field Operator
field Operator (Examples)
FieldMangler Widget (Examples)
FieldManglerWidget
fields Operator
fields Operator (Examples)
FieldsWidget
FillWidget
Filter Expression
Filter Filter Run Prefix
Filter Filter Run Prefix (Examples)
filter Operator
filter Operator (Examples)
Filter Operators
Filter Parameter
Filter Run
Filter Run Prefix
Filter Run Prefix (Examples)
Filter Step
Filter Syntax
Filter Syntax History
Filter Whitespace
Filtered Attribute Values
Filters
Find Out More
First
first Operator
first Operator (Examples)
FirstOne
FirstThree
FirstTwo
fixed Operator
fixed Operator (Examples)
floor Operator
floor Operator (Examples)
format Operator
format Operator (Examples)
Formatting in WikiText
Formatting List Results as Tables (no CSS)
Formatting List Results as Tables with CSS - Specified Columns Methods
Formatting List Results as Tables with CSS - Variable Column Method
Formatting text in TiddlyWiki
Forums
Fourth
Free Spaced Repetition Scheduler for TiddlyWiki by oflg
Friday
Full Edition
Full Text Search Plugin by Rob Hoelz
function Operator
function Operator (Examples)
Functions
Funding
Funding TiddlyWiki
Future Proof
Generating Static Sites with TiddlyWiki
GenesisWidget
Geospatial Plugin
get Operator
get Operator (Examples)
Get the Ring
getindex Operator
getindex Operator (Examples)
Getting Started Video
GettingStarted
GettingStarted - Android
GettingStarted - Chrome
GettingStarted - Firefox
GettingStarted - Internet Explorer
GettingStarted - iOS
GettingStarted - Node.js
GettingStarted - Online
GettingStarted - Safari
getvariable Operator
getvariable Operator (Examples)
Git
GitHub
GitHub Saver Tutorial by Mohammad
GitLab
Go to Mordor
Grok TiddlyWiki Banner
GroupedLists
GuerillaWiki
Hamlet
Hard and Soft Links
Hard and Soft Transclusions
Hard Linebreaks in WikiText
Hard Linebreaks with CSS
Hard Linebreaks with CSS - Example
has Operator
has Operator (Examples)
haschanged Operator
Headings in WikiText
Height of text editor
HelloThere
HelloThumbnail
HelloThumbnail - Community Survey 2025
HelloThumbnail - Funding
HelloThumbnail - Grok TiddlyWiki
HelloThumbnail - Intertwingled Innovations
HelloThumbnail - Introduction Video
HelloThumbnail - Latest Version
HelloThumbnail - Marketplace
HelloThumbnail - MultiWikiServer
HelloThumbnail - Newsletter
HelloThumbnail - TiddlyWiki Privacy
HelloThumbnail - TiddlyWikiLinks
HelloThumbnail - TW5-Graph
HelloThumbnail - Twenty Years of TiddlyWiki
HelpCommand
HelpingTiddlyWiki
Hidden Setting: Content to be displayed for empty story
Hidden Setting: Default Tiddler Colour
Hidden Setting: Default Tiddler Icon
Hidden Setting: Default Type for Missing Tiddlers
Hidden Setting: Disable Drag and Drop
Hidden Setting: Disable Lazy Loading
Hidden Setting: Enable File Import in Editor
Hidden Setting: Filename for Save Wiki Button
Hidden Setting: HTML Parser Sandbox
Hidden Setting: Import Content Types for Editor
Hidden Setting: More Tabs Horizontal
Hidden Setting: Navigate on Enter
Hidden Setting: New-Image Type
Hidden Setting: Retain Story ordering
Hidden Setting: Scroll Top Adjustment
Hidden Setting: Search AutoFocus
Hidden Setting: Search Minimum Length
Hidden Setting: Show Edit Preview per Tiddler
Hidden Setting: Sync Logging
Hidden Setting: Sync Polling Interval
Hidden Setting: Sync System Tiddlers From Server
Hidden Setting: Tab Index for Edit-Inputs
Hidden Setting: Tag Pill Drag Filter
Hidden Setting: Tags Minimum Length
Hidden Setting: Template for Save Wiki Button
Hidden Setting: Typing Refresh Delay
Hidden Setting: ViewTemplate and EditTemplate
Hidden Settings
Highlight Plugin
Hire Jeremy Sidebar Segment
Hire the founder of TiddlyWiki
History of TiddlyWiki
HistoryMechanism
Horizontal Rules in WikiText
How to add a banner for GitHub contributions
How to add a new tab to the sidebar
How to apply custom styles
How to apply custom styles by tag
How to build a TiddlyWiki5 from individual tiddlers
How to change the sort order of sub-branches in a TOC macro
How to create a custom story tiddler template
How to create a custom tiddler colour rule
How to create a custom tiddler icon rule
How to create dynamic editor toolbar buttons
How to create keyboard shortcuts
How to Customize TiddlyDesktop
How to embed PDF and other documents
How to export tiddlers
How to hide the author's and other fields with CSS
How to put the last modification date in a banner
How to remove stop words
How to turn off camel case linking
How to update TiddlyWiki to the latest version
How to widen tiddlers (aka storyriver)
HTML Block Elements
HTML Entities
HTML in WikiText
HTML Links in WikiText
HTML Tags
HyperText Markup Language
Icon Gallery
image-picker Macro
image-picker Macro (Example 1)
image-picker Macro (Example 2)
image-picker Macro (Examples)
ImageGallery Example
Images in WikiText
ImageWidget
ImportCommand
Importing Tiddlers
ImportVariablesWidget
Improving TiddlyWiki Documentation
IndexedDB Plugin by Andreas Abeck
indexes Operator
indexes Operator (Examples)
InfoMechanism
InfoPanel
Infrastructure Team
InitCommand
Inline Mode WikiText
Innerwiki Plugin
Insert link
Insert picture
insertafter Operator
insertafter Operator (Examples)
insertbefore Operator
insertbefore Operator (Examples)
Installing a plugin from the plugin library
Installing custom plugins on Node.js
Installing official plugins on Node.js
Installing TiddlyWiki on Microsoft Internet Information Server
Installing TiddlyWiki on Node.js
Installing TiddlyWiki Prerelease on Node.js
Instruction Tiddlers
Interactive Git Documentation by Devin Weaver
Interchangeable Filter Run Prefixes
Intersection Filter Run Prefix
Intersection Filter Run Prefix (Examples)
Intertwingled Innovations
Introducing TiddlyDesktop Video
Introduction to filter notation
Introduction to Lists
Introduction Video
Introduction Video Thumbnail.jpg
is Operator
is Operator (Examples)
Japanese (Japan) Edition
JavaScript
JavaScript Object Notation
JeremyRuston
Jermolene
join Operator
join Operator (Examples)
JSON in TiddlyWiki
Json Mangler plugin by Joshua Fontany
jsonextract Operator
jsonget Operator
jsonindexes Operator
jsonset Operator
jsonset Operator (Examples)
jsonstringify Operator
jsonstringify Operator (Examples)
jsontiddler Macro
JSONTiddlers
jsontiddlers Macro
JSONTiddlerWidget
jsontype Operator
JSZip Plugin
KaTeX Plugin
kdi-demo-configtid
Keyboard Codes
Keyboard Shortcut Descriptor
Keyboard Shortcut Tiddler
keyboard-driven-input Macro
KeyboardShortcuts
KeyboardWidget
Kill the Dragon
Kin filter operator by bimlas
Kookma Plugin Library by Mohammad
Korean (Korea Republic) Edition
Languages
last Operator
last Operator (Examples)
Latest
LazyLoading
Leaflet maps plugin by Sylvain Comte
Learning
Legacy
length Operator
length Operator (Examples)
LetWidget
levenshtein Operator
levenshtein Operator (Examples)
License
limit Operator
limit Operator (Examples)
lingo Macro
lingo Macro (Examples)
LinkCatcherWidget
Linking in WikiText
links Operator
links Operator (Examples)
LinkWidget
list Operator
list Operator (Examples)
list-links Macro
list-links Macro (Examples)
list-links-draggable Macro
list-links-draggable Macro (Examples)
list-tagged-draggable Macro
list-tagged-draggable Macro (Examples)
list-thumbnails Macro
list-thumbnails Macro (Examples)
listed Operator
listed Operator (Examples)
ListenCommand
ListField
ListopsData
Lists in WikiText
ListWidget
Literal Attribute Values
LoadCommand
Locator plugin by bimlas
log Operator
log Operator (Examples)
LogWidget
lookup Operator
lookup Operator (Examples)
lowercase Operator
lowercase Operator (Examples)
Macro Call Syntax
Macro Calls
Macro Calls in WikiText
Macro Calls in WikiText (Examples)
Macro Definition Syntax
Macro Definitions
Macro Definitions in WikiText
Macro Parameter Handling
Macro Pitfalls
Macro Syntax
MacroCallWidget
Macros
Macros in WikiText
Make the beds
makedatauri Macro
makedatauri Macro (Examples)
MakeLibraryCommand
makepatches and applypatches Operator (Examples)
makepatches Operator
Making a custom journal button
Making curved text with SVG
Manually installing a plugin
Map Filter Run Prefix
Map Filter Run Prefix (Examples)
Markdown
Markdown Plugin
match Operator
match Operator (Examples)
Mathematics Operators
MathJax Plugin by Martin Kantor
MathML
max Operator
max Operator (Examples)
maxall Operator
maxall Operator (Examples)
Mechanisms
median Operator
median Operator (Examples)
Meetups
MessageCatcherWidget
MessageHandlerWidgets
Messages
Milk
min Operator
min Operator (Examples)
minall Operator
minall Operator (Examples)
minlength Operator
minlength Operator (Examples)
Mobile Drag And Drop Shim Plugin
Modals
modifier Variable
Modifying JSON tiddlers
moduleproperty Operator
moduleproperty Operator (Examples)
Modules
modules Operator
modules Operator (Examples)
ModuleType
moduletypes Operator
moduletypes Operator (Examples)
Monday
More actions
Motovun Jack.ascii
Motovun Jack.jpg
Motovun Jack.pdf
Motovun Jack.svg
move Operator
move Operator (Examples)
multiply Operator
multiply Operator (Examples)
MultiTiddlerFiles
MultiTiddlerFileSyntax
MultiWikiServer
MultiWikiServer Team
MWS Banner
Named Filter Run Prefix
NamedCommandParameters
namespace Variable
Naming of System Tiddlers
Navigating between open tiddlers
NavigatorWidget
negate Operator
negate Operator (Examples)
New Release Banner
Newnham Horizon.jpg
next Operator
next Operator (Examples)
node-webkit
Node.js
Notes for upgrading to 5.0.11-beta
Notes for upgrading to 5.0.8-beta
Notifications
now Macro
now Macro (Examples)
nsort Operator
nsort Operator (Examples)
nsortcs Operator
nsortcs Operator (Examples)
nth Operator
nth Operator (Examples)
NW.js
OfficialPlugins
Open Collective
Open Collective Logo
OpenSource
Operators without parameters
Or Filter Run Prefix
Order of Tagged Tiddlers
order Operator
Osmosoft
Other Resources
OutputCommand
OXTWIG
pad Operator
pad Operator (Examples)
Paragraphs in WikiText
ParametersWidget
ParametersWidget (Examples)
PasswordCommand
PasswordWidget
Percent Encoding
Performance
Performance Instrumentation
PerlinLight.jpg
PermaLinks
PESpot Lesson Planner by Patrick Detzner
Philosophy of Tiddlers
Pinstripe.gif
Places where the parser ignores WikiText
Platforms
Plugin Dependencies
Plugin Editions
Plugin Fields
Plugin Information Tiddlers
Plugin Ordering
Plugin Stability
Plugin Types
PluginFolders
PluginMechanism
Plugins
Plugins by TheDiveO
PluginsCS
plugintiddlers Operator
plugintiddlers Operator (Examples)
PopupMechanism
power Operator
power Operator (Examples)
Pragma
Pragma: \define
Pragma: \function
Pragma: \import
Pragma: \parameters
Pragma: \parsermode
Pragma: \procedure
Pragma: \rules
Pragma: \whitespace
Pragma: \widget
Pragmas
precision Operator
precision Operator (Examples)
prefix Operator
prefix Operator (Examples)
prepend Operator
prepend Operator (Examples)
Preserving open tiddlers at startup
previous Operator
previous Operator (Examples)
Procedure Call Syntax
Procedure Calls
Procedure Definition Syntax
Procedure Definitions
Procedure Parameter Handling
Procedure Syntax
Procedures
Product Hunt Link
product Operator
product Operator (Examples)
ProductHunt-Badge.svg
Project Team
Projectify by Nicolas Petton
putafter Operator
putafter Operator (Examples)
putbefore Operator
putbefore Operator (Examples)
putfirst Operator
putfirst Operator (Examples)
putlast Operator
putlast Operator (Examples)
Q: How can I style a tiddler if it has "this" AND "that" tag?
Q: How can I style a tiddler if it has "this" OR "that" tag?
Q: How can I use a custom field to style a tiddler?
Q: Is there a way to create dynamic stylesheets?
Q: What if a tiddler has no tags?
qualify Macro
qualify Macro (Examples)
QualifyWidget
Quality Assurance Team
Quick Start
Quick Start: Desktop
Quick Start: DIY
Quick Start: Tiddlyhost
Quick Start: Xememex
Quine
RadioWidget
RadioWidget Example
RadioWidget ExampleTemplate
Railroad Diagrams
Railroad Plugin
range Operator
RangeWidget
RangeWidget Example
rboue's plugins for TiddlyWiki
Reading data from JSON tiddlers
ReadMe
ReadMeBinFolder
Reddit Logo
Reduce Filter Run Prefix
Reduce Filter Run Prefix (Examples)
reduce Operator
reduce Operator (Examples)
Reference
Reference Tiddlers
Refnotes by Mohammad
RefreshMechanism
RefreshThrottling
RegExp in Tiddlywiki by Mohammad
regexp Operator
regexp Operator (Examples)
Release 5.0.0-alpha.11
Release 5.0.0-alpha.12
Release 5.0.0-alpha.13
Release 5.0.0-alpha.14
Release 5.0.0-alpha.15
Release 5.0.0-alpha.16
Release 5.0.0-alpha.17
Release 5.0.1-alpha
Release 5.0.10-beta
Release 5.0.11-beta
Release 5.0.12-beta
Release 5.0.13-beta
Release 5.0.14-beta
Release 5.0.15-beta
Release 5.0.16-beta
Release 5.0.17-beta
Release 5.0.18-beta
Release 5.0.2-beta
Release 5.0.3-beta
Release 5.0.4-beta
Release 5.0.5-beta
Release 5.0.6-beta
Release 5.0.7-beta
Release 5.0.8-beta
Release 5.0.9-beta
Release 5.1.0
Release 5.1.1
Release 5.1.10
Release 5.1.11
Release 5.1.12
Release 5.1.13
Release 5.1.14
Release 5.1.15
Release 5.1.16
Release 5.1.17
Release 5.1.18
Release 5.1.19
Release 5.1.2
Release 5.1.20
Release 5.1.21
Release 5.1.22
Release 5.1.23
Release 5.1.3
Release 5.1.4
Release 5.1.5
Release 5.1.6
Release 5.1.7
Release 5.1.8
Release 5.1.9
Release 5.2.0
Release 5.2.1
Release 5.2.2
Release 5.2.3
Release 5.2.4
Release 5.2.5
Release 5.2.6
Release 5.2.7
Release 5.3.0
Release 5.3.1
Release 5.3.2
Release 5.3.3
Release 5.3.4
Release 5.3.5
Release 5.3.6
Release 5.3.7
Release 5.3.8
Releases
ReleaseTemplate
remainder Operator
remainder Operator (Examples)
remove Operator
remove Operator (Examples)
removeprefix Operator
removeprefix Operator (Examples)
removesuffix Operator
removesuffix Operator (Examples)
RenderCommand
RenderTiddlerCommand
RenderTiddlersCommand
replace Operator
replace Operator (Examples)
ReportingBugs
resolvepath Macro
resolvepath Macro (Examples)
Resources
rest Operator
rest Operator (Examples)
Résumé Builder Edition
RevealWidget
reverse Operator
reverse Operator (Examples)
Rice Pudding
RoadMap
round Operator
round Operator (Examples)
SafeMode
sameday Operator
sameday Operator (Examples)
Sample Headings 1,2,3
Sample Headings 3,4,5
Sample Headings 4,5,6
Sample Tiddler Template
SampleAlert
SampleModal
SampleNotification
SampleTabFour
SampleTabOne
SampleTabThree
SampleTabTwo
sampletag1
sampletag2
SampleTemplate
SampleTiddlerFirst
SampleTiddlerSecond
SampleTiddlerThird
SampleWindowTemplate
SampleWizard
SampleWizard2
Saturday
SaveCommand
SaveTiddlerCommand
savetiddlers: Extension for Firefox by buggyj
SaveTiddlersCommand
SaveTrail Plugin
SaveWikiFolderCommand
Saving
Saving on a PHP Server
Saving on Android
Saving on Browser with File System Access API
Saving on Browser with TiddlyStow
Saving on iPad/iPhone
Saving on TiddlyDesktop
Saving on TiddlyHost
Saving on TiddlySpot
Saving on TidGi Desktop
Saving to a Git service
Saving via a Minimal Ruby Server
Saving via a Minimal Web Server
Saving via WebDAV
Saving with Polly
Saving with the HTML5 fallback saver
Saving with the HTML5 saver
Saving with TiddlyFox
Saving with TiddlyIE
Saving with TW Receiver
SavingMechanism
Scalability
Scripts for TiddlyWiki on Node.js
ScrollableWidget
search Operator
search Operator (Examples)
search-replace Operator
search-replace Operator (Examples)
Searching in TiddlyWiki
Searchwikis by Mohammad
Second
SecondOne
SecondThree
SecondThreeOne
SecondThreeThree
SecondThreeTwo
SecondTwo
SeeAlso by Matias Goldman
Selection Constructors
Selection Constructors: Conditional
SelectWidget
Semantic Colors by Mohammad
sentencecase Operator
sentencecase Operator (Examples)
ServerCommand
Serving TW5 from Android
SetFieldCommand
SetMultipleVariablesWidget
Setting a favicon
Setting a page background image
SetVariableWidget
SetWidget
sha256 Operator
sha256 Operator (Examples)
shadowsource Operator
shadowsource Operator (Examples)
ShadowTiddlers
Share Plugin
Sharing a TiddlyWiki on Dropbox
Sharing your tiddlers with others
Shiraz by Mohammad
Shortcut Filter Run Prefix
show-filter-count Macro
sign Operator
sign Operator (Examples)
Signing the Contributor License Agreement
Simple ways to write protect tiddlers
Simple Zork-like Game by Jed Carty
sin Operator
sin Operator (Examples)
SingleFileApplication
SinglePageApplication
Slider by Mohammad
SlotWidget
slugify Operator
Some of the things you can do with TiddlyWiki
Sort Filter Run Prefix
Sort Filter Run Prefix (Examples)
sort Operator
sort Operator (Examples)
sortan Operator
sortan Operator (Examples)
sortby Operator
sortby Operator (Examples)
sortcs Operator
sortcs Operator (Examples)
sortsub Operator
sortsub Operator (Examples)
Spelling
split Operator
split Operator (Examples)
splitbefore Operator
splitbefore Operator (Examples)
splitregexp Operator
splitregexp Operator (Examples)
standard-deviation Operator
standard-deviation Operator (Examples)
Stanford JavaScript Crypto Library
StartupActions
StateMechanism
Story River
Story Tiddler Template
Story Tiddler Template Cascade
storyTiddler Variable
storyTiddler Variable (Examples)
storyviews Operator
storyviews Operator (Examples)
String Operators
stringify Operator
stringify Operator (Examples)
Structuring TiddlyWiki
Styles and Classes in WikiText
Stylesheet Macros
subfilter Operator
subfilter Operator (Examples)
Submitting a Community Card
substitute Operator
substitute Operator (Examples)
Substituted Attribute Values
subtiddlerfields Operator
subtiddlerfields Operator (Examples)
subtract Operator
subtract Operator (Examples)
Succession Team
suffix Operator
suffix Operator (Examples)
sum Operator
sum Operator (Examples)
Sunday
SystemTag: $:/tags/AboveStory
SystemTag: $:/tags/AdvancedSearch
SystemTag: $:/tags/AdvancedSearch/FilterButton
SystemTag: $:/tags/Alert
SystemTag: $:/tags/BelowStory
SystemTag: $:/tags/ClassFilters/PageTemplate
SystemTag: $:/tags/ClassFilters/TiddlerTemplate
SystemTag: $:/tags/ControlPanel
SystemTag: $:/tags/ControlPanel/Advanced
SystemTag: $:/tags/ControlPanel/Appearance
SystemTag: $:/tags/ControlPanel/Info
SystemTag: $:/tags/ControlPanel/Plugins
SystemTag: $:/tags/ControlPanel/Saving
SystemTag: $:/tags/ControlPanel/Settings
SystemTag: $:/tags/ControlPanel/SettingsTab
SystemTag: $:/tags/ControlPanel/Toolbars
SystemTag: $:/tags/EditorToolbar
SystemTag: $:/tags/EditorTools
SystemTag: $:/tags/EditPreview
SystemTag: $:/tags/EditTemplate
SystemTag: $:/tags/EditToolbar
SystemTag: $:/tags/Exporter
SystemTag: $:/tags/Filter
SystemTag: $:/tags/Global
SystemTag: $:/tags/Global/View
SystemTag: $:/tags/Global/View/Body
SystemTag: $:/tags/Image
SystemTag: $:/tags/ImportPreview
SystemTag: $:/tags/KeyboardShortcut
SystemTag: $:/tags/Layout
SystemTag: $:/tags/Macro
SystemTag: $:/tags/Macro/View
SystemTag: $:/tags/Macro/View/Body
SystemTag: $:/tags/Manager/ItemMain
SystemTag: $:/tags/Manager/ItemSidebar
SystemTag: $:/tags/MoreSideBar
SystemTag: $:/tags/MoreSideBar/Plugins
SystemTag: $:/tags/PageControls
SystemTag: $:/tags/PageTemplate
SystemTag: $:/tags/Palette
SystemTag: $:/tags/PluginLibrary
SystemTag: $:/tags/RawMarkup
SystemTag: $:/tags/RawMarkupWikified
SystemTag: $:/tags/RawMarkupWikified/BottomBody
SystemTag: $:/tags/RawMarkupWikified/TopBody
SystemTag: $:/tags/RawMarkupWikified/TopHead
SystemTag: $:/tags/RawStaticContent
SystemTag: $:/tags/RemoteAssetInfo
SystemTag: $:/tags/SearchResults
SystemTag: $:/tags/ServerConnection
SystemTag: $:/tags/SideBar
SystemTag: $:/tags/SideBarSegment
SystemTag: $:/tags/StartupAction
SystemTag: $:/tags/StartupAction/Browser
SystemTag: $:/tags/StartupAction/Node
SystemTag: $:/tags/Stylesheet
SystemTag: $:/tags/TagDropdown
SystemTag: $:/tags/TextEditor/Snippet
SystemTag: $:/tags/TiddlerInfo
SystemTag: $:/tags/TiddlerInfo/Advanced
SystemTag: $:/tags/TiddlerInfoSegment
SystemTag: $:/tags/ToolbarButtonStyle
SystemTag: $:/tags/TopLeftBar
SystemTag: $:/tags/TopRightBar
SystemTag: $:/tags/ViewTemplate
SystemTag: $:/tags/ViewTemplate/Subtitle
SystemTag: $:/tags/ViewToolbar
SystemTags
SystemTiddlers
TabbedExampleType
Table Classes, Captions, Headers and Footers
table-example
Table-of-Contents Macros
Table-of-Contents Macros (Examples)
TableOfContents
Tables in WikiText
Tables in WikiText CSS Utility Classes
tabs Macro
tabs Macro (Examples)
tag Macro
tag Macro (Examples)
tag Operator
tag Operator (Examples)
Tag Operators
tag-picker Macro
tag-picker Macro (Examples)
tag-pill Macro
tag-pill Macro (Examples)
Tagging
tagging Operator
tagging Operator (Examples)
Tags
tags Operator
tags Operator (Examples)
TagTiddlers
TalkTiddlyWiki
tan Operator
tan Operator (Examples)
task
TaskManagementExample
TaskManagementExample (Draggable)
TaskManagementExampleDraggableTemplate
Technical Prose Style
TemplateTiddlers
Temporary Tiddlers
Ten reasons to switch to TiddlyWiki
TestCases/DataWidget/FilterMissingTiddler
TestCases/DataWidget/ImportCompound
TestCases/DataWidget/ImportCustomTitle
TestCases/DataWidget/ImportedFilter
TestCases/DataWidget/ImportedTiddler
TestCases/DataWidget/Refreshing
TestCases/DataWidget/SimpleTiddler
TestCases/HTML/BlockModeInHTMLTable
TestCases/HTML/OpenTagBlankLine
TestCases/HTML/OpenTagBlankLineInBoldSyntax
TestCases/HTML/OpenTagBlankLineInTableSyntax
TestCases/HTML/OpenTagNoBlankLine
TestCases/RevealWidget/AccordionSlider
TestCases/RevealWidget/Popup
TestCases/RevealWidget/SimpleReveal
TestCases/RevealWidget/TextReference
TestCases/TestCaseTiddler/currentTiddler
TestCases/TestCaseWidget/FailingTest
TestCases/TestCaseWidget/NoExpectedResults
TestCases/TestCaseWidget/TwoPlusTwo
TestCases/TranscludeWidget/SimpleTransclusion
TestCases/WikifyWidget/RenderHTML
TestCases/WikifyWidget/RenderSVGURI
TestCases/WikifyWidget/WidgetValue/Fail
TestCases/WikifyWidget/WidgetValue/Success
TestCases/WikifyWidget/WordCount/Fail
TestCases/WikifyWidget/WordCount/Success
TestCaseTiddlers
TestCaseWidget
Testimonials - Joe Armstrong
Testimonials - Network World
Testimonials - Product Hunt
Testimonials and Reviews
Text preview
Text-Slicer Edition
TextReference
TextWidget
The Extended Listops Filters
The First Rule of Using TiddlyWiki
The Story of TiddlyWiki
Then Filter Run Prefix
Then Filter Run Prefix (Examples)
then Operator
then Operator (Examples)
Third
ThirdOne
ThirdThree
ThirdTwo
thisTiddler Variable
thisTiddler Variable (Examples)
thumbnail Macro
thumbnail Macro (Examples)
Thursday
Tiddler Colour Cascade
Tiddler Commander by Mohammad
Tiddler Fishes.svg
Tiddler Icon Cascade
Tiddler Poster
Tiddler Structure
Tiddler Title Policy
TiddlerFields
TiddlerFiles
TiddlerLinks
Tiddlers
TiddlerWidget
TiddlyBucket - Save to AWS or Google Storage
TiddlyChrome by Arlen Beiler
TiddlyClip by buggyjay
TiddlyDesktop
TiddlyDesktop Releases
TiddlyDrive Add-on for Google Drive by Joshua Stubbs
TiddlyFox
TiddlyFox Apocalypse
TiddlyFox Apocalypse Badge
Tiddlyhost
Tiddlyhost Logo
TiddlyIE
TiddlyMap Plugin by Felix Küppers
TiddlyPWA - Save to Browser Storage
TiddlyServer by Arlen Beiler
Tiddlyshow by Mohammad
TiddlySpace
TiddlyWeb
TiddlyWeb JSON tiddler format
TiddlyWebAdaptor
TiddlyWiki
TiddlyWiki Anniversaries
TiddlyWiki Archive
TiddlyWiki Camp Paris
TiddlyWiki Classic
TiddlyWiki Cloud
TiddlyWiki Docs PR Maker
TiddlyWiki European Meetup 2016
TiddlyWiki European Meetup 2017
TiddlyWiki extensions for Sublime Text 3 by roma0104
TiddlyWiki extensions for ViM
TiddlyWiki Hangouts
TiddlyWiki in the Sky for TiddlyWeb
TiddlyWiki Marketplace
TiddlyWiki Marketplace Banner
TiddlyWiki Newsletter
TiddlyWiki Newsletter Badge
TiddlyWiki Newsletter Team
TiddlyWiki Node.js Privacy and Security
TiddlyWiki on Discord
TiddlyWiki on Firefox for Android Video
TiddlyWiki on GitHub
TiddlyWiki on Mastodon
TiddlyWiki on Node.js
TiddlyWiki on Open Collective
TiddlyWiki on Reddit
TiddlyWiki on the Web
TiddlyWiki on YouTube
TiddlyWiki People
TiddlyWiki Privacy and Security
TiddlyWiki Privacy Badge
TiddlyWiki Project
TiddlyWiki Releases
TiddlyWiki Single File Privacy and Security
TiddlyWiki Video Tutorials by Francis Meetze
tiddlywiki.files Files
tiddlywiki.info Files
TiddlyWiki.mp3
TiddlyWiki2ReadMe
TiddlyWiki5
TiddlyWiki5 Versioning
TiddlyWikiClassic
TiddlyWikiFolders
TiddlyWikiLinks
Tidme by oflg
timeline Macro
timeline Macro (Examples)
Timelines by Mohammad
Timimi: WebExtension and Native Host by Riz
Tinka by Andreas Hahn
Title
Title List
title Operator
title Operator (Examples)
Title Selection
titlecase Operator
titlecase Operator (Examples)
Todolist by Mohammad
toggle Operator
toggle Operator (Examples)
Tour Plugin
Transcluded Attribute Values
transcludes Operator
transcludes Operator (Examples)
TranscludeWidget
Transclusion
Transclusion and Substitution
Transclusion Basic Usage
Transclusion in WikiText
transclusion Variable
transclusion Variable (Examples)
Transclusion with Templates
Translate TiddlyWiki into your language
TranslationMechanism
translink Macro
translink Macro (Examples)
Trashbin by Mohammad
tree Macro
tree Macro (Examples)
tree-macro-example-car
tree-macro-example-car-boot
tree-macro-example-car-boot-handle
tree-macro-example-car-boot-lock
tree-macro-example-car-roof
tree-macro-example-car-roof-aerial
tree-macro-example-car-roof-rails
tree-macro-example-house
tree-macro-example-house-attic
tree-macro-example-house-attic-roof
tree-macro-example-house-attic-window
tree-macro-example-house-garden
tree-macro-example-house-garden-lawn
tree-macro-example-house-garden-shed
tree-macro-example-house-kitchen
tree-macro-example-house-kitchen-sink
tree-macro-example-house-kitchen-table
tree-macro-example-house-kitchen-window
TriggeringWidgets
trim Operator
trim Operator (Examples)
TriTarget.org by Devin Weaver
trunc Operator
trunc Operator (Examples)
Tuesday
Tutorials
tv-adjust-heading-level Variable
tv-adjust-heading-level Variable (Examples)
tv-auto-open-on-import Variable
tv-config-static Variable
tv-config-toolbar-class Variable
tv-config-toolbar-class Variable (Examples)
tv-config-toolbar-icons Variable
tv-config-toolbar-icons Variable (Examples)
tv-config-toolbar-text Variable
tv-config-toolbar-text Variable (Examples)
tv-filter-export-link Variable
tv-get-export-image-link Variable
tv-get-export-image-link Variable (Examples)
tv-get-export-link Variable
tv-get-export-path Variable
tv-history-list Variable
tv-show-missing-links Variable
tv-story-list Variable
tv-tiddler-preview Variable
tv-wikilink-template Variable
tv-wikilink-tooltip Variable
tv-wikilink-tooltip Variable (Examples)
tv-wikilinks Variable
tv-wikilinks Variable (Examples)
TW-Scripts by Mohammad
TW2Parser Plugin
TW5-firebase: TiddlyWiki5 for Google Firebase by Peter Neumark
TW5-Graph by Flibbles
TW5-Graph.png
TW5-SingleExecutable by Jed Carty
TWaddle by Matias Goldman
TWCommunitySearch
Twenty Years of TiddlyWiki
TWEUM Thumbnail.jpg
Twexe: Single File Tiddlywiki5 executable
Twitter Plugin
twproxy by Steve Gattuso
Typed Blocks in WikiText
Typography
UnaMesa
Uninstalling a plugin
Uninstalling a plugin with Node.js
unique Operator
unique Operator (Examples)
UnpackPluginCommand
untagged Operator
untagged Operator (Examples)
untrunc Operator
untrunc Operator (Examples)
unusedtitle Macro
unusedtitle Macro (Examples 1)
unusedtitle Macro (Examples)
UpgradeMechanism
Upgrading
Upgrading TiddlyWiki on Node.js
uppercase Operator
uppercase Operator (Examples)
URI
Using a custom path prefix with the client-server edition
Using Excise
Using HTTPS
Using links to navigate between tiddlers
Using Stamp
Using Stylesheets
Using SVG
Using the external JavaScript template
Using the integrated static file server
Using the read-only single tiddler view
Using TiddlyWiki for GitHub project documentation
Using TiddlyWiki on Node.js
Utility by Mohammad
Utility Classes
Vacant Positions
Variable Attribute Values
Variable Usage
Variables
Variables in WikiText
variables Operator
variables Operator (Examples)
variance Operator
variance Operator (Examples)
VarsWidget
VerboseCommand
version Macro
version Macro (Examples)
VersionCommand
Videos
View Template Body Cascade
View Template Title Cascade
ViewWidget
vis.js Timeline by emkay, revived by kixam
Visible Transclusions
Web Developer Tools
WebServer
WebServer Anonymous Access
WebServer API
WebServer API: Delete Tiddler
WebServer API: Force Basic Authentication Login
WebServer API: Get All Tiddlers
WebServer API: Get Favicon
WebServer API: Get File
WebServer API: Get Rendered Tiddler
WebServer API: Get Server Status
WebServer API: Get Tiddler
WebServer API: Get Wiki
WebServer API: Put Tiddler
WebServer Authentication
WebServer Authorization
WebServer Basic Authentication
WebServer Guides
WebServer Header Authentication
WebServer Parameter: admin
WebServer Parameter: anon-username
WebServer Parameter: authenticated-user-header
WebServer Parameter: credentials
WebServer Parameter: csrf-disable
WebServer Parameter: debug-level
WebServer Parameter: host
WebServer Parameter: password
WebServer Parameter: path-prefix
WebServer Parameter: port
WebServer Parameter: readers
WebServer Parameter: required-plugins
WebServer Parameter: root-render-type
WebServer Parameter: root-serve-type
WebServer Parameter: root-tiddler
WebServer Parameter: system-tiddler-render-template
WebServer Parameter: system-tiddler-render-type
WebServer Parameter: tiddler-render-template
WebServer Parameter: tiddler-render-type
WebServer Parameter: tls-cert
WebServer Parameter: tls-key
WebServer Parameter: tls-passphrase
WebServer Parameter: use-browser-cache
WebServer Parameter: username
WebServer Parameter: writers
WebServer Parameters
Wednesday
Welcome
What happened to the original TiddlyWiki?
Widdly by Opennota
Widget Attributes
Widget Documentation Style Guide
WidgetMessage: tm-add-field
WidgetMessage: tm-add-tag
WidgetMessage: tm-auto-save-wiki
WidgetMessage: tm-browser-refresh
WidgetMessage: tm-cancel-tiddler
WidgetMessage: tm-clear-password
WidgetMessage: tm-close-all-tiddlers
WidgetMessage: tm-close-all-windows
WidgetMessage: tm-close-other-tiddlers
WidgetMessage: tm-close-tiddler
WidgetMessage: tm-close-window
WidgetMessage: tm-copy-to-clipboard
WidgetMessage: tm-delete-tiddler
WidgetMessage: tm-download-file
WidgetMessage: tm-edit-bitmap-operation
WidgetMessage: tm-edit-text-operation
WidgetMessage: tm-edit-tiddler
WidgetMessage: tm-focus-selector
WidgetMessage: tm-fold-all-tiddlers
WidgetMessage: tm-fold-other-tiddlers
WidgetMessage: tm-fold-tiddler
WidgetMessage: tm-full-screen
WidgetMessage: tm-home
WidgetMessage: tm-http-cancel-all-requests
WidgetMessage: tm-http-request
WidgetMessage: tm-http-request Example - Basic Authentication
WidgetMessage: tm-http-request Example - Random Dog
WidgetMessage: tm-http-request Example - Zotero
WidgetMessage: tm-http-request Examples
WidgetMessage: tm-import-tiddlers
WidgetMessage: tm-load-plugin-from-library
WidgetMessage: tm-load-plugin-library
WidgetMessage: tm-login
WidgetMessage: tm-logout
WidgetMessage: tm-modal
WidgetMessage: tm-navigate
WidgetMessage: tm-new-tiddler
WidgetMessage: tm-notify
WidgetMessage: tm-open-external-window
WidgetMessage: tm-open-window
WidgetMessage: tm-perform-import
WidgetMessage: tm-permalink
WidgetMessage: tm-permaview
WidgetMessage: tm-print
WidgetMessage: tm-relink-tiddler
WidgetMessage: tm-remove-field
WidgetMessage: tm-remove-tag
WidgetMessage: tm-rename-tiddler
WidgetMessage: tm-save-tiddler
WidgetMessage: tm-save-wiki
WidgetMessage: tm-scroll
WidgetMessage: tm-server-refresh
WidgetMessage: tm-set-password
WidgetMessage: tm-unfold-all-tiddlers
WidgetMessage: tm-unload-plugin-library
Widgets
Widgets in WikiText
Wiki
WikificationMechanism
WikifyWidget
WikiText
WikiText parser mode transitions
WikiText parser mode: HTML examples
WikiText parser mode: macro examples
WikiText parser mode: transclusion examples
WikiText Parser Modes
Windows HTA Hack
WordJoiner
Working with the TiddlyWiki5 repository
Working with the TiddlyWiki5 repository video
Working with TiddlyWiki
Xememex
Xememex Logo
XLSX Utilities Edition
zth Operator
zth Operator (Examples)
中文社区 - Chinese Community

AlphaReleases

20th December 2023 at 11:30am

Here are the details of the alpha releases of TiddlyWiki5. See TiddlyWiki5 Versioning for details of how releases are named.

Release 5.0.1-alpha

Released 6th December 2013 at 17:53

See GitHub for detailed change history of this release

Improvements

  • Changes to the importing process to enable a smoother Upgrading process
    • Ignores attempts to import plugins that are older than currently installed plugins
    • System tiddlers are now imported as usual
  • If $:/theme isn't defined or refers to a missing tiddler, then fallback through Snow White to Vanilla. This means that empty.html now defaults to Snow White
  • Added support for Block Quotes in WikiText

Bug fixes

  • Fixed bug that was preventing $:/tags/PageControls tiddlers from being reordered

Internal changes

Alternative page layouts

1st August 2024 at 2:06am

Introduced in v5.1.23 You can have multiple alternative page layouts and switch between them. To see a list of available layouts and switch between them, use the keyboard shortcut ctrl-shift-L.

Creating an alternative page layout

Creating an alternative layout goes beyond adding or removing features from the default interface, which also known as standard layout, and allows you to create an entirely new layout from scratch.

To create an alternative page layout and have the ability to switch to it, you need to create an alternative page template tiddler with the SystemTag: $:/tags/Layout.

This alternative page template can either be a tweaked and modified version of the default page template, or something entirely different. The layout switching mechanism requires that your page template tiddler has the fields name and description, which are used in the listing in the switching user interface.

Common layout setup

\whitespace trim
\import [subfilter{$:/core/config/GlobalImportFilter}]
\define containerClasses()
tc-page-container tc-language-$(languageTitle)$ your-plugin-name-container
\end
\procedure redirected-navigate-actions()
  <$action-setfield $tiddler="$:/layout" text="" $timestamp="no" />
  <$action-navigate $to=<<event-navigateTo>> $scroll="yes" />
\end

<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
	<$messagecatcher $tm-navigate=<<redirected-navigate-actions>>>
		{{$:/core/ui/CommandPaletteTemplate}}
		<div class=<<containerClasses>>>
			<!-- Your layout content here -->
		</div>
	</$messagecatcher>
</$navigator>

It includes

  1. Import macros that is globally available in standard layout, so wikitext that works on standard layout also works on your layout.
  2. Define the top-level css class, some style may depends on them. You can add your plugin's name in css class here.
  3. Handle navigation when click on links. If your layout does not contains a story view (for example, you are writing a calendar or whiteboard layout), then the combination of redirected-navigate-actions $navigator and $messagecatcher will redirect user back to standard layout, and open the tiddler there.
  4. Add some PageTemplate back, for example the $:/core/ui/CommandPaletteTemplate or $:/core/ui/PageTemplate/sidebar, if you want them exist on your layout.

Amazon Web Services Plugin

3rd July 2017 at 7:33pm

The Amazon Web Services Plugin provides several tools for working with Amazon Web Services:

  • Templates for saving a TiddlyWiki as a single JavaScript file in a ZIP file that can be executed as an AWS Lambda function. In this form, TiddlyWiki is a self contained single file containing both code and data, just like the standalone HTML file configuration
  • Commands that can be used to interact with AWS services, under both the Node.js and Lambda configurations of TiddlyWiki

Anchor Links using HTML

30th November 2020 at 6:43am

What do they do?

In TiddlyWiki anchor links can help us link to target points and distinct sections within rendered tiddlers. They can help the reader navigate longer tiddler content.

For example this link, Bottom, should take you to the bottom of this tiddler. The "Back to the top" link below should return you back to the top of this tiddler.

Back to the top

How do I make them?

There are only 2 steps to making anchor links.

  • First, create the target point (called an 'anchor') where you want it.
  • Second, add a link to it where the reader might need it.

That's it.

Step 1: Create an 'anchor' (link target)

<a id="#Bottom_of_tiddler"></a>

Step 2: Create a link to the target anchor

<a href="##Bottom_of_tiddler">Bottom</a>
  • Create an <a href> link using exactly the same 'address' value as the target but with double ## characters preceding it.
  • Place this code where it will most help the reader.

The above example can be adapted to work for many situations in TiddlyWiki, such as the table of contents at the top of this tiddler.

Is it really that simple?

Yes, it's that simple. BUT... in TiddlyWiki there are some small differences from standard HTML5 anchor links and some specific TiddlyWiki limitations.

Back to the top

Step 1: Creating the target anchor

  • Unlike standard HTML5, in TiddlyWiki you must put a single # character in front of the target address value that follows the id attribute. (Notice the single # character used in the #Bottom_of_tiddler in Example 1.)
  • Unlike standard HTML5, TiddlyWiki anchor links are case sensitive. In the example above #Bottom_of_tiddler works, but #bottom_of_Tiddler wouldn't.
  • Avoid using the % character in your link, as some browsers have a bug where navigation to anchors containing a % character can sometimes fail (see warning below).
  • Avoid using any whitespace in your link (see note 1 below).
  • Each link address should be unique in the TiddlyWiki. If transclusions create multiple instances of the same id attribute, navigation will take place to the first instance found that satisfies the above criteria. To avoid this, you can use the qualify macro in both the id and the href attributes in a similar style to the example given below: Avoiding duplicate IDs when transcluding.

Step 2: Creating the link to the target

  • Remember that the href value should start with two # characters, one more than the id value of the target anchor.
  • Remember that TiddlyWiki anchor links are case sensitive

Step 3: Navigating to the target

Normally you can click on the link and TiddlyWiki will scroll the window so the target anchor is at the top of the window, but there are several limitations:

  • Anchor links in TiddlyWiki do not work if the tiddler is not in the Story River, or is not displayed in the sidebar.
  • Anchor links in TiddlyWiki do not work if the tidlder is in the Story River or sidebar but anchor marked target point is not visible on the page (e.g., the tiddler is folded or the anchor is within a non-displaying $reveal widget). Ctrl+Click on such an anchor link will open a new browser window/tab loading the base web page and will not navigate to the expected tiddler.
  • Anchor links in Tiddlywiki do not work if Control Panel > Appearance > Story View is set to Zoomin (the single page view) and the tiddler is not at the top of the story river (i.e. not displayed).
  • When an anchor link is clicked the browser's navigation history will be updated with the link's href value appended to the web page's URL. This will happen even if the Control Panel > Settings > Navigation History value is set to "Do not update history".

Note
1. The HTML5 specification for the id attribute says that its value should not contain any whitespace. Currently (Dec 2020) an id value with whitespace can sometimes work. However, it may not work in all browsers and is not guaranteed to work in the future.

Warning
Some browsers may fail to navigate to an anchor target whose id value includes a % character followed by 2 digits. This is a bug in the browser and nothing that TiddlyWiki can fix. To be safe, avoid using the % character.

Back to the top

More examples

In each case the target code is placed at the destination the reader navigates to, the link code is placed where it will help the reader navigate from.

<h2 id="#heading-01"> My Target Heading</h2>

<a href="##heading-01">Link to My Target Heading</a>

This looks like:


My Target Heading

Link to My Target Heading


<section id="#unique001">

!! My Target section

A `<section>` HTML tag is generally used to define sections in an HTML document, such as chapters, headers, footers, or any other sections of the document.
</section>

Clicking this anchor link goes to: <a href="##unique001">Link to My Target Section</a>

This looks like:


My Target section

A <section> HTML tag is generally used to define sections in an HTML document, such as chapters, headers, footers, or any other sections of the document.

Clicking this anchor link goes to: Link to My Target Section


Back to the top

Suggestions for HTML elements to use

Some suggestions for the HTML element you choose for marking a position using the id attribute:

Element Sample code Observations
anchor<a id="#part001-of-TiddlerName"></a>Should work perfectly everywhere
heading<h2 id="#a-new-heading">A New Heading</h2>Headings can have id attributes as well
section<section id="#sect001-of-TiddlerName">This is a new section</section>If you use the section element it should probably have an id of its own
span<span id="#007">Marker 007 is here!</span>span elements can be used to insert an id mid-paragraph

Back to the top

Suggestions for target names to use

Sample code Observations
Recommended<a id="#part001-of-TiddlerName"></a>Include the tiddler name for easy unique ids
Avoid: whitespace<h2 id="#0 0 1">A New Heading</h2>Whitespace is not guaranteed to work in all browsers
Avoid: %<section id="#sect001%20of%20TiddlerName">This is a new section</section>URI encoding (turning space into %20 and so on) may not work in some browsers
Avoid: duplicate IDs<span id="#007">Marker 007 is here!</span>id values should be unique within entire wiki
Avoid: duplicate IDs<a id="#007"></a>A different marker 007If id values are duplicated, one will be ignored

Back to the top

Avoiding duplicate IDs when transcluding

The id and anchor link to this header has been made as follows:

<a href=<<qualify "##qualify-example">>>Avoiding duplicate IDs when transcluding</a>

<h2 id=<<qualify "#qualify-example">>>Avoiding duplicate IDs when transcluding</h2>
For this to work:
  • The href and id values use the macro invocation syntax for attributes, using the qualify Macro to create a unique id value.
  • Both the id and the anchor link must be in the same tiddler.
  • There must not be any quote characters between the = and the <<.
  • The double quotes around the target name are optional, but recommended.
  • There should be a total of three > characters after the target name, two >> to close the <<qualify macro, and one > to close the <a tag.

Back to the top

Style Hints

If you don't want the link to look like an external link, give the <a> element's class attribute the value tc-tiddlylink and if you want the link to also be italic & bold, give the additional classes tc-tiddlylink-missing tc-tiddlylink-shadow like below:

<a class="tc-tiddlylink" href="##Introduction:Anchor-Links-using-HTML">Back to the top</a> or just back to <a class="tc-tiddlylink tc-tiddlylink-missing tc-tiddlylink-shadow" href=<<qualify ##Hints>>>Hints</a>.

Back to the top or just back to Style Hints.

If you want to include an id attribute to a link in your sidebar Table of Contents, you can include it in your listed tiddler's caption field similar to the way shown below:

<span id=#some-value>Your caption</span>

Back to the top

And Filter Run Prefix

11th July 2023 at 8:47am
inputthe filter output of all previous runs so far
outputoutput titles replace the output of previous filter runs
Introduced in v5.1.23
:andrun

This prefix has an optional shortcut syntax symbol +run

append Operator

21st March 2023 at 1:16pm
purposeappend a range of items from an array to the list
inputa list of items
suffixan integer N, defaulting to all
parameterlist=the array of items to be appended to the tail of the list
outputa list with items appended from the head of the parameter array
! outputa list with items appended from the tail of the parameter array

Learn more about how to use Filters

append Operator (Examples)

8th November 2015 at 5:15am

These examples make use of the Days of the Week tiddler.

[list[Days of the Week]append[Tomorrow]]

[list[Days of the Week]append[Yesterday Today Tomorrow]]

Append the first 4 short days of the week to our list

[list[Days of the Week]append:4{Days of the Week!!short}]

Apple

27th February 2022 at 9:08pm

applypatches Operator

4th March 2023 at 3:48pm
purposeapplies a set of patches to transform the input
inputa selection of titles
parameterP=a string containing patches from the makepatches Operator
outputthe transformed input to which the patches P have been applied

Learn more about how to use Filters

Articles

2nd June 2016 at 5:27pm

Here are some recent articles written about TiddlyWiki. Submit new articles via GitHub or by posting in the TiddlyWiki Groups.

asin Operator

21st October 2021 at 10:28pm
purposecalculate the arcsine value (in radians) of a list of numbers
inputa selection of titles
outputthe arcsine (in radians) of the input numbers

Learn more about how to use Filters

Introduced in v5.1.21 See Mathematics Operators for an overview.

Tip
This is the inverse operation of sin: sin calculate the sine of an angle (in radian), but asin calculate the angle (in radian) of a sine.

Examples

asin Operator (Examples)

20th October 2021 at 2:27pm

[[2]asin[]]

=1 =2 =3 =4 +[asin[]]

atan Operator

21st October 2021 at 10:28pm
purposecalculate the arctangent value (in radians) of a list of numbers
inputa selection of titles
outputthe arctangent (in radians) of the input numbers

Learn more about how to use Filters

atan Operator (Examples)

20th October 2021 at 2:13pm

[[2]atan[]]

=1 =2 =3 =4 +[atan[]]

atan2 Operator

21st October 2021 at 10:28pm
purposereturns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for [Y]atan2[X]
inputa selection of titles = coordinate Y (Y)
parameterX=coordinate X
outputthe angle in radians (in [ - π , π ] ) between the positive x-axis and the ray from (0,0) to the point (x,y)

Learn more about how to use Filters

atan2 Operator (Examples)

20th October 2021 at 2:08pm

[[2]atan2[5]]

=1 =2 =3 =4 +[atan2[4]]

Attribute Selectors

11th April 2018 at 5:39pm

Audio

19th October 2014 at 8:06pm

Audio files can be incorporated into TiddlyWiki in a very similar way to images.

Embedded Audio

Small audio files can be embedded directly within TiddlyWiki. Embedding isn't suitable for large files (over a few hundred kilobytes) because it increases the size of the TiddlyWiki file.

For example, the tiddler TiddlyWiki.mp3 contains an MP3 recording of the word "TiddlyWiki". If you visit that tiddler, you should see an audio player that will play back the recording.

You can also transclude audio files. For example:

{{TiddlyWiki.mp3}}

That renders as:

External Audio

External audio tiddlers use the _canonical_uri field to point to an external audio file/stream, and have their text field blocked. This reduces their size considerably, but still allows for playback.

For example, the tiddler Caruso - Ave Maria points to an online audio recording hosted on http://archive.org:

{{Caruso - Ave Maria}}

That renders as:

AutoSave

10th June 2016 at 8:15am

If there is a SavingMechanism available that supports it, TiddlyWiki will automatically trigger a save of the current document on clicking ok or delete when editing a tiddler.

You should see a yellow notification at the top right of the window to confirm that an automatic save has taken place.

Automatic saving can be enabled or disabled through the Settings tab of the control panel . Behind the scenes, it is controlled through the configuration tiddler $:/config/AutoSave, which must have the value yes to enable automatic saving.

average Operator

26th April 2021 at 1:15pm
purposetreating each input title as a number, compute their arithmetic mean
inputa selection of titles
outputthe arithmetic mean of the input as numbers

Learn more about how to use Filters

average Operator (Examples)

26th April 2021 at 1:15pm

=1 =3 =4 =5 +[average[]]

Note that if there is no input the operator returns NaN

[tag[NotATiddler]get[price]] +[average[]]

backlinks Operator

3rd February 2015 at 6:33pm
purposefind the titles that link to each input title
inputa selection of titles
parameternone
outputany non-system titles that contain hard links to the input titles

Learn more about how to use Filters

Each input title is processed in turn. The corresponding tiddler's list of backlinks is generated, sorted alphabetically by title, and then dominantly appended to the operator's overall output.

Examples

backlinks Operator (Examples)

18th January 2015 at 6:31pm

backtranscludes Operator

10th June 2024 at 8:59am
purposefind the titles that transclude each input title
inputa selection of titles
parameternone
outputany non-system titles that hard-transclude the input titles

Learn more about how to use Filters

New in v5.3.4 Each input title is processed in turn. The corresponding tiddler's list of backtransclusions is generated, sorted alphabetically by title, and then dominantly appended to the operator's overall output. Analogous to backlinks.

Examples

backtranscludes Operator (Examples)

[[Motovun Jack.jpg]backtranscludes[]]

[[Transclusion]backtranscludes[]]

Bags and Recipes

9th March 2024 at 2:21pm

The bags and recipes model is a reference architecture for how tiddlers can be shared between multiple wikis. It was first introduced by TiddlyWeb in 2008.

The principles of bags and recipes can be simply stated:

  1. Tiddlers are stored in named "bags"
  2. Bags have access controls that determines which users can read or write to them
  3. Recipes are named lists of bags, ordered from lowest priority to highest
  4. The tiddlers within a recipe are accumulated in turn from each bag in the recipe in order of increasing priority. Thus, if there are multiple tiddlers with the same title in different bags then the one from the highest priority bag will be used as the recipe tiddler
  5. Wikis are composed by splicing the tiddlers from the corresponding recipe into the standard TW5 HTML template

A very simple example of the recipe/bag model might be for a single user who maintains the following bags:

  • recipes - tiddlers related to cooking recipes
  • work - tiddlers related to work
  • app - common tiddlers for customising TiddlyWiki

Those bags would be used with the following recipes:

  • recipes –> recipes, app - wiki for working with recipes, with common custom components
  • work –> work, app - wiki for working with work, with common custom components
  • app –> app - wiki for maintaining custom components

All of this will work dynamically, so changes to the app bag will instantly ripple into the affected hosted wikis.

A more complex example might be for a teacher working with a group of students:

  • student-{name} bag for each students work
  • teacher-course bag for the coursework, editable by the teacher
  • teacher-tools bag for custom tools used by the teacher

Those bags would be exposed through the following hosted wikis:

  • student-{name} hosted wiki for each students work, including the coursework material
  • teacher-course hosted wiki for the coursework, editable by the teacher
  • teacher hosted wiki for the teacher, bringing together all the bags, giving them an overview of all the students work

Base64

21st February 2015 at 6:17pm

Base64 is a way of representing binary data, such an image, as a string of text.

before Operator

3rd February 2015 at 7:19pm
purposefind which input title precedes a specified one
inputa selection of titles
parameterT=one of those titles
outputthe title that immediately precedes T in the input

Learn more about how to use Filters

If T is not present in the input, or is the first title there, then the output is empty.

Examples

before Operator (Examples)

18th January 2015 at 6:31pm

These examples make use of the Days of the Week tiddler. The Thursday tiddler shows a further example.

[list[Days of the Week]before[Saturday]]

[list[Days of the Week]before[Monday]]

Behaviour of invoked variables depends on how the variable was declared

19th June 2024 at 9:17pm

Invoked in normal wikitext context: <$transclude $variable=myvar/> or <<myvar>>

how declaredbehaviour
\defineAll wikitext and variable substitution and textual substitution takes place
$set, $let, $vars, \procedure, \widgetAll wikitext and variable substitution takes place
\functionInvoking a function in this way (<<.myfun>>) is a synonym for <$text text={{{[function[.myfun]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded

Invoked via widget attribute: <div class=<<myvar>>/>

how declaredbehaviour
\defineTextual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the attribute's value
$set, $let, $vars, \procedure, \widgetBody text is retrieved as-is and used as the attribute's value.
\functionWhen a function (e.g. .myfun) is invoked as <div class=<<.myfun>>/>, it is a synonym for <div class={{{[function[.myfun]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded. That first result is used as the attribute's value. Note that functions are recursively processed even when invoked in this form. In other words a filter expression in a function can invoke another function and the processing will continue

Invoked via filter operator parameter: [<myvar>]

how declaredbehaviour
\defineTextual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the filter operator's parameter.
$set, $let, $vars, \procedure, \widgetBody text is retrieved as-is and used as the filter operator's parameter.
\functionThe body text of the function is treated as a filter expression and evaluated. The first result is passed to the operator as a parameter. The remaining results are discarded.

Invoked via function call in a filter expression: [function[.myfun]]

how declaredbehaviour
\define, $set, $let, $vars, \procedure, \widgetEvery function is a variable, but only variables defined using \function are invokable using the function filter operator. Attempts to use a non-function variable is the same as if the function doesn't exist. The behavior in this case is like the identity function. All filter input is passed unchanged to the output.
\functionThe body text of the function is treated as a filter expression and evaluated. This filter expression can itself contain a function call. Filter expressions can be factored out into functions arbitrarily deep.

Examples

Below is an example macro, procedure and function definition. All three forms of parameter substitution $a1$, <<__a1__>>, and <<a1>> are included in each definition. The output helps illustrate when each form of substitution will or will not have affect.

\define m1(a1) $a1$ - <<__a1__>> - <<a1>>
\procedure p1(a1) $a1$ - <<__a1__>> - <<a1>>
\function f1(a1) $a1$ "-" [<__a1__>] ="-" [<a1>] :and[join[ ]]
Variable transclusionoutput
<<m1 foo>>foo - foo -
<<p1 foo>>$a1$ - - foo
<<f1 foo>>$a1$ - - foo
Widget attributeoutput
<$text text=<<m1 foo>>/>foo - <<__a1__>> - <<a1>>
<$text text=<<p1 foo>>/>$a1$ - <<__a1__>> - <<a1>>
<$text text=<<f1 foo>>/>$a1$ - - foo
Filter operator parameteroutput
[<m1 foo>]foo - <<__a1__>> - <<a1>>
[<p1 foo>]$a1$ - <<__a1__>> - <<a1>>
[<f1 foo>]$a1$ - - foo
Function call in filter expressionoutput
[function[m1],[foo]]"A free, open source wiki revisited" by Mark Gibbs, NetworkWorld
[function[p1],[foo]]"A free, open source wiki revisited" by Mark Gibbs, NetworkWorld
[function[f1],[foo]]$a1$ - - foo

Behaviour of variables invoked via filter expression function call

26th July 2023 at 3:06pm
how declaredbehaviour
\define, $set, $let, $vars, \procedure, \widgetEvery function is a variable, but only variables defined using \function are invokable using the function filter operator. Attempts to use a non-function variable is the same as if the function doesn't exist. The behavior in this case is like the identity function. All filter input is passed unchanged to the output.
\functionThe body text of the function is treated as a filter expression and evaluated. This filter expression can itself contain a function call. Filter expressions can be factored out into functions arbitrarily deep.

Behaviour of variables invoked via filter operator parameter

26th July 2023 at 3:06pm
how declaredbehaviour
\defineTextual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the filter operator's parameter.
$set, $let, $vars, \procedure, \widgetBody text is retrieved as-is and used as the filter operator's parameter.
\functionThe body text of the function is treated as a filter expression and evaluated. The first result is passed to the operator as a parameter. The remaining results are discarded.

Behaviour of variables invoked via normal wikitext

19th June 2024 at 9:14pm
how declaredbehaviour
\defineAll wikitext and variable substitution and textual substitution takes place
$set, $let, $vars, \procedure, \widgetAll wikitext and variable substitution takes place
\functionInvoking a function in this way (<<.myfun>>) is a synonym for <$text text={{{[function[.myfun]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded

Behaviour of variables invoked via widget attributes

19th June 2024 at 9:07pm
how declaredbehaviour
\defineTextual substitution of parameters is performed on the body text. No further processing takes place. The result after textual substitution is used as the attribute's value
$set, $let, $vars, \procedure, \widgetBody text is retrieved as-is and used as the attribute's value.
\functionWhen a function (e.g. .myfun) is invoked as <div class=<<.myfun>>/>, it is a synonym for <div class={{{[function[.myfun]]}}}/>. As with any filtered transclusion (i.e. triple curly braces), all results except the first are discarded. That first result is used as the attribute's value. Note that functions are recursively processed even when invoked in this form. In other words a filter expression in a function can invoke another function and the processing will continue

BetaReleases

20th December 2023 at 11:30am

Here are the details of the beta releases of TiddlyWiki5. See TiddlyWiki5 Versioning for details of how releases are named.

Release 5.0.18-beta

Released 17th September 2014 at 21:10

See GitHub for detailed change history of this release

This is a minor release prior to the full release of TiddlyWiki on September 20th. The documentation has been cleaned up and improved (with more improvements to come).

File Layout of tiddlywiki.com

The layout of files on tiddlywiki.com has been adjusted to make it more logical. See the ticket for a discussion. You can see the source files that make up tiddlywiki.com at https://github.com/Jermolene/jermolene.github.com

Hackability Improvements

  • Added first iteration of a list-links macro (further improvements are planned)
  • Added support for importing .markdown and .md files
  • Extended timeline macro to support a subfilter

Bug Fixes

  • Fixed problem with digits being classified as lower case letters for wiki link matching
  • Fixed crash when sorting missing tiddlers by fields other than title
  • Fixed problem with handling .jpeg file extensions
  • Fixed problem with RadioWidget and missing tiddlers
  • Fixed problem with dragging a partially selected link

Contributors

@Jermolene would like to thank the contributors to this release who have generously given their time to help improve TiddlyWiki:

bf Operator

3rd February 2015 at 6:37pm
purposesame as rest

Learn more about how to use Filters

Block Mode WikiText

12th May 2024 at 12:15am

Some WikiText is recognised only while the parser is in block mode.

Common characteristics of such block mode WikiText:

  • At least one entire line is required to delimit the WikiText.
  • The closing punctuation must come at the end of the line (in some cases the end of the line is the closing punctuation.
WikiTextPunctuation
Block Quotes in WikiTextMulti-line block quotes are enclosed by lines containing only the text <<<; single line block quotes are also possible.
Code Blocks in WikiTextEnclosed by lines containing only the text ```
Description Lists in WikiTextEach term is on its own line and each definition is on its own line.
Hard Linebreaks in WikiTextEnclosed by lines containing only the text """.
Headings in WikiTextEntire line starting with !.
Horizontal Rules in WikiTextA line containing only the text ---.
Lists in WikiTextEach list item is on its own line.
Paragraphs in WikiTextAny text other than the start punctuation of one of the other block mode WikiText will start a paragraph. Even the start punctuation of inline mode WikiText will start a paragraph. The parser includes all following lines into the paragraph until it encounters a blank line.
Styles and Classes in WikiTextEnclosed by lines starting with @@.
Tables in WikiTextEach table row is a line starting and ending with |.
Typed Blocks in WikiTextEnclosed by lines starting with $$.

The above WikiText types are only recognised in block mode. However, the text enclosed by most of them will be parsed in inline mode (Block Quotes in WikiText and Styles and Classes in WikiText are the two exceptions in which the parser will continue in block mode). While in inline mode the parser may encounter something which moves it to block mode (see WikiText parser mode transitions).

At the end of the terminating line, the parser will return to block mode.

Tip
Note: Hard Linebreaks in WikiText require an extra blank line after the trailing """ before the parser will return to block mode.

If the punctuation for the above types of WikiText is encountered while the parser is in inline mode, it will be ignored and output as-is.

Examples

Block Mode WikiText (Examples)

15th January 2022 at 4:10pm

Paragraphs are the most common WikiText. It is important to know they do not end until a blank line is encountered. Once a paragraph starts the parser will be in inline mode. Until that blank line is encountered other block mode syntax will be ignored:

This is a paragraph.
Only __//inline mode//__ punctuation is recognised here.
Block mode punctuation will be <b>ignored</b> until
the paragraph ends (i.e. a blank line is encountered).
For example:
* List item punctuation is ignored
* So is this horizontal rule:
---
|tables|are|ignored|
! headings are ignored
<<<
multi-line block quotes are ignored
<<<

That renders as:

This is a paragraph. Only inline mode punctuation is recognised here. Block mode punctuation will be ignored until the paragraph ends (i.e. a blank line is encountered). For example: * List item punctuation is ignored * So is this horizontal rule: — |tables|are|ignored| ! headings are ignored <<< multi-line block quotes are ignored <<<

To get the parser to recognise the above block mode WikiText, a blank line needs to be inserted after the "For example:" line. The blank line will be treated as the end of the paragraph and the parser will start recognising block mode punctuation again. Like this:

This is a paragraph.
Only __//inline mode//__ punctuation is recognised here.
Block mode punctuation will be <b>ignored</b> until
the paragraph ends (i.e. a blank line is encountered).
For example, here is a blank line:

* due to above blank line,
* list items work
* the following horizontal rule also works:
---
|!tables|!work|
|cell 1| cell 2|
! Headings work
<<<
multi-line block quotes work
<<<
; Term
: Definition of that term
Another paragraph can start here, but it will not end until blank line

That renders as:

This is a paragraph. Only inline mode punctuation is recognised here. Block mode punctuation will be ignored until the paragraph ends (i.e. a blank line is encountered). For example, here is a blank line:

  • due to above blank line,
  • list items work
  • the following horizontal rule also works:

tableswork
cell 1cell 2

Headings work

multi-line block quotes work

Term
Definition of that term

Another paragraph can start here, but it will not end until blank line

All the block mode examples above except for the paragraph are written one line after the other without blanks between. Those types of WikiText don't require the extra blank line to terminate.

Block Quotes in WikiText

12th May 2024 at 12:09am

There are two ways to produce HTML block quotes in TiddlyWiki5, one for content spread across multiple lines, and one for single line content.

Multi-line Block Quotes

The syntax for multi-line block quotes () is:

<<<
This is a block quoted paragraph
written in English
<<<

That renders as:

This is a block quoted paragraph written in English

... and the underlying HTML is:

<blockquote class="tc-quote"><p>This is a block quoted paragraph
written in English
</p></blockquote>

Citation

A citation can be added to the quote like this:

<<<
Computers are like a bicycle for our minds
<<< Steve Jobs

That renders as:

Computers are like a bicycle for our minds

Steve Jobs

... and the underlying HTML is:

<blockquote class="tc-quote"><p>Computers are like a bicycle for our minds
</p><cite>Steve Jobs</cite></blockquote>

CSS Classes

CSS classes can be added to a block quote:

<<<.myClass.another-class
Operating systems are like a brick wall for our minds
<<< Nobody

That renders as:

Operating systems are like a brick wall for our minds

Nobody

... and the underlying HTML is:

<blockquote class="tc-quote myClass another-class"><p>Operating systems are like a brick wall for our minds
</p><cite>Nobody</cite></blockquote>

The core includes the class tc-big-quote that renders block quotes with outsize double quotes:

<<<.tc-big-quote
A dramatic quote
<<< Somebody Important

That renders as:

A dramatic quote

Somebody Important

... and the underlying HTML is:

<blockquote class="tc-quote tc-big-quote"><p>A dramatic quote
</p><cite>Somebody Important</cite></blockquote>

Single-line Block Quotes

The single-line syntax for block quotes is actually an extension of the syntax for Lists in WikiText. For example:

> Quoted text
> Another line of quoted text

That renders as:

Quoted text
Another line of quoted text

... and the underlying HTML is:

<blockquote><div>Quoted text</div><div>Another line of quoted text</div></blockquote>

You can also nest quotes like this:

> A top quote
>> A subquote
> Another top quote

Which renders as:

A top quote
A subquote
Another top quote

You can also mix block quotes with other list items. For example:

* List One
** List Two
**> A quote
**> Another quote
* List Three

That renders as:

  • List One
    • List Two
      A quote
      Another quote
  • List Three

... and the underlying HTML is:

<ul><li>List One<ul><li>List Two<blockquote><div>A quote</div><div>Another quote</div></blockquote></li></ul></li><li>List Three</li></ul>

Advanced Wikitext and Block Quotes

You can also mix block quotes with paragraphs and other block wikitext. Be mindful of block mode - if other quoted content follows a paragraph, end it with a blank line. The final paragraph in the quote does not need to end with a blank line. If using indentation, make sure not to indent the blank lines. The parser will interpret this as additional inline content and not return to block mode. For example:

<<< Mixing Block Quotes with Inline Wikitext
A paragraph appears before other //wikitext//, which needs to end with a blank line.

    * List One
    ** List Two
    **> A quote
"""
A poem
with line beaks
needs to have
a blank line after
the final quotes
if followed
by other content
"""

    <<<< Deep Block Quote
        A paragraph before other //wikitext//, which ends with a blank line.

        ! A Header
        Another paragraph, which needs to end with a blank line.

            !! Sub Header
            A final paragraph, which __does not__ need to end with a blank line as the Block Quote ends.
    <<<<
<<<

That renders as:

Mixing Block Quotes with Inline Wikitext

A paragraph appears before other wikitext, which needs to end with a blank line.

  • List One
    • List Two
      A quote

A poem
with line beaks
needs to have
a blank line after
the final quotes
if followed
by other content

Deep Block Quote

A paragraph before other wikitext, which ends with a blank line.

A Header

Another paragraph, which needs to end with a blank line.

Sub Header

A final paragraph, which does not need to end with a blank line as the Block Quote ends.

... and the underlying HTML is:

<blockquote class="tc-quote"><cite>Mixing Block Quotes with Inline Wikitext</cite><p>A paragraph appears before other <em>wikitext</em>, which needs to end with a blank line.</p><ul><li>List One<ul><li>List Two<blockquote><div>A quote</div></blockquote></li></ul></li></ul><p>A poem<br>with line beaks<br>needs to have<br>a blank line after<br>the final quotes<br>if followed<br>by other content<br></p><blockquote class="tc-quote"><cite>Deep Block Quote</cite><p>A paragraph before other <em>wikitext</em>, which ends with a blank line.</p><h1 class="">A Header</h1><p>Another paragraph, which needs to end with a blank line.</p><h2 class="">Sub Header</h2><p>A final paragraph, which <u>does not</u> need to end with a blank line as the Block Quote ends.
</p><blockquote class="tc-quote"><blockquote class="tc-quote"></blockquote></blockquote></blockquote></blockquote>

Blog Edition

2nd September 2015 at 12:32pm

The Blog edition of TiddlyWiki contains tools to help publish static HTML blogs written in TiddlyWiki. It is currently designed for use under Node.js.

While documentation is being prepared, see https://github.com/Jermolene-blog/blog for an example of use.

Blurry Lawn.jpg

Brackets

28th July 2022 at 3:04pm

WikiText syntax uses a number of different types of brackets. Their names are shown in the table below:

AppearanceNameShort nameUsage
()Round bracketsParenthesisNot used in WikiText
[]Square bracketsBracketsLinks, Filters
{}Curly bracketsBracesText references, Filtered attributes
<>Angle bracketsChevronsHTML elements and widgets, Macros

Brownies

6th October 2020 at 6:12pm

BrowserCompatibility

TiddlyWiki is designed to work with HTML5-compatible browsers.

The following table summarises the browser versions that are known to work with TiddlyWiki

BrowserStatus
Internet ExplorerVersion 10 and above
ChromeAll recent versions
FirefoxAll recent versions
Firefox for AndroidAll recent versions
SafariVersion 6 and above

BrowserStorage Plugin

6th February 2019 at 6:12pm

The BrowserStorage Plugin enables TiddlyWiki to save tiddlers in browser local storage. This means that changes are stored within the browser, and automatically re-applied any time the base wiki is reloaded.

Browser local storage is not a panacea for TiddlyWiki:

  • Browsers limit the amount of local storage available to a page, typically to 5 or 10MB
  • Keeping personal data in browser local storage can lead to unexpected privacy violations
  • Browsers reserve the right to without warning delete data stored in local storage at any time
  • Browsers tie local storage to a URL which can lead to problems if you move a wiki to a URL previously occupied by a different wiki

Please use this plugin with caution. There are a number of unresolved issues and open questions.

The BrowserStorage Plugin can be installed from the plugin library.

BrowseWidget

13th November 2023 at 9:33am

Introduction

The browse widget displays an HTML file browser button that allows the user to choose one or more files to import. It sends a WidgetMessage: tm-import-tiddlers carrying a JSON representation of the tiddlers imported from the files up through its parents. This message is usually handled by the NavigatorWidget which adds the tiddlers to the store and updates the story to display them.

Content and Attributes

The content of the $BrowseWidget widget is ignored.

AttributeDescription
multipleSet to "multiple" to select multiple file upload
deserializerIntroduced in v5.1.15 Optional name of deserializer to be used (by default the deserializer is derived from the file extension or type)
tooltipOptional tooltip text
acceptIntroduced in v5.1.23 Optional comma delimited list of file accepted extensions and/or MIME types
messageOptional override of widget message to be generated. The files will be passed in the JavaScript object event.target.files
paramOptional parameter to be passed with the custom message
disabledNew in v5.3.7 Optional. Set to "yes" to disable file browser. Defaults to "no".
tabindexNew in v5.3.7 Optional. Sets the tabindex attribute of the HTML select element to the given value
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML element

On iPhone/iPad choosing the multiple option will remove the ability to take photographs/videos directly into TiddlyWiki.

e.g.

<$browse/>

renders as:

BT

17th November 2021 at 7:55pm

BuildCommand

27th April 2014 at 9:04pm

Building TiddlyWikiClassic

12th September 2014 at 2:16pm

TiddlyWiki5 can be used to build older 2.x.x versions of TiddlyWikiClassic from their constituent components. Doing so involves these features:

  • The tiddlywiki/classictools plugin, containing a deserializer module which allows tiddlers to be loaded from TiddlyWiki 2.x.x .recipe files
  • The stripcomments format for the ViewWidget, which strips single line JavaScript comments starting //#
  • The stripTitlePrefix='yes' attribute of the FieldsWidget, which removes prefixes wrapped in curly braces from the title attribute
    • For example, {tiddler}HelloThere would be transformed to HelloThere

Usage

TiddlyWikiClassic is built from the command line by running TiddlyWiki on Node.js. A typical usage would be:

node ../../tiddlywiki.js \
	--verbose \
	--load <path_to_recipe_file> \
	--rendertiddler $:/core/templates/tiddlywiki2.template.html <path_to_write_index_file> text/plain \
	|| exit 1

butfirst Operator

3rd February 2015 at 6:37pm
purposesame as rest

Learn more about how to use Filters

butlast Operator

26th February 2022 at 4:33am
purposediscard the last N input titles
inputa selection of titles
parameterN=an integer, defaulting to 1
outputall but the last N input titles

Learn more about how to use Filters

Introduced in v5.2.2 The butlast operator returns the input list unchanged if N is 0. This is consistent with the behaviour of the rest Operator.

Examples

butlast Operator (Examples)

26th February 2022 at 4:33am

These examples make use of the Days of the Week tiddler.

[list[Days of the Week]butlast[]]

[list[Days of the Week]butlast[0]]

[list[Days of the Week]butlast[2]]

A B C D E F G H I J K L M +[butlast[7]]

ButtonWidget

20th July 2025 at 3:12am

Introduction

The button widget displays an HTML <button> element that can perform a combination of optional actions when clicked:

  • Executing any ActionWidgets passed in the actions attribute, which is the preferred approach
  • Executing any ActionWidgets that are immediate children of the button widget, which is now deprecated in favour of using the actions attribute
  • Execute any integrated actions:
    • Navigate to a specified tiddler
    • Dispatch a user defined widget message
    • Trigger a user defined popup
    • Assign new text to a specified tiddler

The integrated actions are provided as a shortcut for invoking common actions. The same functionality is available via ActionWidgets, with the exception of the support for highlighting selected popups.

Content and Attributes

The content of the <$button> widget is displayed within the button.

AttributeDescription
actionsA string containing ActionWidgets to be triggered when the key combination is detected. Introduced in v5.1.23 the modifier variable lists the modifier keys that are pressed when the action is invoked. The possible modifiers are ctrl, ctrl-alt, ctrl-shift, alt, alt-shift, shift and ctrl-alt-shift
toThe title of the tiddler to navigate to
messageThe name of the widget message to send when the button is clicked
paramThe optional parameter to the message
setA TextReference to which a new value will be assigned
setTitleA title to which a new value will be assigned, without TextReference. Gets preferred over set
setFieldA field name to which the new value will be assigned, if the attribute setTitle is present. Defaults to the text field
setIndexAn index to which the new value will be assigned, if the attribute setTitle is present
setToThe new value to assign to the TextReference identified in the set attribute or the text field / the field specified through setField / the index specified through setIndex of the title given through setTitle
selectedClassAn optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in set already has the value specified in setTo
defaultDefault value if set tiddler is missing for testing against setTo to determine selectedClass
popupTitle of a state tiddler for a popup that is toggled when the button is clicked. See PopupMechanism for details
popupTitleTitle of a state tiddler for a popup that is toggled when the button is clicked. In difference to the popup attribute, no TextReference is used. See PopupMechanism for details
popupAbsCoordsIntroduced in v5.2.4 If set to yes writes absolute coordinates to the tiddler referenced by the popup. If set to no (the default) uses relative coordinates. See Coordinate Systems for details
aria-labelOptional Accessibility label
roleIntroduced in v5.2.3 Optional ARIA role
tooltipOptional tooltip
classAn optional CSS class name to be assigned to the HTML element
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML element
styleAn optional CSS style attribute to be assigned to the HTML element
tagAn optional html tag to use instead of the default "button"
dragTiddlerAn optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details
dragFilterAn optional filter making the button draggable and identifying the list of payload tiddlers. See DraggableWidget for details
tabindexSets the tabindex attribute of the button to the given value
disabledIntroduced in v5.1.23 Optional, disables the button if set to "yes". Defaults to "no"

Note: In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to transclude the value currently stored there. However, when we use a TextReference as the value of a button widget's set attribute, we are referencing the storage location itself, rather than the value stored there, so we do not use curly brackets there. Example: we could code a button widget that sets the caption field of TiddlerA to be the same as that of TiddlerB as:

Tip
Introduced in v5.1.18 setTitle, setField and setIndex attributes allow specifying Tiddler states directly, without interpreting them as TextReferences. This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (!!, ##)

<$button set="TiddlerA!!caption" setTo={{TiddlerB!!caption}} >

Press me!

</$button>

Tip: Set class to tc-btn-invisible tc-tiddlylink to have a button look like an internal link.

CamelCase

23rd September 2024 at 4:20pm

CamelCase is formed by taking a phrase, capitalising the initial letter of each word, and smashing the words together to form a portmanteau word. Traditionally most wikis including TiddlyWiki use CamelCase to signal phrases that should automatically become links.

You can also disable CamelCase linking in TiddlyWiki if you want.

New in v5.3.0 CamelCase is disabled by default in new wikis.

Caruso - Ave Maria

Cascade Filter Run Prefix

10th July 2023 at 7:33am
purposemodify input titles by successively evaluating a list of filters and applying the first result
inputthe filter output of all previous runs so far
outputthe input titles as modified by the filters returned by this filter run
Introduced in v5.2.1
:cascaderun

The filter expression for this filter run is evaluated to return a list of filters. Each input title is then evaluated against each of the filters in turn, and the input title is replaced with the first result of the first filter that returns a non-empty list. If none of the filters return a result for an input title, it is replaced with an empty string.

The following variables are available within the filter run:

  • currentTiddler - the input title
  • ..currentTiddler - the value of the variable currentTiddler outside the filter run.

Cascade Filter Run Prefix (Examples)

Cascade Filter Run Prefix (Examples)

5th March 2023 at 12:52pm

The :cascade filter run prefix is used by the TiddlyWiki core to choose the colour for each tiddler as used in the tag pill generated by the tag macro.

:cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]]

The filter expression inside the above :cascade filter run returns a list of filters from the text fields of tiddlers tagged as shown below:

  • [has[color]then{!!color}]
  • [tag[TableOfContents]then[#1e90ff]]
    [tag[Working with TiddlyWiki]then[darkorchid]]
    
  • [[$:/config/DefaultTiddlerColour]has[text]get[text]trim[]]

For each input title, each of these filters is now applied to in turn until the first filter that returns a non-empty list. The first result from this non-empty list replaces that input title and is used as the colour for that tiddler.

[all[shadows+tiddlers]] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] +[!is[blank]limit[10]]

Extended example

This example illustrates step-by-step how the :cascade filter run works.

A filter expression whose output returns a list of filters is required. Typically such a filter expression will construct the list of filters by querying some field in a set of tiddlers (likely via tag). To keep this example self-contained, 3 filters are stored in the filter1, filter2 and filter3 fields of this tiddler. Text references and instances of the append operator are used to combine the fields into a list of filters.

The filter [{!!filter1}append{!!filter2}append{!!filter3}], generates this list of filters:

  • [prefix[ca]then[ca]]
  • [suffix[at]then[at]]
  • other

For this example, cat can bat bug will be used as the input titles. Each input title will be evaluated by :cascade against each of the above filters in turn. To help understand what :cascade sees internally, the following table uses the Map Filter Run Prefix to show the result of each individual filter.

cat can bat bug :map[prefix[ca]then[ca]]
cat can bat bug :map[suffix[at]then[at]]
cat can bat bug :map[[other]]

Click "Try it" on the above 3 examples. The first non-blank value from each row as read from left to right will be returned when :cascade is used. Click "Try it" below to see the final result:

cat can bat bug :cascade[{!!filter1}append{!!filter2}append{!!filter3}]

Cascades

6th December 2021 at 4:47pm

Introduction

Cascades are a key mechanism used to construct and customise TiddlyWiki's user interface.

Tip
See Customising TiddlyWiki's user interface for an overview of all the customisation mechanisms

How cascades work

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.

Each cascade is defined by a special tag which identifies the tiddlers containing the conditions to be matched. The Order of Tagged Tiddlers determines the order in which the conditions are processed, and provides the means for arranging new rules at specific points in the cascade.

The conditions are defined by a Filter Expression in the text field. The filters are evaluated with the list of input titles set to the title of the tiddler to be considered. The currentTiddler variable is also set to the title of the tiddler to be considered.

If the filter returns no result then that result will be ignored and the cascade proceeds to test the next condition. If the filter expression does return at least one result then it serves as the result of the entire cascade.

The Cascade Filter Run Prefix provides the implementation of the underlying logic.

Example

The Story Tiddler Template Cascade contains the logic for determining a tiddler should be displayed as an editable draft or in view mode. By default, it consists of two tiddlers containing the following list of rules:

  1. [is[draft]then{$:/config/ui/EditTemplate}] – if it is a draft tiddler, use the template title given in the tiddler $:/config/ui/EditTemplate
  2. [{$:/config/ui/ViewTemplate}]  – otherwise, use the template title given in the tiddler $:/config/ui/ViewTemplate

Usage in the core

The TiddlyWiki core uses cascades to choose the following elements:

Story Tiddler Template CascadeThe template used to display a particular tiddler in the story river. By default, the edit template is chosen for draft tiddlers, and the view template for others
Tiddler Icon CascadeThe optional icon associated with a particular tiddler (displayed alongside the title)
Tiddler Colour CascadeThe optional colour associated with a particular tiddler (used to colour the tiddler icon and if the tiddler is used as a tag also provides the colour for the tag pill)
View Template Title CascadeThe template used to display the title of a particular tiddler (used by the default view template to display the tiddler title)
View Template Body CascadeThe template used to display the view mode body of a particular tiddler (used by the default view template to display the tiddler body)
Edit Template Body CascadeThe template used to display the edit mode body of a particular tiddler (used by the default edit template to display the tiddler body editor)
Field Editor CascadeThe template used to display the edit mode of a tiddler field (used by the default edit template to display the field editor)

You can see the current settings for each cascade in $:/ControlPanel under the Info -> Advanced -> Cascades tab.

See Also

Cascading Style Sheets

21st February 2015 at 6:17pm

CSS is a standard plain-text format used for defining the presentational style of the various elements on a web page.

ceil Operator

11th June 2019 at 5:44pm
purposerounds a list of numbers up to the next largest integer
inputa selection of titles
outputrounds each of the input numbers up to the next largest integer

Learn more about how to use Filters

ceil Operator (Examples)

11th June 2019 at 5:45pm

[[1.6]ceil[]]

[[-1.6]ceil[]]

=-1.2 =-2.4 =3.6 =4.8 =5.1 +[ceil[]]

changecount Macro

21st December 2022 at 5:45pm

The changecount macro returns the number of times the current tiddler has been created, stored or deleted during the current TiddlyWiki session.

If a tiddler is deleted and subsequently recreated, its changecount will be increased by two.

Parameters

(none)

Examples

changecount Macro (Examples)

21st February 2015 at 3:12pm

<<changecount>>

The value will increase if you edit this tiddler and store it again, even without making any changes to its content.

To access the changecount of a different tiddler, use a $tiddler widget:

<$tiddler tiddler="Draft of 'New Tiddler'">
<<changecount>>
</$tiddler>

The value shown will increase whenever you create, store or delete New Tiddler.

Changes to filters in 5.0.9-beta

3rd April 2014 at 10:35pm

Introduction

This release resolves a number of inconsistencies with the way that filters are handled. The changes mean that existing filters may need to be updated - particularly those that must deal with missing or shadow tiddlers.

Changes to is and addition of all

Most filter operators act by choosing some or all of their source titles to pass through or re-order. Those that add new entries that are not drawn from the source list are referred to as selectors. Prior to 5.0.9-beta, a few filter operators were inconsistent in whether they filtered from the source list or selected new entries into it.

The specific changes are:

  • The is operator now always strictly filters from the currently selected list of tiddlers
  • The new all operator acts as a selector by replacing the current list with a combination of tiddlers from specific sources:
    • current for the current tiddler
    • missing for all missing tiddlers
    • orphans for all orphan tiddlers
    • shadows for all shadow tiddlers
    • tiddlers for all non-shadow tiddlers (including both system and non-system tiddlers)

The sources for the all operator can be combined with the + character. For example, [all[shadows+tiddlers]] returns all shadow tiddlers and all ordinary tiddlers.

Previously, it was common to have [is[shadow]] at the start of a filter string to select all the shadow tiddlers. In 5.0.9 and above, this will not return all the shadow tiddlers, but instead just those ordinary tiddlers that are also shadow tiddlers (by virtue of having overridden one). The resolution is to use the new all operator. For example, consider this filter from 5.0.8:

[is[shadow]!has[draft.of]tag[$:/tags/AdvancedSearch]] [!is[shadow]!has[draft.of]tag[$:/tags/AdvancedSearch]] +[tag[$:/tags/AdvancedSearch]]

In 5.0.9, that filter has been changed to:

[all[shadows+tiddlers]tag[$:/tags/AdvancedSearch]!has[draft.of]]

Note how the all operator allows operations to be performed on tiddlers from combinations of sources.

Changes to [is[current]]

One result of the changes is that [is[current]] now strictly filters from the source tiddlers; so, if the current tiddler is a missing tiddler not in the source list, then [is[current]] will return an empty list.

The solution is generally to use [all[current]] instead. It doesn't read as well, but has the required behaviour of returning just the current tiddler, regardless of whether it is in the source tiddlers.

Changes to title and field

There are minor changes to the way that the title and field operators work.

The title operator is a selector: it returns the specified title regardless of whether it is in the current source. title is used as the default operator if none is specified

The field operator is a filter: it only returns a subset of the source tiddlers. field is used as the default operator if the supplied operator is not defined (the supplied operator is passed as the suffix to the field operator, so [description[Missing]] is equivalent to [field:description[Missing]]).

charcode Operator

22nd June 2021 at 9:44pm
purposegenerates string characters from their numeric character codes
inputignored
parameterC=numeric character code
outputa string formed from concatenating the characters specified by the numeric codes given in the parameter(s)

Learn more about how to use Filters

Introduced in v5.2.0

This operator returns a string formed from concatenating the characters specified by the numeric codes given in one or more parameters. It is useful for generating special characters such as tab (charcode[9]) or new line (charcode[13],[10]).

Examples

charcode Operator (Examples)

22nd June 2021 at 9:48pm

[charcode[65]match[A]]

CheckboxWidget

13th November 2023 at 9:33am

Introduction

The checkbox widget displays an HTML <input type="checkbox"> element that is dynamically bound to either:

  • the presence or absence of a specified tag on a specified tiddler
  • the value of a specified field of a specified tiddler

Content and Attributes

The content of the <$checkbox> widget is displayed within an HTML <label> element immediately after the checkbox itself. This means that clicking on the content will toggle the checkbox.

AttributeDescription
tiddlerTitle of the tiddler to manipulate (defaults to the Current Tiddler)
The name of the tag to which the checkbox is bound
invertTagWhen set to yes, flips the tag binding logic so that the absence of the tag causes the checkbox to be checked
The name of the field to which the checkbox is bound
Introduced in v5.2.3 The name of the field that contains the list to which the checkbox is bound
Introduced in v5.1.14 The property of the DataTiddler to which the checkbox is bound
Introduced in v5.2.3 Like index, but treats the value as a list the same way that listField does
Introduced in v5.2.3 A filter whose output determines the checked state of the checkbox
checkedThe value of the field corresponding to the checkbox being checked
uncheckedThe value of the field corresponding to the checkbox being unchecked
defaultThe default value to use if the field is not defined
Whether ambiguous values can produce indeterminate checkboxes (see below)
classThe class that will be assigned to the <label> element
Tip
Introduced in v5.2.3 tc-checkbox is always applied by default, as well as tc-checkbox-checked when checked
actionsIntroduced in v5.1.14 A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked)
uncheckactionsIntroduced in v5.1.16 A string containing ActionWidgets to be triggered when the checkbox is unchecked
checkactionsIntroduced in v5.1.20 A string containing ActionWidgets to be triggered when the checkbox is checked
disabledIntroduced in v5.1.23 Optionally disables the checkbox if set to yes (defaults to no)
tabindexNew in v5.3.7 Optional. Sets the tabindex attribute of the HTML select element to the given value
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML <input> element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML <input> element

tag Mode

Using the checkbox widget in tag mode requires the tag attribute to specify the name of the tag. The checkbox will be checked if the tiddler specified in the tiddler attribute has the specified tag and unchecked if it does not.

This example creates a checkbox that flips the done tag on the current tiddler:

<$checkbox tag="done"> Is it done?</$checkbox>

That renders as:

When the attribute invertTag is set to yes, the checkbox will be checked if the tiddler does not have the specified tag and unchecked if it does.

<$checkbox tag="done" invertTag="yes"> Is it not done?</$checkbox>

That renders as:

CheckboxWidget (field Mode)

17th March 2023 at 4:11pm

field Mode

Using the checkbox widget in field mode requires the field attribute to specify the name of the field. The checked and unchecked attributes specify the values to be assigned to the field to correspond to its checked and unchecked states respectively. The default attribute is used as a fallback value if the field is missing or contains a value that does not correspond to the value of the checked or unchecked attributes.

This example creates a checkbox that is checked if the field status is equal to open and unchecked if the field is equal to closed. If the field value is undefined then it defaults to closed.

<$checkbox field="status" checked="open" unchecked="closed" default="closed"> Is it open?</$checkbox>

''status:'' {{!!status}}

That renders as:

status:

CheckboxWidget (filter Mode)

25th March 2023 at 10:14am

filter Mode

Using the checkbox widget in filter mode requires the filter attribute to contain a filter whose output will determine the checked state of the checkbox. In filter mode, checking the checkbox will not automatically make changes to any field of any tiddler. Instead, you can use the actions attribute (or the checkactions and uncheckactions attributes) to specify what should happen when the checkbox is toggled. It is your responsibility to make sure the actions cause changes to the tiddlers or fields that the filter results depend on, so that the checkbox becomes properly checked or unchecked after the actions have triggered and the filter has updated.

If the filter returns an empty result, the checkbox will be unchecked. Otherwise, if the filter result is non-empty, the checkbox will be checked.

However, if either the checked or unchecked attributes (or both) are specified, then their values will be looked for in the filter result, instead of considering any non-empty value to mean checked.

This example creates the same checkbox as in the , selecting between red and green in the colors list field, but using filters and actions to make the change.

\define checkActions() <$action-listops $field="colors" $subfilter="-red green"/>
\define uncheckActions() <$action-listops $field="colors" $subfilter="red -green"/>
<$checkbox filter="[list[!!colors]]" checked="green" unchecked="red" default="red" checkactions=<<checkActions>> uncheckactions=<<uncheckActions>> > Is "green" in colors?</$checkbox>

''colors:'' {{!!colors}}

That renders as:

colors:

CheckboxWidget (indeterminate)

17th March 2023 at 4:09pm

indeterminate Checkboxes

If both the checked and unchecked attributes are specified, but neither one is found in the specified field (or index), the result can be ambiguous. Should the checkbox be checked or unchecked? Normally in such cases the checkbox will be unchecked, but if the indeterminate attribute is set to yes (default is no), the checkbox will instead be in an "indeterminate" state. An indeterminate checkbox counts as false for most purposes — if you click it, the checkbox will become checked and the checkactions, if any, will be triggered — but indeterminate checkboxes are displayed differently in the browser.

This example shows indeterminate checkboxes being used for categories in a shopping list (which could also be sub-tasks in a todo list, or many other things). If only some items in a category are selected, the category checkbox is indeterminate. You can click on the category checkboxes to see how indeterminate states are treated the same as the unchecked state, and clicking the box checks it and applies its check actions (in this case, checking all the boxes in that category). Try editing the fruits and vegetables fields on this tiddler and see what happens to the example when you do.

\define check-all(field-name:"items") <$action-listops $field="selected-$field-name$" $filter="[list[!!$field-name$]]" />
\define uncheck-all(field-name:"items") <$action-listops $field="selected-$field-name$" $filter="[[]]" />

<$checkbox filter="[list[!!selected-fruits]count[]]" checked={{{ [list[!!fruits]count[]] }}} unchecked="0" checkactions=<<check-all fruits>> uncheckactions=<<uncheck-all fruits>> indeterminate="yes"> fruits</$checkbox>
<ul style="list-style: none">
<$list variable="fruit" filter="[list[!!fruits]]">
<li><$checkbox listField="selected-fruits" checked=<<fruit>>> <<fruit>></$checkbox></li>
</$list>
</ul>
<$checkbox filter="[list[!!selected-vegetables]count[]]" checked={{{ [list[!!vegetables]count[]] }}} unchecked="0" checkactions=<<check-all vegetables>> uncheckactions=<<uncheck-all vegetables>> indeterminate="yes"> veggies</$checkbox>
<ul style="list-style: none">
<$list variable="veggie" filter="[list[!!vegetables]]">
<li><$checkbox listField="selected-vegetables" checked=<<veggie>>> <<veggie>></$checkbox></li>
</$list>
</ul>

<p>Selected veggies: {{!!selected-vegetables}}<br/>
Selected fruits: {{!!selected-fruits}}</p>

That renders as:

Selected veggies:
Selected fruits:

CheckboxWidget (index Mode)

17th March 2023 at 4:09pm

index Mode

To use the checkbox widget in index mode set the index attribute to a property of a DataTiddler. The checked and unchecked attributes specify the values to be assigned to the property and correspond to its checked and unchecked states respectively. The default attribute is used as a fallback value if the property is undefined.

Warning
Make sure to set tiddler correctly, because non-DataTiddlers will be overwritten without warning

The example below creates a checkbox that is checked if the property in the tiddler ExampleData by the name of the current tiddler is equal to selected and unchecked if the property is an empty string. If the property is undefined then it defaults to an empty string, meaning the checkbox will be unchecked if the property is missing.

<$checkbox tiddler="ExampleData" index=<<currentTiddler>> checked="selected" unchecked="" default=""> Selected?</$checkbox>

That renders as:

CheckboxWidget (listField Mode)

17th March 2023 at 4:09pm

listField Mode

Using the checkbox widget in list mode requires the listField attribute to specify the name of a field containing a list. The checked attribute specifies the value that should be present or absent in the list when the checkbox is checked or unchecked respectively. If checked is absent (or empty) but unchecked is present, then the logic will be inverted: the checkbox will be checked when the unchecked value is missing from the list, and unchecked when the unchecked value is found in the list. If both checked and unchecked are present, the checkbox will work like a toggle, replacing the checked value with the unchecked value and vice-versa. Finally, if neither checked nor unchecked is specified, the checkbox will be checked if the field has anything in it, but unchecked if the field is missing or empty. (This is rarely useful. Most of the time you want to specify checked or unchecked or both.)

The default attribute is used as a fallback for the checkbox state if the field is not defined.

The following table summarizes the possible combinations:

defined attributes
neitherfield missing or list empty
no default defined
field has any value
checked=item1item1 removed from listitem1 added to list
unchecked=item2item2 added to listitem2 removed from list
bothitem1 removed from list
item2 added to list
item1 added to list
item2 removed from list
item1 not in list
item2 not in list
no default defined

This example creates a checkbox that is checked if the list field named colors contains green and unchecked if the field contains red. If the field is undefined, or if neither green nor red appears in the field, then it defaults to green, meaning that the checkbox will be checked.

<$checkbox listField="colors" checked="green" unchecked="red" default="green"> Is "green" in colors?</$checkbox><br />''colors:'' {{!!colors}}

That renders as:


colors:

Try editing the colors field of this tiddler to see how the example changes.

CheckboxWidget (listIndex Mode)

17th March 2023 at 4:09pm

listIndex Mode

Using the checkbox widget in index list mode requires the listIndex attribute to specify the the property of a DataTiddler. This property contains a list. The checked attribute specifies the value that should be present or absent in the list when the checkbox is checked or unchecked respectively. If checked is absent (or empty) but unchecked is present, then the logic will be inverted: the checkbox will be checked when the unchecked value is missing from the list, and unchecked when the unchecked value is found in the list. If both checked and unchecked are present, the checkbox will work like a toggle, replacing the checked value with the unchecked value and vice-versa. Finally, if neither checked nor unchecked is specified, the checkbox will be checked if the field has anything in it, but unchecked if the field is missing or empty. (This is rarely useful. Most of the time you want to specify checked or unchecked or both.)

The default attribute is used as a fallback for the checkbox state if the property is undefined.

The following table summarizes the possible combinations:

defined attributes
neitherproperty missing or list empty
no default defined
property has any value
checked=item1item1 removed from listitem1 added to list
unchecked=item2item2 added to listitem2 removed from list
bothitem1 removed from list
item2 added to list
item1 added to list
item2 removed from list
item1 not in list
item2 not in list
no default defined

Warning
Make sure to set tiddler correctly, because non-DataTiddlers will be overwritten without warning

The example below creates three checkboxes that each control a different value in a property of the ExampleData tiddler.

<$set name=indexName filter="[<currentTiddler>addsuffix[ Colors]]" >
<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="green" unchecked="red" default="red"> Green or red?</$checkbox><br/>
<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="yellow" unchecked="blue" default="blue"> Yellow or blue?</$checkbox><br/>
<$checkbox tiddler="ExampleData" listIndex=<<indexName>> checked="orange" unchecked="purple" default="purple"> Orange or purple?</$checkbox><br/>
Colors list: <$text text={{{ [[ExampleData]getindex<indexName>] }}} />
</$set>

That renders as:




Colors list:

CheckboxWidget (tag Mode)

17th March 2023 at 4:11pm

tag Mode

Using the checkbox widget in tag mode requires the tag attribute to specify the name of the tag. The checkbox will be checked if the tiddler specified in the tiddler attribute has the specified tag and unchecked if it does not.

This example creates a checkbox that flips the done tag on the current tiddler:

<$checkbox tag="done"> Is it done?</$checkbox>

That renders as:

When the attribute invertTag is set to yes, the checkbox will be checked if the tiddler does not have the specified tag and unchecked if it does.

<$checkbox tag="done" invertTag="yes"> Is it not done?</$checkbox>

That renders as:

Chick Peas

6th October 2020 at 6:12pm

Chinese (Simplified) Edition

20th September 2014 at 3:02am

TiddlyWiki 的简体中文翻译版本:

另请参阅 中文 (正體) 版

Chinese (Traditional) Edition

20th September 2014 at 3:02am

TiddlyWiki 的正體中文翻譯版本:

另請參閱 中文 (简体) 版

ClearPasswordCommand

Clear the password for subsequent crypto operations

--clearpassword

Code Blocks in WikiText

13th May 2022 at 12:03pm

Code styles and auto format settings for IDEs

6th January 2021 at 3:10pm

CodeBlockWidget

9th August 2024 at 7:46am

Introduction

The codeblock widget renders text in <pre> and <code> blocks, causing it to be displayed monospace. A language may optionally be specified using the language attribute, however syntax highlighting will only be used if the Highlight Plugin is installed.

Content and Attributes

The content of the <$codeblock> widget is ignored.

AttributeDescription
codeContents of the block to render as code
languageProgramming language for syntax highlighting

The language attribute accepts either:

Examples

Here is an example embedding the contents of a tiddler as a code block.

<$codeblock code={{$:/editions/tw5.com/macro-examples/say-hi}} />

That renders as:

\define sayhi(name:"Bugs Bunny",address:"Rabbit Hole Hill")
Hi, I'm $name$ and I live in $address$.
\end

A codeblock may also specify a language.

<$codeblock code="SELECT * FROM users WHERE deleted = false" language="sql" />

That renders as:

SELECT * FROM users WHERE deleted = false

CodeMirror Plugin

28th February 2017 at 10:25am

The CodeMirror plugin adds a sophisticated web-based editor to TiddlyWiki.

See https://tiddlywiki.com/plugins/tiddlywiki/codemirror for a demo.

colour Macro

28th February 2020 at 2:28pm

The colour (or color) macro returns the CSS value of one the colours in the current palette.

If no such entry exists in the current palette, the vanilla palette is used instead. If no such entry exists in the vanilla palette, the system looks for a configuration tiddler with the title $:/config/DefaultColourMappings/<colour-name> and transcludes the colour from the text field. This enables to plugins to ship defaults for colours that are not present in the core palettes.

Parameters

name
The name of the palette entry, e.g. page-background

Examples

colour Macro (Examples)

21st February 2015 at 3:48pm

<<colour code-border>>
<<colour foreground>>
<<colour page-background>>
<<colour sidebar-tab-background>>
<<colour tag-foreground>>

colour-picker Macro

18th April 2016 at 3:43pm

The colour-picker macro displays an interactive colour picker, as can be seen in the core bitmap editor.

Parameters

actions
Wikitext for the action widgets that should be executed when the user selects a colour. Within the text, the variable colour-picker-value contains the selected colour.

Examples

colour-picker Macro (Example 1)

16th November 2021 at 3:46am

colour-picker Macro (Examples)

18th April 2016 at 3:53pm

Colour: <$edit-text tiddler='$:/_MyColour' tag='input' placeholder='(unset)' default=''/>

---

<$macrocall $name='colour-picker' actions="

<$action-setfield $tiddler='$:/_MyColour' $value=<<colour-picker-value>>/>

"/>

ColourPalettes

3rd August 2023 at 4:54am

A colour palette is a data tiddler that supplies a CSS colour value, such as yellow or #fe0, for each of several colour names, like this:

page-background: #fe0
table-border: #ccc
...

Several palettes form part of the core. The system tiddler $:/palette always contains the title of the currently selected palette tiddler. You can change a palette using the palette button, found on the "Tools" tab in the sidebar.

To retrieve the value of a named colour from the current palette, e.g. for use in a stylesheet tiddler, use the colour macro:

<<colour page-background>>

Palette tiddlers should have the following fields:

NameValue
titleTypically starting with $:/
typeapplication/x-tiddler-dictionary
tags$:/tags/Palette
nameDisplayed in the palette browser
descriptionDisplayed in the palette browser
textname: value colour definitions

Comma-Separated Values

21st February 2015 at 6:13pm

CSV is a standard plain-text format for storing a table of data.

Each row of the table is called a record and occupies one line.

The columns are called fields. Each field of a row is separated from the next by a comma, and is often delimited by quotation marks.

The csvtiddlers macro returns tiddler content in this format.

Commands

18th October 2024 at 9:41am

commands Operator

3rd February 2015 at 6:41pm
purposeselect the titles of all the Node.js commands
inputignored
parameternone
outputthe command words that can be given to TiddlyWiki on Node.js

Learn more about how to use Filters

commands Operator (Examples)

18th January 2015 at 6:31pm

[commands[]]

CommandsCommand

4th December 2022 at 8:25pm

Sequentially run the command tokens returned from a filter

--commands <filter>

Examples

--commands "[enlist:raw{$:/build-commands-as-text}]"
--commands "[{$:/build-commands-as-json}jsonindexes[]] :map[{$:/build-commands-as-json}jsonget<currentTiddler>]"

Community

9th September 2025 at 5:19pm

The TiddlyWiki community is an enthusiastic group of users and developers who work together to make TiddlyWiki better, and help each other get the best out of it.

The TiddlyWiki Project is the coordinated, ongoing effort to maintain and improve TiddlyWiki, and to support the TiddlyWiki community.

Please note that Community Cards are a new initiative started in September 2025. There is further work required to complete the team and people information.

Project Team

The project team is responsible for the overall TiddlyWiki project, its vision, mission and values, and ensuring that it meets the needs of the community.

Areas of responsibility include:

  • Communicating and demonstrating the vision, mission and values of the project
  • Continuously improve the development process and practices of the project
  • more to come...
Core Team

The core team is responsible for the maintenance and development of the TiddlyWiki core and official plugins.

Quality Assurance Team

title: Quality Assurance Team

The Quality Assurance Team is responsible for ensuring the quality and reliability of TiddlyWiki releases. This includes reviewing code submissions, testing new features, identifying bugs, and verifying that fixes are effective.

Infrastructure Team

The Infrastructure Team is responsible for maintaining and improving the infrastructure that supports the TiddlyWiki project. This includes the hosting, deployment, and management of the TiddlyWiki websites and services, as well as the tools and systems used by the TiddlyWiki community.

The infrastructure includes:

  • talk.tiddlywiki.org
  • github.com/TiddlyWiki
  • tiddlywiki.com DNS
  • Netlify account for PR previews
  • edit.tiddlywiki.com
Succession Team

The Succession Team is responsible for ensuring that personnel changes do not impact access to the external infrastructure used by the project.

  • Work with the other teams to ensure that the project has a succession plan for key personnel
  • Work with the other teams to ensure that they are using the appropriate, community-owned infrastructure
  • Ensure that the members of the succession team share ownership of the key project resources (eg passwords and user accounts). The Succession Team is not expected to use their access rights apart from managing access in the event of personnel changes
Developer Experience Team

The Developer Experience Team improves the experience of software contributors to the TiddlyWiki project. This includes enhancing documentation, streamlining contribution processes, and providing tools and resources to help developers effectively contribute to TiddlyWiki.

Tools and resources managed by the Developer Experience Team include:

  • Advising and assisting contributors, particularly new developers
  • Maintenance of developer-focused documentation on the https://tiddlywiki.com/dev/ site, including:
    • Development environment setup guides
    • Code review processes and best practices
    • Contribution guidelines and documentation
  • Continuous integration and deployment scripts providing feedback on pull requests
  • Devising and implementing labelling systems for issues and pull requests
  • Automation scripts to simplify common development tasks
TiddlyWiki Newsletter Team

The Newsletter Team is responsible for producing the TiddlyWiki Newsletter. We would love to have your help if you would like to get involved.

Audience

The newsletter is intended for TiddlyWiki end users who do not track all the discussions on https://talk.tiddlywiki.org/.

Coverage of developer topics such as JavaScript and intricate wikitext should be handled thoughtfully to avoid alienating the core audience of end users.

Subscribing to the newsletter is intended to give people confidence that they will not miss any important developments.

Community Cards

9th September 2025 at 5:19pm

The purpose of Community Cards is to allow project plans and other community activities to be linked to the people who are involved in them. They also allow people to share their interests and activities in the TiddlyWiki community, and to help people in the TiddlyWiki community get to know each other better.

Please note that Community Cards are a new initiative started in September 2025. There is further work required to complete the team and people information.

Community Cards Caveats

9th September 2025 at 5:19pm

Please note that Community Cards are a new initiative started in September 2025. There is further work required to complete the team and people information.

Community Editions

3rd August 2023 at 5:34am

These are prepackaged editions created by the TiddlyWiki Community. These are TiddlyWikis with added plugins and configurations to facilitate a certain use-case. These are great starting points if you want to quickly jump into TiddlyWiki and start using it without spending too much time configuring yourself.

Community Links Aggregator

22nd March 2021 at 3:18pm

The TiddlyWiki Community Links Aggregator is a collection of regularly updated links to useful and interesting TiddlyWiki material curated by our team of community editors. The site aggregates links curated by individual members of the TiddlyWiki community. It lets you see the latest links, and explore them through categories and timelines.

https://links.tiddlywiki.org/

This site works best with a crowd of people posting links. The pressure on individuals is reduced because not everybody needs to catch every interesting link that flies past. The aggregation effects reduce the impact of mistakes. For example, if one person mis-tags a link under an inappropriate topic, the site will show that only one person added that tag, versus the majority using more appropriate tags. In that way, we hope that a sort of wisdom of the crowds will emerge, with consensus emerging as to the most useful ways to describe and categorise links.

Community Palettes

1st January 2021 at 3:25pm

This is a list of palettes made by members of the TiddlyWiki Community. Palettes change the colourscheme of TiddlyWiki and can be used in combination with themes.

Community Plugins

1st January 2021 at 3:14pm

These are plugins created by the TiddlyWiki Community. Visit their website to try out the plugin. Carefully read the installing instructions and back up before installing! These plugins may not always be up to date and can contain bugs or unwanted behaviour. For even more plugins, visit the TiddlyWiki Groups. New plugins get posted and announced there first.

Community Survey 2025

Community Themes

1st January 2021 at 3:25pm

This is a list of themes made by members of the TiddlyWiki Community. Themes change the look and feel of TiddlyWiki, allowing for another degree of customisation. Installing themes works the same as plugins.

Community/Team

9th September 2025 at 5:19pm
The following tiddlers are tagged with :

compare Operator

12th April 2020 at 6:15pm
purposefilter the input by comparing each item against the parameter
inputa selection of titles
suffixthe compare operator uses a rich suffix, see below for details
parameterthe value to compare
outputthose input titles matching the specified comparison
! outputthose input titles not matching the specified comparison

Learn more about how to use Filters

Introduced in v5.1.22The compare filter allows numerical, string and date comparisons to be performed.

The compare operator uses an extended syntax to specify all the options:

[compare:<type>:<mode>[<parameter>]]

The type can be:

  • "number" - (default) invalid numbers are interpreted as zero
  • "integer" - invalid integers are interpreted as zero
  • "string"
  • "date" - invalid dates are interpreted as 1st January 1970
  • "version" - invalid versions are interpreted as "v0.0.0"

The mode can be:

  • "eq" - equal to
  • "ne" - not equal to
  • "gteq" - greater than or equal to
  • "gt" - greater than
  • "lteq" - less than or equal to
  • "lt" - less than

The operator compares each item in the selection against the value of the parameter, retaining only those items that pass the specified condition.

For example:

[[2]compare:number:eq[3]] returns nothing
[[2]compare:number:lt[3]] returns "2"
[[2]compare::eq[2]] returns "2"

Note that several of the variants of the compare operator are synonyms for existing operators, and are provided in the interests of consistency. For example, compare:string:eq[x] is a synonym for match[x].

Examples

compare Operator (Examples)

12th April 2020 at 9:29pm

[[20200101]compare:date:gt[201912311852]]
→ compares two partial dates

[[202001011852]compare:integer:gt[20191231]]
→ compares the same two strings as integers

[list[Days of the Week]compare:string:gt[M]compare:string:lt[W]]

[[v5.1.23-prerelease]compare:version:gt[v5.1.22]]

[[1]compare:number:gt[2]then[yes]else[no]]

[[-2]compare::lt[-1]]

Compose ballad

15th November 2021 at 1:31am

CompoundTiddlers

14th August 2025 at 7:32am

Compound tiddlers are a special type of tiddler that can store one or more payload tiddlers. The tiddlers within a compound tiddler are only accessible via special operations, typically with the TestCaseWidget.

The compound tiddler format is extremely simple, and includes the notable flaw that it does not permit tiddlers that contain a plus sign (+) on a line by itself. It is not intended as a general purpose way of storing tiddler data.

Compound tiddlers are identified by having their type field set to text/vnd.tiddlywiki-multiple.

The content of a compound tiddler consists of a sequence of tiddlers separated by a plus sign (+) on a line by itself. Each tiddler uses the same format as .tid files.

For example:

title: First
tags: one two

This is the first tiddler
+
title: Second
tags: three four

This is the second tiddler
+
title: third
tags: five six

This is the third tiddler

Also see: TestCaseTiddlers

Concatenating a text reference to create a URL

21st October 2025 at 2:27pm

Concatenating text and variables using macro substitution

15th June 2023 at 11:45am

Important

Since New in v5.3.0 it is recommended to use substituted attributes or the substitute filter operator to concatenate text and variables.

It's a frequent use case in TiddlyWiki that you will want to put the results of variables together with various bits of strings of text. This process in some programming languages is often referred to as "concatenating" text.


What is Wrong

You might, for instance want to set up a template for your customer database, where links will automatically refer to additional contact information about your customer. Inside your tiddler, you might try something like this:

Warning:
Don't do it this way!

[[Additional Info|<<currentTiddler>>-Contact]]

But that won't work. If you try this, the link will be interpreted very literally, and will attempt to take you to:

<<currentTiddler>>-Contact

The solution is to use a macro to put the rendered value of <<currentTiddler>> together with the bit of additional text, -Contact.

Create a macro at the top of the tiddler like this:

\define linkup(link) [[Additional Info|$link$-Contact]]

You might be tempted to invoke the new macro like this:

Warning:
Don't do it this way!

<<linkup <<currentTiddler>> >>

But if you do, you will find that <<currentTiddler>> doesn't get rendered, but instead gets passed literally.

Instead, you could use the MacroCallWidget widget, like this:

<$macrocall $name="linkup" link=<<currentTiddler>> />

In this case, we passed the value of a variable directly to our macro. This is often a general way to go about this task. If you wanted to create more links based on other variables you could re-use the macro for each situation.

If, as in this case, the only variable you are using is currentTiddler then you could write a simple macro, like this:

\define linkup() [[Additional Info|$(currentTiddler)$-Contact]]

Notice that in this case we don't pass an argument. Instead, we reference the variable using the special syntax $(variable)$. Since we don't pass an argument, we can invoke it without the <$macrocall> widget more simply, like this:

<<linkup>>

Concatenating variables to create a URL

21st October 2025 at 2:27pm

Concepts

4th January 2025 at 11:06am

Conditional Operators

11th July 2023 at 8:23am

Introduced in v5.1.20 The conditional filter operators allow if-then-else logic to be expressed within filters.

The foundation is the convention that an empty list can be used to represent the Boolean value false and a list with at one (or more) entries to represent true.

The conditional operators are:

  • then Operator replaces any input values with a constant string. For example:
    • [[HelloThere]is[missing]then[FOO]]evaluates to(empty)
    • [[Missing Tiddler]is[missing]then[FOO]]evaluates toFOO
  • else Operator if the title list is empty then returns a constant string, otherwise returns the original title list
    • [[HelloThere]is[tiddler]else[BAR]]evaluates toHelloThere
    • [[Missing Tiddler]is[tiddler]else[BAR]]evaluates toBAR

These operators can be combined. For example:

[[New Tiddler]is[missing]then[I am missing]else[No I am not missing]]

The else operator can be used to apply a defaults for missing values. In this example, we take advantage of the fact that the get operator returns an empty list if the field or tiddler does not exist:

[[HelloThere]get[custom-field]else[default-value]]

Filter Run Prefixes

The :then and :else named filter run prefixes serve a similar purpose as the conditional operators.

Also see: Named Filter Run Prefix

Conditional Shortcut Syntax

1st September 2023 at 12:31pm

New in v5.3.2 The conditional shortcut syntax provides a convenient way to express if-then-else logic within WikiText. It evaluates a filter expression and considers the condition to be true if there is at least one result (regardless of the value of that result).

Within an "if" or "elseif" clause, the variable condition contains the value of the first result of evaluating the filter condition.

A simple example:

<%if [{$:/info/url/protocol}match[file:]] %>
  Loaded from a file URI
<%else%>
  Not loaded from a file URI
<%endif%>

That renders as:

Not loaded from a file URI

One or more <%elseif%> clauses may be included before the <%else%> clause:

<%if [{$:/info/url/protocol}match[file:]] %>
  Loaded from a file URI
<%elseif [{$:/info/url/protocol}match[https:]] %>
  Loaded from an HTTPS URI
<%elseif [{$:/info/url/protocol}match[http:]] %>
  Loaded from an HTTP URI
<%else%>
  Loaded from an unknown protocol
<%endif%>

That renders as:

Loaded from an unknown protocol

The conditional shortcut syntax can be nested:

\procedure test(animal)
<%if [<animal>match[Elephant]] %>
  It is an elephant
<%else%>
  <%if [<animal>match[Giraffe]] %>
    It is a giraffe
  <%else%>
    It is completely unknown
  <%endif%>
<%endif%>
\end

<<test "Giraffe">>

<<test "Elephant">>

<<test "Antelope">>

That renders as:

It is a giraffe It is an elephant It is completely unknown

Notes:

  • Clauses are parsed in inline mode by default. Force block mode parsing by following the opening <%if %>, <%elseif%> or <%else%> with two line breaks
  • Widgets and HTML elements must be within a single conditional clause; it is not possible to start an element in one conditional clause and end it in another
  • The conditional shortcut syntax cannot contain pragmas such as procedure definitions

Configuring startup tiddlers

6th March 2018 at 4:14pm

You can configure TiddlyWiki to start up using whatever individual or group of tiddlers you want using the default tiddlers mechanism.

In the control panel under the info tab is an input field labeled "Choose which tiddlers are displayed at startup". You can list whatever tiddlers you want to open at startup. Use double square brackets for titles containing spaces. For example:

FirstTiddler
SecondTiddler
[[Third Tiddler]]

You can also use filter expressions to open more than one tiddler. For example:

[tag[HelloThere]]

will open all tiddlers tagged as .

You can also use this technique to preserve open tiddlers at startup

See also StartupActions for controlling more advanced startup behaviours.

Configuring the default TiddlerInfo tab

12th September 2014 at 2:59pm

The configuration tiddler $:/config/TiddlerInfo/Default contains the title of the tiddler containing the default tiddler info tab.

The default value is $:/core/ui/TiddlerInfo/Fields corresponding to the Fields tab. Other possible values are:

  • $:/core/ui/TiddlerInfo/Tools
  • $:/core/ui/TiddlerInfo/References
  • $:/core/ui/TiddlerInfo/Tagging
  • $:/core/ui/TiddlerInfo/List
  • $:/core/ui/TiddlerInfo/Listed
  • $:/core/ui/TiddlerInfo/Fields
  • $:/core/ui/TiddlerInfo/Advanced
  • $:/editions/tw5.com/TiddlerInfo/Sources

Consent Banner Plugin

19th October 2020 at 8:46am

The Consent Banner Plugin helps make websites that are compliant with "cookie legislation" such as the EU General Data Protection Regulation. It presents a banner inviting the user to accept or reject cookies, keeping track of their consent in local storage so that the banner can be hidden on subsequent visits.

By default, content embedded with <iframe>, <embed> and <object> is blocked unless the user consents to accept cookies.

Consent status is available via a configuration tiddler so that it is possible to construct content that behaves differently depending upon whether consent has been granted. As an example, a macro is provided for embedding YouTube videos that automatically uses the youtube-nocookie.com variant of video URLs unless the user has accepted cookies.

Please note that using this plugin does not guarantee compliance with any particular legislation. You will need to understand the technical issues specific to your situation, and if necessary seek legal advice.

Constructing JSON tiddlers

22nd September 2023 at 12:25pm

See JSON in TiddlyWiki for an overview of using JSON in TiddlyWiki.

JSON data is just plain text, and so there are an wide variety of techniques to generate it in wikitext.

At a high level, we have several ways to generate JSON data in TiddlyWiki's own tiddler format:

When constructing JSON data manually, the jsonstringify Operator is needed to ensure that any special characters are properly escaped.

contains Operator

15th August 2018 at 12:46pm
purposefilter the input by searching list fields for a value
inputa selection of titles
suffixF=the name of a field (defaults to list)
parameterS=a possible value to be found in list field F
outputthose input tiddlers in which the list field F contains the value S
! outputthose input tiddlers in which the list field F does not contain the value S

Learn more about how to use Filters

contains Operator (Examples)

15th August 2018 at 12:49pm

[[$:/StoryList]contains[HelloThere]]
→ checks whether the tiddler 'HelloThere' is currently displayed in the story river

Contents

14th November 2021 at 1:36am

This is an example tiddler. SeeTable-of-Contents Macros (Examples).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ContentType

14th August 2025 at 7:39am

Used in Internet protocols to indicate the type that should be used to interpret the content of a web resource.

In TiddlyWiki, the type field gives the content type to apply to the main text field.

List of Common Content Types

GroupTypeContent of type field
DeveloperData dictionaryapplication/x-tiddler-dictionary
Compound Tiddlertext/vnd.tiddlywiki-multiple
JavaScript codeapplication/javascript
JSON dataapplication/json
Static stylesheettext/css
ImageGIF imageimage/gif
ICO format icon fileimage/x-icon
JPEG imageimage/jpeg
PDF imageapplication/pdf
PNG imageimage/png
Structured Vector Graphics imageimage/svg+xml
TextHTML markuptext/html
CSS stylesheettext/css
Comma-separated valuestext/csv
Plain texttext/plain
TiddlyWiki 5text/vnd.tiddlywiki
TiddlyWiki Classictext/x-tiddlywiki

contrastcolour Macro

21st February 2015 at 3:13pm

The contrastcolour macro returns whichever of two given CSS colours is deemed to contrast best with another.

An example can be seen in the template tiddler for tag pills.

Parameters

target
The colour to contrast against (typically a background colour)
fallbackTarget
An alternative colour to contrast against. This is used when target is undefined or not a valid colour
colourA
The first of the two colours to choose between
colourB
The second of the two colours to choose between

Contributing

18th August 2025 at 1:25am

Here we focus on contributions via GitHub Pull Requests but there are many other ways that anyone can help the TiddlyWiki project, such as reporting bugs or helping to improve our documentation.

Rules for Pull Requests

PRs must meet these minimum requirements before they can be considered for merging:

  • The material in the PR must be free of licensing restrictions. Which means that either:
    • The author must hold the copyright in all of the material themselves
    • The material must be licensed under a license compatible with TiddlyWiki's BSD license
  • The author must sign the Contributors License Agreement (see below)
  • Each PR should only make a single feature change
  • The title of the PR should be 50 characters or less
  • The title of the PR should be capitalised (first letter of first word only, and proper nouns if any), and should not end with a period
  • The title of the PR should be written in the imperative mood. See below
  • Adequate explanation in the body of the PR for the motivation and implementation of the change. Focus on the why and what, rather than the how
  • PRs must be self-contained. Although they can link to material elsewhere, everything needed to understand the intention of the PR should be included
  • Any visual changes introduced by the PR should be noted and illustrated with before/after screenshots
  • Documentation as appropriate for end-users or developers
  • Observe the coding style
  • Read the developers documentation
  • Please open a consultation issue prior to investing time in making a large PR

Imperative Mood for PR Titles

The "imperative mood" means written as if giving a command or instruction. See this post for more details, but the gist is that the title of the PR should make sense when used to complete the sentence "If applied, this commit will...". So for example, these are good PR titles:

  • If applied, this commit will update the contributing guidelines
  • If applied, this commit will change css-escape-polyfill to a $tw.utils method
  • If applied, this commit will make it easier to subclass the wikitext parser with a custom rule set

These a poorly worded PR titles:

  • If applied, this commit will edit text widgets should use default text for missing fields
  • If applied, this commit will signing the CLA
  • If applied, this commit will don't crash if options.event is missing

PR titles may also include a short prefix to indicate the subsystem to which they apply. For example:

  • Menu plugin: Include menu text in aerial rotator

Commenting on Pull Requests

One of the principles of open source is that many pairs of eyes on the code can improve quality. So, we welcome comments and critiques of pending PRs. Conventional Comments has some techniques to help make comments as constructive and actionable as possible. Notably, they recommend prefixing a comment with a label to clarify the intention:

praisePraises highlight something positive. Try to leave at least one of these comments per review. Do not leave false praise (which can actually be damaging). Do look for something to sincerely praise
nitpickNitpicks are small, trivial, but necessary changes. Distinguishing nitpick comments significantly helps direct the reader's attention to comments requiring more involvement
suggestionSuggestions are specific requests to improve the subject under review. It is assumed that we all want to do what's best, so these comments are never dismissed as “mere suggestions”, but are taken seriously
issueIssues represent user-facing problems. If possible, it's great to follow this kind of comment with a suggestion
questionQuestions are appropriate if you have a potential concern but are not quite sure if it's relevant or not. Asking the author for clarification or investigation can lead to a quick resolution
thoughtThoughts represent an idea that popped up from reviewing. These comments are non-blocking by nature, but they are extremely valuable and can lead to more focused initiatives and mentoring opportunities
choreChores are simple tasks that must be done before the subject can be “officially” accepted. Usually, these comments reference some common process. Try to leave a link to the process description so that the reader knows how to resolve the chore

Contributor License Agreement

Like other OpenSource projects, TiddlyWiki5 needs a signed contributor license agreement from individual contributors. This is a legal agreement that allows contributors to assert that they own the copyright of their contribution, and that they agree to license it to the UnaMesa Association (the legal entity that owns TiddlyWiki on behalf of the community).

How to sign the CLA

Create a GitHub pull request to add your name to cla-individual.md or cla-entity.md, with the date in the format (YYYY/MM/DD).

step by step

  1. Navigate to licenses/CLA-individual or licenses/CLA-entity according to whether you are signing as an individual or representative of an organisation
  2. Ensure that the "branch" dropdown at the top left is set to tiddlywiki-com
  3. Click the "edit" button at the top-right corner (clicking this button will fork the project so you can edit the file)
  4. Add your name and GitHub handle at the bottom
    • eg: Jeremy Ruston, @Jermolene, 2011/11/22
  5. Below the edit box for the CLA text you should see a box labelled Propose file change
  6. Enter a brief title to explain the change (eg, "Signing the CLA")
  7. Click the green button labelled Propose file change
  8. On the following screen, click the green button labelled Create pull request

The CLA documents used for this project were created using Harmony Project Templates. "HA-CLA-I-LIST Version 1.0" for "CLA-individual" and "HA-CLA-E-LIST Version 1.0" for "CLA-entity".

ContributingTemplate

25th August 2013 at 2:49pm

Contributing to TiddlyWiki5

Here we focus on contributions via GitHub Pull Requests but there are many other ways that anyone can help the TiddlyWiki project, such as reporting bugs or helping to improve our documentation.

Rules for Pull Requests

PRs must meet these minimum requirements before they can be considered for merging:

  • The material in the PR must be free of licensing restrictions. Which means that either:
    • The author must hold the copyright in all of the material themselves
    • The material must be licensed under a license compatible with TiddlyWiki's BSD license
  • The author must sign the Contributors License Agreement (see below)
  • Each PR should only make a single feature change
  • The title of the PR should be 50 characters or less
  • The title of the PR should be capitalised (first letter of first word only, and proper nouns if any), and should not end with a period
  • The title of the PR should be written in the imperative mood. See below
  • Adequate explanation in the body of the PR for the motivation and implementation of the change. Focus on the why and what, rather than the how
  • PRs must be self-contained. Although they can link to material elsewhere, everything needed to understand the intention of the PR should be included
  • Any visual changes introduced by the PR should be noted and illustrated with before/after screenshots
  • Documentation as appropriate for end-users or developers
  • Observe the coding style
  • Read the developers documentation
  • Please open a consultation issue prior to investing time in making a large PR

Imperative Mood for PR Titles

The "imperative mood" means written as if giving a command or instruction. See this post for more details, but the gist is that the title of the PR should make sense when used to complete the sentence "If applied, this commit will...". So for example, these are good PR titles:

  • If applied, this commit will update the contributing guidelines
  • If applied, this commit will change css-escape-polyfill to a $tw.utils method
  • If applied, this commit will make it easier to subclass the wikitext parser with a custom rule set

These a poorly worded PR titles:

  • If applied, this commit will edit text widgets should use default text for missing fields
  • If applied, this commit will signing the CLA
  • If applied, this commit will don't crash if options.event is missing

PR titles may also include a short prefix to indicate the subsystem to which they apply. For example:

  • Menu plugin: Include menu text in aerial rotator

Commenting on Pull Requests

One of the principles of open source is that many pairs of eyes on the code can improve quality. So, we welcome comments and critiques of pending PRs. Conventional Comments has some techniques to help make comments as constructive and actionable as possible. Notably, they recommend prefixing a comment with a label to clarify the intention:

praisePraises highlight something positive. Try to leave at least one of these comments per review. Do not leave false praise (which can actually be damaging). Do look for something to sincerely praise
nitpickNitpicks are small, trivial, but necessary changes. Distinguishing nitpick comments significantly helps direct the reader's attention to comments requiring more involvement
suggestionSuggestions are specific requests to improve the subject under review. It is assumed that we all want to do what's best, so these comments are never dismissed as “mere suggestions”, but are taken seriously
issueIssues represent user-facing problems. If possible, it's great to follow this kind of comment with a suggestion
questionQuestions are appropriate if you have a potential concern but are not quite sure if it's relevant or not. Asking the author for clarification or investigation can lead to a quick resolution
thoughtThoughts represent an idea that popped up from reviewing. These comments are non-blocking by nature, but they are extremely valuable and can lead to more focused initiatives and mentoring opportunities
choreChores are simple tasks that must be done before the subject can be “officially” accepted. Usually, these comments reference some common process. Try to leave a link to the process description so that the reader knows how to resolve the chore

Contributor License Agreement

Like other OpenSource projects, TiddlyWiki5 needs a signed contributor license agreement from individual contributors. This is a legal agreement that allows contributors to assert that they own the copyright of their contribution, and that they agree to license it to the UnaMesa Association (the legal entity that owns TiddlyWiki on behalf of the community).

How to sign the CLA

Create a GitHub pull request to add your name to cla-individual.md or cla-entity.md, with the date in the format (YYYY/MM/DD).

step by step

  1. Navigate to licenses/CLA-individual or licenses/CLA-entity according to whether you are signing as an individual or representative of an organisation
  2. Ensure that the "branch" dropdown at the top left is set to tiddlywiki-com
  3. Click the "edit" button at the top-right corner (clicking this button will fork the project so you can edit the file)
  4. Add your name and GitHub handle at the bottom
    • eg: Jeremy Ruston, @Jermolene, 2011/11/22
  5. Below the edit box for the CLA text you should see a box labelled Propose file change
  6. Enter a brief title to explain the change (eg, "Signing the CLA")
  7. Click the green button labelled Propose file change
  8. On the following screen, click the green button labelled Create pull request

The CLA documents used for this project were created using Harmony Project Templates. "HA-CLA-I-LIST Version 1.0" for "CLA-individual" and "HA-CLA-E-LIST Version 1.0" for "CLA-entity".

This file was automatically generated by TiddlyWiki5

Contributor License Agreement

3rd August 2023 at 5:35am

Like other OpenSource projects, TiddlyWiki5 needs a signed contributor license agreement from individual contributors. This is a legal agreement that allows contributors to assert that they own the copyright of their contribution, and that they agree to license it to the UnaMesa Association (the legal entity that owns TiddlyWiki on behalf of the community).

Contributors

16th September 2014 at 1:31pm

The following individuals have generously given their time to contribute to the development of TiddlyWiki:

Coordinate Systems

10th August 2022 at 8:16pm

TiddlyWiki (primarily the RevealWidget) supports two coordinate systems for positioning popups (see PopupMechanism to learn more about popups).

Introduced in v5.2.4 We introduced absolute coordinates that may not work with all extensions and plugins. For maximum backwards compatibility, use absolute coordinates only where necessary.

Relative coordinate system

The default coordinate system is relative to the nearest positioned ancestor element. This is either:

  • an element with a non-static position, or
  • a td, th, table in case the element itself is static positioned.

For tiddlers the nearest positioned ancestor element mostly is the body of the tiddler. Read the next chapter to learn about the exceptions.

Relative coordinates are expressed in the form (x,y,w,h). Where x and y represent the position and w and h the width and height of the element.

Absolute coordinate system

The relative coordinate system works flawless most of the time. Problems occure if the target element (for example, a popup) and the source element (the triggering button) do not share the same positioned ancestor element. This is often the case if the popup is declared outside a table and the triggering button is declared within a table cell. In this case the coordinate systems have different origins and the popup will be displayed in the wrong location.

Absolute coordinates can fix this problem by using the root element of the page (the upper-left corner of the page) as the origin of the coordinate system. Absolute coordinates are expressed in the form @(x,y,w,h). Where x and y represent the position and w and h the width and height of the element. The leading @-symbol marks these coordinates as absolute.

The ButtonWidget has an option (popupAbsCoords) to put absolute coordinates into the state tiddler. The DraggableWidget and the EventCatcherWidget provide the absolute coordinate of an event within the attribute tv-popup-abs-coords.

Example

The following example shows a popup that is triggered from within a table cell. The table cell is the nearest positioned ancestor element. The popup was defined outside the table cell. The button using relative coordinates will open the popup in the wrong location because the button and the popup do not agree on the same coordinate system. Using absolute coordinates fixes this problem.

<$reveal type="popup" state="$:/state/CoordinateSampleReveal">
<div class="tc-drop-down">
Popup
</div>
</$reveal>

| Table Row 1 |<$button popup="$:/state/CoordinateSampleReveal">Relative coordinates</$button>|
| Table Row 2 |<$button popup="$:/state/CoordinateSampleReveal" popupAbsCoords="yes">Absolute coordinates</$button>|

That renders as:

Table Row 1
Table Row 2

copy-to-clipboard Macro

16th December 2017 at 10:49am

The copy-to-clipboard macro displays a button that copies specified text to the clipboard. A notification is displayed if the operation is successful; some browsers do not permit the operation.

Parameters

src
The text to be copied to the clipboard
class
Optional CSS classes to be assigned to the button (defaults to tc-btn-invisible)
style
Optional CSS styles to be assigned to the button

Examples

copy-to-clipboard Macro (Examples)

16th December 2017 at 10:51am

<<copy-to-clipboard "Mary had a little lamb">>
<$macrocall $name="copy-to-clipboard" src={{$:/SiteTitle}}/>

Copying tiddlers between TiddlyWiki files

19th September 2014 at 4:15pm

You can copy an individual tiddler from one TiddlyWiki file to another by dragging a link to the tiddler from one browser window to another.

If you want to drag a link, first move it vertically, because horizontal movement is recognized by the browser as text selection.

Core Classes

22nd April 2024 at 9:01am

Core Functions

22nd April 2024 at 9:09am

Core Icons

23rd April 2023 at 10:31am

Introduction

TiddlyWiki includes over 100 custom vector icons. They feature in the user interface and are also available for authors to use in their own applications. See Icon Gallery for a complete listing.

Usage

The core icons are used by transcluding them. For example:

{{$:/core/images/new-image-button}}

That renders as:

The core icons are parameterised. The first parameter size specified the size at which the icon should be rendered:

{{$:/core/images/picture|64px}}
<$transclude $tiddler="$:/core/images/picture" size="32px"/>

That renders as:

Here is an example of dynamically resizing icons:

<$list filter="[range[24,56,8]]" variable=iconSize>
<$text text={{{ [<iconSize>addsuffix[px]] }}} />
<$transclude $tiddler="$:/core/icon" size=<<iconSize>>/>
</$list>

That renders as:

24px 32px 40px 48px 56px

Some icons take further parameters to customise how they are rendered. For example, the $:/core/images/new-journal-button icon takes an additional parameter day that specifies the day of the month that should be shown on the calendar. It defaults to the current date if not specified

{{$:/core/images/new-journal-button|48px|17}}
<$transclude $tiddler="$:/core/images/new-journal-button" day="17"/>

That renders as:

17

17

The core icons are implemented as embedded SVG elements, and not as full-blown SVG images. This means that they can be styled using CSS. For example, the CSS property fill can be used to change the colour of the icons. For example:

<span style="fill: red;">{{$:/core/images/opacity}}</span>

That renders as:

Core Macros

22nd April 2024 at 8:46am

Core Messages

22nd April 2024 at 9:12am

Core Procedures

22nd April 2024 at 9:09am

Core Team

9th September 2025 at 5:19pm

Core Team

The core team is responsible for the maintenance and development of the TiddlyWiki core and official plugins.

Core Variables

21st April 2024 at 2:48pm

Core Widgets

22nd April 2024 at 8:31am

TiddlyWiki's display is driven by an underlying collection of widgets. These are organised into a tree structure: each widget has a parent widget and zero or more child widgets.

TiddlyWiki generates this widget tree by parsing the WikiText of tiddlers. Each component of the WikiText syntax, including even the trivial case of ordinary text, generates a corresponding widget. The widget tree is an intermediate representation that is subsequently rendered into the actual display.

Widgets are analogous to elements in an HTML document. Indeed, HTML tags in WikiText generate dedicated element widgets.

Each class of widget contributes a specific ability to the overall functionality, such as the ability to display an image or a button, to call a macro or transclude text from elsewhere, or to mark a piece of text as a heading.

The more specialised widgets use a general-purpose widget syntax as their only possible WikiText representation.

The following classes of widget are built into the core:

cos Operator

21st October 2021 at 10:29pm
purposecalculate the cosine value of a list of angles (given in radians)
inputa selection of titles
outputthe cosine of the input angles (numeric value between -1 and 1)

Learn more about how to use Filters

cos Operator (Examples)

20th October 2021 at 2:21pm

[[2]cos[]]

=1 =2 =3 =4 +[cos[]]

count Operator

8th February 2017 at 8:09pm
purposecount the number of entries in a list
inputa selection of titles
outputa new list containing the number of items in the input list as a decimal string

Learn more about how to use Filters

The number of the entries in the input list is counted and a decimal representation returned as a single string.

Examples

count Operator (Examples)

8th February 2017 at 8:10pm

[tag[HelloThere]count[]]

CountWidget

31st December 2018 at 1:01pm

Introduction

The count widget displays the number of unique items in the output of specified filter expressions.

Content and Attributes

The content of the <$count> widget is ignored.

AttributeDescription
filterThe filter expression to count

Example

There are <$count filter="[tag[Examples]]"/> tiddlers tagged with Examples

That renders as:

There are 8 tiddlers tagged with Examples

Creating a custom export format

24th November 2014 at 5:35pm

To create a custom export format that exports tiddlers as their raw body text:

  1. Create a tiddler with the following fields:
    • tags: $:/tags/Exporter
    • description: Description of this exporter
    • extension: Default file extension for this export format (including the dot; for example .tid)
  2. Set the following content:
\define renderContent()
{{{ $(exportFilter)$ ||$:/core/templates/plain-text-tiddler}}}
\end
<<renderContent>>

The variable exportFilter contains a filter defining which tiddlers should be exported.

Creating a splash screen

27th September 2018 at 8:44am

By default, TiddlyWiki displays a blank screen while it is loading. You can add a special "splash screen" that is displayed while the wiki loads.

Larger TiddlyWiki files and those loaded over a slow network connection may take a little time to load. Once fully loaded, performance improves, because everything is now running entirely within the browser. Using a splash screen ensures people know the loading process is taking place, reducing the chance they will leave the page.

In order for the splash screen to be displayed before TiddlyWiki is initialised or decrypted, it is embedded as static HTML/CSS within the TiddlyWiki HTML file. This is done with the SystemTag: $:/tags/RawMarkupWikified/TopBody, or any of the other system tags beginning with $:/tags/RawMarkup.

In order to remove the splash screen when the wiki has finished loading, the HTML should be wrapped in a container with the special class tc-remove-when-wiki-loaded. Any DOM elements with this class are automatically deleted by the core once the wiki has loaded.

Here's an example of a simple splash screen that just displays the text Loading. To use it, copy the text into a new tiddler, give it the type "text/plain" and the tag "$:/tags/RawMarkupWikified/TopBody":

<div class="tc-remove-when-wiki-loaded">
Loading...
</div>

If the tiddler is given the WikiText type text/vnd.tiddlywiki then the contents are wikified as the file is saved, allowing transclusion etc. For example, here's an example that quotes the site title in the loading message. To use it, copy the text into a new tiddler, give it the type "text/vnd.tiddlywiki" and the tag "$:/tags/RawMarkupWikified/TopBody":

\rules only filteredtranscludeinline transcludeinline
<div class="tc-remove-when-wiki-loaded">
Please wait while {{$:/SiteTitle}} is loading
</div>

The \rules directive is used to limit the wikitext syntax that is recognised to the two forms of inline transclusion. This avoids accidental wikification of tiddler content.

There is a more complex example splash screen using CSS animations and images configured in this wiki: see $:/SplashScreen

Creating and editing tiddlers

7th June 2016 at 3:37pm

Creating tiddlers

You create a tiddler either by clicking the button in the sidebar, or by clicking on a link to a missing tiddler. Links to missing tiddlers are shown in blue italics.

See also:

Editing tiddlers

To edit an existing tiddler, click the button at the top right of the tiddler.

Draft mode

When you create a new tiddler or edit an existing one, the tiddler will go into draft mode. This presents a control panel for modifying the tiddler in various ways. It has several parts, from top to bottom:

  • The title field - Use this to change the title of the tiddler
  • The tag selector - Use this to add or remove tags. As you type a tag name in the box, a dropdown list will show you any existing tags that match. You can pick from this list or create a completely new tag. Then click the add button or hit the Enter key to add the tag to the tiddler. Each tag is shown as a coloured pill. Click the "×" on a pill to remove that tag
  • The text area - Use this to edit the main content of the tiddler. Click the preview button ( / ) to see what your changes will look like
  • The type selector - Use this when a tiddler needs to be displayed in a special way, such as an image. See ContentType for a list of the options. The default is text/vnd.tiddlywiki, which means the tiddler contains WikiText
  • The field selector - Use this to add or remove fields on the tiddler. For example, if you are editing a tiddler that's being used to tag other tiddlers, you can add a ''list'' field to change the order in which those tiddlers will be listed

Save, cancel or delete

When you have finished editing, click a button at the top right of the tiddler:

  • The ok button () stores your changes to this one tiddler and leaves draft mode. If your wiki is configured to AutoSave, your changes will be permanently saved. Otherwise they will only be stored temporarily in your web browser, and you will lose them if you close your TiddlyWiki page without first clicking the master save changes button ( ) in the sidebar.
  • The cancel button () discards your changes (after asking you to confirm) and leaves draft mode.
  • The delete button () deletes the entire tiddler (after asking you to confirm).

Creating journal tiddlers

18th December 2018 at 6:00pm

Introduction

Journal tiddlers are tiddlers that use a date and/or time as their title. They are typically used as a quick way to record time-stamped information.

You can use additional tags on a journal tiddler to link it to other tiddlers, helping to establish the relationships between items of information.

For example, you might use a journal tiddler called 10th October 2014 to record thoughts and information captured on that particular day. The tags Shopping and London might be used to indicate that the entry concerns shopping in London.

Creating a journal tiddler

The easiest way to create a journal tiddler is to use the new journal button 20 in the Tools tab of the sidebar. If you find yourself often using the button, click the checkbox next to it to make the button available just above the search box.

The new journal button creates a journal entry as a blank tiddler with the tag Journal and a title derived from today's date. If a journal tiddler with that title already exists, then this is opened for editing.

Creating a tagged journal tiddler

A common sequence of actions is to create (or reopen) today's journal entry and tag it with the title of another tiddler. This can be done with the new journal here button 20 in the other tiddler's toolbar. You can find this button in the Tools tab of the tiddler's InfoPanel.

For example, you might be reviewing a tiddler called Oxford Street and realise that it's relevant for planning your shopping trip. Click the new journal here button on the Oxford Street tiddler to bring up a journal entry tagged with Oxford Street.

Customising journal tiddlers

To configure how new journal entries are created, visit the Basics tab under Info in the control panel :

  • "Title of new journal tiddlers" specifies how these tiddlers should be named, as a date format string. The default setting of DDth MMM YYYY causes new entries to have titles of the form "10th October 2014"
  • "Tags for new journal tiddlers" [specifies|Title List] tags that will automatically appear on new journal entries. For example: Journal [[Summer vacation]]

Hint: if you want to create a separate journal tiddler whenever you click new journal (even if you do this several times in the same day), you can include the clock time in the title format. Specify something like YYYY-0MM-0DD at 0hhh0mm'0ss'' as the date format.

Another useful trick is to include <<currentTiddler>> somewhere in the title format. This means that if you click new journal here on several different tiddlers, the title of each of those tiddlers will form part of the name of the resulting journal entries.

Making a custom new journal button

Visit the Making a custom journal button tiddler for instructions on how to make your own custom New Journal button

Creating new toolbar buttons

3rd August 2023 at 5:03am

Let's say you have a skeleton tiddler called 'Recipe template', and you want to have a button available in the tiddler ViewToolbar to create new recipe tiddlers on demand. This will require the following steps:

  1. You will want an image for your button. If none of the core images (shadow tiddlers with the prefix $:/core/images/) work for you, then you will need to create or acquire an SVG image (for example, one of the images at http://flaticon.com), drag it into your file so that it becomes a tiddler, edit the tiddler and adjust the height and width to 22px
  2. You will want to create the tiddler that contains your tiddler. Create it, title it, and add the button code (see the code at the bottom of this tiddler for an example, with hints where you will need to adapt it). Tag it $:/tags/ViewToolbar
  3. You will need to create a tiddler that tells TiddlyWiki whether your button should be visible in the toolbar or hidden. Let's title it $:/config/ViewToolbarButtons/Visibility/Recipe. Type show into the text area, and save. If you want to hide it, type hide into the text area and save. The button will also be accessable from the Control Panel : Appearance : Toolbars : View Toolbar tab
  4. You will want to position the button properly. Open the tiddler $:/tags/ViewToolbar and insert your button tiddler's title in the appropriate place in the list field.
\define newHereButtonTags()
[[$(currentTiddler)$]]
\end
\define newHereButton()
<$button class=<<tv-config-toolbar-class>>>
<$action-sendmessage
  $message="tm-new-tiddler"
$param="TITLE OF YOUR SKELETON BUTTON"
title="New tiddler"
  tags=<<newHereButtonTags>> />
<$list filter="[<tv-config-toolbar-icons>match[yes]]">
{{TITLE OF YOUR SVG IMAGE TIDDLER}}
</$list>
<$list filter="[<tv-config-toolbar-text>match[yes]]">
<span class="tc-btn-text"><$text text="CAPTION FOR YOUR BUTTON"/></span>
</$list>
</$button>
\end

<<newHereButton>>

Creating SubStories

27th November 2021 at 3:22am

This example shows how to create a sub-story within a tiddler that is independent of the main story. The NavigatorWidget and ListWidget work together to:

  1. Add tiddlers to the story when links are clicked. Navigate to the tiddler corresponding to the link click. (story attribute of the NavigatorWidget)
  2. Remove tiddlers from the story when tiddler close buttons are clicked. (story attribute of NavigatorWidget)
  3. Animate the opening and closing of tiddlers. (storyview attribute of the ListWidget)
  4. Display the list of open tiddlers. (filter and template attributes of the ListWidget)
  5. Display tiddlers in draft mode. (editTemplate attribute of the ListWidget)
  6. Track navigation history. (history attribute of both NavigatorWidget and ListWidget)
  7. And more!

Here is the example code (see also StateMechanism for related discussion):

<$navigator story="$:/temp/DemoStoryList" history="$:/temp/DemoHistoryList">

{{$:/core/ui/SideBarSegments/search}}

<$list
  filter="[list[$:/temp/DemoStoryList]]"
  history="$:/temp/DemoHistoryList"
  template={{$:/config/ui/ViewTemplate}}
  editTemplate={{$:/config/ui/EditTemplate}}
  storyview="classic"
  emptyMessage="Use search box above. Clicked search links will open here instead of in the main story.<p>No search ideas? Click this link to get started: HelloThere</p>"/>

</$navigator>

That renders as:

Use search box above. Clicked search links will open here instead of in the main story.

No search ideas? Click this link to get started: HelloThere

csvtiddlers Macro

21st February 2015 at 3:13pm

The csvtiddlers macro returns the fields of a selection of tiddlers in CSV form, with one record (row) per tiddler.

An example can be seen in the template tiddler for CSV exports.

Parameters

filter
A filter selecting which tiddlers to include
format
Reserved for future extension. Should be set to quoted-comma-sep

Current Tiddler

21st February 2015 at 9:50pm

The current tiddler provides the context in which several aspects of WikiText are interpreted.

For example, {{!!title}} denotes the value of the title field of whatever the current tiddler happens to be. This technique can be used to create general-purpose template tiddlers.

The title of the current tiddler can always be found in the currentTiddler variable.

The two most common ways in which the current tiddler is changed are:

  • the $tiddler widget
  • the $list widget (when its variable attribute is not overridden)

The current tiddler is therefore often not the same as the tiddler that is being viewed or edited.

currentTab Variable

27th June 2024 at 8:16pm

The currentTab variable contains the title of the current tab within an enclosing set of tabs generated by the tabs Macro.

When a tiddler is transcluded within a tab, any use of the currentTiddler Variable will point to the tiddler containing the tabs Macro call. This may lead to surprises if the transcluded tiddler was originally written to display by itself in the Story River in ways that rely on self-reference. The currentTab macro enables a similar effect to currentTiddler for the special case of a tiddler rendered as a tab.

Compare currentTiddler.

currentTiddler Variable

21st February 2015 at 3:20pm

The currentTiddler variable contains the title of the current tiddler.

Several aspects of WikiText use this tiddler as their context. As a result, within a $list widget or a template tiddler, there is often no need to explicitly specify a tiddler title.

Compare storyTiddler.

Examples

currentTiddler Variable (Examples)

21st February 2015 at 2:13pm

The following two examples have the same meaning:

<$view field=title/>
<$view tiddler=<<currentTiddler>> field=title/>

This next example shows how the $list widget changes the current tiddler:

<ol>
<$list filter="[prefix[J]]">
<li><<currentTiddler>></li>
</$list>
</ol>

Custom data-styles

3rd August 2023 at 5:07am

[data-tiddler-title="Custom styles by data-tiddler-title"] {
  border: 1px solid blue;
}[data-tags*="example-test"] {
  border: 2px solid pink;
}[data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
}[data-tags*="data-tags-styles"] .tc-tiddler-body {
  display: block;
  padding: 14px;
  margin-top: 1em;
  margin-bottom: 1em;
  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  padding: 0 3px 2px;
  border-radius: 3px;
  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
}

Custom styles by data-tags

11th April 2018 at 5:39pm

Attribute: data-tags

Introduced in v5.1.16

The TiddlyWiki core adds several attributes to the rendered content. These make it possible to apply custom styles to tiddlers.

For example this tiddler is tagged: and so the attribute looks like this:

data-tags="[[How to apply custom styles]] example-test"

Important: Tiddler tags are not sorted so the order in the rendered output may be different!

Examples

The following CSS is defined in Custom data-styles and creates a pink border for all tiddlers (including this one) tagged with example-test.

[data-tags*="example-test"] {
  border: 2px solid pink;
}

Styling Stylesheets

So to display tiddlers tagged: data-tags-styles in a decent way we can use the following code. (I could have used: $:/tags/Stylesheet, but that would affect all stylesheets in this wiki, which is not intended. amt ;)

Important: Don't forget to also specify .tc-tiddler-body or the whole tiddler, including the title, will be changed! see: Custom data-styles

[data-tags*="data-tags-styles"] .tc-tiddler-body {
  display: block;
  padding: 14px;
  margin-top: 1em;
  margin-bottom: 1em;
  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  padding: 0 3px 2px;
  border-radius: 3px;
  font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
}

Hard Linebreaks

This mechanism may be handy for users who want to write prose text! See: Hard Linebreaks with CSS

More Possibilities

[attr]
Represents an element with an attribute name of attr.
[attr="value"]
Represents an element with an attribute name of attr and whose value is exactly "value".
[attr~="value"]
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
[attr|="value"]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr^="value"]
Represents an element with an attribute name of attr and whose first value is prefixed by "value".
[attr$="value"]
Represents an element with an attribute name of attr and whose last value is suffixed by "value".
[attr*="value"]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
[attr "operator value" i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Learn more at: Attribute selectors - CSS or CSS-Specification

Custom styles by data-tiddler-title

11th April 2018 at 5:39pm

Attribute: data-tiddler-title

Introduced in v5.1.16

The TiddlyWiki core adds several attributes to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content.

For example this tiddler is named: "Custom styles by data-tiddler-title" so the attribute looks like this:

data-tiddler-title="Custom styles by data-tiddler-title"

Examples

The following CSS is defined in Custom data-styles and creates a blue border for exactly this tiddler.

[data-tiddler-title="Custom styles by data-tiddler-title"] {
  border: 1px solid blue;
}

To create a green border for every tiddler that starts with $:/ aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! )

[data-tiddler-title^="$:/"] {
  border: 1px solid green;
}

More Possibilities

[attr]
Represents an element with an attribute name of attr.
[attr="value"]
Represents an element with an attribute name of attr and whose value is exactly "value".
[attr~="value"]
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
[attr|="value"]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr^="value"]
Represents an element with an attribute name of attr and whose first value is prefixed by "value".
[attr$="value"]
Represents an element with an attribute name of attr and whose last value is suffixed by "value".
[attr*="value"]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
[attr "operator value" i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Learn more at: Attribute selectors - CSS or CSS-Specification

Custom styles by user-class

11th April 2018 at 5:39pm

Tiddler Field: class Introduced in v5.1.16

The tag manager allows us to set a tiddler color field, that is used to define the "tag-pill" colour. Since: Introduced in v5.1.16 we can define a class field, that is directly inserted into the ViewTemplate and it can be used for styling:

title: anyName
tags: $:/tags/Stylesheet
class: myClass

Every tiddler, that has a class field can be styled that way!

.myClass {
  border: 2px solid blue;
}

Learn more at: How to apply custom styles

Custom Styles FAQ

11th April 2018 at 5:39pm

Custom tag pill styles

8th June 2023 at 12:34pm

Attribute: data-tag-title

Introduced in v5.2.0 The attribute data-tag-title was added to tag pills visible in the tiddler view template.

New in v5.3.0 The attribute was added to every tag pill visible in the standard TiddlyWiki UI. Especially the edit template tag list, the tag-picker dropdown, the Right sidebar -> More -> Tags tab and the $:/TagManager

The data-tag-title HTML attribute only contains the tag-title visible in the tag pill. It can be used to style the tag-pill.

If you want to style the whole tiddler have a look at: Custom styles by data-tiddler-title

Examples

If you use the following CSS in a new tiddler tagged: $:/tags/Stylesheet every tag that starts with a # will have a new border radius. So those tags stand out in contrast to the default tags.

You have to define both CSS rules, due to the existing UI structure to catch all tag-pills in the existing TW UI.

[data-tag-title^="#"] .tc-tag-label,
[data-tag-title^="#"].tc-tag-label {
   border-radius: 3px;
}

More Possibilities

[attr]
Represents an element with an attribute name of attr.
[attr="value"]
Represents an element with an attribute name of attr and whose value is exactly "value".
[attr~="value"]
Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".
[attr|="value"]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr^="value"]
Represents an element with an attribute name of attr and whose first value is prefixed by "value".
[attr$="value"]
Represents an element with an attribute name of attr and whose last value is suffixed by "value".
[attr*="value"]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
[attr "operator value" i]
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

Learn more at: Attribute selectors - CSS or CSS-Specification

Custom Widgets

22nd April 2024 at 8:47am

Introduction

New in v5.3.0 A custom widget is a special kind of procedure that can be called using the same syntax as widgets.

Custom widgets can also be used to override built-in JavaScript widgets to customise their behaviour.

Defining Custom Widgets

Custom widgets are usually defined with the Pragma: \widget:

\widget $my.widget(attribute:"Default value")
This is the widget, and the attribute is <<attribute>>.
\end

The name of the widget must start with a dollar sign. If it is a user defined widget that does not override an existing widget then it must include at least one period (dot) within the name (for example $my.widget or $acme.logger).

Note that the Pragma: \whitespace setting is inherited from the parsing context in which the procedure definition occurs. That means that a tiddler containing multiple procedure definitions only needs a single whitespace pragma at the top of the tiddler, and the setting will be automatically inherited by the procedure definitions without needing the pragma to be repeated.

Using Custom Widgets

Custom widgets are called in the same way as ordinary built-in widgets:

<$my.widget/>

<$my.widget attribute="The parameter"/>

The attributes that are specified in the widget call are made available as parameter variables.

Accessing Content of Custom Widgets

Within the definition of a custom widget the content of the calling widget is available via the <$slot $name="ts-raw"/> widget. The contents of the $slot widget is used as the default content if the widget was called without any content.

For example:

\widget $my.widget(one:'Jaguar')
<$text text=<<one>>/>
<$slot $name="ts-raw">
	Whale
</$slot>
\end

<$my.widget one="Dingo">
	Crocodile
</$my.widget>

<$my.widget/>

That renders as:

Dingo Crocodile

Jaguar Whale

How Custom Widgets Work

Custom widgets are implemented as a special kind of variable. The only thing that distinguishes them from ordinary variables is the way that they can be called as a custom widget with attributes mapped to parameters.

Overriding Core JavaScript Widgets

Custom widgets can use the $genesis widget to invoke the original widget, bypassing the override. For example, here we override the $codeblock widget to add ≤≥ symbols around each string of text.

\widget $codeblock(code)
<$genesis $type="$codeblock" $remappable="no" code={{{ [<code>addprefix[≤]addsuffix[≥]] }}}/>
\end

<$codeblock code="Kangaroo"/>

<$codeblock code={{$:/SiteTitle}}/>

```
Python
```

<$let test="Tiger">
<$codeblock code=<<test>>/>
</$let>

That renders as:

≤Kangaroo≥

≤TiddlyWiki @@font-size:small; v<<version>>@@≥

≤Python≥

≤Tiger≥

Customise TiddlyWiki

6th December 2021 at 4:22pm

Customising search results

7th December 2020 at 6:11pm

By default, the results for the sidebar search box are displayed as a simple list of tiddler titles. The search results can be customised by adding plugin visualisations that show the search results in different ways. (Tabs are shown automatically if an additional search result visualisation is detected).

Search result visualisations are stored in tiddlers tagged $:/tags/SearchResults. The default search result listing is implemented in the system tiddler $:/core/ui/DefaultSearchResultList.

To create a new search result visualisation:

  1. Create a new tiddler tagged $:/tags/SearchResults
  2. Use the widget variable searchTiddler to access the title of the tiddler containing the current search term

If you'd like the new visualisation to be the default, create a tiddler called $:/config/SearchResults/Default containing the title of the tiddler containing the search visualisation that you want to display by default.

Here is an example of an alternative visualisation that displays results in reverse chronological order:

\define searchResults()
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">

{{$:/language/Search/Matches}}

</$set>
<<timeline subfilter:"!is[system]search{$(searchTiddler)$}">>
\end
<<searchResults>>

Introduced in v5.1.23 The sidebar search introduces a more sophisticated search-mechanism which makes it possible to navigate the search results using the keyboard shortcuts Down and Up. To add that mechanism to your own custom search results follow these simple steps:

  1. Your tiddler tagged $:/tags/SearchResultsis accessible through the configTiddler variable
  2. The user-input in the search field is accessible through the userInput variable
  3. Use the fields first-search-filter and second-search-filter to store the filters used for your search results. See the tiddler $:/core/ui/DefaultSearchResultList for details
  4. Use the following form so that navigated search-results are highlighted, modify it to match your needs:
<$list filter="[<userInput>minlength[1]]" variable="ignore">
<$list filter={{{ [<configTiddler>get[first-search-filter]] }}}>
<span class={{{[<currentTiddler>addsuffix[-primaryList]] -[<searchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>
<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
</span>
</$list>
</$list>

Tip
Note that the searchTiddler variable still contains the name of the tiddler that is used for sorting the search results. The editTiddler variable contains the name of the tiddler that is being edited.

Customising Tiddler File Naming

3rd August 2021 at 8:46pm

By default, a TiddlyWiki on Node.js instance using a wiki folder will create new tiddler files by using the sanitised and disambiguated title as filename. All filepath operations are relative to a default-tiddler-location which defaults to the wiki folder's tiddlers/ directory. This can be overridden by mapping a path in the wiki's tiddlywiki.info file, by using a default-tiddler-location property in the config object.

The default file extension of .tid is used for tiddlers that are missing the type field, or for tiddlers of type "text/vnd.tiddlywiki". Tiddlers of other types are saved according to their MIME types (defined at boot startup).

Both the logical path (directory and file name) and the file extension can be customised independently by creating optional tiddlers $:/config/FileSystemPaths and $:/config/FileSystemExtensions.

File System Paths

The logical path can be customised by creating a $:/config/FileSystemPaths tiddler containing one or more filter expressions, each on a line of its own. Every time a tiddler is saved to disk it is tested against each filter in turn, and the first output of the first filter to produce any output is taken as a logical path to be used for the tiddler file. If the logical path has changed a new file is created and the old file is deleted.

Tiddlers are limited to being written to the wiki folder, the path defined in the default-tiddler-location setting, or the specific path saved in the $:/config/OriginalTiddlerPaths tiddler (see tiddlywiki.files Files). Any error saving a tiddler to disk, with a logical path that does not start with the wiki folder's path the most common error, causes the filepath to be encoded via Javascript's encodeURIComponent() method and the tiddler is saved as this file in the wiki folder's default-tiddler-location.

Logical paths do not include the file-on-disk's extension (see below), and they can use / or \ as directory separator (when generating the physical path, this is replaced by the correct separator for the platform TiddlyWiki is running on). If none of the filters match, the logical path is simply the title with all occurrences of the characters /\<>~:"|?*^ replaced by _ in order to guarantee that the resulting path is legal on all supported platforms. Logical paths are also limited to 200 characters. If a file with this name already exists, a space and a number will be appended to the final filepath, and with the number incremented until an unused path is found.

Example

[is[system]!has[draft.of]removeprefix[$:/]addprefix[_system/]]
[is[draft]search-replace:g:regexp[/|\\],[_]addprefix[drafts/]]
[tag[task]addprefix[mytasks/]]
[!tag[externalnote]addprefix[wiki/]]

Note
All paths are relative to the wiki's default-tiddler-location.

This will store newly created system tiddlers that are not drafts of other tiddlers in ./_system/ (after stripping the $:/ prefix). Next, all drafts have the path separator characters in their titles replaced by "_" and are stored in ./drafts/. Then tiddlers tagged task are stored in a subdirectory ./mytasks/. Finally, all tiddlers not tagged with "externalnote" will match the final [!tag[externalnote]addprefix[wiki/]] storing these in ./wiki/. In this example, tiddlers tagged with "externalnote" have been imported using tiddlywiki.files Files with an "isEditableFile" flag set to true, causing the server to remember their original file path in the $:/config/OriginalTiddlerPaths tiddler.

Whenever a tiddler generates a $:/config/FileSystemPaths filter match, any / or \ in the tiddler title is mapped to a path separator. With the above filters, the non-system, non-draft tiddler titled some/thing/entirely/new (with no tags) will be saved to ./wiki/some/thing/entirely/new.tid (ie, the file new.tid in a directory called entirely/). Thus, $:/config/FileSystemPaths itself will end up in ./_system/config/FileSystemPaths.tid or .\_system\config\FileSystemPaths.tid, depending on the platform.

File System Extensions

Normally, the file system extension of a tiddler on disk is determined by the presence of field values containing newlines or field values that start or end with whitespace (other than the text field), in which case the single file ".json" tiddler file format is used.

If the tiddler does not have such field values, then the type field is referenced to find a matching file-type, with .tid used for tiddlers without a type value. The boot engine defines a set of these tiddler-type to file-type relationships in the $:/boot/boot.js tiddler. Search for // Add file extension information to find the section of code that defines these relationships.

The file extension of individual tiddlers can be customised by creating a tiddler $:/config/FileSystemExtensions containing one or more filter expressions, each on a line of its own. Every time a tiddler is saved to disk it is tested against these filters, and the first output of the first filter to produce any output is taken as the file extension to be used for the tiddler file. Extensions should always start with a leading dot (see example). If no filter matches, the default extension is used. If the extension has changed a new file is created and the old file is deleted.

Note
A result of ".tid" will force the tiddler to be written to disk as a single-file text tiddler. A result of ".json" will force the tiddler to be written to disk as a single file tiddler in json-format (a single tiddler fields object in an array), NOT as a tiddler of type "application/json". All other recognised file-types will be saved using their defined extension along with an accompanying *.meta file of the same name which describes all fields but the "text" field.

Example

[tag[.txt]then[.txt]]
[tag[.json]then[.json]]
[tag[.tid]then[.tid]]

This will cause all tiddlers that have the tag ".txt" to be saved at the filepath determined by the File System Paths filters, but with their text field saved as a *.txt file, and all other fields saved as a *.txt.meta file.

Next, all tiddlers that have the ".json" tag are saved as *.json files. Finally, all tiddlers that have tag ".tid" are saved as single files. If a tiddler matches none of the filters, the default extension determined by the tiddlers type field would be used.

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.

Customizing EditTemplate field rendering

13th April 2022 at 4:55pm

When editing a tiddler the EditTemplate normally renders fields as simple input boxes. To modify this behaviour, the cascade mechanism can be used. Via the Field Editor Cascade the name of the tiddler used for rendering the field editor can be specified. The content of this tiddler is transcluded to represent the content of the field.

To modify the appearance of all fields whose name ends with -date create a new tiddler and add the $:/tags/FieldEditorFilter tag to it. Add a list-before field and assign the value $:/config/FieldEditorFilters/default. Now you have to put the filter for the cascade into the tiddler's text field: [suffix[-date]then[$:/config/EditTemplateFields/Templates/dates]]. This will transclude the tiddler named $:/config/EditTemplateFields/Templates/dates to render the input elements for all fields with names matching the regular expression.

The variables currentTiddler, currentField and currentFieldName are set to pass information about the tiddler and field that are edited to the transcluded tiddler.

currentTiddlerThe tiddler that must be used to store the field value.
currentFieldThe field within the currentTiddler that must be used to store the field name. This is an opaque value hat may contain any field name (even text), use currentFieldName to make decisions based on the actual name of the currently edited field.
currentFieldNameThe name of the currently edited field.

For example, a tiddler containing the following WikiText would render the field as an HTML input element of the type date. This will show a date picker for the fields on all modern browsers:

<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> tag="input" type="date" class="tc-edit-texteditor tc-edit-fieldeditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>

Warning
The currentField variable will be set to text for new fields. Make sure that your editor will handle this correctly. For example, by setting the tag attribute on the EditTextWidget. If you want to know the name of the currently edited/added field, use the currentFieldName variable.

The tabindex and cancelPopups attributes make sure the HTML input element behaves exactly the default elements provided by TiddlyWiki.

Not only the EditTextWidget can be used. A tiddler containing the following WikiText will render the field as a drop-down-list that allows the user to select the name of a tiddler. The name of the selected tiddler will be stored in the field.

<$select tiddler=<<currentTiddler>> field=<<currentField>> class="tc-edit-texteditor tc-edit-fieldeditor" cancelPopups="yes">
    <$list filter='[all[tiddlers]sort[title]]'>
        <option value=<<currentTiddler>>><$view field='title'/></option>
    </$list>
</$select>

The classes tc-edit-texteditor and tc-edit-fieldeditor should be used to style the input and select elements to match the theme of the TiddlyWiki installation.

Persistence of values when creating fields

When using multiple field editors for creating fields within the EditTemplate, every field editor tiddler returned by the Field Editor Cascade gets its own storage tiddler. This is done to prevent problems with incompatible values when the user is switching between fields governed by different field editors.

Example

There is a cascade that returns a special field editor for all fields starting with the string "my-". All other fields use the default field editor. If you type a new value into the "field value" input box and select any field not starting with "my-", the value will be kept. If you switch to a field, that starts with "my-", the "field value" input field will be empty again because a new type of field editor is used. If you now type a value and switch to another field starting with "my-" the value will be kept. If you switch to a field that does not start with "my-" the previously typed value (that was stored for the default editor) will reappear.

cycle Operator

18th November 2020 at 7:21pm
purposetoggle the titles specified in the first parameter in a cyclical manner
inputa list of items
parameterthe cycle operator accepts 1 or 2 parameters, see below for details
outputthe input list with the titles specified in the parameter toggled in a cyclical manner

Learn more about how to use Filters

Introduced in v5.1.23

The cycle operator requires at least one parameter.

[cycle[<titles>],[step-size]]
  • titles : a title list to toggle in the input list cyclically. If no title from the parameter is present in the input, the first title is added. If a title from the parameter is present in the input, it is replaced with the next title from the parameter. Note that all titles specified in this parameter should be unique.
  • step-size: (optional). Defaults to 1. Specifies the number of steps in the parameter list to move each time. Can be a negative number.

Tip
While the cycle operator interprets its first parameter as a list of titles to cycle through, the toggle Operator accepts an unlimited number of distinct parameters and offers similar functionality.

Examples

cycle Operator (Examples)

18th November 2020 at 5:54pm

D3 Plugin

13th September 2024 at 12:24pm

Deprecated fromv5.3.4 The D3 plugin integrates the D3 visualisation library with TiddlyWiki.

See https://tiddlywiki.com/plugins/tiddlywiki/d3/

See the demo at https://tiddlywiki.com/plugins/tiddlywiki/d3

Dashes in WikiText

13th May 2022 at 11:19am

You can create an n-dash with a double hyphen – and an m-dash with a triple hyphen ---.

* -- n-dash example 
* --- m-dash example --- have fun!

That renders as:

  • – n-dash example
  • — m-dash example — have fun!

... and the underlying HTML is:

<ul><li>– n-dash example </li><li>— m-dash example — have fun!</li></ul>

Data URI

21st February 2015 at 6:17pm

A data URI is a way of storing data (such as an image) in a way that is compatible with the addresses used by web pages and stylesheets to access external resources.

The datauri macro can be used to generate data URIs within TiddlyWiki.

DataTiddlers

27th April 2022 at 5:13pm

A data tiddler is a miniature database contained within a tiddler.

There are two standard formats:

Other formats of tiddler can also be parsed to yield blocks of data that behave like data tiddlers.

See JSON in TiddlyWiki for an overview.

datauri Macro

21st February 2015 at 10:28pm

The datauri macro returns a data URI for the content of a tiddler.

It is often used in stylesheet tiddlers to reference things like inline images and fonts:

background: url(<<datauri "Motovun Jack.jpg">>);

The data URI is automatically base64-encoded in the case of a non-text tiddler.

Parameters

title
The title of a tiddler, such as an image

Examples

datauri Macro (Examples)

21st February 2015 at 10:35pm

DataWidget

29th July 2024 at 8:40am

Introduction

The data widget is used with the $testcase widget and the Innerwiki Plugin to specify payload tiddlers that are to be included in the test case or innerwiki.

Content and Attributes

The content of the data widget is ignored. It supports the following attributes:

AttributeDescription
$tiddlerOptional title of a tiddler to be used as a payload tiddler (optional)
$filterOptional filter string identifying tiddlers to be used as payload tiddlers (optional)
$compound-tiddlerOptional title of a tiddler containing payload tiddlers in text/vnd.tiddlywiki-multiple format (see below)
$compound-filterNew in v5.3.6 Optional filter, to create a list of tiddlers that contain compound tiddlers.
Tiddlers will be imported in order. Existing testcase tiddlers will be overwritten, so the currentTiddler wins
any attribute
not starting
with $
Field values to be assigned to the payload tiddler(s)

The data widget is not rendered when used within the $testcase widget or the Innerwiki Plugin but for ease of testing, when used elsewhere it renders a JSON representation of the payload tiddlers.

Without any of the attributes $tiddler, $filter or $compound-tiddler, any attributes whose name does not start with $ are used as the field values for creating a single new tiddler.

Using the data widget to create a tiddler with the title "Epsilon" and the text "Theta"

titleOutput
[
    {
        "title": "Epsilon",
        "text": "Theta"
    }
]

If any of the attributes $tiddler, $filter or $compound-tiddler are specified then they are used to generate base tiddlers that are then modified with the addition of fields derived from any attributes whose name does not start with $.

The attribute $tiddler is used to ingest a single tiddler from the wiki containing the data widget:

Using the data widget to create a tiddler that is a copy of the tiddler "Hello" with the addition of the field "custom" set to "Alpha"

titleOutput
[
    {
        "title": "Hello",
        "modifier": "JoeBloggs",
        "text": "This is the Hello tiddler",
        "custom": "Alpha"
    }
]

The attribute $filter is used to ingest multiple tiddlers from the wiki containing the data widget:

Using the data widget to create copies of all the tiddlers with the title prefix "Day: T", adding the field "custom" set to "Beta"

titleOutput
[
    {
        "title": "Day: Thursday",
        "text": "Today is Thursday",
        "custom": "Beta"
    },
    {
        "title": "Day: Tuesday",
        "text": "Today is Tuesday",
        "custom": "Beta"
    }
]

Compound Tiddlers

Compound tiddlers provide a way to easily create multiple tiddlers from within a single tiddler. They are contained in tiddlers of type text/vnd.tiddlywiki-multiple. The text field consists of a series of tiddlers in the same format as .tid files, each separated by a line containing a single + character.

Using the data widget to import a tiddler stored in a compound tiddler

titleOutput
[
    {
        "title": "Payload Tiddler",
        "tags": "Alpha Beta Gamma",
        "text": "This is a payload tiddler from a compound tiddler",
        "custom": "Alpha"
    }
]

Date Fields

25th December 2025 at 9:50pm

Certain fields of a tiddler are used to store dates and times. TiddlyWiki supports dates from the year -9999 to the year 9999.

The two standard date fields are created and modified.

Values of date fields are 17 or 18-character strings:

  • Introduced in v5.1.23 an optional minus sign - to indicate a negative year
  • 4 digits for the year
  • 2 digits for the month
  • 2 digits for the day
  • 2 digits for the hour
  • 2 digits for the minute
  • 2 digits for the second
  • 3 digits for the millisecond

To avoid problems arising from differences of time zone, TiddlyWiki always uses UTC.

The DateFormat template for storage of dates in these fields is [UTC]YYYY0MM0DD0hh0mm0ss0XXX.

As an example, the created field of this tiddler has the value 20150117190213631.

Dates can be converted to other formats for display:

<$view field="created" format="date" template="DDD DDth MMM YYYY"/>

That renders as:

Saturday 17th January 2015

DateFormat

26th February 2023 at 2:43pm

The default representation of dates is a compact string such as 20230226144359284. The associated template is [UTC]YYYY0MM0DD0hh0mm0ss0XXX. For example, the created and modified fields are stored like this.

The display format for this string can be controlled with a template. For example, transcluding the modified field automatically applies a template to display the date as "Sun Feb 26 2023 14:43:59 GMT+0000 (Coordinated Universal Time)". A few widgets and filter operators allow you to manually specify a template, for example the ViewWidget:

<$view field=modified format=date template="DDth mmm YYYY 0hh:0mm:0ss" />

The date string is processed with the following substitutions:

TokenSubstituted Value
[UTC]Time-shift the represented date to UTC. Must be at very start of format string
YYYYFull year
YYTwo-digit year
wYYYYFull year with respect to week number
aYYYYIntroduced in v5.1.23 Full year but negative dates are displayed as positive
wYYTwo digit year with respect to week number
{era:BCE||CE}Introduced in v5.1.23 Displays a different string for years that are negative, zero or positive (see below)
MMMMonth in full (e.g. "July")
mmmShort month (e.g. "Jul")
MMMonth number
0MMAdds leading zero
dddddIntroduced in v5.2.0 Day of year (1 to 365, or 366 for leap years)
0dddddIntroduced in v5.2.0 Zero padded day of year (001 to 365, or 366 for leap years)
DDDDay of week in full (e.g. "Monday")
dddShort day of week (e.g. "Mon")
ddddIntroduced in v5.2.0 Weekday number from 1 through 7, beginning with Monday and ending with Sunday
DDDay of month
0DDAdds a leading zero
DDthAdds a suffix
WWISO-8601 week number of year
0WWAdds a leading zero
hhHours
0hhAdds a leading zero
hh12Hours in 12 hour clock
0hh12Hours in 12 hour clock with leading zero
mmMinutes
0mmMinutes with leading zero
ssSeconds
0ssSeconds with leading zero
XXXMilliseconds
0XXXMilliseconds with leading zero
am or pmLower case am/pm indicator
AM or PMUpper case AM/PM indicator
TZDTimezone offset from UTC (e.g. "+01:00", "-05:00"…)
TIMESTAMPIntroduced in v5.2.4 Number of milliseconds since the ECMAScript epoch, 1 January 1970.
\xUsed to escape a character that would otherwise have special meaning

Note that other text is passed through unchanged, allowing commas, colons or other separators to be used.

The {era:BCE||CE} notation can specify different strings for years that are negative, zero or positive. For example {era:BC|Z|AD} would display BC for negative years, AD for positive years, and Z for year zero.

Examples

TemplateOutput
DDth MMM YYYY16th February 2011
DDth MMM \M\M\M YYYY16th February MMM 2011
DDth mmm YYYY 0hh:0mm:0ss16th Feb 2011 11:38:42

Using TIMESTAMP to calculate time difference

You can calculate the difference between two dates by doing the following:

  1. Convert both dates to timestamps
  2. Subtract the later date from the earlier one – if you don't know which one is earlier use the abs operator to get an absolute value after subtraction
  3. Divide the resulting number by the number of milliseconds in your chosen interval

Here is an example of calculating the number of days that passed between creation and last modification of current tiddler:

  • Convert the created and modified fields to timestamps
  • Divide their difference by 86400000 which is the number of milliseconds in a day
    • 1000 milliseconds per second × 60 seconds per minute × 60 minutes per hour × 24 hours per day = 86,400,000 milliseconds per day

<$let
	timestamp-modified={{{ [{!!modified}format:date[TIMESTAMP]] }}}
	timestamp-created={{{ [{!!created}format:date[TIMESTAMP]] }}}
	difference-days={{{ [<timestamp-modified>subtract<timestamp-created>divide[86400000]floor[]] }}}>

* ''Modified date:'' <$text text={{{ [{!!modified}format:date[YYYY-0MM-0DD]] }}}/>
* ''Created date:'' <$text text={{{ [{!!created}format:date[YYYY-0MM-0DD]] }}}/>
* ''Difference in days:'' <<difference-days>> days
</$let>

datepicker plugin based on Pikaday, by kixam

6th January 2021 at 3:10pm

An interactive date picker plugin based on Pikaday. A demo can be found here: http://kixam.github.io/TW5-datePicker/.

datepicker is a TiddlyWiki plugin that allows you to use a widget much like EditTextWidget to pick a date, and optionaly a time. It shows a nice interactive mini-calendar when clicked, allows you to set a date format for display, and is compatible with core date fields such as modified and created.

Days of the Week

16th November 2021 at 10:12pm

days Operator

purposefilter the input by date
inputa selection of titles
suffixF=the name of a date field, defaulting to modified
parameterD=a { positive | negative } number of days, defaulting to 0
outputthose input tiddlers in which field F is D days in the { future | past } or any time { before | after } that, including { past | future }
! outputthose input tiddlers in which field F is at least D days in the { future | past }

Learn more about how to use Filters

Select tiddlers where a specified date field (default "modified") is within a specified date range. Time portion is ignored.

Examples

days Operator (Examples)

Debugging Stylesheets

25th November 2021 at 5:59pm

The core shadow tiddler $:/snippets/DebugStylesheets contains a simple tool for tracking down certain problems with mismatched brackets and other nested structures.

In the list below, any stylesheets containing an error will be marked with a red cross:

  • $:/_tw5.com-styles
  • $:/editions/tw5.com/doc-styles
  • Custom data-styles

decodebase64 Operator

31st August 2024 at 3:49am
purposeapply base 64 decoding to a string
inputa selection of titles
suffixoptional: binary to produce binary output, urlsafe for URL-safe input
outputthe input with base 64 decoding applied

Learn more about how to use Filters

Introduced in v5.2.6

See Mozilla Developer Network for details of base 64 encoding. TiddlyWiki uses library code from @nijikokun to handle the conversion.

The input strings must be base64 encoded. The output strings are the text (or binary data) decoded from base64 format.

The optional binary suffix, if present, changes how the input is processed. The input is normally assumed to be UTF-8 text encoded in base64 form (such as what the encodebase64 operator produces), so only certain byte sequences in the input are valid. If the input is binary data encoded in base64 format (such as an image, audio file, video file, etc.), then use the optional binary suffix, which will allow all byte sequences. Note that the output will then be binary, not text, and should probably not be passed into further filter operators.

The optional urlsafe suffix, if present, causes the decoder to assume that the base64 input uses - and _ instead of + and / for the 62nd and 63rd characters of the base64 "alphabet", which is usually referred to as "URL-safe base64" or "bae64url".

Examples

decodebase64 Operator (Examples)

31st August 2024 at 4:14am

[[dGVzdA==]decodebase64[]]

[[8J+Yjg==]decodebase64[]]

[[8J-Yjg==]decodebase64:urlsafe[]]

decodehtml Operator

17th October 2016 at 3:29pm
purposeapply HTML decoding to a string
inputa selection of titles
outputthe input with HTML decoding applied

Learn more about how to use Filters

Introduced in v5.1.14

"HTML decoding" means replacing HTML entities that represent special characters with that character:

  • &amp; replaced with &
  • &nbsp; replaced with (non breaking space)
  • &lt; replaced with <
  • &gt; replaced with >
  • &quot; replaced with "

Examples

decodehtml Operator (Examples)

17th October 2016 at 3:53pm

[[Title with &lt; angle brackets &gt;]] +[decodehtml[]]

[[Title with an &amp; ampersand]] +[decodehtml[]]

decodeuri Operator

17th October 2016 at 3:29pm
purposeapply URI decoding to a string
inputa selection of titles
outputthe input with URI decoding applied

Learn more about how to use Filters

Introduced in v5.1.14

See Mozilla Developer Network for details of the decodeURI operation.

Examples

decodeuri Operator (Examples)

17th October 2016 at 3:53pm

[[Title%20with%20Space]] +[decodeuri[]]

[[Title%20with%20Space]] [[Another%20title%20with%20Space]] +[decodeuri[]]

decodeuricomponent Operator

17th October 2016 at 3:26pm
purposeapply URI component decoding to a string
inputa selection of titles
outputthe input with URI component decoding applied

Learn more about how to use Filters

Introduced in v5.1.14

See Mozilla Developer Network for details of the decodeURIComponent operation.

Examples

decodeuricomponent Operator (Examples)

17th October 2016 at 3:53pm

[[Title%20with%20Space]] +[decodeuricomponent[]]

[[Title%20with%20Space]] [[Another%20title%20with%20Space]] +[decodeuricomponent[]]

DefaultTiddlers

6th March 2018 at 4:12pm

"Default tiddlers" refers to the list of tiddlers that are opened at startup in the browser if the address bar does not include a permalink.

There are two ways default tiddlers can be defined:

The resulting list of titles is then inserted into the story river.

The control panel -> Info -> Basics -> Default tiddler setting includes a text box for direct access to $:/DefaultTiddlers.

Definitions

4th January 2025 at 11:15am

Definitions in WikiText

29th December 2025 at 11:09am

DeleteTiddlersCommand

30th May 2019 at 3:54pm

Introduced in v5.1.20 Deletes a group of tiddlers identified by a filter.

--deletetiddlers <filter>

Demo Tiddler List with Custom Story Tiddler Template

4th December 2021 at 1:16pm

Demonstration: keyboard-driven-input Macro

23rd November 2021 at 3:45am

The keyboard-driven-input Macro is used to create filtered lists that update as the user types. It also allows navigating the lists, and invoking macros using list items, with the keyboard.

It consists of an edit-text widget wrapped in keyboard widgets. There are keyboard widgets to listen for ((input-accept)), ((input-accept-variant)), and ((input-cancel)) keyboard shortcuts, but there is no default behaviour in response to these events; macros must be written to suit the use-case. There is also no default visualisation of the filtered options list.

Types of keyboard input handled by the keyboard-driven-input macro:

Non-configurable:

The following keyboard events invoke macros defined alongside keyboard-driven-input in $:/core/macros/keyboard-driven-input.

InputPurposeMacro
typing inputcomposing a string to be used within list filterskeyboard-input-actions
((input-up)) ( Up )temporarily selecting the previous item in the filtered listinput-next-actions with parameters afterOrBefore="before", reverse="reverse[]"
((input-down)) ( Down )temporarily selecting the next item in the filtered listinput-next-actions with afterOrBefore="after", reverse=""

All of the above actions generate or modify data which keyboard-driven-input keeps in tiddlers specified using the macro's parameters. The data can then be accessed not only by the macros invoked by keyboard shortcuts, but also outside of these, e.g. a macro to display the filtered list(s).

Configurable through parameters:

The following keyboard events invoke macros whose names are specified in parameters to keyboard-driven-input. The intended purpose is suggested by the parameter name, but there are no default macros defined within $:/core/macros/keyboard-driven-input.

Keyboard shortcut descriptor Key combinationParameter
((input-accept)) Enter inputAcceptActions
((input-accept-variant)) ctrl-Enter inputAcceptVariantActions
((input-cancel)) Escape inputCancelActions

keyboard-driven-input can be seen in action as part of various core features in TiddlyWiki, e.g.: the search feature, the tag-picker Macro, and dropdown interfaces in the Editor toolbar such as Insert link.

Minimal ingredients for a demonstration

Keeping in mind that the keyboard-driven-input macro does not, by itself, display list results, or do anything with a selected option, a minimal demonstration of the keyboard-driven-input macro requires:

  1. a tiddler, containing a filter whose results depend on the user's text input, to generate the options from which the user can select
  2. several parameters:
    • a filter to return the title of the tiddler where the filter described in step 1 can be found, and
    • tiddler titles to use for storing state information in response to input events. These tiddlers do not need to exist already. If they do exist, the keyboard-driven-input macro will change their contents.

The search filter(s)

By default, keyboard-driven-input will look for filters in the first-search-filter and second-search-filter fields of a tiddler (whose title is specified by a parameter discussed below).

This filter can refer to a variable called userInput, which shows the contents of the edit-text widget, as stored in a state tiddler (discussed below), at the time of the latest Up or Down event.

Note: If this filter is to be referred to in a context outside the keyboard-driven-input macro (such as in a popup showing the filtered options), the variable userInput has to be defined in those contexts as well (by reading it from a state tiddler).

Minimal parameters

Parameter nameNotes
configTiddlerFilterThis is a filter, rather than a tiddler title, allowing conditional behaviour (e.g. checking for an active tab, or preferring a filter that may not be present, with a fallback).
The title returned must belong to an existing tiddler, containing at least one filter with which keyboard-driven-input can generate its results list.
tiddlerThis tiddler contains either the typed input, or the instantaneous result selection, depending upon the most recent event. It is updated with each keystroke in the edit-text widget, and when the user uses the Up or Down key to cycle through filtered results.
storeTitleThis tiddler always reflects the user input (transcluded from the tiddler tiddler after each keystroke into the edit-text widget).
selectionStateTitleThis tiddler is updated on Up or Down events and contains either the user input with the suffix -userInput, or the instantaneous selection with the suffix -primaryList or -secondaryList, depending on which of up to two filters generated the list it came from.

Demonstration setup

I have created a tiddler called kdi-demo-configtid and put the following filter into its first-search-filter field:

[!is[system]search:title<userInput>sort[]].

This filters for non-system tiddlers whose titles contain the text the user has typed.

To use the above filter with keyboard-driven-input, the value of the parameter configTiddlerFilter should be a filter that returns kdi-demo-configtid.

I can select tiddler, storeTitle, and selectionStateTitle fairly arbitrarily (just making sure not to use titles of tiddlers that I do not want changed).

This demonstration can now be invoked with the following macro call:

<$macrocall $name=keyboard-driven-input 
        tiddler="kdi-demo-tiddler"
        storeTitle="kdi-demo-storeTitle" 
        selectionStateTitle="kdi-demo-selectionStateTitle" 
        configTiddlerFilter="[[kdi-demo-configtid]]" 
 />

Demo

Try typing in here:

Observe the changes in the various state tiddlers in the below table. Use Up and Down keys to navigate among filter results. If nothing changes, try a shorter input to widen the filter. If the input has zero length, the list will contain all non-system tiddlers.

Parameter nameTiddler titleContents of text field of the tiddler
tiddlerkdi-demo-tiddler
storeTitlekdi-demo-storeTitle
selectionStateTitlekdi-demo-selectionStateTitle

The keyboard-driven-input macro has many parameters available, including all the attributes of the enclosed edit-text widget, which make it very flexible in how it is used and how results can be displayed and interacted with.

See also: Customising search results and $:/core/ui/DefaultSearchResultList

Deprecated - What does it mean

4th July 2022 at 5:42pm

Deprecated Core Classes

1st November 2025 at 9:28am

Description Lists in WikiText

29th December 2025 at 11:09am

HTML description lists (AKA definition lists) are created with this syntax:

; Term being described
: Description / Definition of that term
; Another term
: Another description / definition

That renders as:

Term being described
Description / Definition of that term
Another term
Another description / definition

... and the underlying HTML is:

<dl><dt>Term being described</dt><dd>Description / Definition of that term</dd><dt>Another term</dt><dd>Another description / definition</dd></dl>

deserialize Operator

27th June 2023 at 9:41am
purposeextract JSON representation of tiddlers from the input strings
inputa selection of strings
parameterthe deserializer module to be used to extract tiddlers from the input
outputJSON representations of tiddlers extracted from input titles.

Learn more about how to use Filters

New in v5.3.0

Deserializer modules parse text in various formats into their JSON representation as tiddlers. The deserializer modules available in a wiki can be seen using the deserializers operator and can be used with the deserialize Operator.

The TiddlyWiki core provides the following deserializers:

DeserializerDescription
(DOM)Extracts tiddlers from a DOM node, should not be used with the deserialize[] operator
application/javascriptParses a JavaScript module as a tiddler extracting fields from the header comment
application/jsonParses JSON into tiddlers
application/x-tiddlerParses the .tid file format as a tiddler
application/x-tiddler-html-divParses the <DIV>.tiddler file format as a tiddler
application/x-tiddlersParses the MultiTiddlerFile format as tiddlers
text/cssParses CSS as a tiddler extracting fields from the header comment
text/htmlParses an HTML file into tiddlers. Supports TiddlyWiki Classic HTML files, TiddlyWiki5 HTML files and ordinary HTML files
text/plainParses plain text as a tiddler

Examples

deserialize Operator (Examples)

2nd June 2023 at 10:50am

This example uses the predefined variable html-data:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Test Data</title>
</head>
<body>

<!--~~ Ordinary tiddlers ~~-->
<div id="storeArea" style="display:none;"><div title="Hello &quot;There&quot;" type="text/vnd.tiddlywiki">
<pre>Abacus</pre>
</div>
</div>
<script class="tiddlywiki-tiddler-store" type="application/json">[{"title":"Hello \"There\"","text":"Calculator"},{"title":"Hello \"There\"","text":"Protractor"}]</script>
</body>
</html>

[<html-data>deserialize[text/html]]

Deserializers

27th June 2023 at 9:43am

Deserializer modules parse text in various formats into their JSON representation as tiddlers. The deserializer modules available in a wiki can be seen using the deserializers operator and can be used with the deserialize Operator.

The TiddlyWiki core provides the following deserializers:

DeserializerDescription
(DOM)Extracts tiddlers from a DOM node, should not be used with the deserialize[] operator
application/javascriptParses a JavaScript module as a tiddler extracting fields from the header comment
application/jsonParses JSON into tiddlers
application/x-tiddlerParses the .tid file format as a tiddler
application/x-tiddler-html-divParses the <DIV>.tiddler file format as a tiddler
application/x-tiddlersParses the MultiTiddlerFile format as tiddlers
text/cssParses CSS as a tiddler extracting fields from the header comment
text/htmlParses an HTML file into tiddlers. Supports TiddlyWiki Classic HTML files, TiddlyWiki5 HTML files and ordinary HTML files
text/plainParses plain text as a tiddler

deserializers Operator

27th June 2023 at 9:42am
inputignored
parameternone
outputthe title of each available deserializer

Learn more about how to use Filters

Introduced in v5.2.0

Tip
You can specify a specific deserializer for a DropzoneWidget to use

Examples

deserializers Operator (Examples)

6th May 2021 at 11:54am

[deserializers[]]

Deutsch (Deutschland) Edition

19th September 2014 at 9:58pm

Deutsch (Österreich) Edition

19th September 2014 at 9:59pm

Developer Experience Team

9th November 2025 at 8:06pm

Developer Experience Team

The Developer Experience Team improves the experience of software contributors to the TiddlyWiki project. This includes enhancing documentation, streamlining contribution processes, and providing tools and resources to help developers effectively contribute to TiddlyWiki.

Tools and resources managed by the Developer Experience Team include:

  • Advising and assisting contributors, particularly new developers
  • Maintenance of developer-focused documentation on the https://tiddlywiki.com/dev/ site, including:
    • Development environment setup guides
    • Code review processes and best practices
    • Contribution guidelines and documentation
  • Continuous integration and deployment scripts providing feedback on pull requests
  • Devising and implementing labelling systems for issues and pull requests
  • Automation scripts to simplify common development tasks

Developers

22nd October 2025 at 3:32pm

DictionaryTiddlers

27th April 2022 at 5:10pm

A dictionary tiddler is a kind of data tiddler that contains a simple list of name: value pairs.

Its ContentType is application/x-tiddler-dictionary.

The text field consists of one or more lines of the form name: value.

ColourPalettes, such as the default Vanilla palette, are dictionary tiddlers.

DiffTextWidget

16th March 2018 at 4:27pm

Introduction

Introduced in v5.1.16 The diff text widget analyses the differences between a pair of source and destination text strings and displays the results as highlighted insertions and deletions (similar to the "track changes" function of a word processor). For example:

8 differences
Hey Jude, don't make it bad. Take a sad song and make it better. Remember tobe afraid. You were made to go out and get her. The minute you let her intounder your heart↩︎
skin. Then you can startbegin to make it better.

Content and Attributes

Content

The content of the <$diff-text> widget is rendered immediately before the diffs. Within it, the variable diff-count is available, containing the number of differences found. If the widget has no content then it automatically transcludes the tiddler $:/language/Diffs/CountMessage.

In other words, these three invocations are all equivalent:

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
{{$:/language/Diffs/CountMessage}}
</$diff-text>

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}>
</$diff-text>

<$diff-text source={{FirstTiddler}} dest={{SecondTiddler}}/>

Attributes

AttributeDescription
sourceThe source text
destThe destination text
cleanupSee below

The cleanup attribute determines which optional post-processing should be applied to the diffs:

  • none: no cleanup is performed
  • semantic (default): rewrites the diffs for human readability
  • efficient: rewrites the diffs to minimise the number of operations for subsequent processing

(Note that in many cases the results will be the same regardless of the cleanup option. See the docs of the underlying library for more details).

Examples

In this example we compare two texts:

<$edit-text tiddler="SampleTiddlerFirst"/>

<$edit-text tiddler="SampleTiddlerSecond"/>

<$diff-text source={{SampleTiddlerFirst}} dest={{SampleTiddlerSecond}}/>

That renders as:

4 differences
This is a test tiddler is called SampleTiddlerFirstSecond.

Disabling Plugins

15th October 2016 at 12:17pm

Disabling Plugins

Plugins can be disabled by creating a tiddler titled $:/config/Plugins/Disabled/ concatenated with the plugin title, and setting its text to yes.

For example, to disable the plugin $:/plugins/tiddlywiki/highlight, the title would be:

$:/config/Plugins/Disabled/$:/plugins/tiddlywiki/highlight

Discover TiddlyWiki

23rd October 2015 at 4:53pm

You've never seen anything like TiddlyWiki. TiddlyWiki is:

a tool,
a toolbox,
a community,
and a philosophy.

TiddlyWiki is a Tool

TiddlyWiki is first and foremost a tool: it is a free downloadable tool for capturing and organising content from the web, from your documents or from your brain. It is a tool for note-taking, bookmarking, pinning, writing, managing to-do lists and projects, collaborating, blogging, and publishing.

In TiddlyWiki you create or paste content into notes called tiddlers, then connect your tiddlers with hyperlinks and tags. You can then quickly retrieve your notes through features such as tag pills, sidebar tabs, and TiddlyWiki's lightning fast search window. You can even dynamically include one tiddler's content inside another - similar to using building blocks - to create articles, lists, presentations and more.

TiddlyWiki is a Toolbox

In addition to being a versatile tool, TiddlyWiki is also a toolbox.

Where other note-taking products hook you with the basic program then charge you for the really helpful features, TiddlyWiki has an ever-expanding collection of completely free visual themes, colour palettes, plugins, widgets and macros, which you can then mix and match so that you can tweak and tailor your TiddlyWiki to get it just the way you want it.

TiddlyWiki is also a Community

We are a community of users and developers who help each other imagine new ways of thinking and organising and create new solutions, so that TiddlyWiki is continually adapting to better serve your needs. TiddlyWiki users and developers share questions and advice at a TiddlyWiki Google group. They also create tutorials, adaptations, and plugins to enhance your TiddlyWiki experience. See the section Community of the TableOfContents for more details.

Finally, TiddlyWiki is a philosophy

The purpose of taking and organising a note (or recording any kind of content) is to be able to retrieve it later. If you can't find your notes in your note-taking system, your note-taking becomes a colossal waste of time.

The TiddlyWiki philosophy is that the best way to take notes is to separate them into tiddlers, the smallest semantic units possible. A tiddler might be an image, a webpage link, a concept, the definition of a term, or a specific customisation such as a macro.

These tiddlers can then be woven together to create longer units: stories, articles, lists, image galleries, and much more. TiddlyWiki's features such as tagging, hyperlinking, and filters are specially designed to help you relate and connect tiddlers together in multiple ways, facilitating your future retrieval of your notes and even helping you see unexpected relationships among your tiddlers and the information they contain.

Displaying Community Cards

9th September 2025 at 5:19pm

Cards for people

This is an inline card for @Jermolene and @ericshulman which can be used in the middle of a sentence.

This is a stack of inline cards:

Here is a full format card:

@Jermolene

I'm the original inventor of TiddlyWiki. You can hire me through my consultancy company Intertwingled Innovations or contact me directly.

Further information:

This is how the card looks when there is no such person:

Cards for teams

This is a card for a project team:

Project Team

The project team is responsible for the overall TiddlyWiki project, its vision, mission and values, and ensuring that it meets the needs of the community.

Areas of responsibility include:

  • Communicating and demonstrating the vision, mission and values of the project
  • Continuously improve the development process and practices of the project
  • more to come...

Disqus comments plugin by bimlas

6th January 2021 at 3:10pm

Use this plugin to give your visitors the opportunity to comment on your tiddlers without changing the wiki itself.

Disqus is a networked community platform used by hundreds of thousands of sites all over the web. With Disqus, your website gains a feature-rich comment system complete with social network integration, advanced administration and moderation options, and other extensive community functions.

https://bimlas.github.io/tw5-disqus/

divide Operator

11th June 2019 at 12:59pm
purposetreating each input title as a number, divide it by the numeric value of the parameter
inputa selection of titles
parameterN=a number
outputthe input as numbers, but with each one divided by N

Learn more about how to use Filters

divide Operator (Examples)

11th June 2019 at 1:01pm

[[355]divide[113]]

=1 =2 =3 =4 +[divide[2]]

Document Object Model

28th February 2015 at 1:40pm

The DOM of a web page is a tree-shaped model of its content, maintained internally by the web browser as the user interacts with that content. Each point in the tree is called a node.

When TiddlyWiki is running in a web browser, its widgets are rendered into DOM nodes for display.

When TiddlyWiki is running on Node.js, it uses a fake DOM to simulate the behaviour of a browser.

Documentation Macros

24th February 2024 at 5:06pm

The following macros are used throughout TiddlyWiki's documentation. Their names start with a dot to keep them out of the way of names that a user might try experimenting with.

General

MacroUsed forExampleRendered
.defthe defining instance of a term<<.def widget>>widget
.emminor emphasis within a sentence<<.em not>>not
.placea placeholder for the user to fill in<<.place tagname>>tagname
.strongmajor emphasis within a tiddler<<.strong Important!>>Important!
.worda mention of an ordinary word or phrase<<.word "hello world">>"hello world"
.iconan icon, sized to match the surrounding text<<.icon "$:/core/images/globe">>

Textboxes

Textbox Parameters

text
Text to be shown in the box
title
A title shown as an HTML STRONG element
icon
Core icons can be found at Icon Gallery
class
An optional custom class can be added to the text block. It will overwrite the defaults. To keep the defaults, add them to the custom class settings.
.note-macro defaults to doc-note
.tip-macro defaults to doc-tip
.warning-macro defaults to doc-warning

Textbox Examples

MacroUsed forExampleRenderd
.infoBoxText-box with an icon<<.infoBox text:"A generic ...">>
A generic text box, with an optional title and a custom icon
.noteInfos with a title<<.note text:"Some text ...">>
Note
Some text in a box with a title by default
.tiphints and tips<<.tip text:"Eg: Turn ...">>
Tip
Eg: Turn your screen on, otherwise
you won't be able to see much.
.warningwarning advice<<.warning text:"Eg: Make a backup ...">>
Warning
Eg: Make a backup of your file
before you upgrade.

Blocks

MacroExampleUsed for
.preamble<<.preamble "your text comes here">>
an introductory sentence that stands apart from the rest of the tiddler

Tiddlers and Fields

MacroUsed forExampleRendered
.tida tiddler title<<.tid Example>>Example
.taga tag<<.tag Example>>Example
.fielda field name<<.field example>>example
.valuea field value<<.value "example value">>example value
.opa filter operator<<.op backlinks>>backlinks
.vara variable or macro name<<.var currentTiddler>>currentTiddler
.wida widget name<<.wid list>>$list
.attran attribute name<<.attr filter>>filter
.parama macro parameter name<<.param text>>text
.tiddler-fieldsa list of tiddler fields<<.tiddler-fields "Monday">>

Monday

created20150117192113000
modified20211116221111294
tags[[Operator Examples]]
text<<.this-is-operator-example>>
typetext/vnd.tiddlywiki

Links

MacroUsed forExampleRenderd
.linklink containing WikiText<<.link "^^an^^ ~~example~~" Example>>an example
.clinkcode link<<.clink `<$list>` ListWidget>><$list>
.dlinkdefinition link for a instance of a term<<.dlink widget Widgets>>widget
.dlink-exexternal link to a defining instance of a term<<.dlink-ex Example "http://example.com/">>Example
.flinkfield link<<.flink ListField>>list
.mlinkmacro link<<.mlink qualify>>qualify
.mlink2macro link with a specified target<<.mlink2 foo "Examples of Macros">>foo
.olinkoperator link<<.olink prefix>>prefix
.olink2operator link with specified target<<.olink2 foo prefix>>foo
.vlinkvariable link<<.vlink currentTiddler>>currentTiddler
.vlink2variable link with specified target<<.vlink2 foo "Examples of Variables">>foo
.wlinkwidget link<<.wlink ButtonWidget>>$button
.wlink2widget link with specified text<<.wlink2 foo ButtonWidget>>foo

Keyboard Shortcuts

MacroUsed forExampleRendered
.keya key on the keyboard<<.key Escape>>Escape
.keysa key combination<<.keys Ctrl+Enter>>Ctrl+Enter

Doc-Tabs

See: CheckboxWidget

MacroUsed forExample
.doc-tabsshowing a tab set in a documentation tiddler
.doc-tab-linkbutton to activate a tab
.widget-attr-linkbutton with a widget attribute name to activate a tab

Sidebar Tabs

MacroUsed forExampleRendered
.sidebar-tabthe name of a sidebar tab<<.sidebar-tab More>>More
.more-tabthe name of a subtab of the More tab<<.more-tab Shadows>>Shadows
.info-tabthe name of a tiddler info tab<<.info-tab Fields>>Fields
.controlpanel-tabthe name of a Control Panel tab<<.controlpanel-tab Settings>>Settings
.advancedsearch-tabthe name of an Advanced Search tab<<.advancedsearch-tab Filter>>Filter
.toc-tabname of the tw5.com TOC tab<<.toc-tab>>Contents
.example-taban example tab name<<.example-tab "Notes">>Notes

Parameters for .sidebar-tab

Open<<.sidebar-tab Open>>Open
Recent<<.sidebar-tab Recent>>Recent
Tools<<.sidebar-tab Tools>>Tools
More<<.sidebar-tab More>>More

Parameters for .more-tab

All<<.more-tab All>>All
Recent<<.more-tab Recent>>Recent
Tags<<.more-tab Tags>>Tags
Missing<<.more-tab Missing>>Missing
Drafts<<.more-tab Drafts>>Drafts
Orphans<<.more-tab Orphans>>Orphans
Types<<.more-tab Types>>Types
System<<.more-tab System>>System
Shadows<<.more-tab Shadows>>Shadows

Parameters for .info-tab

Tools<<.info-tab Tools>>Tools
References<<.info-tab References>>Backlinks
Tagging<<.info-tab Tagging>>Tagging
List<<.info-tab List>>List
Listed<<.info-tab Listed>>Listed
Fields<<.info-tab Fields>>Fields
Advanced<<.info-tab Advanced>>Advanced

Parameters for .controlpanel-tab

Info<<.controlpanel-tab Info>>Info
Appearance<<.controlpanel-tab Appearance>>Appearance
Settings<<.controlpanel-tab Settings>>Settings
Saving<<.controlpanel-tab Saving>>Saving
Plugins<<.controlpanel-tab Plugins>>Plugins

Parameters for .advancedsearch-tab

Standard<<.advancedsearch-tab Standard>>Standard
System<<.advancedsearch-tab System>>System
Shadows<<.advancedsearch-tab Shadows>>Shadows
Filter<<.advancedsearch-tab Filter>>Filter

Buttons

MacroUsed forExampleRendered
.buttona standard button name and icon<<.button "new-tiddler">> new tiddler

Parameters for .button

Tiddler toolbar

clone<<.button "clone">> clone
close<<.button "close">> close
close-others<<.button "close-others">> close others
edit<<.button "edit">> edit
export-tiddler<<.button "export-tiddler">> export tiddler
info<<.button "info">> info
more-tiddler-actions<<.button "more-tiddler-actions">> more
new-here<<.button "new-here">> new here
new-journal-here<<.button "new-journal-here">>20 new journal here
permalink<<.button "permalink">> permalink

Edit-mode toolbar

cancel<<.button "cancel">> cancel
delete<<.button "delete">> delete
save<<.button "save">> ok

Page toolbar

advanced-search<<.button "advanced-search">> advanced search
close-all<<.button "close-all">> close all
control-panel<<.button "control-panel">> control panel
encryption<<.button "encryption">> encryption
export-page<<.button "export-page">> export all
full-screen<<.button "full-screen">> full-screen
home<<.button "home">> home
import<<.button "import">> import
language<<.button "language">> language
more-page-actions<<.button "more-page-actions">> more
new-journal<<.button "new-journal">>20 new journal
new-tiddler<<.button "new-tiddler">> new tiddler
permaview<<.button "permaview">> permaview
refresh<<.button "refresh">> refresh
save-wiki<<.button "save-wiki">> save changes
storyview<<.button "storyview">> storyview
tag-manager<<.button "tag-manager">> tag manager
theme<<.button "theme">> theme

Documentation Style Guide

17th January 2015 at 3:25pm

Dominant Append

9th July 2024 at 5:07pm

Filters manipulate sets of titles in which no title may appear more than once. Furthermore, they often need to append one such set to another.

This is done in such a way that, if a title would be duplicated, the earlier copy of that title is discarded. The titles being appended are dominant.

For example, if a selection contains Andrew Becky Clara Daniel and Andrew Barney Clara Daisy is then appended to it, the result is Becky Daniel Andrew Barney Clara Daisy.

This behaviour can cause unexpected results when working with Mathematics Operators. For example, 1 2 3 +[sum[]] evaluates to 6, as expected. But 1 1 1 +[sum[]] evaluates to 1. Removing the +[sum[]] from each filter reveals the problem: 1 2 3 evaluates to the list 1, 2, 3, while 1 1 1 evaluates to the single item 1 due to de-duplication.

In such situations, the = prefix can be used to disable the de-duplication. For example, =1 =1 =1 +[sum[]] evaluates to 3 as expected. Alternatively, the split Operator can be used: [[1,1,1]split[,]sum[]].

Tip
To build a list of unique values that retains only the earliest copy of each value (the opposite behavior from Dominant Append), first use the :all filter run prefix (or its short form =) to retain all duplicate values while building your list. Then finish your filter run with the unique operator to remove later duplicates.

done

15th November 2021 at 1:33am

DraftMechanism

20th August 2013 at 1:24pm

Tiddlers that have a draft.of field are treated as pending drafts of the tiddler specified in the field. Draft tiddlers should also have a draft.title field that specifies the title that will be given to the tiddler when it is saved.

Several features work in concert to give the desired behaviour for draft tiddlers:

  • The ListWidget can optionally render draft tiddlers through a different template
  • The NavigatorWidget incorporates handlers for the following events:
    • tm-new-tiddler for creating a new tiddler in draft mode
    • tm-edit-tiddler for moving a tiddler into edit mode
    • tm-cancel-tiddler for cancelling a tiddler out of edit mode
    • tm-save-tiddler for saving a draft tiddler
  • Draft tiddlers are automatically excluded from search operations

Drag and Drop

28th March 2017 at 5:38pm

TiddlyWiki uses drag and drop to power two separate features:

Tiddler manipulation via drag and drop is supported by the core user interface in the following contexts:

  • Entries in the "Open" tab of the sidebar can be reordered by drag and drop; new tiddlers can be opened by dragging their titles into the list
  • Entries within a tag pill dropdown can be reordered by drag and drop; new tiddlers can be assigned the tag by dragging their titles into the list
  • Entries in the control panel "Appearance"/"Toolbars" tab can be reordered by drag and drop. (Less usefully, new entries can be added to the toolbars by dragging their titles into the list)

All tiddler links are draggable by default. They can be dragged within a browser window for manipulating tiddlers, or dragged to a different browser window to initiate an import operation

If you want to drag a link, first move it vertically, because horizontal movement is recognized by the browser as text selection.

Tag pills are also draggable, and are equivalent to simultaneously dragging all of the individual tiddlers carrying the tag.

Some common scenarios for drag and drop tiddler manipulation are available as reusable macros:

See DragAndDropMechanism for details of how to use the low level drag and drop primitives to build more complex interactions.

The standard HTML 5 drag and drop APIs used by TiddlyWiki are not generally available on mobile browsers on smartphones or tablets. The Mobile Drag And Drop Shim Plugin adds an open source library that implements partial support on many mobile browsers, including iOS and Android.

DragAndDropMechanism

6th April 2017 at 8:58am

This tiddler discusses the internal mechanisms that are used to implement drag and drop features in TiddlyWiki. See Drag and Drop for a general description of the features.

Warning
TiddlyWiki uses the standard HTML 5 drag and drop APIs. However, this is an area that is rightly notorious for cross-browser compatibility problems. Therefore, some features that you might expect to work won't necessarily work in all browsers. In particular,

The following widgets are concerned with drag and drop features:

The general sequence of a drag and drop operation is as follows:

  1. The user clicks down and drags the pointer on a draggable element such as the DraggableWidget, ButtonWidget or LinkWidget
  2. The draggable element moves with the mouse pointer until the click is released
  3. Moving the pointer over droppable elements such as the DroppableWidget displays a highlight indicating that the item can be dropped
  4. The configured actions are performed if the drag ends on a droppable element

DraggableWidget

21st November 2023 at 10:14am

The DraggableWidget creates a DOM element that can be dragged by the user. It only works on browsers that support drag and drop, which typically means desktop browsers, but there are workarounds.

The draggable element can be assigned a list of tiddlers that are used as the payload. If desired it can invoke actions when dragging starts and when it ends. See DragAndDropMechanism for an overview.

Content and Attributes

AttributeDescription
tiddlerOptional title of the payload tiddler for the drag
filterOptional filter defining the payload tiddlers for the drag
tagOptional tag to override the default "div" element created by the widget
selectorIntroduced in v5.2.2 Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle
classOptional CSS classes to assign to the DOM element created by the widget. The class tc-draggable is added to the the DOM element created by the widget unless the selector attribute is used. The class tc-dragging is applied to the DOM element created by the widget while the element is being dragged
enableIntroduced in v5.2.3 Optional value "no" to disable the draggable functionality (defaults to "yes")
startactionsOptional action string that gets invoked when dragging starts
endactionsOptional action string that gets invoked when dragging ends
dragimagetypeIntroduced in v5.2.0 Optional type of drag image: dom (the default) or blank to disable the drag image
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML element

Either or both of the tiddler and filter attributes must be specified in order for there to be a payload to drag.

The actionTiddler Variable is accessible in both startactions and endactions. It holds the payload tiddler(s) specified through the tiddler and filter attributes as a Title List using double square brackets to quote titles that include whitespace.

Tip
Note that the actionTiddler Variable holds a Title List quoted with double square brackets. This is unlike the DroppableWidget which uses the same variable to pass a single unquoted title.

Tip
When specifying a DOM node to use as the drag handle with the selector attribute, give it the class tc-draggable in order for it to have the appropriate cursor and the attribute draggable with the value true to make it draggable.

The LinkWidget incorporates the functionality of the DraggableWidget via the draggable attribute.

Introduced in v5.2.3 The following variables are accessible in the startactions and the endactions:

VariablesDescription
modifierThe modifier Variable contains the Modifier Key held while dragging
dom-*All DOM attributes of the node being dragged are made available as variables, with the prefix dom-
tv-popup-coordsA relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information)
tv-popup-abs-coordsIntroduced in v5.2.4 An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information)
tv-selectednode-posxx offset position of the dragged DOM node
tv-selectednode-posyy offset position of the dragged DOM node
tv-selectednode-widthoffsetWidth of the dragged DOM node
tv-selectednode-heightoffsetHeight of the dragged DOM node
event-fromselected-posxx position of the event relative to the dragged DOM node
event-fromselected-posyy position of the event relative to the dragged DOM node
event-fromviewport-posxx position of the event relative to the viewport
event-fromviewport-posyy position of the event relative to the viewport

DroppableWidget

12th June 2024 at 12:54pm

The droppable widget creates a DOM element onto which dragged items can be dropped by the user, triggering the specified actions. It only works on browsers that support drag and drop, which typically means desktop browsers, but there are workarounds.

See DragAndDropMechanism for an overview.

Content and Attributes

Attribute Description
actionsActions to be performed when items are dropped. It activates 1 action per item
listActionsNew in v5.3.4 Actions to be performed when items are dropped. It activates 1 action for a the whole list of items
classOptional CSS classes to assign to the draggable element. The class tc-droppable is added automatically, and the class tc-dragover is applied while an item is being dragged over the droppable element
tagOptional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode
enableIntroduced in v5.1.22 Optional value "no" to disable the droppable functionality (defaults to "yes")
data-*New in v5.3.2 Optional data attributes to be assigned to the HTML element
style.*New in v5.3.2 Optional CSS properties to be assigned to the HTML element

Within the action string, the following variables are generated by the DroppableWidget:

VariablesDescription
actionTiddlerFor parameter actions, the actionTiddler Variable contains the title of the item being dropped
actionTiddlerListFor parameter listActions the actionTiddlerList Variable contains a Title List of all the items being dropped
modifierThe modifier Variable contains the modifier key held while dragging (can be normal, ctrl, shift or ctrl-shift)

Note
Note that the actionTiddler variable holds a single, unquoted title. This is unlike the DraggableWidget which uses the same variable to pass a quoted Title List.

Examples

This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.

20


Similarly, this example shows a palette of colours. Dragging a tiddler onto one of the colours assigns that colour to be used for rendering the icon of the tiddler.


Drag the tag pill or a single tiddler link HelloThere into the "Drop Area" below. It will show the "Title List" stored in $:/temp/drop/TitleList

Drop the tagpill or a link into this area.
TitleList:

DropzoneWidget

9th October 2021 at 12:22pm

Introduction

The dropzone widget creates an area into which the user can drag files and other objects. It also supports pasting via the clipboard, although browser support is currently limited.

It sends a WidgetMessage: tm-import-tiddlers carrying a JSON representation of the tiddlers to be imported up through its parents. This message usually trapped by the NavigatorWidget which adds the tiddlers to the store and updates the story to display them.

Content and Attributes

AttributeDescription
deserializerIntroduced in v5.1.15 Optional name of deserializer to be used (by default the deserializer is derived from the file extension)
enableIntroduced in v5.1.22 Optional value "no" to disable the dropzone functionality (defaults to "yes")
classIntroduced in v5.1.22 Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone")
autoOpenOnImportIntroduced in v5.1.23 Optional value "no" or "yes" that can override tv-auto-open-on-import
importTitleIntroduced in v5.1.23 Optional tiddler title to use for import process instead of $:/Import
actionsIntroduced in v5.2.0 Optional actions string to be invoked after the tm-import-tiddlers message has been sent. The variable importTitle provides the title of the tiddler used for the import process.
contentTypesFilterIntroduced in v5.2.0 Optional filter that specifies the content types accepted by the dropzone.
filesOnlyIntroduced in v5.2.0 Optional. When set to "yes", the dropzone only accepts files and not string data. Defaults to "no"

Tip
Use the prefix filter operator to easily accept multiple related content types. For example this filter will accept all image content types: [prefix[image/]]

Tip
The list of available deserializers can be seen by using the filter [deserializers[]] in the Filter tab in Advanced Search.

The dropzone widget displays any contained content within the dropzone.

Display

The dropzone widget creates an HTML <div class="tc-dropzone"> to contain its content. During a drag operation the class tc-dragover is added. CSS is used to provide user feedback. For custom styling of this state where a drag is in progress, specify a custom class name with the class attribute and use CSS with the selector .myclass.tc-dragover.

Data types supported

The following data transfer types are supported:

  • text/vnd.tiddler - a list of tiddlers in JSON format (this format is generated by the LinkWidget)
  • text/plain - plain text
  • text/uri-list - a list of URIs as a single tiddler

dumpvariables Macro

21st February 2015 at 3:14pm

The dumpvariables macro returns a table showing the values of all variables and macros that exist at that position in the widget tree.

It is useful for debugging and exploring TiddlyWiki's internals.

Placeholders are replaced with values in the normal way, but using the default values for all macro parameters.

Parameters

(none)

Examples

dumpvariables Macro (Examples)

21st February 2015 at 3:14pm

<$set name="EXAMPLE" value="123.$(EXAMPLE2)$.789">
<$set name="EXAMPLE2" value="456">

<<dumpvariables>>

</$set>
</$set>

duplicateslugs Operator

9th May 2020 at 2:17pm
purposefind titles that yield duplicate slugs
inputa selection of titles
outputinput titles that yield duplicate slugs

Learn more about how to use Filters

Introduced in v5.1.23 The slugify operator can be used to transform arbitrary tiddler titles into human readable strings suitable for use in URLs or filenames. However, it is possible for multiple different titles to slugify to the same string. The duplicateslugs operator can be used to display a warning. For example:

<$list filter="[!is[system]duplicateslugs[]limit[1]]" emptyMessage="There are no duplicate slugs">
The following tiddlers have duplicate slugs:

<ul>
<$list filter="[!is[system]duplicateslugs[]]">
<li><$link><$text text=<<currentTiddler>>/></$link></li>
</$list>
</ul>
</$list>

That renders as:

The following tiddlers have duplicate slugs:

Dynaview Plugin

13th November 2018 at 8:41am

each Operator

4th December 2024 at 9:00am
purposeselect one of each group of input titles by field
inputa selection of titles
suffixoptionally, list-item or value
parameterF=the name of a field, defaulting to title
outputa selection containing the first input title encountered for each distinct value of field F

Learn more about how to use Filters

Each input title is processed in turn. The value of field F in the corresponding tiddler is examined.

each
As long as the value of the field is unique (i.e. has not been encountered before), the title is appended to the output.
each:list-item
The value is treated as a title list. Each title in the list considered in turn. If it has not been encountered before, it is appended to the output.
each:value
As long as the title is unique it is appended to the output whether or not the corresponding tiddler exists.

Note that if a tiddler does not contain field F, it is treated as if the value of the field were empty. Thus, a filter expression such as [each[motovun]] will return one tiddler that doesn't have a motovun field, as well as one tiddler with each distinct value of that field, if any. To obtain just the tiddlers that have a non-blank value for the motovun field one can use [each[motovun]has[motovun]].

Note
For an example of using the each operator to generate a two-tier list of groups and members, see GroupedLists.

Examples

each Operator (Examples)

4th December 2024 at 8:59am

[each[color]]

[sort[title]each[type]]
→ the alphabetically first tiddler of each type

[each:list-item[list]]
→ all tiddlers listed anywhere in the core list field

[[Non existing]] [[GettingStarted]] +[each:value[]]
→ Compare this to +[each[]] below

[[Non existing]] [[GettingStarted]] +[each[]]
→ Compare this to +[each:value[]] above

eachday Operator

10th February 2015 at 4:16pm
purposeselect one of each group of input titles by date
inputa selection of titles
parameterF=the name of a date field, defaulting to modified
outputa selection containing the first input title encountered for each distinct value (ignoring times of day) of field F

Learn more about how to use Filters

Each input title is processed in turn. The value of field F in the corresponding tiddler is examined, and as long as this indicates a date that has not been encountered before, the title is appended to the output.

If a tiddler doesn't contain field F, it contributes nothing to the output.

Examples

eachday Operator (Examples)

18th January 2015 at 6:31pm

Edición en Castellano

11th May 2016 at 4:02pm

Edit Template Body Cascade

6th December 2021 at 4:19pm

The edit template body cascade is a cascade used by the default edit template to choose the template for displaying the tiddler body.

The core edit template body cascade can be found in $:/core/ui/EditTemplate/body

The default edit template body cascade consists of:

  1. If the tiddler has the field _canonical_uri then use the template $:/core/ui/EditTemplate/body/canonical-uri to display the remote URL
  2. Otherwise, use the template $:/core/ui/EditTemplate/body/default which provides the default editing interface

You can see the current settings for the view template body cascade in $:/ControlPanel under the Info -> Advanced -> Cascades -> Edit Template Body tab.

    EditBitmapWidget

    20th February 2015 at 4:21pm

    Editing Tiddlers with Emacs

    19th September 2014 at 4:15pm

    Michael Fogleman has written an Emacs major mode called tid-mode, which is for editing TiddlyWiki .tid files. It is derived from text-mode, uses the useful minor modes org-struct and subword, and updates the modified times when you save a .tid file.

    He also wrote two helper functions for using TiddlyWiki in Emacs. The first opens a tiddlers directory in Dired; the second opens TiddlyWiki in the browser.

    (defun open-wiki ()
      "Opens a TiddlyWiki directory in Dired."
      (interactive)
      (dired "~/Dropbox/wiki/tiddlers/"))
    (defun browse-wiki ()
      "Opens TiddlyWiki in the browser."
      (interactive)
      (browse-url "127.0.0.1:8080/"))

    This latter function may require specifying a browser:

    (setq browse-url-browser-function 'browse-url-generic
          browse-url-generic-program "chromium")

    You can bind either of these functions with the global-set-key function:

    (global-set-key (kbd "C-c w") 'open-wiki)

    At the moment, these are not integrated into tid-mode.

    Editing Tiddlers with Vim

    11th January 2016 at 7:00pm

    Devin Weaver has written a Vim plugin at https://github.com/sukima/vim-tiddlywiki

    It supports most of the TiddlyWiki syntax and includes a filetype plugin which will auto update the modified field.

    Édition en Français (France)

    23rd November 2014 at 4:29pm

    editiondescription Operator

    3rd February 2015 at 6:45pm
    purposeselect the descriptions of the input editions
    inputa selection of edition names
    parameternone
    outputthe description string of each edition in the input

    Learn more about how to use Filters

    Each input title is processed in turn, ignoring any that is not the name of a TiddlyWiki edition.

    Note
    This operator is not available when TiddlyWiki is running in a web browser.

    Editions

    7th January 2016 at 10:21pm

    TiddlyWiki is distributed in several distinct editions that are tuned for specific purposes.

    An edition consists of the TiddlyWiki core components along with plugins, documentation and sample content to get you up and running as quickly as possible.

    You can mix and match the components of these editions, to make a unique solution for your particular application.

    Tip
    Note that editions should not be confused with the platforms on which TiddlyWiki runs (eg as a single HTML file vs. under Node.js)

    editions Operator

    3rd February 2015 at 6:46pm
    purposeselect the names of all the TiddlyWiki editions
    inputignored
    parameternone
    outputthe name of each TiddlyWiki edition, in alphabetical order

    Learn more about how to use Filters

    Note
    This operator is not available when TiddlyWiki is running in a web browser.

    EditionsCommand

    29th October 2014 at 11:43am

    Lists the names and descriptions of the available editions. You can create a new wiki of a specified edition with the --init command.

    --editions

    Editor toolbar

    18th January 2019 at 4:13pm

    How it Works

    The editor toolbar is a toolbar that helps you format text easily. It appears above the text input field in a tiddler when in edit mode. It has a similar appearance to desktop text editors like Microsoft Word or Libre Office Write.

    What the Editor toolbar does

    When you press the button for a function, it will insert the WikiText in the text field. As an example, if you press the bold button it will insert '' ''.

    If you highlight a piece of text the markup code will automatically go around the highlighted text.

    If you are in another mode, like MarkDown, the toolbar will change to that syntax and insert appropriate code. However It will not change previously typed text or markup.

    Besides the standard WikiText formatting, the Editor toolbar has the following buttons:

    EditTextWidget

    27th June 2024 at 6:43pm

    Introduction

    The edit text widget provides a user interface in the browser for editing text tiddler fields. The editing element is dynamically bound to the underlying tiddler value: changes to the tiddler are instantly reflected, and any edits are instantly propagated.

    By default, applying the EditTextWidget to the text field of a tiddler will generates an HTML <textarea> element, i.e. a multi-line editor. Applying the EditTextWidget to any other field generates an HTML <input type="text"> element, a single-line editor. This behaviour can be overridden with the tag and type attributes.

    Content and Attributes

    The content of the <$edit-text> widget is ignored.

    AttributeDescription
    tiddlerThe tiddler to edit (defaults to the current tiddler)
    fieldThe field to edit (defaults to text). Takes precedence over the index attribute
    indexThe index to edit
    defaultThe default text to be provided when the target tiddler doesn't exist
    classA CSS class to be assigned to the generated HTML editing element
    placeholderPlaceholder text to be displayed when the edit field is empty
    focusPopupTitle of a state tiddler for a popup that is displayed when the editing element has focus
    focusSet to "yes" or "true" to automatically focus the editor after creation
    focusSelectFromStartIntroduced in v5.2.6 If the focus attribute is enabled, determines the position of the start of the selection: 0 (default) places the start of the selection at the beginning of the text, 1 places the start of the selection after the first character, etc.
    focusSelectFromEndIntroduced in v5.2.6 If the focus attribute is enabled, determines the position of the end of the selection: 0 (default) places the end of the selection at the end of the text, 1 places the start of the selection before the final character, etc.
    tabindexSets the tabindex attribute of the input or textarea to the given value
    autocompleteIntroduced in v5.1.23 An optional string to provide a hint to the browser how to handle autocomplete for this input
    tagOverrides the generated HTML editing element tag. For a multi-line editor use tag=textarea. For a single-line editor use tag=input
    typeOverrides the generated HTML editing element type attribute
    sizeThe size of the input field (in characters). This exact result depends on browser and font. Use the class attribute to style width for precise control
    autoHeightEither "yes" or "no" to specify whether to automatically resize textarea editors to fit their content (defaults to "yes")
    minHeightMinimum height for automatically resized textarea editors, specified in CSS length units such as "px", "em" or "%"
    rowsSets the rows attribute of a generated textarea
    cancelPopupsIntroduced in v5.1.23 if set to "yes", cancels all popups when the input gets focus
    inputActionsIntroduced in v5.1.23 Optional actions that are triggered every time an input event occurs within the input field or textarea.
    Introduced in v5.2.1 The variable actionValue is available to the inputActions and contains the value of the input field.
    refreshTitleIntroduced in v5.1.23 An optional tiddler title that makes the input field update whenever the specified tiddler changes
    disabledIntroduced in v5.1.23 Optional, disables the text input if set to "yes". Defaults to "no"
    fileDropIntroduced in v5.2.0 Optional. When set to "yes" allows dropping or pasting images into the editor to import them. Defaults to "no"

    Examples

    If you wanted to change the field myconfig of the tiddler AppSettings, you could use an EditTextWidget to edit the field, and then show the result anywhere else by using {{AppSettings!!myconfig}}. Note that this will create tiddler AppSettings if it doesn't already exist.

    <$edit-text tiddler="AppSettings" field="myconfig"/><p/>
    Value of ''myconfig'' : {{AppSettings!!myconfig}}
    

    Text Selection

    If the edit field already contains text or a default value is provided, you can use the focusSelectFromStart and focusSelectFromEnd attributes to only select part of the text when using focus="yes".

    Partial selection when editing this tiddler's caption field:

    <$edit-text tiddler=<<currentTiddler>> field="caption" focus="yes" focusSelectFromStart="5" />
    

    Provide a dated heading for this example where only the placeholder (but not the date) is selected for easier text input:

    <$edit-text tiddler=<<currentTiddler>> field="heading" size="25" focus="yes" focusSelectFromEnd="13" default={{{ [[Heading Text (]] [<now YYYY-0MM-0DD>] [[)]] +[join[]] }}} />
    

    Input Actions, with class attribute

    \procedure onInput()
      <%if [get[temp]match[$:/]] %>
    		<$action-confirm $message="Yes, this is how system tiddler names begin!"/>
      <%endif%>
    \end
    
    Type a new tiddler name, starting with the system prefix `$:/`: <$edit-text inputActions=<<onInput>> field="temp" class="tc-edit-texteditor"/>
    
    

    EditWidget

    27th June 2024 at 10:04pm

    Introduction

    The edit widget provides a general purpose interface for editing a tiddler. It dynamically chooses the appropriate widget depending on the type of the tiddler (currently either the EditTextWidget or the EditBitmapWidget).

    Content and Attributes

    The content of the <$edit> widget is ignored.

    AttributeDescription
    tiddlerThe tiddler to edit (defaults to the current tiddler)
    fieldThe field to edit (defaults to text). Takes precedence over the index attribute
    indexThe index to edit
    classA CSS class to be added the generated editing widget
    tabindexSets the tabindex attribute of the input or textarea to the given value
    autocompleteIntroduced in v5.1.23 An optional string to provide a hint to the browser how to handle autocomplete for this input
    cancelPopupsIntroduced in v5.1.23 if set to "yes", cancels all popups when the input gets focus
    inputActionsIntroduced in v5.1.23 Optional actions that are triggered every time an input event occurs within the input field or textarea
    refreshTitleIntroduced in v5.1.23 An optional tiddler title that makes the input field update whenever the specified tiddler changes

    Examples

    Edit the contents (text field) of a tiddler titled with today’s date

    <$edit tiddler=<<now YYYY-0MM-0DD>> class="tc-edit-texteditor"/>
    

    Edit $:/status/UserName with single-line input box, have browser offer autocomplete for email

    <$edit-text tiddler="$:/status/UserName" tag="input" size=40 autocomplete="email"/>
    

    Else Filter Run Prefix

    22nd March 2023 at 2:07pm
    purposethe filter run is only evaluated if the filter output of all previous runs so far is an empty list
    inputall titles from previous filter runs
    outputif the filter output so far is an empty list then the output titles of the run are dominantly appended to the filter's output.
    if the filter output so far is not an empty list then the run is ignored.
    Introduced in v5.1.23
    :elserun

    This prefix has a Shortcut Filter Run Prefix symbol ~run

    Also see: Then Filter Run Prefix | then Operator and else Operator

    else Operator

    2nd August 2019 at 11:39am
    purposeif the list of input titles is empty then return a list consisting of a single constant string, otherwise return the original titles
    inputa selection of titles
    parameterE=a string
    outputthe original input titles unless empty, in which case return a list with the single entry E

    Learn more about how to use Filters

    else Operator (Examples)

    2nd August 2019 at 11:35am

    [[HelloThereMissing]is[missing]else[yes]]

    [[HelloThere]is[missing]else[yes]]

    Emergency Tiddler Export

    7th May 2020 at 8:28pm

    This method is useful if, for any reason, you should find your current TiddlyWiki instance is not saving (e.g. a plugin or a server has stopped working). It should work on just about any platform.

    • Go to advanced search
      • Goto the filter tab
      • Enter the following filter text:
    [!is[system]!sort[modified]limit[25]]
    • Check the list of tiddlers.
    • Adjust the number "25" in the filter to make sure you found all your recently modified tiddlers
    • Press the bucket with the up arrow [] which appears on the right
    • A dialogue window will ask for a location to download a file called tiddler.json on your local drive, or depending on browser configuration, just alert you that such a file will be downloaded. Press save.
    • The tiddlers.json file can be imported (tools in sidebar) or drag and drop the file on the top line of the story river of another TW .
      • You can (de)select specific tiddlers.
      • Finally, press import.

    Empty Edition

    2nd July 2016 at 8:42am

    The "empty" edition of TiddlyWiki is a vanilla distribution, with no additional plugins or configuration beyond the core code.

    The empty edition can be downloaded from:

    Your browser may ask you to accept the download before it begins

    encodebase64 Operator

    31st August 2024 at 3:50am
    purposeapply base 64 encoding to a string
    inputa selection of titles
    suffixoptional: binary to treat input as binary data, urlsafe for URL-safe output
    outputthe input with base 64 encoding applied

    Learn more about how to use Filters

    Introduced in v5.2.6

    See Mozilla Developer Network for details of base 64 encoding. TiddlyWiki uses library code from @nijikokun to handle the conversion.

    The input strings are interpreted as UTF-8 encoded text (or binary data instead if the binary suffix is present). The output strings are base64 encoded.

    The optional binary suffix, if present, causes the input string to be interpreted as binary data instead of text. Normally, an extra UTF-8 encoding step will be added before the base64 output is produced, so that emojis and other Unicode characters will be encoded correctly. If the input is binary data, such as an image, audio file, video, etc., then the UTF-8 encoding step would produce incorrect results, so using the binary suffix causes the UTF-8 encoding step to be skipped.

    The optional urlsafe suffix, if present, will use the alternate "URL-safe" base64 encoding, where - and _ are used instead of + and / respectively, allowing the result to be used in URL query parameters or filenames.

    Examples

    encodebase64 Operator (Examples)

    31st August 2024 at 4:15am

    [[test]encodebase64[]]

    [[😎]encodebase64[]]

    [[😎]encodebase64:urlsafe[]]

    encodehtml Operator

    17th October 2016 at 3:30pm
    purposeapply HTML encoding to a string
    inputa selection of titles
    outputthe input with HTML encoding applied

    Learn more about how to use Filters

    Introduced in v5.1.14

    "HTML encoding" means replacing special HTML characters with the corresponding HTML entity:

    • & replaced with &amp;
    • < replaced with &lt;
    • > replaced with &gt;
    • " replaced with &quot;

    Examples

    encodehtml Operator (Examples)

    17th October 2016 at 3:53pm

    [[Title with <angle brackets>]] +[encodehtml[]]

    [[Title with an & ampersand]] +[encodehtml[]]

    encodeuri Operator

    17th October 2016 at 3:28pm
    purposeapply URI encoding to a string
    inputa selection of titles
    outputthe input with URI encoding applied

    Learn more about how to use Filters

    Introduced in v5.1.14

    See Mozilla Developer Network for details of the encodeURI operation.

    Examples

    encodeuri Operator (Examples)

    17th October 2016 at 3:53pm

    [[Title with Space]] +[encodeuri[]]

    [[Title with Space]] [[Another title with Space]] +[encodeuri[]]

    encodeuricomponent Operator

    19th January 2023 at 5:43pm
    purposeapply URI component encoding to a string
    inputa selection of titles
    outputthe input with URI component encoding applied

    Learn more about how to use Filters

    Introduced in v5.1.14

    See Mozilla Developer Network for details of the encodeURIComponent operation.

    Introduced in v5.2.6 In addition to the characters mentioned in the article above, the following additional characters are also percent encoded: !'()*

    Examples

    encodeuricomponent Operator (Examples)

    17th October 2016 at 3:53pm

    [[Title with Space]] +[encodeuricomponent[]]

    [[Title with Space]] [[Another title with Space]] +[encodeuricomponent[]]

    Encrypted Wiki Import Problems

    17th June 2025 at 6:31pm

    There have been some problems with importing encrypted TWs into version v5.2.0 and v5.2.1.

    While encrypting and decrypting single file wikis with v5.2.0 and v5.2.1 works as intended. There are some problems if encrypted wikis are imported, if those wikis have been encrypted with any other version.

    So if you import a wiki that was been encrypted with eg: TW v5.1.23 into v5.2.0 or v5.2.1 the v5.1.23 wiki could not be decrypted by v5.2.0 or v5.2.1.

    Upgrading

    • Importing encrypted wikis from any v5.1.x, v5.2.x and v5.3.x into the latest TW versions works as expected
    • The only target TW versions that can cause importing problems are v5.2.0 and v5.2.1

    Downgrading

    • Importing an encrypted v5.3.x into v5.2.x and v5.3.x works as expected
      • Except v5.2.0 and v5.2.1
    • Importing an encrypted v5.3.x to v5.1.x does not work

    Encryption

    6th November 2024 at 4:53pm

    When used as a single HTML file, TiddlyWiki5 allows content to be encrypted with AES 128 bit encryption in CCM mode using the Stanford JavaScript Crypto Library.

    1. Switch to the Tools tab in the sidebar and look for the button with a padlock icon
    2. If the button is labelled set password then the current wiki is not encrypted. Clicking the button will prompt for a password that will be used to encrypt subsequent saves
    3. If the button is labelled clear password then the current wiki is already encrypted. Clicking the button will remove the password so that subsequent saves will be unencrypted
    4. Optionally, open the saved file in a text editor and verify that your data is encrypted
    5. Open the file in your browser. You will be prompted for a password before the content is displayed

    Note that TiddlyWiki has two other unrelated features concerned with passwords/encryption:

    • The ability to set a password when saving to TiddlySpot. This is done in the "Saving" tab of control panel .
    • The ability to use standard HTTP basic authentication with the Node.js server configuration. This is done on the command line with the ServerCommand. Combined with SSL, this gives the same level of transit encryption as you'd get with online services like Google or Dropbox, but there is no encryption of data on disk

    EncryptWidget

    3rd August 2023 at 5:01am

    Introduction

    The encrypt widget renders a filtered list of tiddlers to an encrypted block with the password currently held in the PasswordVault. The encrypted block can subsequently be decrypted by the TiddlyWiki5 BootMechanism. See the EncryptionMechanism for more details.

    Content and Attributes

    The content of the <$encrypt> widget is ignored.

    AttributeDescription
    filterFilter defining the tiddlers to be included in the encrypted block. If not specified then all non-system tiddlers are used

    enlist Operator

    5th May 2021 at 10:02am
    purposeselect titles from the parameter interpreted as a title list
    inputignored
    ! inputa selection of titles
    suffixD=Introduced in v5.1.20 dedupe (the default) to remove duplicates, raw to leave duplicates untouched
    parameterL=a title list
    outputthe titles stored as a title list at L
    ! outputthose input titles that are not listed in L

    Learn more about how to use Filters

    Tip
    Literal filter parameters cannot contain square brackets but you can work around the issue by using a variable. Learn more at: SetWidget documentation under the heading "Filtered List Variable Assignment"

    <$set name="myList" value="first [[second with a space]] third">
    <$list filter="[enlist<myList>]">
    ...

    Examples

    enlist Operator (Examples)

    10th June 2019 at 4:53pm

    [enlist[one two three]addsuffix[!]]

    [enlist[one one one]]

    [enlist:raw[one one one]]

    [enlist{$:/StoryList!!list}]

    enlist-input Operator

    2nd November 2020 at 10:18pm
    purposeselect titles by interpreting each input title as a title list
    inputa selection of titles
    suffixD=dedupe (the default) to remove duplicates, raw to leave duplicates untouched
    outputthe titles stored as a title list in each input title

    Learn more about how to use Filters

    Introduced in v5.1.23

    Tip
    Compare with enlist operator that interprets its parameter as a title list

    <$vars days={{{ [[Days of the Week]get[list]] }}}>
    
    {{{ [enlist<days>] }}}
    
    </$vars>

    is equivalent to:

    {{{ [[Days of the Week]get[list]enlist-input[]] }}}

    Examples

    enlist-input Operator (Examples)

    3rd November 2020 at 9:06am

    [[Days of the Week]get[list]enlist-input[]]

    Contrast with:

    [[Days of the Week]get[list]]
    'HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input[]]
    Contrast with:
    'HelloThere GettingStarted [[Customise TiddlyWiki]]'
    'HelloThere HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input:raw[]]
    Contrast with:
    'HelloThere HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input[]]

    EntityWidget

    14th March 2016 at 4:56pm

    Introduction

    The entity widget displays a specified HTML character entity.

    Content and Attributes

    The content of the <$entity> widget is not used.

    AttributeDescription
    entityThe entity to display (eg, &times;)

    Environment Variables on Node.js

    13th June 2022 at 11:41am

    TiddlyWiki on Node.js supports the following OS environment variables for specifying a delimited list of paths to search for plugins and editions:

    • TIDDLYWIKI_PLUGIN_PATH - Search path for ordinary plugins
    • TIDDLYWIKI_THEME_PATH - Search path for themes
    • TIDDLYWIKI_LANGUAGE_PATH - Search path for languages
    • TIDDLYWIKI_EDITION_PATH - Search path for editions (used by the InitCommand)

    Note
    1. The delimiter may vary between operating systems. While on Windows a semicolon ; is used, Linux implements a colon :.

    2. On Linux systems, it may be necessary to export the variable as well as to define it.

    The additional paths should each point to folders structured like the equivalent directories in the TiddlyWiki5 GitHub repository: the plugin, theme and language directories contain publisher/pluginname/<files> while the edition directories contain editionname/<files>

    For example:

    export TIDDLYWIKI_PLUGIN_PATH=~/MyPluginStore
    tiddlywiki mywiki --build index

    ErrorWidget

    19th April 2023 at 10:31am

    Introduced in v5.2.4 The $error widget is used by the core to display error messages such as the recursion errors reported by the $transclude widget.

    The $error does not provide any useful functionality to end users. It is only required by the core for technical reasons.

    Content and Attributes

    The content of the $error widget is ignored.

    AttributeDescription
    $messageThe error message

    escapecss Operator

    29th June 2019 at 7:28am
    purposeapply CSS escaping to a selection of titles through the CSS.escape() method / operation
    inputa selection of titles
    outputthe input with CSS escaping applied through the CSS.escape() method

    Learn more about how to use Filters

    Introduced in v5.1.20

    See Mozilla Developer Network for details of the CSS.escape() operation.

    Examples

    escapecss Operator (Examples)

    29th June 2019 at 7:28am

    [all[tiddlers]tag[Resources]escapecss[]]

    escaperegexp Operator

    17th October 2016 at 3:32pm
    purposeescape special characters used in regular expressions
    inputa selection of titles
    outputthe input with escaping applied to special regular expression characters

    Learn more about how to use Filters

    Introduced in v5.1.14

    See Mozilla Developer Network for details of the regular expression syntax.

    Examples

    escaperegexp Operator (Examples)

    17th October 2016 at 3:55pm

    [[Title with dots . and dollars $]] +[escaperegexp[]]

    Eucaly's Tiddly World

    6th January 2021 at 3:10pm

    I collect my tw5 creations on-line as http://eucaly-tw5.tiddlyspot.com/

    Available Plugins :

    EventCatcherWidget

    12th October 2022 at 7:42pm

    Introduction

    Introduced in v5.1.23

    This is an advanced widget intended for use by those familiar with HTML, CSS and JavaScript handling of DOM events.

    The event catcher widget traps DOM-initiated Javascript events dispatched within its child content, and allows invoking a series of ActionWidgets in response to those events.

    In order for the events to be trapped:

    • The event must be of one of the events specified in the event catcher widget's events attribute
    • The event must target a DOM node with an ancestor that matches the widget's selector attribute
    • Introduced in v5.2.2 Optionally, the DOM node targeted by the event must also match the widgets matchSelector attribute
    • The event must support event bubbling

    Use of the event catcher widget is beneficial when using large numbers of other trigger widgets such as the ButtonWidget is causing performance problems. The workflow it enables is akin to what is referred to as "event delegation" in JavaScript parlance.

    Content and Attributes

    The content of the <$eventcatcher> widget is displayed normally.

    AttributeDescription
    selectorA CSS selector. Only events originating inside a DOM node with this selector will be trapped
    matchSelectorIntroduced in v5.2.2 An optional CSS selector. Only events targeting DOM nodes matching this selector will be trapped
    {any attributes starting with $}Introduced in v5.2.0 Each attribute name (excluding the $) specifies the name of an event, and the value specifies the action string to be invoked. For example: $click=<<clickActions>>
    tagOptional. The HTML element the widget creates to capture the events, defaults to:
    » span when parsed in inline-mode
    » div when parsed in block-mode
    classOptional. A CSS class name (or names) to be assigned to the widget HTML element
    stopPropagationIntroduced in v5.2.0 Optional. Set to "always" to always stop event propagation even if there are no corresponding actions to invoke, "never" to never stop event propagation, or the default value "onaction" with which event propagation is only stopped if there are corresponding actions that are invoked.
    events(deprecated – see below) Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick"
    actions-*(deprecated – see below) Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form actions-event where event represents the type of the event. For example: actions-click or actions-dblclick

    Introduced in v5.2.0 Note that the attributes events and actions-* are no longer needed. Instead you can use attributes starting with $ where the attribute name (excluding the $) specifies the name of the event and the value specifies the action string to be invoked. If any attributes with the prefix $ are present then the types attribute is ignored.

    Variables

    The following variables are made available to the actions:

    VariablesDescription
    dom-*All DOM attributes of the node matching the given selector are made available as variables, with the prefix dom-
    modifierThe modifier Variable contains the Modifier Key held during the event (can be "normal", "ctrl", "shift", "alt" or combinations thereof)
    event-mousebuttonThe mouse button (if any) used to trigger the event (can be "left", "right" or "middle"). Note that not all event types support the mousebutton property.
    This property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. More details at: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
    event-typeThe type property of the JavaScript event.
    event-detail-*Any properties in the detail attribute of the event are made available with the prefix event-detail-
    tv-popup-coordsA relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information)
    tv-popup-abs-coordsIntroduced in v5.2.4 An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated (see Coordinate Systems for more information)
    tv-widgetnode-widthIntroduced in v5.2.3 offsetWidth of the DOM node created by the eventcatcher widget
    tv-widgetnode-heightIntroduced in v5.2.3 offsetHeight of the DOM node created by the eventcatcher widget
    tv-selectednode-posxx offset position of the selected DOM node
    tv-selectednode-posyy offset position of the selected DOM node
    tv-selectednode-widthoffsetWidth of the selected DOM node
    tv-selectednode-heightoffsetHeight of the selected DOM node
    event-fromselected-posxx position of the event relative to the selected DOM node
    event-fromselected-posyy position of the event relative to the selected DOM node
    event-fromcatcher-posxx position of the event relative to the event catcher DOM node
    event-fromcatcher-posyy position of the event relative to the event catcher DOM node
    event-fromviewport-posxIntroduced in v5.2.0 x position of the event relative to the viewport
    event-fromviewport-posyIntroduced in v5.2.0 y position of the event relative to the viewport

    Example

    This example uses the ActionLogWidget and will log the data-item-id attribute of the clicked DOM node to the browser's JavaScript console

    \define clickactions()
    <$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
    \end
    
    \define contextmenu-actions()
    <$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
    \end
    
    <$eventcatcher selector=".item" $click=<<clickactions>> $contextmenu=<<contextmenu-actions>> tag="div">
    
    <div class="item" data-item-id="item1">
    Click events here will be trapped
    </div>
    
    <div class="item" data-item-id="item2">
    And here too
    </div>
    
    <div data-item-id="item3">
    Not here
    </div>
    
    <div class="item" data-item-id="item4">
    And here
    </div>
    
    </$eventcatcher>

    Example config-tiddlyweb-host for IIS

    28th March 2018 at 2:52pm
    title: $:/config/tiddlyweb/host
    text: $protocol$//$host$/MyApp/
    

    Example for tag Macro

    16th November 2021 at 3:49am

    Example package.json for IIS

    28th March 2018 at 2:52pm
    {
        "name": "MyStuff",
        "description": "A description of this wiki",
        "dependencies": {
            "sax": "1.2.4",
            "tiddlywiki": "*"
        }
    }

    Example Table of Contents: Expandable

    21st February 2015 at 8:37pm

    <div class="tc-table-of-contents">
    <<toc-expandable "Contents">>
    </div>

    Example Table of Contents: Selectively Expandable

    21st February 2015 at 8:39pm

    <div class="tc-table-of-contents">
    <<toc-selective-expandable "Contents">>
    </div>

    Example Table of Contents: Selectively Expandable (custom icons)

    19th August 2022 at 8:10am

    Introduced in v5.2.4 It is possible to define the toc-open-icon and toc-closed-icon variable, to change the icons used by the toc macros. This setting works for all toc-macro variants

    <$let toc-open-icon="$:/core/images/fold-button" toc-closed-icon="$:/core/images/folder">
    <div class="tc-table-of-contents">
    <<toc-selective-expandable "Contents">>
    </div>
    </$let>

    Example Table of Contents: Simple

    21st February 2015 at 8:37pm

    <div class="tc-table-of-contents">
    <<toc "Contents">>
    </div>

    Example Table of Contents: Sorted Expandable

    21st February 2015 at 8:39pm

    <div class="tc-table-of-contents">
    <<toc-expandable "Contents" "sort[title]">>
    </div>

    Example Table of Contents: Tabbed External

    21st February 2015 at 9:00pm

    <$macrocall
    	$name="toc-tabbed-external-nav"
    	tag="TableOfContents"
    	selectedTiddler="$:/temp/toc/selectedTiddler"
    	unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>"
    	missingText="<p>Missing tiddler.</p>"
    />

    Example Table of Contents: Tabbed Internal

    21st February 2015 at 9:00pm

    <$macrocall
    	$name="toc-tabbed-internal-nav"
    	tag="TableOfContents"
    	selectedTiddler="$:/temp/toc/selectedTiddler"
    	unselectedText="<p>Select a topic in the table of contents. Click the arrow to expand a topic.</p>"
    	missingText="<p>Missing tiddler.</p>"
    />

    Example tiddlywiki.info for IIS

    28th March 2018 at 3:12pm
    {
    	"description": "My wiki",
    	"plugins": [
    		"tiddlywiki/tiddlyweb",
    		"tiddlywiki/filesystem"
    	],
    	"themes": [
    		"tiddlywiki/vanilla",
    		"tiddlywiki/snowwhite"
    	]
    }
    

    Example web.config for IIS

    1st July 2018 at 6:52pm
    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
        <system.webServer>
            <handlers>
                <add 
                    name="httpplatformhandler"
                    path="*"
                    verb="*"
                    modules="httpPlatformHandler"
                    resourceType="Unspecified"
                    requireAccess="Script" />
            </handlers>
            <httpPlatform 
               stdoutLogEnabled="true"
               stdoutLogFile=".\node.log"
               startupTimeLimit="20"
               processPath="C:\Program Files\nodejs\node.exe"
               arguments=".\node_modules\tiddlywiki\tiddlywiki.js ./wiki --listen port=PORT path-prefix=/MyApp">
                <environmentVariables>
                    <environmentVariable name="PORT" value="%HTTP_PLATFORM_PORT%" />
                    <environmentVariable name="NODE_ENV" value="Production" />
                </environmentVariables>            
            </httpPlatform>
        </system.webServer>
    </configuration>
    

    Examples

    2nd June 2016 at 5:27pm

    This collection showcases inspiring and interesting examples of TiddlyWiki being used in the wild. Submit new entries to this collection via GitHub or by posting in the TiddlyWiki Groups.

    Except Filter Run Prefix

    22nd March 2023 at 2:06pm
    purposeif output titles of this filter run are contained in the output of previous filter runs, they are removed, and otherwise ignored
    inputall titles from previous filter runs
    outputoutput titles are removed from the filter's output (if such tiddlers exist)
    Introduced in v5.1.23
    :exceptrun

    This prefix has a Shortcut Filter Run Prefix symbol -run

    exponential Operator

    11th June 2019 at 3:45pm
    purposeconvert each number to exponential notation with N digits
    inputa selection of titles
    parameterN=a number
    outputthe input as numbers converted to exponential notation with N digits

    Learn more about how to use Filters

    Introduced in v5.1.20 See Mathematics Operators for an overview.

    The exponential operator returns a string representation of the input number in exponential notation with the specified number of digits. If a number has more digits than requested, the number is rounded to the nearest number represented by the specified number of digits

    Examples

    exponential Operator (Examples)

    11th June 2019 at 3:45pm

    123456789 +[exponential[4]]

    123456789 +[exponential[13]]

    1.23E23 +[exponential[90]]

    Extended Listops Filters

    27th February 2023 at 5:55pm

    Introduction

    A number of filters are used to manipulate lists.

    Some filters are designed to move items from the tail of the list and insert them at specified locations in the list, e.g. putafter or putbefore. Items are often appended to the list before using these filters. In general, these filters accept a suffix specifying the number of items to move (default to 1.)

    Some filters are designed to either add or remove from the list, a selected range of items from an array, e.g. append or remove. These filters are best used with a reference to an array, stored in a field or data index elsewhere in the wiki (they may be used with a simple list of items, provided the items do not include white space.) In general, these filters accept a suffix specifying the number of items to move (default to All.)

    Listops Operators
    Operator Purpose !
    allafter discard all items except those after the marker
    allbefore discard all items except those before the marker
    append append a range of items from an array to the list
    cycle toggle the titles specified in the first parameter in a cyclical manner
    insertafter insert an item T into a list immediately after an item A
    insertbefore insert an item T into a list immediately before an item B
    move move marker N places in the list
    prepend prepend a range of items from an array to the list
    putafter move N trailing items after the marker
    putbefore move N trailing items before the marker
    putfirst move N trailing items to the head of the list
    putlast move N leading items to the tail of the list
    remove remove a list of titles specified in the parameter from the input
    replace replace marker with N trailing items
    sortby sort the current list in the order of the list referenced in the parameter
    toggle toggle the title specified in the parameter in the input
    unique remove all duplicate items from the current list

    Examples

    In this example we shall populate the 'DataIndex' index of the tiddler 'MyData' with the names of the days of the week, then clear this list.

    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $filter="[list[Days of the Week]]"/>
    Get days-of-the-week
    </$button> 
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $filter="[[]]"/>
    Clear
    </$button>
    
    {{ListopsData}}

    That renders as:

    DataIndex: 
    


    In this example we shall slice the populated list from the 'DaysOfTheWeek' index of the tiddler 'MyData' in order to insert items before and after a marker item (Wednesday) that are first appended to the list.

    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="one two +[putbefore:2[Wednesday]]"/>
    Put 2 Items Before Wednesday
    </$button> 
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="four five +[putafter:2[Wednesday]] three +[putbefore[Wednesday]]"/>
    Put One Item Before & Two Items After Wednesday
    </$button>
    
    {{ListopsData}}

    That renders as:

    DataIndex: 
    


    In this example we shall slice the populated list from the 'DaysOfTheWeek' index of the tiddler 'MyData' in order to replace the marker item (Wednesday) with items which are first appended to the list. We shall then move 3 items to the head of the list which have first been appended to the list from referenced fields.

    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="[[---o]] [[o---]] +[replace:2{!!marker}]"/>
    Replace '!!marker' with 2 Items
    </$button>
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="[{!!item1}] [{!!item2}] [{!!item3}] +[putfirst:3[]]"/>
    Put 3 Items First
    </$button>
    
    {{ListopsData}}

    That renders as:

    DataIndex: 
    


    In this example we shall slice the populated list from the 'DaysOfTheWeek' index of the tiddler 'MyData' in order to append to the truncated list, items from a referenced field. We shall then remove the first two of the items added.

    |list: |<$view field="list"/> |
    
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[allbefore:include[Wednesday]] +[prepend{!!list}]"/>
    Prepend '!!list' to items before 'Wednesday'
    </$button> 
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[remove:2{!!list}]"/>
    Remove first two items in '!!list' from current list
    </$button>
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[!remove:1{!!list}]"/>
    Remove last item in '!!list' from current list
    </$button>
    
    {{ListopsData}}

    That renders as:

    list:Yesterday Today Tomorrow

    DataIndex: 
    


    In this example we shall populate the list with numbers, then move items one by one from the head to the tail and from the tail to the head (best seen by clicking the lower buttons several times.)

    This example illustrates that the append[] and prepend[] operators do not enforce unique instances of an item and that, with the next run, any duplicates are removed.

    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $filter="[[]]" $subfilter="+[append:3{!!numbers}]"/>
    Setup some numbers
    </$button>
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[!append:6{!!numbers}]"/>
    Append more numbers
    </$button>
    
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[putfirst:2[]]"/>
    Move last 2 items to the head
    </$button>
    <$button>
    <$action-listops $tiddler="ListopsData" $index="DataIndex" $subfilter="+[putlast[]]"/>
    Move the head to the last item
    </$button>
    
    {{ListopsData}}

    That renders as:

    DataIndex: 
    

    External Attachments Plugin

    31st October 2017 at 5:24pm

    ExternalImages

    17th February 2025 at 3:48pm

    External images in TiddlyWiki are tiddlers that point to the URI of an image, rather than embedding the full image data. They can perform better than embedded images, particularly with large numbers or sizes of images. However, using them breaks the single file pattern of TiddlyWiki.

    External images are used in the browser. They can be created by the Node.js configuration when it builds a TiddlyWiki, or they can be created manually within the browser.

    What is an External Image

    An external image is an ordinary image tiddler that has a _canonical_uri field containing the URI of the image. The URI can be absolute or relative to the HTML document. If the canonical URI is provided then the text field of the tiddler is ignored and so should be omitted.

    Manually Creating External Images

    To manually create an external image just create the tiddler with the appropriate image content type, and add a _canonical_uri field with a URI pointing to the actual image location.

    IMPORTANT: Double-check your spelling. _canonical_uri is spelled URI, not URL.

    Creating external images under Node.js

    The following steps are used to create a static HTML file version of a wiki accompanied by an images folder containing the referenced external images:

    1. Create image tiddlers in your TiddlyWikiFolders in the usual way
    2. Save the images as separate files (by convention, in a subfolder named /images)
    3. Externalise the image tiddlers by giving them a _canonical_uri field
    4. Save the main HTML file

    Note the image files must be saved before they are externalised. Externalising them destroys the text field within the in-memory copy of the wiki store, meaning that attempts to save them will fail.

    External Image Configuration

    For an example create an externalimages build target in a tiddlywiki.info file:

    "build": {
    	"externalimages": [
    		--save [is[image]] images
    		--setfield [is[image]] _canonical_uri $:/core/templates/canonical-uri-external-image text/plain
    		--setfield [is[image]] text "" text/plain
    		--render $:/core/save/all externalimages.html text/plain
    	]
    }

    Externalising Image Tiddlers

    The following --save command (see SaveCommand) can be used to save the images of a wiki into an images subfolder:

    --save [is[image]] images

    Two --setfield commands are used: the first sets the _canonical_uri field to a URI derived from the title of the tiddler, and the second clears the text field.

    --setfield [is[image]] _canonical_uri $:/core/templates/canonical-uri-external-image text/plain
    --setfield [is[image]] text "" text/plain

    The template tiddler $:/core/templates/canonical-uri-external-image contains:

    <!--
    
    This template is used to assign the ''_canonical_uri'' field to external images.
    
    Change the `./images/` part to a different base URI. The URI can be relative or absolute.
    
    -->
    ./images/<$view field="title" format="doubleurlencoded"/>

    Note that these operations modify the tiddlers in the wiki store and so may affect the operation of subsequent commands.

    Node.js Command to Build External Images

    The following command will create external images in the myWiki/output folder.

    tiddlywiki myWiki --build externalimages

    On Windows the following command will create external images that are part of the tw5.com edition. The files will be created in the output directory.

    tiddlywiki .\editions\tw5.com --build index

    Using External Images

    You can't edit an external image directly in the browser except by changing the URI field to point to a different image.

    Favicon template.svg

    Favorites by Mohammad

    17th November 2020 at 3:59pm

    Favorites plugin is a set of tool for creating favorites (bookmarks) in Tiddlywiki. Each favorite item is a shortcut to a tiddler.

    https://kookma.github.io/TW-Favorites/

    A favorite item also called a bookmark is a shortcut, you are creating for quick access to it. You can access that bookmark at any time and view that as many times as you want without having to search and find it again.

    The Favorites plugin contains three modes

    • flat mode: one favorite list, no folder
    • structured mode: use folder, search tool, export and delete tool
    • frozen list: read only, simple table of content style

    Features

    7th January 2016 at 10:58pm

    FetchCommand

    18th February 2017 at 1:15pm

    Fetch one or more files over HTTP/HTTPS, and import the tiddlers matching a filter, optionally transforming the incoming titles.

    --fetch file <url> <import-filter> <transform-filter>
    --fetch files <url-filter> <import-filter> <transform-filter>
    --fetch raw-file <url> <transform-filter>
    --fetch raw-files <url-filter> <transform-filter>

    The "file" and "files" variants fetch the specified files and attempt to import the tiddlers within them (the same processing as if the files were dragged into the browser window). The "raw-file" and "raw-files" variants fetch the specified files and then store the raw file data in tiddlers, without applying the import logic.

    With the "file" and "raw-file" variants only a single file is fetched and the first parameter is the URL of the file to read.

    With the "files" and "raw-files" variants, multiple files are fetched and the first parameter is a filter yielding a list of URLs of the files to read. For example, given a set of tiddlers tagged "remote-server" that have a field "url" the filter [tag[remote-server]get[url]] will retrieve all the available URLs.

    For the "file" and "files" variants, the <import-filter> parameter specifies a filter determining which tiddlers are imported. It defaults to [all[tiddlers]] if not provided.

    For all variants, the <transform-filter> parameter specifies an optional filter that transforms the titles of the imported tiddlers. For example, [addprefix[$:/myimports/]] would add the prefix $:/myimports/ to each title.

    Preceding the --fetch command with --verbose will output progress information during the import.

    Note that TiddlyWiki will not fetch an older version of an already loaded plugin.

    The following example retrieves all the non-system tiddlers from https://tiddlywiki.com and saves them to a JSON file:

    tiddlywiki --verbose --fetch file "https://tiddlywiki.com/" "[!is[system]]" "" --rendertiddler "$:/core/templates/exporters/JsonFile" output.json text/plain "" exportFilter "[!is[system]]"

    The following example retrieves the "favicon" file from tiddlywiki.com and saves it in a file called "output.ico". Note that the intermediate tiddler "Icon Tiddler" is quoted in the "–fetch" command because it is being used as a transformation filter to replace the default title, while there are no quotes for the "–savetiddler" command because it is being used directly as a title.

    tiddlywiki --verbose --fetch raw-file "https://tiddlywiki.com/favicon.ico" "[[Icon Tiddler]]" --savetiddler "Icon Tiddler" output.ico

    Field Editor Cascade

    5th March 2022 at 5:39pm

    The field editor cascade is a cascade used to choose a template for rendering the field editor within the EditTemplate.

    The core field editor cascade can be found in $:/core/ui/EditTemplate/fields

    The default field editor cascade only contains one element:

    1. Use the tiddler $:/core/ui/EditTemplate/fieldEditor/default to render the field

    See Customizing EditTemplate field rendering for more details.

    You can see the current settings for the field editor cascade in $:/ControlPanel under the Info -> Advanced -> Cascades -> Field Editor tab.

      field Operator

      16th March 2023 at 11:19am
      purposefilter the input by field
      inputa selection of titles
      suffixF=the name of a field
      parameterS=a possible value of field F
      outputthose input tiddlers in which field F has the value S
      ! outputthose input tiddlers in which field F does not have the value S

      Learn more about how to use Filters

      If S is empty, field will match both of the following:

      • tiddlers that don't contain field F
      • tiddlers in which field F exists but has an empty value

      The syntax of a filter step treats any unrecognised filter operator as if it was the suffix to the field operator.

      Examples

      field Operator (Examples)

      18th January 2015 at 6:32pm

      [plugin-type[theme]author[JeremyRuston]]
      → themes authored by JeremyRuston

      FieldMangler Widget (Examples)

      6th July 2015 at 5:29pm

      
      <$fieldmangler>
      Add tag ''example'' to this tiddler (current)<$button message="tm-add-tag" param="example">{{$:/core/images/new-button}}</$button>
      <br>
      Remove tag ''example'' to this tiddler (current)<$button message="tm-remove-tag" param="example">{{$:/core/images/delete-button}}</$button>
      </$fieldmangler>
      

      
      <$fieldmangler tiddler="Hello World">
      Add tag ''example'' to the Hello World tiddler<$button message="tm-add-tag" param="example">{{$:/core/images/new-button}}</$button>
      <br>
      Remove tag ''example'' to the Hello World tiddler<$button message="tm-remove-tag" param="example">{{$:/core/images/delete-button}}</$button>
      </$fieldmangler>
      

      FieldManglerWidget

      9th October 2021 at 12:28pm

      Introduction

      The field mangler widget manipulates the fields and tags of a tiddler. It does so in response to the following Messages:

      MessageDescription
      tm-remove-fieldRemove the field specified in event.param
      tm-add-fieldAdd the field specified in event.param
      tm-remove-tagRemove the tag specified in event.param
      tm-add-tagAdd the tag specified in event.param

      Content and Attributes

      The field mangler widget displays any contained content, and responds to Messages dispatched within it.

      AttributeDescription
      tiddlerTitle of the tiddler to manipulate (defaults to the current tiddler)

      Examples

      fields Operator

      29th January 2020 at 4:50pm
      purposeselect all field names of the input titles
      inputa selection of titles
      suffixIntroduced in v5.1.22 optional: include, exclude parameter list
      parameterIntroduced in v5.1.22 optional: a list of field names
      outputall the field names contained in the input tiddlers

      Learn more about how to use Filters

      Each input title is processed in turn. Its list of field names is retrieved (in no particular order) and then dominantly appended to the operator's output.

      Introduced in v5.1.22 If the include suffix is used, fields are only included, if they exist. It doesn't matter, if fields have a value. The exclude suffix is there for convenience, since it would be possible to use a second filter run. For more info see the examples.

      Examples

      fields Operator (Examples)

      29th January 2020 at 4:56pm

      [[HelloThere]fields:include[list title text non-existing]]
      → fields of HelloThere using a "short list" of fields. Fields are only shown, if they exist

      [[HelloThere]fields:include[list title text]sortby[title list text]]
      → fields of HelloThere special sorting

      [[HelloThere]fields:exclude[list title text]]
      → fields of HelloThere using the exclude suffix

      [[HelloThere]fields[]] -list -title -text
      → fields of HelloThere, using several filter runs instead of exclude suffix

      [tag[Common Operators]fields[]]
      → fields of all tiddlers tagged as Common Operators

      FieldsWidget

      20th February 2015 at 4:12pm

      Introduction

      The fields widget renders each field of a specified tiddler through a simple text template. A list of fields to exclude can be provided. It is used internally by TiddlyWiki5, notably by the FileSavingMechanism.

      Template Handling

      The provided template is rendered with the following special substitutions:

      SymbolSubstitution
      $name$Field name
      $value$Field value
      $encoded_value$HTML encoded form of field value

      Content and Attributes

      The content of the <$fields> widget is ignored.

      AttributeDescription
      tiddlerTitle of the tiddler from which the fields are to be displayed (defaults to the current tiddler)
      templateText of the template (see above)
      excludeLists of fields to be excluded (defaults to "text")
      includeLists of fields to be included, if the field exists. This parameter takes precedence over "exclude"
      sortSorts the fields by name (defaults to "yes"). Set to "no", if "include" order should be retained!
      sortReverseReverses the sort order
      stripTitlePrefixIf set to "yes" then curly bracketed prefixes are removed from titles (for example {prefix}HelloThere converts to HelloThere)

      The stripTitlePrefix attribute is used when building TiddlyWiki Classic; see editions/tw2 in the TiddlyWiki5 repo.

      FillWidget

      11th May 2023 at 12:34pm

      Introduction

      New in v5.3.0 The $fill widget is used within a $transclude widget to specify the content that should be copied to the named "slot". Slots are defined by the $slot widget within the transcluded content.

      See the $transclude widget for details and an example. More examples can be found in the $slot widget documentation.

      Attributes

      The content of the $fill widget is used as the content to be passed to the transclusion.

      AttributeDescription
      $nameThe name of the slot to be filled

      Warning
      The $name attribute must be specified as a literal string

      Filter Expression

      10th July 2023 at 7:45am

      A filter expression is the outermost level of the filter syntax. It consists of filter runs with optional filter run prefixes. Multiple filter runs are separated by whitespace.

      prefixrunwhitespace

      Tip
      If the diagram has a single start and end line, as shown above, it means there is more info in the linked level above. The breadcrumbs can be used to navigate

      Tip
      If the diagram has no start and no end, as used in lower levels, it means that higher level syntax elements have been removed, to increase readability and simplicity. The breadcrumbs can be used to navigate

      Filter Filter Run Prefix

      10th July 2023 at 7:33am
      purposeremove every input title for which the filter run output is an empty list
      inputthe filter output of all previous runs so far
      outputthe input titles for which the filter run is not empty
      Introduced in v5.1.23
      :filterrun

      It receives the filter output so far as its input. The next run is evaluated for each title of the input, removing every input title for which the output is an empty list.

      Note that within the filter run, the currentTiddler variable is set to the title of the tiddler being processed. This permits filter runs like :filter[{!!price}multiply{!!cost}compare:integer:gteq[5]] to be used for computation. The value of currentTiddler outside the run is available in the variable ..currentTiddler.

      The following variables are available within the filter run:

      • currentTiddler - the input title
      • ..currentTiddler - the value of the variable currentTiddler outside the filter run.
      • index - Introduced in v5.2.1 the numeric index of the current list item (with zero being the first item in the list).
      • revIndex - Introduced in v5.2.1 the reverse numeric index of the current list item (with zero being the last item in the list).
      • length - Introduced in v5.2.1 the total length of the input list.

      Tip
      Compare named filter run prefix :filter with filter Operator which applies a subfilter to every input title, removing the titles that return an empty result from the subfilter

      Filter Filter Run Prefix (Examples)

      Filter Filter Run Prefix (Examples)

      5th March 2023 at 12:53pm

      [tag[HelloThere]] :filter[get[text]length[]compare:integer:gteq[1000]]

      [tag[HelloThere]] :filter[get[text]length[]compare:integer:lteq[2000]]

      [tag[HelloThere]] :filter[get[text]length[]compare:integer:gteq[1000]] :filter[get[text]length[]compare:integer:lteq[2000]]

      [tag[Features]] :filter[links[]!is[shadow]is[missing]]

      A B C D E F :filter[<index>remainder[2]compare:integer:eq[0]]
      → Return every other element of the input list

      [tag[shopping]] :filter[{!!quantity}compare:integer:gt[4]] :map[addprefix[ ]addprefix{!!quantity}]

      [tag[shopping]] :filter[{!!quantity}compare:integer:lteq[4]] :map[addprefix[ ]addprefix{!!quantity}]

      Comparison between :filter and :and/+ filter run prefixes

      The functionality of the :filter filter run prefix has some overlap with the :and prefix (alias +). Notice the filter expressions above all have the following two properties:

      1. The start of the filter expression transforms the input titles (i.e. get[text]length[], links[], <index>remainder[2], {!!quantity}.
      2. The end of the filter expression only sends input items to the output if they meet some condition (i.e. compare, is).

      The purpose of the :filter prefix is to return the original input titles despite property #1 causing those input titles to be transformed. That way, the "meet some condition" check can be performed on something other than the original input. If some filter expression does not require property #1, then the :and prefix can be used instead.

      :filter:and
      [tag[HelloThere]] :filter[get[text]length[]compare:integer:gteq[1000]]
      [tag[HelloThere]] :and[get[text]length[]compare:integer:gteq[1000]]
      [tag[Features]] :filter[links[]!is[shadow]is[missing]]
      [tag[Features]] :and[links[]!is[shadow]is[missing]]
      results are the same
      cat can bat bug :filter[suffix[at]minlength[3]]
      cat can bat bug :and[suffix[at]minlength[3]]

      filter Operator

      22nd May 2021 at 4:25pm
      purposeapply a subfilter to each input title and return the titles that return a non-empty result from the subfilter
      inputa selection of titles passed as input to the filter
      ! inputa selection of titles passed as input to the filter
      parameterS=a filter expression
      outputthe selection of titles that pass the filter S
      ! outputthose input titles that do not pass the filter S

      Learn more about how to use Filters

      Introduced in v5.1.23 The filter operator runs a subfilter for each input title, and returns those input titles for which the subfilter returns a non-empty result (in other words the result is not an empty list). The results of the subfilter are thrown away.

      Simple filter operations can be concatenated together directly (eg [tag[HelloThere]search[po]]) but this doesn't work when the filtering operations require intermediate results to be computed. The filter operator can be used to filter on an intermediate result which is discarded. To take the same example but to also filter by those tiddlers whose text field is longer than 1000 characters:

      <$vars myfilter="[get[text]length[]compare:integer:gteq[1000]]">
      <$list filter="[tag[HelloThere]search[po]filter<myfilter>]">
      <div>
      <$link>
      <$text text=<<currentTiddler>>/>
      </$link>
      </div>
      </$list>
      </$vars>

      Note that within the subfilter, the "currentTiddler" variable is set to the title of the tiddler being processed. The value of currentTiddler outside the subfilter is available in the variable "..currentTiddler". Introduced in v5.2.0

      Tip
      Compare with the similar subfilter operator which runs a subfilter and directly returns the results

      Tip
      Compare with the analogous named filter run prefix :filter

      \define larger-than-1k() [get[text]length[]compare:integer:gteq[1000]]
      
      {{{ [tag[HelloThere]filter<larger-than-1k>] }}}

      is equivalent to:

      {{{ [tag[HelloThere]] :filter[get[text]length[]compare:integer:gteq[1000]] }}}

      Examples

      filter Operator (Examples)

      4th October 2020 at 2:33pm

      These examples use the following predefined variables:

      • larger-than-1k: [get[text]length[]compare:integer:gteq[1000]]
      • smaller-than-2k: [get[text]length[]compare:integer:lteq[2000]]
      • contains-missing-links: [links[]!is[shadow]is[missing]]

      [tag[HelloThere]filter<larger-than-1k>]

      [tag[HelloThere]filter<smaller-than-2k>]

      [tag[HelloThere]filter<larger-than-1k>filter<smaller-than-2k>]

      [tag[Features]filter<contains-missing-links>]

      Filter Operators

      2nd March 2025 at 8:06pm

      A filter operator is a predefined keyword attached to an individual step of a filter. It defines the particular action of that step.

      Important
      In general, each first filter step of a filter run not given any input titles receives the output of [all[tiddlers]] as its input.

      Table legend:

      ...Used to mark the most common ones
      !...The column indicates whether an operator allows negation using the ! prefix.
      For specifics as to each operator's negated output please refer to its documentation
      C...Most steps process the selection of titles that are supplied as their input, but a few construct an entirely new selection instead, as indicated by the last column.
      A C? indicates it might construct a new selection, depending on usage. For specifics as to each operator's selection creation please refer to its documentation

      The following table lists all core operators:

      Operator Purpose ! C
      all find all titles of a fundamental category C?
      backlinks find the titles that link to each input title
      backtranscludes find the titles that transclude each input title
      charcode generates string characters from their numeric character codes
      contains filter the input by searching list fields for a value !
      count count the number of entries in a list
      days filter the input by date !
      duplicateslugs find titles that yield duplicate slugs
      each select one of each group of input titles by field
      eachday select one of each group of input titles by date
      else if the list of input titles is empty then return a list consisting of a single constant string, otherwise return the original titles
      enlist select titles from the parameter interpreted as a title list ! C
      field filter the input by field !
      fields select all field names of the input titles
      filter apply a subfilter to each input title and return the titles that return a non-empty result from the subfilter !
      function apply a function to the input list, and return the result
      get select all values of a field in the input titles
      getindex select all values of a data property in the input titles
      has filter the input by field existence !
      haschanged filter the input by tiddler modification status !
      indexes select all data properties of the input titles
      is filter the input by fundamental category !
      join join a list of strings together with the separator S
      jsonextract retrieve the JSON string of a property from JSON strings
      jsonget retrieve the value of a property from JSON strings
      jsonindexes retrieve the value of a property from JSON strings
      jsonset set the value of a property in JSON objects
      jsontype retrieve the type of a property from JSON strings
      length returns the number of characters of each item in the list
      links find the titles linked to by each input title
      list select titles via a list field ! C
      listed find the titles that list the input titles
      lookup applies a prefix to each input title to yield the title of a tiddler from which the final value is retrieved. With a single parameter, the default field is "text" and the default index is "0". If a second parameter is provided, that becomes the target field or index.
      lowercase returns each item in the list as lowercase
      match returns each item in the list that matches the parameter string
      minlength filter items whose length is greater than or equal to the specified minimum length
      range generate a range of numbers ! C
      reduce apply a subfilter to each input title in turn, accumulating a single value
      regexp filter the input by pattern-matched field !
      sameday filter the input by date
      search filter the input by searching tiddler content !
      sentencecase returns each item in the list with the first letter capitalised
      slugify returns each item in the list in a human-readable form for use in URLs or filenames
      split returns each item in the list split into separate strings according to the specified separator S; duplicates are not removed
      splitregexp returns each item in the list split into separate strings according to the specified regular expression R
      subfilter select titles from the parameter interpreted as a filter expression ! C?
      then replace input titles by a constant string
      title select a single title ! C
      titlecase returns each item in the list with each word capitalised
      transcludes find the titles transcluded by each input title
      uppercase returns each item in the list as uppercase
      Order Operators
      after find which input title follows a specified one
      before find which input title precedes a specified one
      bf same as rest
      butfirst same as rest
      butlast discard the last N input titles
      first select the first N input titles
      last select the last N input titles
      limit select the first or last N input titles !
      next find which titles in a list field follow the input ones
      nsort sort the input by number field !
      nsortcs sort the input titles by number field, treating upper and lower case as different !
      nth select the Nth input title
      order selectively reverse the input list
      previous find which titles in a list field precede the input ones
      rest discard the first N input titles
      reverse reverse the order of the input titles
      sort sort the input by text field !
      sortan sort the input by text field considering them as alphanumerics !
      sortcs sort the input by text field, treating upper and lower case as different !
      sortsub sort the input by the result of evaluating a subfilter for each item !
      zth select the Zth input title
      Listops Operators
      allafter discard all items except those after the marker
      allbefore discard all items except those before the marker
      append append a range of items from an array to the list
      cycle toggle the titles specified in the first parameter in a cyclical manner
      insertafter insert an item T into a list immediately after an item A
      insertbefore insert an item T into a list immediately before an item B
      move move marker N places in the list
      prepend prepend a range of items from an array to the list
      putafter move N trailing items after the marker
      putbefore move N trailing items before the marker
      putfirst move N trailing items to the head of the list
      putlast move N leading items to the tail of the list
      remove remove a list of titles specified in the parameter from the input
      replace replace marker with N trailing items
      sortby sort the current list in the order of the list referenced in the parameter
      toggle toggle the title specified in the parameter in the input
      unique remove all duplicate items from the current list
      String Operators
      addprefix extend each input title with a prefix
      addsuffix extend each input title with a suffix
      applypatches applies a set of patches to transform the input
      compare filter the input by comparing each item against the parameter !
      decodebase64 apply base 64 decoding to a string
      decodehtml apply HTML decoding to a string
      decodeuri apply URI decoding to a string
      decodeuricomponent apply URI component decoding to a string
      encodebase64 apply base 64 encoding to a string
      encodehtml apply HTML encoding to a string
      encodeuri apply URI encoding to a string
      encodeuricomponent apply URI component encoding to a string
      enlist-input select titles by interpreting each input title as a title list
      escapecss apply CSS escaping to a selection of titles through the CSS.escape() method / operation
      escaperegexp escape special characters used in regular expressions
      format format the input string according to one of supported formats
      jsonstringify apply JSON string encoding to a string, see also the similar stringify
      levenshtein determine the Levenshtein distance of the input title(s) and a given string
      makepatches returns a set of patches that transform the input to a given string
      pad returns each item in the list padded to the specified length
      prefix filter the input titles by how they start !
      removeprefix filter the input titles by how they start, deleting that prefix
      removesuffix filter the input titles by how they end, deleting that suffix
      search-replace returns each item in the list, replacing within each title the string specified by the first parameter with the second parameter
      sha256 apply sha256 hash to a string
      splitbefore select a delimited prefix from each input title
      stringify apply JavaScript string encoding to a string, see also the similar jsonstringify
      substitute returns each item in the list, replacing within each title placeholders for filters, parameters and variables with their corresponding values
      suffix filter the input titles by how they end !
      trim returns each item in the list with whitespace, or a given character string, trimmed from the start and/or end
      Mathematics Operators
      abs calculate the absolute value of a list of numbers
      acos calculate the arccosine value (in radians) of a list of numbers
      add treating each input title as a number, add to each the numeric value of the parameter
      asin calculate the arcsine value (in radians) of a list of numbers
      atan calculate the arctangent value (in radians) of a list of numbers
      atan2 returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for [Y]atan2[X]
      average treating each input title as a number, compute their arithmetic mean
      ceil rounds a list of numbers up to the next largest integer
      compare filter the input by comparing each item against the parameter !
      cos calculate the cosine value of a list of angles (given in radians)
      divide treating each input title as a number, divide it by the numeric value of the parameter
      exponential convert each number to exponential notation with N digits
      fixed convert each number to fixed point notation with N digits after the decimal point
      floor rounds a list of numbers to the largest integer less than or equal to each number
      log treating each input title as a number, return its logarithm with base equal to the numeric value of the parameter if specified, otherwise base e
      max treating each input title as a number, take the maximum of its value and the numeric value of the parameter
      maxall find the largest of a list of numbers
      median treating each input title as a number, compute their median value
      min treating each input title as a number, take the minimum of its value and the numeric value of the parameter
      minall find the smallest of a list of numbers
      multiply treating each input title as a number, multiply it by the numeric value of the parameter
      negate calculate the negation of a list of numbers
      power treating each input title as a number, raise it to the power of the numeric value of the parameter
      precision convert each number to a string with N significant digits
      product produce the product of the input numbers
      remainder treating each input title as a number, return the remainder when divided by the numeric value of the parameter
      round rounds a list of numbers to the nearest integer
      sign return -1, 0 or 1 for a list of numbers according to whether each number is negative, zero, or positive
      sin calculate the sine value of a list of angles (given in radians)
      standard-deviation treating each input title as a number, compute their standard-deviation
      subtract treating each input title as a number, subtract from each the numeric value of the parameter
      sum produce the sum of the input numbers
      tan calculate the tangent value of a list of angles (given in radians)
      trunc truncates a list of numbers to their integer part, removing any fractional part
      untrunc rounds a list of numbers to the next integer with largest absolute value, that is, away from zero
      variance treating each input title as a number, compute their variance
      Tag Operators
      tag filter the input by tag !
      tagging find the tiddlers that have the input tags
      tags select all tags of the input tiddlers
      untagged discard any input titles that have tags !
      Special Operators
      commands select the titles of all the Node.js commands C
      deserialize extract JSON representation of tiddlers from the input strings
      deserializers C
      editiondescription select the descriptions of the input editions
      editions select the names of all the TiddlyWiki editions C
      getvariable select all values of variables named in the input titles
      modulesproperty retrieve a module property
      modules select the names of all modules of the input module types
      moduletypes select the names of all TiddlyWiki module types C
      plugintiddlers select all shadow titles in the input plugins
      shadowsource select the plugin titles that contain the input shadows
      storyviews select the names of all the story views C
      subtiddlerfields select all fields present in the selected tiddlers within a plugin
      variables select the names of all the actively defined variables C

      A typical step is written as [operator[parameter]], although not all of the operators need a parameter.

      For the exact rules, see Filter Syntax.

      Filter Parameter

      8th July 2024 at 8:22pm
      [hardanything but ]]{indirectanything but }}<variableanything but >>

      The parameter to a filter operator can be:

      hard
      [like this]
      The parameter is the exact text that appears between the square brackets.
      soft
      indirect
      {like this}
      The parameter is the text indicated by the text reference whose name appears between the curly brackets, i.e. a field of a specified tiddler, or the value of a property of a specified data tiddler.
      variable
      <like this>
      The parameter is the current value of the variable whose name appears between the angle brackets. Macro parameters are not supported up to v5.2.0
      Introduced in v5.2.0 Literal macro parameters are supported. For example: [<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>].

      Note
      Every filter Operator must be followed by a parameter expression. In the case of Operators without parameters, that expression is empty, as with the filter Operator links in [<currentTiddler>links[]].


      Introduced in v5.1.23 Filter Steps support multiple parameters which are separated by a , character.

      For example: [param1],[param2] or <param1>,{param2}

      Filter Run

      10th July 2023 at 7:43am
      [Filter Step]anything but [ ] or whitespace"anything but ""'anything but ''

      A run consists of steps, and it outputs a selection that contributes to a larger filter expression.

      The steps are processed from left to right. The input to the first step is same as the input to the run. For each subsequent step, the input is the output of the previous step.

      The lower three options in the diagram match syntax like HelloThere, "HelloThere", 'HelloThere' and "Filter Operators". They are short for [title[...]].

      The quoted options exist to support titles that contain square brackets, as in "An [[[[Unusual]]]] Tiddler".

      Filter Run Prefix

      11th July 2023 at 9:09am

      Filter Run Prefix (Examples)

      15th March 2023 at 3:28pm

      Filter Step

      31st July 2025 at 10:10am

      A filter step represents a single operation within a filter run.

      In programming terms, it is akin to a function call to which the step's input is passed as a parameter. A step's output is a title selection that contributes to a filter run and hence to the entire filter expression that contains it.

      !if omitted, defaults to: titleoperator:suffixparameter,

      The step's operator is drawn from a list of predefined keywoards which are known as filter operators.

      Many steps require an explicit parameter, that further defines what the step is to do.

      The suffix is additional text, often the name of a field, that extends the meaning of certain operators.

      If a step's operator and suffix are omitted altogether, it defaults to the title operator.

      Introduced in v5.1.23 Some steps accept multiple parameters which are separated by a , character.

      Any unrecognised operator is treated as if it was the suffix to the field operator.

      Filter operators can be extended by plugins.

      The output of a Filter Step depends on its operator:

      • Most operators derive their output from their input. For example, many of them output a subset of their input, and thus truly live up to the name of "filters", narrowing down the overall output of the containing run. These operators are called selection modifiers.
      • A few operators ignore their input and generate an independent output instead. These are called selection constructors: they construct an entirely new selection.

      A good example of a constructor is title. The output of [title[A]title[B]] is just B. But the field operator is a modifier, so [title[A]field:title[B] outputs nothing at all.

      The following filter Operators are tagged :

      Filter Syntax

      10th July 2023 at 7:43am

      Filters follow a grammar that is presented here, using railroad diagrams, for those who find formal syntax descriptions helpful. However, you can learn to write filters without needing to understand this group of tiddlers.

      A filter is a pipeline for transforming an input into an output. Both the input and the output are ordered sets of titles of tiddlers and fields.

      Filters are expressions constructed from smaller building blocks, called runs, which are built using steps. Each of which also transforms an input to an output.

      A filter starts with an empty output. Its runs are processed from left to right, progressively modifying the output.

      The "Filter Syntax" description starts with:

      Filter Expression

      Tip
      The railroad boxes as the one above can be used to navigate

      Filter Syntax History

      Jeremy Ruston31st July 2025 at 4:25pm

      In response to a discussion about the filter syntax in TiddlyWiki5 I posted this brief personal history.

      For context, before TiddlyWiki, I only had practical experience of a very small number of languages: machine code, assembly language, BASIC, FORTH, C, C++ and of course JavaScript. I had a smattering of Java, Pascal and one or two other ancient languages but no experience of actor based languages like Erlang, or modern functional languages.

      The story starts with the double square bracket syntax used in wikitext for links. In 2004 this was already an established usage in wikis. However, I switched the ordering of pretty links because I thought Wikipedia's [[link address|link text]] was the wrong way around. It broke up sentences: The file is [[https://site.com/thing|here]] seems less readable than The file is [[here|https://site.com/thing]]. For a long time I regretted this decision, and wished that I had just gone with Wikipedia's established usage. Others have since pointed out that TiddlyWiki's ordering is actually consistent with Markdown, which might be regarded as the winner of the markup wars.

      I looked at the double square bracket link syntax is that it establishes a way to quote page/tiddler titles so that they may contain spaces, and don't have to use CamelCase. Thus, right at the start of TiddlyWiki Classic when I was implementing the first iteration of the DefaultTiddlers feature it was natural to use double square brackets to quote titles containing spaces, making a list of titles to be opened at startup.

      Soon, I wanted to extend the implementation of DefaultTiddlers so that it could be used to open all tiddlers with a particular tag while retaining backwards compatibility.

      A trick that I am apt to use in such situations is to try to engineer things so that the current behaviour is re-interpreted as a shortcut syntax for a new, richer syntax that provides more flexibility. In this case, the idea was that in filters we would interpret [[mytiddler]] as a shortcut for [title[mytiddler]]. Then we could put any keywords we like in place of "title", giving us an infinitely extensible syntax. A similar example is the way that we implemented filter run prefixes by retrospectively defining the absence of a prefix as implying a default prefix.

      The new syntax was first introduced in 2007, with a simplified syntax that only supported a single tag operator but was just about sufficient for intended purpose. The only documentation was a comment in the source code (complete with a typo):

      // Filter a list of tiddlers
      //#   filter - filter expression (eg "tidlertitle [[multi word tiddler title]] [tag[systemConfig]]")
      //# Returns an array of Tiddler() objects that match the filter expression

      Provision to combine the filter operators had been on my mind from the beginning. When TiddlyWiki 5 started in 2011 I reused the simple implementation from TiddlyWiki Classic. Smashing operators was finally implemented in May 2012. By the time of the launch the filter language had grown into pretty much what it is today – see the documentation for TiddlyWiki v5.1.0.

      The filter syntax had undoubtedly evolved into something approaching a programming language. As others have probably expressed much more eloquently, a characteristic of the programming languages that I love is that they start with a small number of principles that are consistently applied and combined. In the case of TiddlyWiki, the list would be very roughly:

      • Double square brackets for linking and quoting
      • Curly braces for transclusion
      • Angle brackets for macros (which evolved into variables)
      • Double exclamation marks to indicate fields {{!!myfield}}
      • Double hashes to indicate indexes {{##myindex}}
      • Smashing together adjacent filter operations by removing the combining ][
      • The dollar sign as a rough signifier of data owned by the system rather than the user

      As I have written about elsewhere I was privileged to know Joe Armstrong, the co-inventor of Erlang, in the last few years of his life – we were working together on a book about TiddlyWiki when he passed away in 2019. Joe had contacted me out of the blue ten years before to express his admiration for TiddlyWiki, and we had developed a friendship. He was actually a big fan of TW5's filter syntax, and used to make me feel better about it by joking that I had (re-)invented the monad, which sounded impressive to me. That doesn't make the filter language any easier to learn, but it does mean that it is *worth* learning: it's a real language, based on the same principles as other languages.

      I find it pleasing that the TW5 filter language has its roots in decisions that were taken in the TWC days. It's still hard to learn, but that's an ongoing paradox of programming: people want to do complicated things, and complicated things are complicated. It's hard to see how we could have made filters any simpler without depriving users of the possibility of doing complicated things.

      Filter Whitespace

      10th July 2023 at 7:44am

      Filtered Attribute Values

      15th June 2023 at 4:52am

      Filtered attribute values are indicated with triple curly braces around a Filter Expression. The value will be the first item in the resulting list, or the empty string if the list is empty.

      Introduced in v5.2.2 To improve readability, newlines can be included anywhere that whitespace is allowed within filtered attributes.

      This example shows how to add a prefix to a value:

      <$text text={{{ [<currentTiddler>addprefix[$:/myprefix/]] }}} />

      Warning
      The value of the attribute will be the exact text from the first item in the resulting list. Any wiki syntax in that text will be left as-is.

      Filters

      10th July 2023 at 7:45am

      You can think of TiddlyWiki as a database in which the records are tiddlers. A database typically provides a way of discovering which records match a given pattern, and in TiddlyWiki this is done with filters.

      A filter is a concise notation for selecting a particular set of tiddlers, known as its output. Whenever TiddlyWiki encounters a filter, it calculates the output. Further work can then be done with just those tiddlers, such as counting or listing them.

      The following example passes a filter to the list-links macro. It displays a list of all tiddlers using the tag "Filters":

      A filter output can change as tiddlers are added and deleted in the wiki. TiddlyWiki recalculates on the fly, automatically updating any filter-based counts or lists as well.

      Find out more:

      Find Out More

      15th November 2024 at 5:08pm

      First

      14th November 2021 at 1:36am

      This is an example tiddler. SeeTable-of-Contents Macros (Examples).

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      first Operator

      3rd February 2015 at 7:19pm
      purposeselect the first N input titles
      inputa selection of titles
      parameterN=an integer, defaulting to 1
      outputthe first N input titles

      Learn more about how to use Filters

      first Operator (Examples)

      18th January 2015 at 6:32pm

      These examples make use of the Days of the Week tiddler.

      [list[Days of the Week]first[]]

      [list[Days of the Week]first[5]]

      [tag[Filter Operators]!sort[title]first[]]

      FirstOne

      14th November 2021 at 1:36am

      This is an example tiddler. SeeTable-of-Contents Macros (Examples).

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      FirstThree

      14th November 2021 at 1:36am

      This is an example tiddler. SeeTable-of-Contents Macros (Examples).

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      FirstTwo

      14th November 2021 at 1:36am

      This is an example tiddler. SeeTable-of-Contents Macros (Examples).

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      fixed Operator

      11th June 2019 at 3:09pm
      purposeconvert each number to fixed point notation with N digits after the decimal point
      inputa selection of titles
      parameterN=a number
      outputthe input as numbers converted to fixed point notation with N digits after the decimal point

      Learn more about how to use Filters

      Introduced in v5.1.20 See Mathematics Operators for an overview.

      The fixed operator returns a string representation of the input number that does not use exponential notation and has exactly the specified number of digits after the decimal place. The number is rounded if necessary, and the fractional part is padded with zeros if necessary so that it has the specified length.

      Examples

      fixed Operator (Examples)

      11th June 2019 at 3:07pm

      10.123456789 +[fixed[5]]

      [[355]divide[113]fixed[7]]

      [[1]divide[2]fixed[3]]

      floor Operator

      13th June 2019 at 8:44am
      purposerounds a list of numbers to the largest integer less than or equal to each number
      inputa selection of titles
      outputrounds each of the input numbers to the largest integer less than or equal to the given number

      Learn more about how to use Filters

      floor Operator (Examples)

      13th June 2019 at 8:45am

      [[1.6]floor[]]

      [[-1.6]floor[]]

      =-1.2 =-2.4 =3.6 =4.8 =5.1 +[floor[]]

      format Operator

      21st March 2023 at 1:22pm
      purposeformat the input string according to one of supported formats
      inputa selection of titles
      suffixB=one of supported formats
      parameterC=optional format string for the formats
      outputinput strings formatted according to the specified suffix B

      Learn more about how to use Filters

      Introduced in v5.1.23

      The suffix B is one of the following supported string formats:

      FormatDescription
      dateThe input string is interpreted as a UTC date and displayed according to the DateFormat specified in the optional parameter C. (Defaults to "YYYY MM DD 0hh:0mm")
      jsonIntroduced in v5.2.4 The input string is interpreted as JSON and displayed with standard formatting. The optional parameter C specifies the number of spaces to use for indenting, or a string to use for indenting. Nothing is returned if the input string is not valid JSON
      relativedateThe input string is interpreted as a UTC date and displayed as the interval from the present instant. Any operator parameters C are ignored
      timestampNew in v5.3.0 The input string is interpreted as number of milliseconds since the ECMAScript epoch, 1 January 1970, and displayed according to the DateFormat specified in the optional operator parameter. (Defaults to "[UTC]YYYY0MM0DD0hh0mm0ss0XXX")
      titlelistIntroduced in v5.2.0 The input string wrapped in double square brackets if it contains a space. Appropriate for use in a title list.

      Invalid input strings are dropped by the format operator.

      Warning
      The Title List format cannot reliably represent items that contain certain specific character sequences such as ]] . Thus it should not be used where there is a possibility of such sequences occurring.

      Examples

      format Operator (Examples)

      26th February 2023 at 1:56pm

      These examples use the tiddler HelloThere.

      Created date with no format string specified:

      [[HelloThere]get[created]format:date[]]

      Created date with a format string supplied as operator parameter:

      [[HelloThere]get[created]format:date[DDth MMM YYYY]]

      Modified date shown as a relative date:

      [[HelloThere]get[modified]format:relativedate[]]

      Get the date and time exactly 24 hours (86,400,000 milliseconds) from now:

      [<now [UTC]YYYY0MM0DD0hh0mm0ss0XXX>format:date[TIMESTAMP]add[86400000]format:timestamp[DDth mmm YYYY 0hh:0mm:0ss]]

      A tiddler title with spaces formatted as a title list:

      [[Hello There]format:titlelist[]]

      All tiddler titles tagged with formatted as a title list:

      [tag[TableOfContents]format:titlelist[]]

      A JSON string formatted as JSON – note how the JSON string is normalised to remove the duplicated properties:

      [[{"one":"first","one":"another","two":"second"}]format:json[]]

      Tip
      To create a string to save a title list into a list field, use format:titlelist[] with the join operator

      [tag[TableOfContents]format:titlelist[]join[ ]]

      For example, to save titles tagged TableOfContents to the titles field of the tiddler format titlelist test:

      <$button>Try it
      <$action-setfield $tiddler="format titlelist test" titles={{{ [tag[TableOfContents]format:titlelist[]join[ ]] }}}/>
      </$button>

      That renders as:

      Formatting in WikiText

      3rd March 2023 at 9:54pm

      Overview

      Available character formatting in WikiText includes:

      WikitextButtonShortcutRendered Output
      Double single quotes are used for ''bold text''ctrl-BDouble single quotes are used for bold text
      Double slashes are used for //italic text//ctrl-IDouble slashes are used for italic text
      Double underscores are used for __underlined text__ctrl-UDouble underscores are used for underlined text
      Double circumflex accents are used for ^^superscripted^^ textctrl-shift-PDouble circumflex accents are used for superscripted text
      Double commas are used for ,,subscripted,, textctrl-shift-BDouble commas are used for subscripted text
      Double tilde signs are used for ~~strikethrough~~ textctrl-TDouble tilde signs are used for strikethrough text
      Single backticks are used for `code` ctrl-MSingle backticks are used for code
      Double @ characters are used to create a @@highlight@@--Double @ characters are used to create a highlight

      See Styles and Classes in WikiText for more formatting options

      Embedded Backticks

      WikitextRendered Output
      ``double backticks allows `embedded` backticks``double backticks allows `embedded` backticks

      Keyboard Shortcuts

      The full list of KeyboardShortcuts can be found in the $:/ControlPanel -> Keyboard Shortcuts tab.

      Semantic Information

      WikitextResulting HTML Code
      Double single quotes are used for ''bold text''Double single quotes are used for <strong>bold text</strong>
      Double slashes are used for //italic text//Double slashes are used for <em>italic text</em>
      Double underscores are used for __underlined text__Double underscores are used for <u>underlined text<u>
      Double circumflex accents are used for ^^superscripted^^ textDouble circumflex accents are used for <sup>superscripted</sup> text
      Double commas are used for ,,subscripted,, textDouble commas are used for <sub>subscripted</sub> text
      Double tilde signs are used for ~~strikethrough~~ textDouble tilde signs are used for <strike>strikethrough</strike> text
      Single backticks are used for `code` Single backticks are used for <code>code</code>
      Double @ characters are used to create a @@highlight@@Double @ characters are used to create a <span class="tc-inline-style">highlighted</span>

      Bold vs Strong

      In TW we use the term "bold" instead of "strong" because most users are used to it. ... The rendering process converts our "bold text" into the STRONG HTML element.

      The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.
      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#b_vs._strong

      Underline vs. Underscore

      Use underline to describe text formatting that puts a line under the characters. Use underscore to refer to the underscore character ( _ ).
      https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/u/underline-vs-underscore

      Emphasis vs Italics

      The <em> element represents stress emphasis of its contents, while the <i> element represents text that is set off from the normal prose, such as a foreign word, fictional character thoughts, or when the text refers to the definition of a word instead of representing its semantic meaning. (The title of a work, such as the name of a book or movie, should use <cite>.)
      https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#i_vs._em

      Formatting List Results as Tables (no CSS)

      20th December 2016 at 4:17pm

      Sometimes you want the results of a <$list> widget to be formatted in the form of multiple columns instead of just one straight listing. The following method creates an actual table structure and uses the nth operator to provide break points for the rows. It is not responsive, that is, it doesn't re-position to display fewer columns if the window is too small.

      In the first, outer list structure you must provide a count to indicate at item number rows should occur. So, in the following example, each row breaks after 4 items, so the sequence is 1,5,9, etc. Note that this requires you to know in advance the maximum number of items there will be. There is also an internal limit that is set to n-1 items, where n is the number of columns you want.

      Note also that you need to repeat the driving filter operator inside of the internal <$list> widget. Obviously this technique lends itself to a macro implementation.

      For other table-making techniques see also:

      Example code for a four-column table with fewer than 70 items

      <table>
      <$list filter="1 5 9 13 17 21 25 29 33 37 41 45 49 53 57 61 65" variable ="rows">
          <$list filter="[tag[Filter Operators]limit[50]] +[nth<rows>]" variable="cell">
              <tr>
              <td> <<cell>> </td>
              <$list filter="[tag[Filter Operators]limit[50]] +[allafter<cell>limit[3]]" variable="this">
                  <td> <<this>> </td>
              </$list>
              </tr>
          </$list>
      </$list>
      </table>

      Result

      abs Operator acos Operator add Operator addprefix Operator
      addsuffix Operator after Operator all Operator allafter Operator
      allbefore Operator append Operator applypatches Operator asin Operator
      atan Operator atan2 Operator average Operator backlinks Operator
      backtranscludes Operator before Operator bf Operator butfirst Operator
      butlast Operator ceil Operator charcode Operator commands Operator
      compare Operator contains Operator cos Operator count Operator
      cycle Operator days Operator decodebase64 Operator decodehtml Operator
      decodeuri Operator decodeuricomponent Operator deserialize Operator deserializers Operator
      divide Operator duplicateslugs Operator each Operator eachday Operator
      editiondescription Operator editions Operator else Operator encodebase64 Operator
      encodehtml Operator encodeuri Operator encodeuricomponent Operator enlist Operator
      enlist-input Operator escapecss Operator

      Formatting List Results as Tables with CSS - Specified Columns Methods

      20th December 2016 at 4:16pm

      Sometimes you want the results of a <$list> widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses ~CSS to set up listing as columns and assumes that you know how many columns you want. The method here is to create a style that reflects the number of columns you want your table to be in, and then apply that style to the resulting list output.

      For other table-making techniques see also:

      1) Create a tiddler for the columns tagged with $:/tags/Stylesheet, containing:

      /* FOUR COLUMN MODE */
      .fourcolumns {
         display:block;
         column-count:4;
         column-gap:1em;
         -moz-column-count:4;
         -moz-column-gap:1em;
         -webkit-column-count: 4;
         -webkit-column-gap:1em;
      }

      Note the various places you need to indicate the number of columns

      2) Then format your output like this:

      @@.fourcolumns
      <$list filter="[tag[Filter Operators]]" variable="foo">
      <<foo>><br>
      </$list>
      @@

      Example showing partial list of filter operators

      abs Operator
      acos Operator
      add Operator
      addprefix Operator
      addsuffix Operator
      after Operator
      all Operator
      allafter Operator
      allbefore Operator
      append Operator
      applypatches Operator
      asin Operator
      atan Operator
      atan2 Operator
      average Operator
      backlinks Operator
      backtranscludes Operator
      before Operator
      bf Operator
      butfirst Operator
      butlast Operator
      ceil Operator
      charcode Operator
      commands Operator

      Formatting List Results as Tables with CSS - Variable Column Method

      20th December 2016 at 4:28pm

      Sometimes you want the results of a <$list> widget to be formatted in the form of multiple columns, instead of just one straight listing. This method uses CSS to set up listing as columns. It is responsive, that is, re-positioning to display fewer columns if the window is too small.

      You don't directly specify a fixed number of columns but instead specify the max-width for the list (which could be a transclusion of the tiddler width) and the width for each item. It lists from left to right, then wraps to a new row.

      For other table-making techniques see also:

      Example listing using 50 existing TiddlyWiki tags

      <div class="dynamic-table">
        <$list filter="[has[tags]tags[]sort[title]first[50]]">
          <span class="item">
            <$transclude tiddler="$:/core/ui/TagTemplate"/>
          </span>
        </$list>
      </div>

      Example stylesheet to use with listing

      <style>
      .dynamic-table {
        max-width:700px; /* could transclude tiddler width instead */
        -ms-box-orient: vertical; /* might be unnecessary */
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: inline-flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        flex-direction: row;
      }
      
      .item {
        max-width:160px; min-width:160px;
        flex: 0 0 2em; /* -grow, -shrink, -basis */
      }
      </style>

      Results

      Formatting text in TiddlyWiki

      19th September 2014 at 9:48pm

      Within the text of a tiddler you can use special formatting called WikiText to control how the text is displayed.

      WikiText can be typed by using the Editor toolbar or by typing by hand. While the first is convenient the later can be faster when you know the WikiText markup code.

      Simple Formatting

      At its simplest, WikiText lets you use familiar word-processing features like bold, italic, lists and tables. For example:

      The ''quick'' brown ~~flea~~ fox //jumps// over the `lazy` dog

      … displays as:

      The quick brown flea fox jumps over the lazy dog

      Working with Tiddlers

      In WikiText, you can link to tiddlers using double square brackets, or by taking advantage of the automatic linking of CamelCase words:

      This is a link to HelloThere, and one to [[History of TiddlyWiki]]

      … displays as:

      This is a link to HelloThere, and one to History of TiddlyWiki

      Macros

      Macros let you package repetitive fragments of WikiText so that you can easily reuse them.

      For example, here is the definition of a macro that generates a YouTube video URL from its unique identifier:

      \define youtube(video)
      https://www.youtube.com/watch?v=$video$
      \end

      With that definition in place, <<youtube 1g66s7UbyuU>> generates the URL https://www.youtube.com/watch?v=1g66s7UbyuU

      Advanced WikiText

      Advanced WikiText features allow you to produce automated lists and interactive features like dropdown menus. In fact, the entire user interface of TiddlyWiki itself is written in WikiText, so any feature that you see in TiddlyWiki can be adapted for use in your own wikis.

      Some of the advanced features require complex coding. TiddlyWiki includes several built-in macros that simplify common user interface tasks, like tabs, tables of content, and lists of tiddlers.

      Find out more

      See WikiText for a detailed introduction to writing WikiText.

      Forums

      25th September 2024 at 11:37am

      Users

      The official TiddlyWiki forum is a place to talk about TiddlyWiki: requests for help, announcements of new releases and plugins, debating new features, or just sharing experiences. You can participate via the associated website, or subscribe via email.

      https://talk.tiddlywiki.org/

      Other Forums:

      Google Groups

      For the convenience of existing users, we also continue to operate the original TiddlyWiki group (hosted on Google Groups since 2005): https://groups.google.com/group/TiddlyWiki

      Developer Forums

      Other Forums

      Developers

      Fourth

      14th November 2021 at 1:36am

      This is an example tiddler. SeeTable-of-Contents Macros (Examples).

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      Free Spaced Repetition Scheduler for TiddlyWiki by oflg

      5th October 2023 at 6:02am

      TiddlyWiki-based memory programme using advanced FSRS algorithm

      https://github.com/open-spaced-repetition/fsrs4tw

      Friday

      16th November 2021 at 10:11pm

      Full Edition

      2nd June 2016 at 5:15am

      The "full" edition of TiddlyWiki consists of all the available languages, themes and plugins for TiddlyWiki. It is intended for use in testing TiddlyWiki - in particular, for switching between all the available language plugins.

      The full edition can be downloaded from:

      https://tiddlywiki.com/editions/full/

      Full Text Search Plugin by Rob Hoelz

      6th January 2021 at 3:10pm

      A plugin to integrate the popular lunr.js search engine, giving TiddlyWiki much more sophisticated search capabilities:

      https://hoelz.ro/files/fts.html

      Provides an alternative search result list that orders results by search relevance and ignores differences in word forms (ex. tag vs tags).

      On my personal wiki, I have the problem that there are terms I use across a lot of tiddlers, and sometimes I'll use different forms (such as the aforementioned tag vs tags). I wanted a plugin to allow me to find the tiddler I'm looking for quickly and didn't require me to worry about how I declined a noun or inflected a verb - so I wrote this plugin, which provides an alternative search list powered by lunr.js.

      function Operator

      19th April 2023 at 10:31am
      purposeapply a function to the input list, and return the result
      inputa selection of titles passed as input to the function F
      parameterF=first parameter is the function name, subsequent parameters are passed to the function by position
      outputthe selection of titles returned from the function F

      Learn more about how to use Filters

      New in v5.3.0 The function operator applies a named function to the input titles, and returns the results from the function. The function is invoked once with all of the input titles (in contrast, the filter Operator invokes its function separately for each input title).

      The first parameter of the function operator specifies the name of the function to be called. Subsequent parameters are passed to the function.

      The mapping between the parameters is positional, with each consecutive parameter specified in the function call mapped to the corresponding parameter in the function definition. Any parameters that are not provided are given their default values.

      Tip
      Compare with the similar filter and subfilter operators which take a filter strings as their parameter instead of a named function, and does not permit parameters to be passed

      Examples

      function Operator (Examples)

      These examples use the following predefined variable:

      • subTiddler: $:/SiteTitle

      They also use the following predefined functions:

      \function get.destField(subTiddler,field) [<subTiddler>get<field>]
      
      \function get.sourceField(subTiddler,field) [<subTiddler>shadowsource[]get[text]jsonget[tiddlers],<subTiddler>,<field>]
      
      \function get.sourceFields(subTiddler) [<subTiddler>shadowsource[]]:map:flat[<subTiddler>subtiddlerfields{!!title}]
      
      \function has.diff(subTiddler,field) [get.destField<subTiddler>,<field>else[]]:filter[get.sourceField<subTiddler>,<field>else[]!match{!!title}]
      
      \function diff.fields(subTiddler) [get.sourceFields<subTiddler>] [<subTiddler>fields:exclude[created creator modified modifier]] :filter[has.diff<subTiddler>,{!!title}]

      [function[get.destField],<subTiddler>,[text]]
      → get the overriden value of the field text.

      The function get.destField use the operator get to get the overriden value of the field text for $:/SiteTitle.

      [function[get.sourceField],<subTiddler>,[text]]
      → get the original value of the field text

      The function get.sourceField use the operator shadowsource to get the title of the plugin in which the shadow tiddler is defined ($:/core). It then use the operator get to retrieve the content of the field text, in which is defined every tiddlers for that plugin, in a json format. Next, the operator jsonget is used to retrieve the value of the original field text for $:/SiteTitle.

      [function[get.sourceFields],<subTiddler>]
      → get the original list of fields.

      The function get.sourceFields use the operator shadowsource to get the title of the plugin in which the shadow tiddler is defined. The subsequent Map Filter Run Prefix iterate over the plugin title, and use the operator subtiddlerfields to output every fields of the shadow tiddler $:/SiteTitle, whose title is retrieved using a TextReference.

      [function[has.diff],<subTiddler>,[text]]
      → compare the original value of the field text with the value set in the overriding tiddler. If the value is different, output the overriden value

      The function has.diff use the operator get to retrieve the current value for the field text. If this field is missing or empty, the operator else output an empty string. Next, the Filter Filter Run Prefix use the function get.sourceField to get the original value for that field, and the operator match is used to check if the value does not match the current value for that field, using a TextReference. If the values do not match, it means that the value for that field was changed, and the value of the field is output. Otherwise, the :filter filter run prevent the field value to be output.

      [function[diff.fields],<subTiddler>]
      → list the overriden fields

      The function diff.fields use the the function get.sourceFields to list every fields in the original $:/SiteTitle. It then use the fields operator to get every fields on the overriding tiddler, excluding the fields that are automatically set when a ShadowTiddler is overriden (created, creator, modified, modifier). The subsequent Filter Filter Run Prefix use the function has.diff to output only the title of the fields that were overidden.

      Tip
      Theses functions can be used together to highlight the changes made to $:/SiteTitle:

      <$list filter="[diff.fields<subTiddler>]" variable=field>
        <$diff-text source={{{ [get.sourceField<subTiddler>,<field>] }}} dest={{{ [get.destField<subTiddler>,<field>] }}} >
          <code><<field>></code>: <<diff-count>> difference<%if [<diff-count>!match[1]]%>s<%endif%>
        </$diff-text>
      </$list>

      That renders as:

      type: 1 difference
      text/vnd.tiddlywiki
      text: 2 differences
      My TiddlyWiki @@font-size:small; v<<version>>@@

      Functions

      22nd April 2024 at 8:48am

      Introduction

      New in v5.3.0 A function is a named snippet of text containing a Filter Expression. Functions can have named parameters which are available within the function as variables.

      Functions are usually defined with the Pragma: \function:

      \function myfun(param:"2")
      [<param>multiply[1.5]]
      \end

      Functions can be invoked in several ways:

      • Directly transclude functions with the syntax <<myfun param:"value">>
      • Assign functions to widget attributes with the syntax <div class=<<myfun param:"value">>>
      • Invoke functions via the function Operator with the syntax [function[myfun],[value],...]
      • Directly invoke functions whose names contain a period as custom filter operators with the syntax [my.fun[value]] or [.myfun[value]]

      How Functions Work

      Functions are implemented as a special kind of variable. The only thing that distinguishes them from ordinary variables is the way that the parameters are handled.

      Funding

      Funding TiddlyWiki

      4th December 2022 at 4:56pm

      TiddlyWiki is more useful to everybody if it is free to use, with no financial barriers to long term adoption. It is not altruism; we believe that removing or reducing barriers to adoption will help to ensure TiddlyWiki's future by making the community larger and stronger.

      Nonetheless, TiddlyWiki is a relatively big, complex machine that requires a significant amount of ongoing work to maintain and improve. Some community infrastructure also requires monthly fees to operate (notably the TiddlyWiki forum).

      The people in the community that do the work have widely varying needs:

      • At one end, a good proportion of the work on TiddlyWiki is performed by community members on a purely voluntary basis. For those people, the satisfaction of helping others is sufficient reward. Indeed, for many people, unpaid voluntary activities are a satisfying antidote to everyday paid work
      • At the other extreme, @Jermolene and some other contributors are trying to make a full-time living working on TiddlyWiki by offering commercial products and services around it
      • In between, there are other people who would appreciate an ocassional token to reward them for their work

      To support these needs in the community, we have two initiatives:

      • We use Open Collective to collect donations for the infrastructure costs of the Community and to crowdfund specific developments by individuals or organisations
      • The TiddlyWiki Marketplace provides a shop window for individuals and organisations offering commercial products and services

      Future Proof

      29th March 2017 at 10:44am

      From Network World magazine in January 2016:

      Way back in the mists of time (actually, January 2009) I wrote about a really cool tool called TiddlyWiki, a “non-linear personal web notebook”. Fast forward to today and I just had an out of body experience: Completely by accident I found a TiddlyWiki that I started when I wrote that piece and it still works!

      Finding code that works flawlessly after just two or three years is magical enough but after seven years?! And given that TiddlyWiki is written as a single page Web application and considering how different browsers are now than they were in 2009, the fact that the old version of TiddlyWiki still works is not short of miraculous.

      TiddlyWiki is designed with the long term needs of its users in mind. Because it is OpenSource and needs no infrastructure, we can be confident that all we'll need to access a TiddlyWiki file even in the far future is an ordinary HTML browser. If you're starting to use TiddlyWiki at the beginning of your career you can be confident that it will carry you through to retirement.

      Generating Static Sites with TiddlyWiki

      8th October 2024 at 3:11am

      TiddlyWiki5 can be used to generate static HTML representations of a TiddlyWiki that doesn't need JavaScript. This process requires that TiddlyWiki be installed on Node.js on your local system. See Installing TiddlyWiki on Node.js for details.

      There is much flexibility in how the static HTML is generated. The following scenarios are all illustrated on https://tiddlywiki.com.

      Wiki Snapshots and Tiddler Snapshots

      You can explore a static representation of the main TiddlyWiki site at https://tiddlywiki.com/static.html. That file is a static snapshot of the current DefaultTiddlers. Any tiddlers that it links to are referred to via URLs of the form /static/HelloThere.html that point to static snapshots of individual tiddlers. The tiddler HTML files reference a static.css stylesheet file.

      The following commands are used to generate the sample static version of the TiddlyWiki5 site:

      tiddlywiki wikipath --render '[!is[system]]' '[encodeuricomponent[]addprefix[static/]addsuffix[.html]]' text/plain $:/core/templates/static.tiddler.html
      tiddlywiki wikipath --render $:/core/templates/static.template.html static.html text/plain
      tiddlywiki wikipath --render $:/core/templates/static.template.css static/static.css text/plain

      The first RenderCommand generates the HTML representations of all individual non-system tiddlers using the filter [!is[system]], and the next filter [encodeuricomponent[]addprefix[static/]addsufixx[.html]] applies URI encoding to each title, and then adds the prefix static/, and finally adds the suffix .html. The second RenderCommand saves the static version of the DefaultTiddlers in static.html, and the final RenderCommand saves the stylesheet. (All the files are placed in the output folder of the wiki folder).

      Wiki Snapshot with Internal Links

      It is also possible to produce a single HTML file that contains static representations of tiddlers, and uses standard HTML anchor links to jump between them.

      For example: https://tiddlywiki.com/alltiddlers.html

      The example is built by the following commands:

      --render $:/core/templates/alltiddlers.template.html alltiddlers.html text/plain

      GenesisWidget

      14th December 2023 at 9:37am

      Introduction

      Introduced in v5.2.4 The $genesis widget allows the dynamic construction of another widget, where the name and attributes of the new widget can be dynamically determined, without needing to be known in advance.

      Content and Attributes

      The content of the $genesis widget is used as the content of the dynamically created widget.

      AttributeDescription
      $typeThe type of widget or element to create (an initial $ indicates a widget, otherwise an HTML element will be created)
      $remappableSet to "no" to prevent the generated widget from being affected by any custom widget overrides. Needed when invoking the original widget within a custom widget definition
      $namesAn optional filter evaluating to the names of a list of attributes to be applied to the widget
      $valuesAn optional filter evaluating to the values corresponding to the list of names specified in $names
      $modeAn optional override of the parsing mode. May be "inline" or "block"
      {other attributes starting with $}Other attributes starting with a single dollar sign are reserved for future use
      {attributes starting with $$}Attributes starting with two dollar signs are applied as attributes to the output widget, but with the attribute name changed to use a single dollar sign
      {attributes not starting with $}Any other attributes that do not start with a dollar are applied as attributes to the output widget or HTML Element

      Introduced in v5.2.6 If the $type attribute is missing or blank, the $genesis widget does not render an intrinsic element, instead just rendering its children.

      New in v5.3.6 Note that attributes explicitly specified take precedence over attributes with the same name specified in the $names filter. This has always been the documented behaviour but prior to Release 5.3.6 the implementation was reversed, and the $names attributes took precedence. This was fixed in Release 5.3.6.

      Examples

      <$genesis $type="div" class="tc-thing" label="Squeak">Mouse</$genesis>

      That renders as:

      Mouse

      ... and the underlying HTML is:

      <p><div class="tc-thing" label="Squeak">Mouse</div></p>

      \define my-banner(mode:"inline",caption)
      <$genesis $type={{{ [<__mode__>match[inline]then[span]else[div]] }}} class="tc-mybanner">
      <<__caption__>>
      </$genesis>
      \end
      
      <<my-banner caption:"I'm in a SPAN">>
      
      <<my-banner mode:"block" caption:"I'm in a DIV">>
      

      That renders as:

      I'm in a SPAN

      I'm in a DIV

      ... and the underlying HTML is:

      <p><span class="tc-mybanner">
      I'm in a SPAN
      </span></p><p><div class="tc-mybanner">
      I'm in a DIV
      </div></p>

      Important

      Warning
      In the following example the widget attribute named one is not present in the HTML output. This is because HTML attributes starting with the prefix on are removed for security reasons. See HTML in WikiText "Security" for more details. This restriction only affects generated HTML elements, and does not prevent the use of attributes prefixed on with other widgets

      <$genesis $type="my-element" $names="one two" $values="1 2">Test Genesis Widget</$genesis>

      That renders as:

      Test Genesis Widget

      ... and the underlying HTML is:

      <p><my-element two="2">Test Genesis Widget</my-element></p>

      Geospatial Plugin

      2nd March 2025 at 5:33am

      The Geospatial Plugin adds new primitives to the TiddlyWiki platform to enable non-developers to build sophisticated interactive geospatial applications.

      It incorporates a number of third party libraries and online services:

      Try it out at https://tiddlywiki.com/plugins/tiddlywiki/geospatial/

      get Operator

      9th March 2023 at 4:38pm
      purposeselect all values of a field in the input titles
      inputa selection of titles
      parameterF=the name of a field
      outputthe values of field F in each of the input titles

      Learn more about how to use Filters

      Each input title is processed in turn. If the corresponding tiddler contains field F, and the value of this field is not empty, then its value is appended to the output.

      Tip
      Unlike most other Filter Operators, the selection output by get can contain duplicates. To avoid duplicates, use get[F]unique[].

      Examples

      get Operator (Examples)

      25th March 2023 at 4:34pm

      [all[current]get[draft.of]]
      → the title of the tiddler of which the current tiddler is a draft

      [get[tags]]
      → returns the tags of all tiddlers without de-duplication

      [get[tags]unique[]]
      → returns the tags of all tiddlers with de-duplication

      Tip
      If a data tiddler contains a field with an empty value, the empty string is not appended to the results.

      [all[current]has:field[myfield]] :map[get[myfield]]
      → also returns the empty string

      The above example works by first checking if the input title has the field myfield and then using the Map Filter Run Prefix to replace the title with their value of that field. If the input tiddler does not have the field, an empty selection is returned. The subsequent Map Filter Run Prefix outputs an empty string when its run returns an empty selection (because the field is empty).

      [all[tiddlers]] :filter[get[created]compare:date:lt{HelloThere!!created}]
      → return all tiddlers that are older than HelloThere

      The above example demonstrates two different ways of accessing field values in filters: Use get when the title is not known in advance as with the Filter Filter Run Prefix where currentTiddler is set to the current input title. Use a TextReference as an indirect Filter Parameter when the title is known.

      Get the Ring

      15th November 2021 at 1:32am

      getindex Operator

      9th March 2023 at 4:38pm
      purposeselect all values of a data property in the input titles
      inputa selection of titles
      parameterP=the name of a property
      outputthe values of property P in each of the input titles

      Learn more about how to use Filters

      Each input title is processed in turn, and is ignored if it does not denote a data tiddler. If the corresponding tiddler contains property P, and the value of this property is not empty, then its value is appended to the output.

      Tip
      Unlike most other Filter Operators, the selection output by getindex can contain duplicates. To avoid duplicates, use getindex[P]unique[].

      Examples

      getindex Operator (Examples)

      25th March 2023 at 4:35pm

      [all[shadows+tiddlers]tag[$:/tags/Palette]getindex[background]]
      → returns all background colors defined in any of the ColourPalettes (notice the duplicates in the resulting list)

      Tip
      If a data tiddler contains a property with an empty value, the empty string is not appended to the results.

      [[ListopsData]getindex[DataIndex]]
      → the empty value of the property DataIndex in ListopsData is not returned by the getindex operator

      [[ListopsData]has:index[DataIndex]] :map[getindex[DataIndex]]
      → also returns the empty string

      The above example works by first checking if the input title has the property DataIndex and then using the Map Filter Run Prefix to replace the title with their value of that property. If the input tiddler does not have the property, an empty selection is returned. The subsequent Map Filter Run Prefix outputs an empty string when its run returns an empty selection (because the property is empty).

      [[$:/palettes/Vanilla]indexes[]] :filter[[$:/palettes/Vanilla]getindex<currentTiddler>count[]compare:number:eq[0]]
      → returns those colors in $:/palettes/Vanilla which are defined, but have no value assigned

      In the above example, count is used to check if getindex returns a result (i.e. the corresponding property has a value) or not.

      Getting Started Video

      19th September 2014 at 4:10pm

      This brief tutorial takes you through the basics of saving changes with a standalone TiddlyWiki file.

      Note that the video is a bit out of date, and will be updated soon!

      GettingStarted

      19th August 2022 at 4:10am

      The easiest way to use TiddlyWiki is to sign up for a free account with Tiddlyhost, an independently run community service. If you find Tiddlyhost useful, please consider donation or sponsorship.

      Click here to download an empty copy of TiddlyWiki:

      The next step is to choose a method for saving changes. There's a wide variety of methods available, with different features and limitations. Click on the badge for a method to see more information about it. You can also click on one of the platform filters to restrict the listing to methods that work with that platform.

      Warning
      Don't attempt to use the browser File/Save menu option to save changes (it doesn't work)


      OS





      Browser






      Use the checkboxes to explore the methods of saving that work with your platform(s)

      GettingStarted - Android

      14th November 2021 at 3:16am

      There are three options for using TiddlyWiki on Android:

      Using Firefox and TiddlyFox

      Using the AndTidWiki App

      The Tiddloid and Tiddloid Lite app are Android apps that makes it possible to edit and save changes to TiddlyWiki HTML files.

      Features

      • Create new TiddlyWiki importing latest edition from internet
      • Import existing TiddlyWikis stored on device/internal storage. (TiddloidLite supports external SD card too)
      • Fork interesting ~Tiddlywikis from internet (Supports TW5 only)
      • TiddlyWiki detection
      • Locally stored ~Tiddlywikis are updated simultaneously on saving changes to TiddlyWikis imported to the app
      • Backup system that is compatible with TiddlyDesktop, the desktop TiddlyWiki saver
      • Creating shortcuts to existing TiddlyWiki on Android Homepage
      • TiddloidLite supports cloud storages like GDrive and OneDrive

      Please note

      • Tiddloid Lite feature better support for devices running Android Q or later. It also supports cloud storages like GDrive and OneDrive, while Tiddloid keeps the compatibility to TiddlyWikiClassic. To know more about differences between Tiddloid and Tiddloid Lite, please visit Tiddloid's homepage.
      • You should keep the .html or .htm extension of the files to be imported.

      Using Node.js in Termux

      Termux is and open source android application providing limited Unix environment enabling users to install Node.js and npm modules in android. Users can install and run TiddlyWiki on Node.js using Termux.

      Instructions

      apt update
      apt upgrade
      apt install nodejs
      npm install -g tiddlywiki
      • If you need to create/serve TiddlyWiki on Node.js from the internal storage, you need to give termux storage permission by running the following command in termux
      termux-setup-storage
      • Now you can create and serve TiddlyWiki on Node.js from internal storage. In the example given below, user is creating a new wiki called "mynewwiki" in his internal folder.
      cd storage/shared
      tiddlywiki mynewwiki --init server
      tiddlywiki mynewwiki --listen
      • Visit http://127.0.0.1:8080/ in your browser
      • From then on, as long as Termux is not closed, you may access your wiki anytime from your favourite Web browser pointing on the expected address and port.

      Tip
      In Termux, you may as well install git, emacs or vi, in order to edit and maintain individual tiddler files. This would probably require that you also attach a more powerful keyboard to your Android, like the Hacker's Keyboard application or a Bluetooth external device.

      GettingStarted - Chrome

      14th November 2021 at 3:16am

      TiddlyWiki on Google Chrome can only save changes using the HTML5-compatible saver module.

      This is the default method of saving if no other method is installed. It uses your browser's built-in "download a file" handler, and has the advantage of working on almost all desktop browsers, and many mobile browsers.

      1. Download an empty TiddlyWiki by clicking this button:
        If the button doesn't work save this link: https://tiddlywiki.com/empty.html
        Your browser may ask you to accept the download before it begins
      2. Locate the file you just downloaded
        • You may rename it, but be sure to keep the .html or .htm extension
      3. Open the file in your browser
      4. Try creating a new tiddler using the new tiddler button in the sidebar. Type some content for the tiddler, and click the ok button
      5. Save your changes by clicking the save changes button in the sidebar
      6. Your browser will download a new copy of the wiki incorporating your changes
      7. Locate the newly downloaded file and open it in your browser
      8. Verify that your changes have been saved correctly

      Tip: most browsers have an option to prompt each time for the download location. This allows you to select the existing version of the file and replace it.

      GettingStarted - Firefox

      3rd August 2023 at 9:30pm

      GettingStarted - Internet Explorer

      14th November 2021 at 3:16am

      Deprecated fromv5.3.6

      1. Install the TiddlyIE add-on from:
      2. Restart Internet Explorer. IE will prompt you to enable the TiddlyIE add-on.
        You may also see a prompt to enable the Microsoft Script Runtime
      3. Download an empty TiddlyWiki by saving this link:
      4. Locate the file you just downloaded
        • You may rename it, but be sure to keep the .html or .htm extension
      5. Open the file in Internet Explorer
      6. Try creating a new tiddler using the new tiddler button in the sidebar. Type some content for the tiddler, and click the ok button
      7. Save your changes by clicking the save changes button in the sidebar. Internet Explorer will ask for your consent to save the file locally by presenting a file Save As dialog.
      8. Refresh the browser window to verify that your changes have been saved correctly

      The Windows HTA Hack describes an alternative method of using TiddlyWiki with Internet Explorer.

      GettingStarted - iOS

      14th November 2021 at 3:16am

      The iPad/iPhone app Quine 2 makes it possible to view, edit and then save changes to TiddlyWiki5 on iOS. Download it here.

      Instructions for use:

      1. Open Quine 2
      2. Tap the + toolbar button to create and open a new TiddlyWiki
      3. From the file list tap an existing TiddlyWiki file to open it
      4. Edit the TiddlyWiki as normal, and save as normal using either Autosave or the TiddlyWiki save button
      5. Tap the left hand "Documents" toolbar button to close an open TiddlyWiki
      • Quine 2 works natively in iOS with the local file system and the iCloud file system
      • Quine 2 also allows you to open, edit and save TiddlyWiki files stored with cloud file providers
      • Quine 2 allows you to follow embedded WikiText links and canonical links to external files for cloud-like file providers which support "folder level sharing".
        • This includes the apps "Secure Shellfish" and "Working Copy". Most providers, though, do not allow apps like Quine 2 to access linked files this way.
        • If you wish to enable such links for "well behaved" file providers, toggle "on" the "Enable folder selection for out-of-sandbox links" setting in iOS Settings for Quine 2

      Note that Quine is published independently of TiddlyWiki

      GettingStarted - Node.js

      14th November 2021 at 3:16am
      1. Install Node.js
        • Linux:
          Debian/Ubuntu:
          apt install nodejs
          May need to be followed up by:
          apt install npm
          Arch Linux
          yay -S tiddlywiki
          (installs node and tiddlywiki)
        • Mac
          brew install node
        • Android
        • Other
      2. Open a command line terminal and type:
        npm install -g tiddlywiki
        If it fails with an error you may need to re-run the command as an administrator:
        sudo npm install -g tiddlywiki (Mac/Linux)
      3. Ensure TiddlyWiki is installed by typing:
        tiddlywiki --version
        • In response, you should see TiddlyWiki report its current version (eg "5.3.8". You may also see other debugging information reported.)
      4. Try it out:
        1. tiddlywiki mynewwiki --init server to create a folder for a new wiki that includes server-related components
        2. tiddlywiki mynewwiki --listen to start TiddlyWiki
        3. Visit http://127.0.0.1:8080/ in your browser
        4. Try editing and creating tiddlers
      5. Optionally, make an offline copy:
        • click the save changes button in the sidebar, OR
        • tiddlywiki mynewwiki --build index

      The -g flag causes TiddlyWiki to be installed globally. Without it, TiddlyWiki will only be available in the directory where you installed it.

      Warning
      If you are using Debian or Debian-based Linux and you are receiving a node: command not found error though node.js package is installed, you may need to create a symbolic link between nodejs and node. Consult your distro's manual and whereis to correctly create a link. See github issue 1434.

      Example Debian v8.0: sudo ln -s /usr/bin/nodejs /usr/bin/node


      Tip
      You can also install prior versions like this:
      npm install -g tiddlywiki@5.1.13

      GettingStarted - Online

      14th November 2021 at 3:16am

      TiddlyWiki can also be hosted on online services such as Dropbox and Cloudant.

      Dropbox (syncs the entire HTML file)
      To edit files stored in your Dropbox, go to http://tiny.cc/tw5inthesky/. This will allow you to open any HTML files found.
      Cloudant (or another CouchDB-type server) (syncs individual tiddlers)
      http://noteself.github.io/

      GettingStarted - Safari

      14th November 2021 at 3:16am

      TiddlyWiki on Safari can only save changes using the manual HTML5-compatible fallback saver module.

      getvariable Operator

      30th March 2019 at 10:01am
      purposeselect all values of variables named in the input titles
      inputa selection of variable names
      parameterignored
      outputthe values of each of the variables named in the input titles (or blank if the variable is not defined)

      Learn more about how to use Filters

      Introduced in v5.1.20 The usual way to retrieve a variable value within a filter is with the angle brackets notation. For example, [<currentTiddler>] will retrieve the value of the variable called currentTiddler.

      The getvariable filter operator provides an alternative way to retrieve a variable. For example, [[currentTiddler]getvariable[]] is another way to retrieve the value of the variable currentTiddler.

      The advantage of getvariable is that it makes it possible to work with variables whose name is computed, and not known in advance. For example, [<myvariable>getvariable[]] gets the value of the variable whose name is given in the variable myvariable.

      Examples

      getvariable Operator (Examples)

      30th March 2019 at 10:01am

      [[currentTiddler]getvariable[]]
      → returns the value of the variable currentTiddler

      Git

      23rd July 2023 at 7:30am

      GitHub

      23rd July 2023 at 7:43am

      GitHub is a hosting service for distributed projects that use git as their version-control system. It allows free hosting and management of open-source projects and facilitates collaborative development on the source code. Using GitHub for non-open-source endeavours requires additional fees.

      The code and documentation of TiddlyWiki is hosted on GitHub at:

      https://github.com/TiddlyWiki/TiddlyWiki5

      GitHub also offer a free web hosting service called GitHub Pages that can be used directly from the single file configuration. See Saving to a Git service.

      An alternative to GitHub is GitLab

      GitHub Saver Tutorial by Mohammad

      23rd July 2023 at 7:45am

      GitHub Saver is a step by step tutorial that shows how to integrate Tiddlywiki 5 and GitHub Pages to create websites hosted on https://github.com/.

      https://kookma.github.io/TW5-GitHub-Saver/

      This instruction is based on Tiddlywiki single html file model, while it can use subfolder for extra materials like images, audios, videos, pdfs,... in separate folders.

      Other tutorials

      Tiddlywiki, Travis-CI and GitHub Pages
      https://kookma.github.io/Tiddlywiki-Travis-CI/
      This wiki shows how to set up websites hosted on GitHub Pages using Travis-CI and Tiddlywiki 5 on Node.js.
      Tiddlywiki and GitHub Pages
      https://kookma.github.io/Tiddlywiki-and-GitHub-Pages/
      This instruction is based on local edit, save and push to GitHub. It does NOT use the new GitHub Saver mechanism (requires TW 5.1.20+) which lets edit and save directly from Tiddlywiki!

      GitLab

      23rd July 2023 at 7:39am
      GitLab Inc. is an open-core company that operates GitLab, a DevOps software package which can develop, secure, and operate software. The open source software project was created by Ukrainian developer Dmytro Zaporozhets and Dutch developer Sytse Sijbrandij
      https://en.wikipedia.org/wiki/GitLab

      Both GitLab and GitHub use Git a distributed version control system, that can be used to store, view and edit TiddlyWiki wikis using GitLab Pages

      Learn more at: Saving to a Git service

      Go to Mordor

      15th November 2021 at 6:10pm

      Grok TiddlyWiki Banner

      GroupedLists

      4th December 2024 at 8:56am

      The following sidebar tabs give examples of grouped lists created by nesting.

      Types Tab

      For the "Types Tab", the outer list filter as shown below selects each discrete value found in the type field. The inner list filter selects all the (non-system) tiddlers with that type.

      \whitespace trim
      <$list filter={{$:/core/Filters/TypedTiddlers!!filter}}>
      <div class="tc-menu-list-item">
      <$view field="type"/>
      <$list filter="[type{!!type}!is[system]sort[title]]">
      <div class="tc-menu-list-subitem">
      <$link to={{!!title}}><$view field="title"/></$link>
      </div>
      </$list>
      </div>
      </$list>
      

      Recent Tab

      The list in the "Recent Tab" is generated using the timeline macro. Here, the outer list filter selects each discrete day found in the modified field, while the inner list filter selects all the tiddlers dated the same day in the modified field.

      <!-- Override one or both of the following two macros with a global or local macro of the same name 
      if you need to change how titles are displayed on a timeline -->
      
      \procedure timeline-title() <$view field="title"/>
      \procedure timeline-link() <$link to={{!!title}}><<timeline-title>></$link>
      \procedure timeline(limit:"100",format:"DDth MMM YYYY",subfilter:"",dateField:"modified")
      \whitespace trim
      <div class="tc-timeline">
      <$set name="tv-tids" filter=`[!is[system]$(subfilter)$has<dateField>!sort<dateField>limit<limit>]`>
      <$list filter="[enlist<tv-tids>eachday<dateField>]">
      <div class="tc-menu-list-item">
      <$view field=<<dateField>> format="date" template=<<format>>/>
      <$list filter=`[enlist<tv-tids>sameday:$(dateField)${!!$(dateField)$}]`>
      <div class="tc-menu-list-subitem">
      <<timeline-link>>
      </div>
      </$list>
      </div>
      </$list>
      </$set>
      </div>
      \end
      

      GuerillaWiki

      17th August 2014 at 2:10pm

      TiddlyWiki makes a great GuerillaWiki in situations where it is not practical to use a traditional wiki.

      For instance, in a corporate setting, persuading an over-worked IT department to install a Wiki server for you is seldom going to be possible overnight. And if your PC is locked down you can't install a conventional Wiki yourself. Equally, you can't go and use one of the public hosted Wiki services because your Information Security department would not allow all that corporate data to flow into an outside server.

      TiddlyWiki slices through those barriers by being usable on virtually all PCs.

      Hamlet

      4th March 2023 at 4:21pm
      {
          "Shakespeare-old": "Hamlet: Do you see yonder cloud that's almost in shape of a camel?\nPolonius: By the mass, and 'tis like a camel, indeed.\nHamlet: Methinks it is like a weasel.\nPolonius: It is backed like a weasel.\nHamlet: Or like a whale?\nPolonius: Very like a whale.\n-- Shakespeare",
          "Shakespeare-new": "Hamlet: Do you see the cloud over there that's almost the shape of a camel?\nPolonius: By golly, it is like a camel, indeed.\nHamlet: I think it looks like a weasel.\nPolonius: It is shaped like a weasel.\nHamlet: Or like a whale?\nPolonius: It's totally like a whale.\n-- Shakespeare",
          "Trekkie-old": "Kirk: Do you see yonder cloud that's almost in shape of a Klingon?\nSpock: By the mass, and 'tis like a Klingon, indeed.\nKirk: Methinks it is like a Vulcan.\nSpock: It is backed like a Vulcan.\nKirk: Or like a Romulan?\nSpock: Very like a Romulan.\n-- Trekkie"
      }

      Hard and Soft Links

      10th June 2024 at 8:57am

      A hard link is a link that can be detected by a superficial examination of WikiText.

      A link is soft if it is:

      • contained in text trancluded from elsewhere
      • supplied via a macro or variable
      • generated by a link widget whose to attribute is a transclusion, macro or variable

      Warning
      Soft links are not detected by link-related filter operators such as backlinks, links, all and is.

      This concept is analogous to Hard and Soft Transclusions.

      Hard and Soft Transclusions

      10th June 2024 at 8:56am

      A hard transclusion is a transclusion that can be detected by a superficial examination of WikiText.

      A transclusion is soft if it is:

      Warning
      Soft transclusions are not detected by transclusion-related filter operators transcludes and backtranscludes.

      This concept is analogous to Hard and Soft Links.

      Hard Linebreaks in WikiText

      12th May 2024 at 12:16am

      The usual handling of paragraphs in wikitext causes single line breaks to be ignored, and double linebreaks to be interpreted as the end of a paragraph.

      This behaviour isn't convenient when dealing with material that incorporates hard linebreaks - for instance, poetry. You can mark a block of content as containing hard line breaks like this:

      """
      This is a line
      and this is a new line
      while this is yet another line
      and this is the final one
      apart from this one
      """
      
      

      That renders as:

      This is a line
      and this is a new line
      while this is yet another line
      and this is the final one
      apart from this one

      ... and the underlying HTML is:

      <p>This is a line<br>and this is a new line<br>while this is yet another line<br>and this is the final one<br>apart from this one<br></p>

      Tip
      Note: Hard Linebreaks in WikiText require an extra blank line after the trailing """ before the parser will return to block mode.
      .

      Hard Linebreaks with CSS

      26th January 2017 at 9:10pm

      Since TiddlyWiki Version 5.1.16, it's possible to apply customs styles with data- attributes. see: How to apply custom styles

      The Custom data-styles stylesheet tiddler contains the following definition:

      [data-tags*="example-hardlinebreaks"] .tc-tiddler-body {
        word-break: normal; 
        word-wrap: break-word;
        white-space: pre-wrap;
      }

      If rendered without the tag, the content of "Hard Linebreaks with CSS - Example" will be shown like this:

      The following text is rendered without any special WikiText syntax. So most of the WikiText functionality will be accessible. This is a line and this is a new line while this is yet another line and this is the final one apart from this one

      Open the tiddler to see the custom CSS rules applied: Hard Linebreaks with CSS - Example

      Hard Linebreaks with CSS - Example

      26th January 2017 at 9:10pm

      The following text is rendered without any special WikiText syntax. So most of the WikiText functionality will be accessible.

      This is a line and this is a new line while this is yet another line and this is the final one apart from this one

      has Operator

      6th March 2023 at 2:32pm
      purposefilter the input by field existence
      inputa selection of titles
      suffixS=Introduced in v5.1.14 optionally, the keyword field or Introduced in v5.1.22 optionally, the keyword index
      parameterF=the name of a field or, optionally an index
      outputwithout suffix
      » those input tiddlers in which field F has a non-empty value
      suffix field
      » those input tiddlers in which field F exists
      suffix index
      » those input data tiddlers in which index F exists
      ! outputwithout suffix
      » those input tiddlers in which field F does not exist or has an empty value
      suffix field
      » those input tiddlers in which field F does not exist
      suffix index
      » those input data tiddlers in which index F does not exist

      Learn more about how to use Filters

      has Operator (Examples)

      11th November 2015 at 3:02pm

      [has[color]]

      [tag[Concepts]!has[modified]]

      [has:field[emptyfield]]

      [all[current]!has:field[doesntexist]]

      [all[tiddlers+shadows]has:index[foreground]]

      [all[current]!has:index[doesntexist]]

      haschanged Operator

      8th February 2015 at 7:18pm
      purposefilter the input by tiddler modification status
      inputa selection of titles
      parameternone
      outputthose input tiddlers that have been modified during this session
      ! outputthose input tiddlers that have not been modified during this session

      Learn more about how to use Filters

      A tiddler is deemed to have been modified if it has been written back to the wiki since the start of the current TiddlyWiki session. If you edit a tiddler and immediately store it again without making any changes, that is enough to mark it as modified.

      Examples

      Headings in WikiText

      13th May 2022 at 11:08am

      Headings are specified with one up to six leading ! characters:

      ! This is a level 1 heading
      
      !! This is a level 2 heading
      
      !!! This is a level 3 heading

      CSS classes can be assigned to individual headings like this:

      !!.myStyle This heading has the class `myStyle`

      That renders as:

      This heading has the class myStyle

      ... and the underlying HTML is:

      <h2 class="myStyle">This heading has the class <code>myStyle</code></h2>

      Height of text editor

      17th August 2016 at 10:54am

      The button let you adjust the height of the text input field.

      HelloThere

      7th August 2025 at 8:49am

      Make Something of Your Notes

      Welcome to TiddlyWiki, a unique non-linear notebook for capturing, organising and sharing complex information

      Use it to keep your to-do list, to plan an essay or novel, or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.

      • TiddlyWiki stores its data and code in a single HTML file, requiring no installs, no external dependencies, just a web browser
      • TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will still be able to use the notes you take today
      • TiddlyWiki is infinitely customisable and extensible with many plugins that add new features
      • TiddlyWiki is the product of a collective of developers, part of an extensive community of users

      HelloThumbnail

      14th April 2015 at 7:09am
      The following tiddlers are tagged with :

      HelloThumbnail - Community Survey 2025

      Explore the responses to the 2025 community survey

      HelloThumbnail - Funding

      Find out how you can help support TiddlyWiki financially

      HelloThumbnail - Grok TiddlyWiki

      A comprehensive interactive guide to TiddlyWiki, from the very basics to the advanced concepts, featuring exercises and takeaways to aid learning

      HelloThumbnail - Intertwingled Innovations

      Support the development of TiddlyWiki by hiring Jeremy Ruston through Intertwingled Innovations Limited

      HelloThumbnail - Introduction Video

      Short video introducing basic TiddlyWiki concepts

      HelloThumbnail - Latest Version

      The latest version v5.3.8 of TiddlyWiki (released on 7th August 2025)

      HelloThumbnail - Marketplace

      Explore commercial products and services for TiddlyWiki

      HelloThumbnail - MultiWikiServer

      Find out more about the new MultiWikiServer plugin that turns TiddlyWiki into a full-fledged server system supporting multiple user accounts and tiddler sharing

      HelloThumbnail - Newsletter

      Subscribe to the TiddlyWiki Newsletter, a summary of the most interesting and relevant news from the TiddlyWiki community

      HelloThumbnail - TiddlyWiki Privacy

      With care, TiddlyWiki can be used totally privately, without needing to trust anything or anyone but your own device

      HelloThumbnail - TiddlyWikiLinks

      Links to TiddlyWiki-related content collected by the community

      HelloThumbnail - TW5-Graph

      Use TiddlyWiki plugins to easily create visualizations of your tiddlers.

      HelloThumbnail - Twenty Years of TiddlyWiki

      Celebrating 20 years since the launch of TiddlyWiki

      HelpCommand

      25th February 2014 at 7:57pm

      Displays help text for a command:

      --help [<command>]

      If the command name is omitted then a list of available commands is displayed.

      HelpingTiddlyWiki

      10th October 2015 at 1:12pm

      If you find TiddlyWiki useful, there are lots of ways you can help assure its future and make it better.

      Teach and Tell

      OpenSource projects like TiddlyWiki thrive on the feedback and engagement of users. TiddlyWiki becomes more useful to everyone as more and more people use it. So, if you find TiddlyWiki useful, spread the word. The best possible way to assure its future is for it to become a hundred times more popular than before.

      Help improve the documentation and code

      There are many ways you can contribute to TiddlyWiki:

      • Writing tutorials
      • Contributing to the documentation on tiddlywiki.com
      • Making video screencasts
      • Curating relevant links, hints and tips on a wiki

      The main TiddlyWiki documentation and code lives on GitHub, and welcomes contributions:

      Hidden Setting: Content to be displayed for empty story

      11th August 2024 at 5:36am

      To display content when the story is empty, create $:/config/EmptyStoryMessage and enter the desired contents.

      The following would show the GettingStarted tiddler when all others are closed.

      {{GettingStarted||$:/core/ui/ViewTemplate}}

      Hidden Setting: Default Tiddler Colour

      20th November 2024 at 10:56pm

      Hidden Setting: Default Tiddler Icon

      6th March 2020 at 2:50pm

      Hidden Setting: Default Type for Missing Tiddlers

      By default new tiddlers are created with a blank content type.

      The hidden setting in $:/config/DefaultMissingType can be set to another content type which is used by default for new tiddlers created by clicking on a missing link (for example, text/markdown to default to Markdown for missing tiddlers). If no value is provided, the content type will be blank and WikiText will be used.

      Hidden Setting: Disable Drag and Drop

      19th May 2021 at 3:54pm

      Introduced in v5.1.22 To disable all the drag and drop operations that are built into the core, set the following tiddler to "no":

      $:/config/DragAndDrop/Enable

      To selectively re-enable drag and drop for an instance of the list-tagged-draggable Macro or list-links-draggable Macro you must ensure that the variable tv-enable-drag-and-drop is set to yes for the scope of the macro invocation. For example, note how it is still possible to use drag and drop within this list even if $:/config/DragAndDrop/Enable is set to "no":

      Note that when using the DropzoneWidget and the DroppableWidget directly the enable attribute works independently of the global setting.

      Hidden Setting: Disable Lazy Loading

      25th October 2019 at 10:01am

      LazyLoading can be disabled by setting this value to yes

      $:/config/SyncDisableLazyLoading

      Hidden Setting: Enable File Import in Editor

      19th May 2021 at 4:00pm
      Introduced in v5.2.0

      $:/config/Editor/EnableImportFilter

      This filter determines whether dragging and dropping files in the editor works for a given tiddler or not. A non-empty result enables drag and drop in the editor for that tiddler. This filter is used in such a manner that it respects the global drag and drop setting.

      Hidden Setting: Filename for Save Wiki Button

      22nd January 2019 at 12:00am

      Introduced in v5.1.19 When saving a TiddlyWiki using the save changes button, the default file name used for saving is constructed using the Title of the TiddlyWiki as entered in the Control Panel, which is stored in the tiddler $:/SiteTitle.

      The value used is in the form {{$:/SiteTitle}}.html. This causes the filename to be constructed from the site Title with a .html extension.

      If a tiddler named $:/config/SaveWikiButton/Filename is created, the text in that tiddler will be used as the default file name used for saving the TiddlyWiki.

      Hidden Setting: HTML Parser Sandbox

      11th April 2021 at 10:01am

      Introduced in v5.2.0 By default, tiddlers with the type text/html are displayed in an iframe with the sandbox attribute set to the empty string. This causes all security restrictions to be applied, disabling many features such as JavaScript, downloads and external file references. This is the safest setting.

      To globally disable the sandbox, set the tiddler $:/config/HtmlParser/DisableSandbox to yes. This will mean that the code in the iframe has full access to TiddlyWiki's internals, which means that a malicious HTML page could exfiltrate data from a private wiki.

      To keep the sandbox but control which restrictions are applied, ensure that $:/config/HtmlParser/DisableSandbox is not set to yes, and then set $:/config/HtmlParser/SandboxTokens to the desired list of tokens from the MDN documentation.

      Note that these are global settings. To control the sandboxing on an individual tiddler basis will require a custom <iframe> to be used.

      Hidden Setting: Import Content Types for Editor

      19th May 2021 at 4:02pm
      Introduced in v5.2.0

      $:/config/Editor/ImportContentTypesFilter

      This filter determines which contentTypes can be imported by dragging and dropping into the editor. It used by a DropzoneWidget wrapped around the editor, for the contentTypesFilter attribute.

      Hidden Setting: More Tabs Horizontal

      28th November 2022 at 9:29am

      Set the $:/config/ui/SideBar/More/horizontal tiddler to yes, to align the More -> Tabs in horizontal orientation.

      Hidden Setting: Navigate on Enter

      8th November 2020 at 10:49am

      The configuration Tiddler $:/config/Search/NavigateOnEnter/enable can be used to enable (if set to yes) Navigation to and Creation of missing Tiddlers in the various search input fields when hitting Enter respectively ctrl-Enter

      Hidden Setting: New-Image Type

      16th November 2021 at 10:25pm

      By default new images are created with the image-type jpeg

      The hidden setting in $:/config/NewImageType can be set to another Image-Type which is used for new Image Tiddlers, like png

      Hidden Setting: Retain Story ordering

      Introduced in v5.2.4 The tiddler $:/config/ControlPanel/Basics/DefaultTiddlers/RetainStory contains the value that is assigned to $:/DefaultTiddlers when clicking the "retain story ordering" button in $:/ControlPanel under the Info -> Basics tab.

      Hidden Setting: Scroll Top Adjustment

      16th August 2018 at 11:06am

      As part of navigating to a tiddler, TiddlyWiki scrolls the page so that the top of the tiddler lines up with the top of the browser window. This means that the upper part of tiddlers can be obscured when using custom position:fixed toolbars at the top of the window.

      To adjust the scroll position to allow for the toolbar, add the CSS class tc-adjust-top-of-scroll to the toolbar. TiddlyWiki's scrolling mechanism will then dynamically adjust the scroll position by the height of that element.

      Hidden Setting: Search AutoFocus

      19th June 2015 at 4:26pm

      When TiddlyWiki first opens in the browser the search box is automatically given the focus by default. If this causes problems, you can change the default by changing this value from true to false:

      $:/config/Search/AutoFocus

      Hidden Setting: Search Minimum Length

      11th October 2016 at 7:42am

      Introduced in v5.1.14 Controls the minimum length of a search string before results are displayed.

      Defaults to "3".

      $:/config/Search/MinLength

      Hidden Setting: Show Edit Preview per Tiddler

      29th October 2021 at 9:03am

      Controls whether the tiddler editing preview is controlled globally (the default) or on a per-tiddler basis.

      Set it to yes to enable per-tiddler mode.

      $:/config/ShowEditPreview/PerTiddler

      Hidden Setting: Sync Logging

      3rd September 2019 at 7:23pm

      Specifies whether Syncadaptor should log information to the browser's developer console or not.

      Defaults to yes. Set to no to disable logging.

      Changing needs restart to take effect.

      $:/config/SyncLogging

      Hidden Setting: Sync Polling Interval

      3rd September 2019 at 7:23pm

      Specifies the interval at which Syncadaptor synchronizes tiddlers between the server and the browser.

      Defaults to "60000" (60 * 1000 ms = 1 min).

      Changing needs restart to take effect.

      $:/config/SyncPollingInterval

      Hidden Setting: Sync System Tiddlers From Server

      9th September 2022 at 9:43am

      Introduced in v5.1.23 Determines whether system tiddlers are synced from the server under Node.js. (Note that this is a one-way setting; system tiddlers are always synced to the server).

      • no – system tiddlers are not synced from the server (default)
      • yes – system tiddlers are synced from the server

      Engaging sync of system tiddlers means that tiddlers such as $:/StoryList and $:/HistoryList get synced, which can lead to unexpected outcomes when multiple users are connected to the same server at the same time (it means that the story sequence is synced between all the users).

      $:/config/SyncSystemTiddlersFromServer

      Hidden Setting: Tab Index for Edit-Inputs

      2nd July 2019 at 7:48am

      Hidden Setting: Tag Pill Drag Filter

      28th July 2024 at 1:49pm

      The $:/core/config/TagPillDragFilter defines the filter string, that is used to drag & drop a tap-pill eg: from 1 wiki to an other wiki.

      Your $:/core/config/TagPillDragFilter defaults to: [all[current]tagging[]] +[!is[draft]]

      Be Aware
      The core default filter does not include shadow-tiddlers. It will include overwritten shadow tiddlers. See: is Operator for details about the is[tiddler] and other possibilities.

      Hidden Setting: Tags Minimum Length

      3rd December 2017 at 11:31pm

      Introduced in v5.1.16 Tag Dropdown: Controls the minimum length of an input string before results are displayed.

      Defaults to "0".

      $:/config/Tags/MinLength

      Hidden Setting: Template for Save Wiki Button

      15th December 2018 at 3:48pm

      Hidden Setting: Typing Refresh Delay

      14th October 2019 at 9:18am

      TiddlyWiki defers processing changes to draft tiddlers and tiddlers with the prefix $:/temp/volatile/ until a timeout has elapsed (this is called throttling). The mechanism can be extended to other tiddlers by adding a throttle.refresh field. See RefreshThrottling for details.

      The default value of 400ms gives a good balance of responsiveness in most cases but isn't always optimal on lower powered mobile devices.

      The timeout can now be changed by changing this value (in milliseconds):

      $:/config/Drafts/TypingTimeout

      Hidden Setting: ViewTemplate and EditTemplate

      4th July 2019 at 5:35am

      The configuration Tiddlers $:/config/ui/ViewTemplate and $:/config/ui/EditTemplate can be used to change the ViewTemplate respectively the EditTemplate used in the Story PageTemplate

      Hidden Settings

      19th June 2015 at 4:24pm

      Highlight Plugin

      22nd February 2022 at 9:43am

      The Highlight plugin provides the ability to apply syntax colouring to text.

      See https://tiddlywiki.com/plugins/tiddlywiki/highlight

      Warning
      The latest version of the Highlight Plugin requires a modern browser that fully supports JavaScript ES6 (released in 2015). The older version is still available as the highlight-legacy plugin for users who need to use an older browser.

      Hire Jeremy Sidebar Segment

      8th July 2025 at 1:00pm

      Hire the founder of TiddlyWiki

      1st September 2025 at 9:49am

      A note from JeremyRuston

      I am currently taking on new commercial clients through my company Intertwingled Innovations.

      If you'd like to explore how TiddlyWiki could help your organisation, please contact me at jeremy@jermolene.com.

      History of TiddlyWiki

      22nd November 2025 at 5:45pm

      Gathering the history of TiddlyWiki. This is an ongoing project. Contributions and reminiscences are welcome.

      HistoryMechanism

      7th February 2015 at 1:10pm

      The system tiddler $:/HistoryList keeps track of a list of tiddlers comprising the navigation history. Each time you click on a link to a tiddler, the title of the target tiddler is added to the top of the stack.

      The history list is stored in JSON to allow additional details about the coordinates of the DOM node that initiated the navigation.

      The history list also maintains the field current-tiddler that contains the name of the tiddler at the top of the stack. This field can be used like so:

      <$list filter="[list[$:/StoryList]]" history="$:/HistoryList" storyview="pop">
      
      <$button message="tm-close-tiddler" class="tc-btn-invisible tc-btn-mini">&times;</$button> <$link><$view field="title"/> <$reveal type="match" state="$:/HistoryList!!current-tiddler" text=<<currentTiddler>>>&#x2713;</$reveal></$link>
      
      </$list>

      Which renders the same as the "Open" sidebar tab, with the addition of a tick against the tiddler that was last navigated to.

      Hire the founder of TiddlyWiki

      HelloThere

      Quick Start

      Find Out More

      TiddlyWiki on the Web

      Testimonials and Reviews

      GettingStarted

      Community

      Empty Story

      To display content when the story is empty, create $:/config/EmptyStoryMessage and enter the desired contents. The following would show the GettingStarted tiddler when all others are closed.

      {{GettingStarted||$:/core/ui/ViewTemplate}}

      Horizontal Rules in WikiText

      13th May 2022 at 11:12am

      You can include a horizontal rule with three or more dashes on their own on a line:

      ---

      That renders as:


      ... and the underlying HTML is:

      <hr>

      How to add a banner for GitHub contributions

      23rd November 2014 at 9:44am

      When you edit a tiddler on https://tiddlywiki.com you will see a small ribbon inviting you to edit the source of the tiddler on GitHub.

      If you are using Node.js, you can replicate this feature for your own TiddlyWiki-based site as follows:

      1. Make sure the following setting is included in the tiddlywiki.info file in your wiki folder:
        	"config": {
        		"retain-original-tiddler-path": true
        	}
      2. Copy the tiddler $:/ContributionBanner to your wiki
      3. Make the following changes:
        1. Adjust the GitHub link URL from https://github.com/TiddlyWiki/TiddlyWiki5/edit/master/editions/tw5.com/tiddlers/ to point to your own GitHub repo
        2. Make sure the wording of the text starting "Can you help us improve this documentation?" is appropriate for your visitors
        3. Adjust the link to Improving TiddlyWiki Documentation to point to your own tiddler with instructions for the contribution procedure

      How to add a new tab to the sidebar

      4th February 2017 at 7:12pm

      To create a new tab in the sidebar menu:

      1. Create a tiddler and tag it with the SystemTag tag $:/tags/SideBar
      2. By default, the tiddler title is used as the tab title but you can override it using the caption field
      3. To define the tab ordering, use the list-after or list-before fields as discussed in Tagging

      Note that you can create new tabs under the "More" tab in the same way by using the tag $:/tags/MoreSideBar.

      How to apply custom styles

      11th April 2018 at 5:40pm

      How to apply custom styles by tag

      4th July 2022 at 5:42pm

      Deprecated fromv5.1.16(seeCustom styles by data-tags). Also see: How to apply custom styles


      You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name tc-tagged-<Tag Name>.

      For example, to make tiddlers tagged "NightReader" appear in a special colour scheme suitable for night-time reading, create a stylesheet defining the class tc-tagged-NightReader like this:

      .tc-tagged-NightReader {
      	background-color:black;
      	color: orange;
      	padding: 35px 35px;
      }
      
      .tc-tagged-NightReader .tc-tiddler-body {
      	font-size: 1.5em;
      }

      The tc-tagged-NightReader class is applied to the entire tiddler and not just the tiddler text. If you want to target a smaller portion of the tiddler you can qualify the CSS selector, as is done here with .tc-tagged-NightReader .tc-tiddler-body.

      Note that tags containing spaces or non-alphanumeric characters will be converted using URI encoding, making the generated CSS classname hard to predict. For example:

      TagGenerated Class Name
      $:/mytagtc-tagged-%24%3A%2Fmytag
      Doctor Whotc-tagged-Doctor%20Who
      £35.23tc-tagged-%C2%A335.23

      Although TiddlyWiki will generate these tags, to actually use them in your css, you will need to escape the percent character in your stylesheet, like:

      .tc-tagged-Doctor\%20Who {
          background-image: url(./tardis_back.svg);
          background-repeat: no-repeat;
          background-position: right;
          color:#FBFBFB;
      }

      A utility function is available in JavaScript to perform the conversion:

      $tw.utils.tagToCssSelector("$:/tags/Stylesheet")

      Generates the following output:

      tc-tagged-\%24\%3A\%2Ftags\%2FStylesheet

      How to build a TiddlyWiki5 from individual tiddlers

      25th October 2024 at 5:11am

      First install TiddlyWiki as described in Installing TiddlyWiki on Node.js.

      1. Create an empty TiddlyWikiFolder
        1. Create a new folder in a convenient place (for example ~/MyWiki)
        2. Create a file called tiddlywiki.info containing the following text:
          • {"themes": ["tiddlywiki/vanilla","tiddlywiki/snowwhite"]}
        3. Create a subfolder called tiddlers
          • Alternatively, just copy the editions/empty folder from the TiddlyWiki5 repo
      2. Create individual TiddlerFiles in the ~/MyWiki/tiddlers directory
      3. Execute the following command from the TiddlyWiki5 root directory to build a TiddlyWiki5 file from the tiddlers:
        1. tiddlywiki ~/MyWiki --render $:/core/save/all index.html text/plain

      How to change the sort order of sub-branches in a TOC macro

      20th February 2019 at 12:00am

      Imagine that you are using a Table of Contents macro similar to this:

      <<toc-selective-expandable  "TableOfContents" "sort[title]">>

      The sorting is fine for most cases, but you would like all your items tagged Journal to be sorted by the created field. How can you apply a separate sort order to just those sub-items tagged Journal?

      The trick is to add a field to the parent tagging tiddler (i.e. Journal) that points to a different sort criteria. Let's call the field fuzzy, and populate it with the value created (created is the name of the field that contains a tiddler's creation date).

      Now change your Table of Contents to look like this:

      <<toc-selective-expandable  "TableOfContents" "sort{!!fuzzy}">>

      Now your Table of Contents will sort by title everywhere, except for the children of the Journal tiddler, which will sort by the created date.

      The downside to this trick is that you can't apply a reverse sort based on just one special field. If you reverse the sort order, it will be reversed everywhere.

      How to create a custom story tiddler template

      6th December 2021 at 4:51pm

      Here we show how to add a rule to the Story Tiddler Template Cascade that causes tiddlers tagged to be displayed with a custom appearance incorporating thumbnails of the tiddlers named in the list field.

      Open Demo Tiddler List with Custom Story Tiddler Template to see the demo.

      First, we add a new step to the story tiddler template cascade. The new filter step is:

      [tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]

      It can be read as:

      If the tiddler has the tag $:/tags/TiddlerList then return $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template
      The template $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template also depends on styles defined in $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Styles.

      The story tiddler template cascade is defined by the tag , so we need to create a configuration tiddler with that tag.

      We also need to make sure that it is inserted at the correct point in the cascade:

      • The new rule must be after the "draft" rule to ensure that draft tiddlers with the tag $:/tags/TiddlerList can be edited
      • The new rule must be before the "default" rule otherwise it will never be executed

      The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the list-before field.

      The full list of fields in the configuration tiddler is:

      $:/_tw5.com/CustomStoryTiddlerTemplateDemo/Filter

      code-bodyyes
      list-before$:/config/StoryTiddlerTemplateFilters/default
      tags$:/tags/StoryTiddlerTemplateFilter
      text[tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]

      Finally, we need to create the demo tiddler itself:

      Demo Tiddler List with Custom Story Tiddler Template

      created20211204122107920
      filterHelloThere Community GettingStarted Features Reference Plugins Learning
      modified20211204131610322
      tags$:/tags/TiddlerList
      textThis is a demo tiddler with a custom story tiddler template that displays the tiddlers named in the list field as a fan. See [[How to create a custom story tiddler template]] for details.
      typetext/vnd.tiddlywiki

      How to create a custom tiddler colour rule

      6th December 2021 at 4:51pm

      Here we show how to add a rule to the Tiddler Colour Cascade that causes tiddlers with the tag to be given a bright blue colour and tiddlers with the tag to be given a dark purple colour.

      Tip
      How to create a custom tiddler icon rule describes how the same tiddlers have been given a custom icon

      First, we add a new step to the tiddler colour cascade. The new filter step is:

      [tag[TableOfContents]then[#1e90ff]]
      [tag[Working with TiddlyWiki]then[darkorchid]]

      It can be read as:

      If the tiddler has the tag "TableOfContents" then return the colour #1e90ff
      Else if the tiddler has the tag "Working with TiddlyWiki" then return the colour darkorchid

      The tiddler colour cascade is defined by the tag , so we need to create a configuration tiddler with that tag.

      We also need to make sure that it is inserted at the correct point in the cascade:

      • The new rule must be after the "colour-field" rule to ensure that tiddlers with an explicit color field will respect the value of that field
      • The new rule must be before the "default" icon otherwise it will never be seen if the default colour is specified

      The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the list-before field.

      The full list of fields in the configuration tiddler is:

      $:/_tw5.com/CustomTiddlerColourCascadeDemo

      created20211206114433294
      list-before$:/config/TiddlerColourFilters/default
      modified20211206114433294
      tags$:/tags/TiddlerColourFilter
      text[tag[TableOfContents]then[#1e90ff]] [tag[Working with TiddlyWiki]then[darkorchid]]
      typetext/vnd.tiddlywiki

      How to create a custom tiddler icon rule

      6th December 2021 at 4:51pm

      Here we show how to add a rule to the Tiddler Icon Cascade that causes tiddlers with the tag to be given the "globe" icon and tiddlers with the tag to be given the "help" icon .

      Tip
      How to create a custom tiddler colour rule describes how the same tiddlers have been given a custom colour

      First, we add a new step to the tiddler icon cascade. The new filter step is:

      [tag[TableOfContents]then[$:/core/images/globe]]
      [tag[Working with TiddlyWiki]then[$:/core/images/help]] 

      It can be read as:

      If the tiddler has the tag "TableOfContents" then return $:/core/images/globe
      Else if the tiddler has the tag "Working with TiddlyWiki" then return $:/core/images/help

      The tiddler icon cascade is defined by the tag , so we need to create a configuration tiddler with that tag.

      We also need to make sure that it is inserted at the correct point in the cascade:

      • The new rule must be after the "icon-field" rule to ensure that tiddlers with an explicit icon field will respect the value of that field
      • The new rule must be before the "default" icon otherwise it will never be seen if the default icon is specified

      The control panel "Cascades" tab shows that this can be achieved by inserting the new step immediately before the default step using the list-before field.

      The full list of fields in the configuration tiddler is:

      $:/_tw5.com/CustomTiddlerIconCascadeDemo

      created20211205195110592
      list-before$:/config/TiddlerIconFilters/default
      modified20211205195217941
      tags$:/tags/TiddlerIconFilter
      text[tag[TableOfContents]then[$:/core/images/globe]] [tag[Working with TiddlyWiki]then[$:/core/images/help]]
      typetext/vnd.tiddlywiki

      How to create dynamic editor toolbar buttons

      18th October 2021 at 10:23am

      Create a New Toolbar Button

      The easiest way to create new editor toolbar button is to clone and open one.

      This tiddler contains all the necessary elements that are important for toolbar buttons.

      text
      We don't discuss the text field details in this howto
      caption
      The caption field is used to display the shortcut name in the $:/ControlPanel : Keyboard Shortcuts tab
      condition
      A filter, that defines the button visibility state
      condition-disabled Introduced in v5.1.23
      A filter, that allows us to define the "disabled" attribute for buttons. eg: [[$:/temp/bold/disabled]get[state-disabled]else[no]]
      This condition must return "no", if the "state tiddler" or "state field" doesn't exist! So there has to be a else[no] element in the filter.
      description
      Is used as the button tooltip
      icon
      Assigns the button icon. We use $:/core/images/spiral here. More button icons can be found in the Icon Gallery
      shortcuts
      This is the Keyboard Shortcut Descriptor eg: ((temp-bold))

      Disabled State

      You can use any "state tiddler" to define the button disabled state. It's important, that the condition-disabled field is a filter. For our example we use the state-disabled field from tiddler: $:/temp/bold/disabled

      The easiest way to test filters is with the $:/AdvancedSearch : Filter tab

      The temporary "bold button" is disabled: "no" ... You can see the button in the editor toolbar if you edit any tiddler!

      Create Keyboard Shortcuts for New Button

      For our HowTo we use the Keyboard Shortcut Descriptor: ((temp-bold))

      To create a valid shortcut configuration we need 2 tiddlers:

      $:/config/ShortcutInfo/temp-bold .. and
      $:/config/shortcuts/temp-bold

      Clean up the Configuration Tiddlers

      If you don't need the config tiddlers anymore you can

      How to create keyboard shortcuts

      9th December 2025 at 1:36pm

      Introduction

      TiddlyWiki distinguishes two types of keyboard shortcuts:

      1. Those that are limited to work within input fields or textareas which are handled by the $keyboard widget
      2. Keyboard shortcuts that work globally, which means that only the page needs to have focus in order for them to be accessible

      The latter are handled by a mechanism that starts to work when a wiki is loaded

      Configuration Mechanism

      The configuration mechanism is the same for both shortcut-types.

      A tiddler with the prefix $:/config/ShortcutInfo/ and a unique suffix appended, like my-shortcut, makes the new shortcut appear in the $:/ControlPanel within the Keyboard Shortcuts Tab. An optional description can be added within its text field

      In the Keyboard Shortcuts Tab the key combination that should trigger the shortcut can be configured:

      Look for the unique suffix defined for the new shortcut and click the button to open a popup that detects key combinations and shows the detected combination in its input field

      The add shortcut assigns the key-combination to the shortcut

      Depending on the chosen platform the configuration mechanism creates a tiddler with a specific nomenclature

      $:/config/shortcuts/ + the shortcut suffix for shortcuts that will work on all platforms (operating systems)

      $:/config/shortcuts-(mac/not-mac/windows/not-windows/linux/not-linux)/ + the shortcut suffix for shortcuts that will work on the chosen platform only or that will not work on the excluded platform

      Shortcut Configuration Examples

      • $:/config/shortcuts/my-shortcut
      • $:/config/shortcuts-mac/my-shortcut
      • $:/config/shortcuts-windows/my-shortcut
      • $:/config/shortcuts-linux/my-shortcut
      • $:/config/shortcuts-not-mac/my-shortcut
      • $:/config/shortcuts-not-windows/my-shortcut
      • $:/config/shortcuts-not-linux/my-shortcut

      Note
      Those platform-specific tiddlers don't have to be created manually if the ShortcutInfo tiddler as mentioned above is created first and the shortcut is configured in the ControlPanel

      At this point the shortcut is defined and its actions can be configured

      Using the Keyboard Widget

      A $keyboard widget detects the key combinations pressed within an input or textarea field within its scope. The $keyboard widget needs to "embrace" the input or textarea field and its key attribute either points to a configuration tiddler using the Key Descriptor Syntax or explicitely contains the key

      <$keyboard key="((my-shortcut))" actions='<$action-setfield $tiddler="my-tiddler" $field="my-field" $value="my-value"/>'>
      
      <$edit-text tag="input" tiddler="my-tiddler"/>
      
      </$keyboard>
      <$keyboard key="alt-shift-M" actions='<$action-setfield $tiddler="my-tiddler" $field="my-field" $value="my-value"/>'>
      
      <$edit-text tag="input" tiddler="my-tiddler"/>
      
      </$keyboard>

      If actions are defined , the $keyboard widget will invoke the actions defined in its actions attribute when it detects the key-combination defined in its key attribute being pressed in any input or textarea field within its scope

      Using global Keyboard Shortcuts

      See Keyboard Shortcut Tiddler for detailed information about creating new global keyboard shortcuts.

      The actions for global keyboard shortcuts are stored in the text field of tiddlers tagged with

      The key field connects an action-tiddler with the corresponding shortcut through the ((my-shortcut)) syntax, called Keyboard Shortcut Descriptor

      Syntax
      (( + a chosen suffix + ))

      If the tiddler has the tag , the field key with the Keyboard Shortcut Descriptor as its value and some actions in its text field, the actions will be triggered when the mechanism detects the configured key-combination

      Note
      Macros defined outside a global keyboard-shortcut (through a tiddler tagged $:/tags/Global) need to be imported in order to be accessible. The import pragma can be used for that

      \import [subfilter{$:/core/config/GlobalImportFilter}]

      If the tiddler that contains the macro definition is known and - for example - titled my-macro-tiddler

      \import [[my-macro-tiddler]]

      Note
      Some actions require to be wrapped within a $navigator widget. That is necessary for the following list of widgets and messages in order to work if used within global keyboard shortcuts

      Widgets

      Messages

      How to Customize TiddlyDesktop

      18th November 2017 at 7:45pm

      Prelude/caution:

      Before experimenting with TiddlyDesktop internals you should find the location of the “user configuration folder” - click the “Settings” button on the main TiddlyDesktop window, and then click the button “Open user config folder”. Then move up to locate the parent folder, which should be called “TiddlyDesktop”. If things go wrong, you can reset TiddlyDesktop to its factory state by deleting this entire folder.

      Click the Backstage button on the main TiddlyDesktop window to open the backstage wiki. This is a Node.js-like instance of TiddlyWiki that runs the UI and logic of TiddlyDesktop.

      How do I get rid of the "Add a TiddlyWiki Folder" button.

      Within the backstage wiki, locate the tiddler WikiListToolbar (there’s a link in HelloThere). Click it into edit mode and you’ll see the wikitext for all the toolbar buttons. If you make modifications and click “done” then the changes will immediately be reflected in the main TiddlyDesktop window.

      How would I change the "advanced" button to the "reveal backups" button.

      You can copy the code for the “reveal backups” button from the tiddler $:/TiddlyDesktop/Settings and paste it into WikiListToolbar.

      How do I change the colors?

      Just as usual in TiddlyWiki: you can use the palette, or define your own custom CSS.

      How do I change the order in which the tiddlers are listed (which appears to be alphabetical)?

      Open the WikiList tiddler, edit it, and scroll to the end. Then change the <$list> widget inside the wikilist macro:

      <$list filter="[tag[wikilist]sort[title]!has[draft.of]]" emptyMessage="Add a ~TiddlyWiki file or folder to get started. Click the buttons above to browse, or drag and drop from your file Explorer/Finder" storyview="pop">

      How to embed PDF and other documents

      3rd August 2023 at 5:18am

      Note about embedding versus external linking

      Note: Before we dive into how you can embed files of a certain type, you may want to consider not embedding and instead simply linking to external resources like this:

      [ext[title|path/to/that.file]] 

      Then let your browser decide how to handle the resource. The advantage to this approach is that it is simple and quick. The disadvantage is that the file doesn't actually travel with the TW5 file and that you can't use node.js with method #2 below to quickly file paths.

      Two ways to embed a PDF in your TW5 file.

      1. Embedding with Drag and Drop

      One is to drag and drop the file onto your TW5 file. Wait for the green bar to appear at the top, drop, and then import from the import tiddler. This actually embeds the contents of your imported PDF (or other file) into your TW5 file.

      This method be OK as long as your PDF is not too big. There can be concerns if your TW5 file becomes too big.

      2. Embedding with '_canonical_uri'

      The other way is to create a tiddler link to the external file. In this method the file is not actually incorporated into your TW5 file, but can be accessed with the {{My Image File.jpg}} transclusion syntax just like an embedded file. The location address of the file can also be changed under Node.js. See ExternalImages for details of using external images with node.js.

      Create a tiddler with a field _canonical_uri. Put in the local address to the external file. Set the type field to application/pdf.

      With either way, with an appropriately configured browser, you should see your embedded PDF file.

      Other File Types

      There's only so many file formats that TW5 knows about. There is a list at ContentType. If your browser and/or TW5 doesn't know what to do with a particular file format, then you can only the use the second method to embed and then download a file. When you edit the tiddler a link is presented. You can right click on the link in order to download the file.

      How to export tiddlers

      10th June 2016 at 8:40am

      Selecting All tiddlers for export

      To export all tiddlers click on the "Tools" tab of the Sidebar. Find and click the export all button. A pop-up menu will offer you the chance to export tiddlers in multiple formats.

      Exporting a tiddler

      If you want to export a particular tiddler, first navigate to that tiddler. Then click on the more button that appears above the tiddler. From the list that appears select export tiddler. A pop-up menu will offer you the chance to export the tiddler in multiple formats.

      Exporting tiddlers matching a criteria (filter)

      To export a selection of tiddlers, click the little magnifying glass next to the search area on the sidebar. This will open the Advanced Search tiddler. Click on the "Filter" tab of the Advanced Search tiddler. Only the Filter tab will allow you to export a selection of tiddlers. Filters follow a particular syntax. Click on this Filters link to learn about how to make filters.

      Once you have written a filter, a list of tiddlers matching the filter will appear. Now you can click on the export tiddler button to the right of the filter input field. A pop-up menu will offer you the chance to export tiddlers in multiple formats.

      Export formats

      Currently, the export formats available are:

      • CSV file format
      • JSON file format
      • Static HTML file
      • ".tid" file format

      The ".tid" format is unique from the other formats in that only one tiddler will be exported, even if you are attempting to export all tiddlers or a selection of tiddlers.

      How to hide the author's and other fields with CSS

      10th March 2018 at 8:12pm

      Sometimes you might want to save some screen space by hiding away the author's name in all tiddlers. Here's a quick way to do it:

      • Create a new tiddler with any title you want.
      • Give the tiddler the tag $:/tags/Stylesheet
      • In the text field of the tiddler put:
      .tc-subtitle .tc-tiddlylink {display:none;}
      • Save the tiddler. The author's name field should no longer appear.

      Similarly, the entire subtitle field including author and date can be removed with:

      .tc-subtitle {display:none;}

      Unfortunately, you can't hide just the date without also hiding the author using CSS.

      And finally, for a truly minimalist look, you can remove the title with:

      h2.tc-title {display:none;)

      How to put the last modification date in a banner

      17th June 2016 at 12:59pm

      Here's how to display the last modification date of a wiki in a banner in the corner of the window:

      1. Install the plugin Corner ribbon in your TiddlyWiki
      2. Save ( ) and reload () your wiki
      3. Create a new tiddler called $:/_MyRibbon tagged $:/tags/PageControls and containing:
        <div class="github-fork-ribbon-wrapper right">
        <div class="github-fork-ribbon" style="background-color:#DF4848;">
        <$list filter="[!is[system]!has[draft.of]!sort[modified]limit[1]]">
        <$link>
        <$view field="modified" format="date" template="DD mmm YYYY at 0hh:0mm"/>
        </$link>
        </$list>
        </div>
        </div>
      4. If required, change the background-color value to your preference
      5. You can also try changing the positioning class from right to right-bottom
        1. To make the banner appear at the top left you'll need to tag the tiddler $:/tags/PageTemplate instead of $:/tags/PageControls and then change the position class to left

      How to remove stop words

      18th November 2020 at 10:34am

      You can use the search-replace Operator in combination with the sortsub Operator to ignore stop words like "A" and "The" at the beginning of titles when sorting. (Note for example that "A Tale of Two Cities" sorts under "T" rather than "A")

      [enlist<book-list>sortsub<compare-without-stopwords>]

      You can also customise the listing so that "A Tale of Two Cities" is listed as "Tale of Two Cities, A" but still links to the correct tiddler.

      <ul>
      <$list filter="[enlist<book-list>sortsub<compare-without-stopwords>]">
      <li><$link><$text text={{{[<currentTiddler>search-replace:i:regexp[(^The |A )(.*)],[$2, $1]]}}}/></$link></li>
      </$list>
      </ul>

      That renders as:

      How to turn off camel case linking

      23rd September 2024 at 4:18pm

      CamelCase is used in most Wikis, but it can interfere with text presentation in some situations.

      Turning off Camel Case locally

      To prevent a particular CamelCase word from being linked, simply put a tilde (~) in front of the word, like this:

      ~CamelCase

      If you need to disable CamelCase for just an entire tiddler, you can use the \rules pragma:

      \rules except wikilink

      Turning off Camel Case globally

      To turn off CamelCase in all tiddlers, navigate to the Control Panel. Select the Settings tab and then scroll or read down to the Camel Case Wiki Links section and unselect Enable automatic CamelCase linking.

      How to update TiddlyWiki to the latest version

      26th April 2022 at 10:12pm

      There are regular releases of TiddlyWiki with bug fixes and improvements. It's a good idea to keep up to date by regularly upgrading to the latest version.

      Introduction

      The process described here is for upgrading standalone TiddlyWiki files. There is a different procedure for upgrading TiddlyWiki on Node.js.

      When upgrading, please remember the The First Rule of Using TiddlyWiki:

      You are responsible for looking after your own data; take care to make backups, especially when upgrading the TiddlyWiki core

      Online upgrading

      This process will work on most desktop browsers. Note that none of your personal data leaves your browser with this process.

      1. Locate your TiddlyWiki file in the file system (i.e. using Windows Explorer, the Finder on Mac OS X, or your file manager on Linux)
      2. Visit https://tiddlywiki.com/upgrade.html in your browser
      3. Drag your old TiddlyWiki HTML file into the browser window
        • If the file is encrypted you will be prompted for the password
      4. Review the list of tiddlers that will be upgraded
      5. Click Upgrade
      6. Save changes to save the new version ( )

      This will download a file called upgrade.html to your computer. This file is the upgrade of your old file. You may need to open the location where upgrade.html was downloaded, rename upgrade.html with the name of the old file you are upgrading, and replace the old file by moving the new file in its place.

      Offline upgrading

      You can also download https://tiddlywiki.com/upgrade.html locally and perform the same drag-and-drop procedure to upgrade your files.

      Problems with Upgrades

      Firefox Security Restrictions

      The following error occurs when trying to perform the online upgrade procedure using Firefox:

      Error while saving:

      Error:NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

      The upgrade operation falls foul of a security restriction in Firefox. Until this can be resolved, we suggest either using the offline upgrader, or using Chrome to perform the upgrade:

      1. Use Chrome to open https://tiddlywiki.com/upgrade.html, then drag the TiddlyWiki HTML file to be upgraded into the upgrader window, as described above in Online upgrading
      2. After you've saved your upgraded file, you should be able to open it in Firefox and save using TiddlyFox again

      Incompatible Customisations

      It is possible for a customisation applied in a previous version to break when upgraded to the latest version. There are two techniques you can use to help track down issues:

      • Try repeating the upgrade having selectively unchecked any tiddlers that may be applying customisations to TiddlyWiki
      • Use SafeMode to disable all customisations of shadow tiddlers

      You can see which shadow tiddlers have been overridden in the Filter tab of advanced search. Select "Overridden shadow tiddlers" from the dropdown.

      How to widen tiddlers (aka storyriver)

      8th December 2016 at 12:00am

      You can change the width of the main column of tiddlers (also known as the story river) by:

      • Clicking on the settings cog to open the control panel
      • In the control panel select "Appearance" and then "Theme Tweaks".
      • Under Theme tweaks, scroll down.

      There you will see settings for story right, story width, and tiddler width. By setting these numbers to something larger, you can widen the tiddlers. In general, story right and story width should be the same size, and tiddler width a little bit smaller. You could even use percentages for tiddler width. You will also probably want to change the sidebar breakpoint to something larger than the story river, unless you don't mind the sidebar floating to the top of the page.

      HTML Block Elements

      18th August 2022 at 9:21am

      HTML Entities

      26th July 2024 at 7:48am

      Summary

      Use HTML entities to enter characters that cannot easily be typed on an ordinary keyboard. They take the form of an ampersand (&), an identifying string, and a terminating semi-colon (;), e.g. &amp; for the & character.

      Markup

      The value of Tiddlers&trade; cannot even be expressed in &pound;, &euro; or &dollar;.

      Displays as:

      The value of Tiddlers™ cannot even be expressed in £, € or $.

      Entity References

      Comprehensive lists of html entities can be found at...

      Examples Of Common And Useful Entities

      HTML Entities
      &nbsp; no-break space  
      &NoBreak;zerro width WordJoiner  &apos;'single quote, apostrophe
      &ndash;en dash&quot;"quotation mark
      &mdash;em dash&prime;prime; minutes; feet
      &hellip; horizontal ellipsis&Prime;double prime; seconds; inches
      &copy;©Copyright symbol&lsquo;left single quote
      &reg;®Registered symbol&rsquo;right single quote
      &trade;Trademark symbol&ldquo;left double quote
      &dagger;dagger&rdquo;right double quote
      &Dagger;double dagger&laquo;«left angle quote
      &para;paragraph sign&raquo;»right angle quote
      &sect;§section sign&times;×multiplication symbol
      &uarr;up arrow&darr;down arrow
      &larr;left arrow&rarr;right arrow
      &lArr;double left arrow&rArr;double right arrow
      &harr;left right arrow&hArr;double left right arrow

      Accented Characters

      The table below shows how accented characters can be built up by substituting the underscore (_) in the second table into the corresponding character. eg:

      CodeCharacterExampleResult
      &Auml;Ä&Auml;pfelÄpfel
      Accented Characters
      grave accent&_grave;ÀàÈèÌìÒòÙù      
      acute accent&_acute;ÁáÉéÍíÓóÚú  Ýý  
      circumflex accent&_circ;ÂâÊêÎîÔôÛû      
      umlaut mark&_uml;ÄäËëÏïÖöÜü  Ÿÿ  
      tilde&_tilde;Ãã    Õõ  Ññ    
      ring&_ring;Åå              
      slash&_slash;      Øø        
      cedilla&_cedil;              Çç

      HTML in WikiText

      25th October 2024 at 7:35am

      HTML tags and comments

      HTML tags and comments can be used directly in WikiText. For example:

      <article class="hello">
      This is my nice and simple block of text. HelloThere
      <!-- This comment will not appear in the wikified output -->
      </article>

      Pragma Comments

      Introduced in v5.2.0 Comments can now be freely intermixed with pragmas as well as within the main body of a block of wikitext.

      <!-- NEW: Comment that describes the macro -->
      \define test()
      some text <!-- inline comment -->
      \end
      
      <<test>>

      Important

      Security

      Warning
      Note that any HTML attributes prefixed with on are removed from the rendered HTML content. This is done to prevent event handlers (such as "onclick") being used as a clandestine way to execute untrusted JavaScript. A design goal of TiddlyWiki is to ensure that executable JavaScript can only enter the system through explicit JavaScript module tiddlers or raw markup tiddlers. This makes it possible to filter unsafe content in multiuser environments, and also makes it safer to copy untrusted wikitext examples.

      Widgets

      Tip
      Widgets share the same syntax as HTML tags
      and so the following information applies to them, too.

      Block mode versus Inline mode

      To get the content of an HTML element to be parsed in block mode, the opening tag must be followed by two linebreaks.

      Without the two linebreaks, the tag content will be parsed in inline mode which means that block mode formatting such as wikitext tables, lists and headings is not recognised.

      See also WikiText parser mode: HTML examples and WikiText parser mode transitions.

      Self closing elements

      The following tags are treated as 'void'. This means that <tag> is treated as if it were <tag/>, and that no terminating </tag> is needed (if one is provided it will be ignored and treated as plain text).

      • <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track>, <wbr>

      If you do not close any other tag then it will behave as if the missing closing tag were at the end of the tiddler.

      Attributes

      In an extension of conventional HTML syntax, attributes of elements and widgets can be specified in several different ways:

      Style Attributes

      TiddlyWiki supports the usual HTML style attribute for assigning CSS styles to elements:

      <div style="color:red;">Hello</div>

      Introduced in v5.2.2 In an extension to HTML, TiddlyWiki also supports accessing individual CSS styles as independent attributes. For example:

      <div style.color="red">Hello</div>

      The advantage of this syntax is that it simplifies assigning computed values to CSS styles. For example:

      <div style.color={{!!color}}>Hello</div>

      New in v5.3.6 TiddlyWiki also supports setting CSS custom properties as independent attributes. For example:

      <div --bg-color={{{ [[red]] }}}>Hello</div>

      HTML Links in WikiText

      21st October 2016 at 10:20am

      It is often useful to be able to create HTML links to external resources. For example, here the value of the href attribute will be set to the value of the tiddler MyLinkDestination:

      <a href={{MyLinkDestination}}>link</a>

      However, there is an unexpected security issue that means that most of the time the link should have the rel attribute set to noopener noreferrer to maintain privacy of the URLs of private TiddlyWiki's (eg on Dropbox). See https://mathiasbynens.github.io/rel-noopener/ for more information.

      <a href={{MyLinkDestination}} rel="noopener noreferrer">link</a>

      HTML Tags

      11th February 2025 at 9:23am

      HyperText Markup Language

      28th February 2015 at 1:39pm

      HTML is a standard plain-text format used for defining the content of a web page.

      It consists of a tree of elements expressed using a system of special tags enclosed in angle brackets.

      Almost the whole of HTML can be used unchanged in the WikiText of a tiddler.

      Icon Gallery

      18th October 2021 at 10:23am

      image-picker Macro

      18th April 2016 at 3:58pm

      The image-picker macro displays an interactive image picker, as can be seen in the core text editor.

      Parameters

      actions
      Wikitext for the action widgets that should be executed when the user selects an image. Within the text, the variable imageTitle contains the title of the tiddler containing the selected image.
      subfilter
      An optional extra filter step, e.g. tag[MyTag]

      The images are selected by means of a filter expression, into which the subfilter parameter is spliced as follows:

      [all[shadows+tiddlers]is[image]$subfilter$!has[draft.of]] -[type[application/pdf]] +[sort[title]]

      Examples

      image-picker Macro (Example 1)

      16th November 2021 at 3:50am