The --tp-animation-duration CSS variable represents the "Animation duration" setting in the control panel. The ms suffix is added.
The --tp-animation-duration CSS variable represents the "Animation duration" setting in the control panel. The ms suffix is added.
The --tp-body-font-size CSS variable represents the "Font size for tiddler body" setting in Theme Tweaks.
The --tp-body-line-height CSS variable represents the "Line height for tiddler body" setting in Theme Tweaks.
The --tp-code-font-family CSS variable represents the "Code font family" setting in Theme Tweaks.
The --tp-code-wrapping CSS variable represents the "Wrap long lines in code blocks" setting in Theme Tweaks. Its value is pre when the setting is set to "No", and pre-wrap when set to "Yes".
The --tp-editor-font-family CSS variable represents the "Editor font family" setting in Theme Tweaks.
The --tp-font-family CSS variable represents the "Font family" setting in Theme Tweaks.
The --tp-font-size CSS variable represents the "Font size" setting in Theme Tweaks.
The --tp-line-height CSS variable represents the "Line height" setting in Theme Tweaks.
The --tp-sidebar-breakpoint CSS variable represents the minimum page width at which the story river and sidebar will appear side by side.
The --tp-sidebar-width CSS variable represents the width of the sidebar in fluid-fixed layout.
The --tp-story-left CSS variable represents how far the left margin of the story river (tiddler area) is from the left of the page.
The --tp-story-right CSS variable represents how far the left margin of the sidebar is from the left of the page.
The --tp-story-top CSS variable represents how far the top margin of the story river is from the top of the page.
The --tp-story-width CSS variable represents the overall width of the story river.
The --tp-tiddler-width CSS variable represents the tiddler width within the story river.
--tpc-* variables are CSS variables of palette colors. They can be accessed via appending the palette color names to the bottom. For example:
.code {
background-color: var(--tpc-code-background);
color: var(--tpc-code-foreground);
}Interesting article giving the perspective of someone who has been away from TiddlyWiki for a few years:
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 based on TiddlyWiki.
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.
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.
buggyj has created several useful plugins, including a WYSIWYG HTML editor, a configurable calendar and tag lists with draggable ordering.
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.
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.
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.
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.
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
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.
A TiddlyWiki plugin for kanban-like organisation in the style of Trello™ using boards, lists, and cards.
Dynamic Tables is a set of macros that allow you to create tables where the rows are created from tiddlers and the columns from the tiddler fields, or where the columns are created from tiddlers and the rows from their fields. Individual cells can be edited on the fly. Row tables can be sorted by columns and column tables can be sorted by rows.
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.
- [...]
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!
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.
The Font Awesome 5 Free SVG images collection converted to tiddlers that you can easily import (drag'n'drop) in your wiki.
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.
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:
- 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:
- See how the different types of passages are distributed throughout each Gospel.
- Hover over passages to see the verses and titles.
- Click on a passage to open it and see the themes and other data it mentions.
- 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.
- 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.
- 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 is an interactive learning environment for TiddlyWiki. It bundles three complementary modes of learning into one TiddlyWiki:
An adaptation of the TiddlyWiki powered GTD® system formerly known as MonkeyGTD for TiddlyWiki version 5.
GSD5 is a Getting-Thing-Done tool for TiddlyWiki5 based off the mGSD classic TiddlyWiki.
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.
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
A guide in Russian to creating an online shop with TiddlyWiki. No serverside code is needed, instead orders are handled by Disqus.
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.
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
A complete online shop made in TiddlyWiki!
https://web.archive.org/web/20241127033249/http://luckysushi.ru/habarovsk/heeg.html#index
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 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.
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
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.
This theme by JD features a left side bar, advanced functionality from the search bar and plenty of customizability built in.
A terrific demo of drag and drop, pan and zoom, and other sophisticated touch effects. Based on the muuri plugin by Uwe Stuehler.
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 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?
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.
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)
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.
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
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
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.
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).
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 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
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.
An enormous collection of tips beautifully curated by Tobias Beer. It is actually a collection of sites, with sub-sites dedicated to topics such as filtering (http://tobibeer.github.io/tw/filters/).
http://tobibeer.github.io/tb5/
A collection of references and sandbox for testing concepts around TiddlyWiki 5...
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?
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.
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
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)
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.
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
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.
Notes and tips by a developer working on writing TiddlyWiki plugins – including TWExe, a widget for running Windows scripts and executables.
A collection of articles covering integration with Fargo, Font Awesome and Google Calendar, and tips for managing task lists. The original site is missing, but a link to an archive is provided.
https://web.archive.org/web/20221015011644/http://blog.jeffreykishner.com/tiddlywiki/
I have become a regular user of TiddlyWiki and have become so accustomed to using Font Awesome icons in Fargo that I wanted to incorporate the icons into my wikis as well.
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:
A translation of the tiddlywiki.com documentation from Bram Chen, TiddlyWiki's Chinese translator.
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)
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で出来ることのごく一部です。
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.
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.
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).
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.
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
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.
A guide (in French) to using TiddlyWiki on the BiblioBox, a variation of the PirateBox mobile communication and file sharing system.
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
A beautiful theme that leverages the white spaces between elements.
A collection of references for testing concepts around TiddlyWiki 5...
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.
Matabele's stylish and clean system for personal task management.
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
An experiment to embed interactive 3D graphics within TiddlyWiki by Jamal Wills. It is based X3DOM, an open source JavaScript library.
I make random software.
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.
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.
I'm the original inventor of TiddlyWiki. You can hire me through my consultancy company Intertwingled Innovations or contact me directly.
Further information:
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.
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.
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
I am a Project Maintainer for TiddlyWiki 5. I have a background as a UX designer, developer, doctor, photographer, and a non-profit educational sector jack of all trades, plus a few other things I often forget.
I first discovered TiddlyWiki in early 2005, and fully embraced it in 2006 while searching for a practical way to prototype software solutions for the educational non-profit I was working with at the time. What began as a tool quickly became a teacher. Through TiddlyWiki, I learned how to code, earned my chops in JavaScript and frontend development, and grew into technical leadership and project lead roles. I later formalized this experience with a Master’s degree in IT, with a focus on user experience design.
My work with TiddlyWiki today centers on using it as an application prototyping and development platform, with a particular focus on its true offline-first capabilities and its strength as a tool for thinking, building, and iterating without friction.
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:
| purpose | calculate the absolute value of a list of numbers |
|---|---|
| input | a selection of titles |
| output | the absolute value of the input numbers |
Learn more about how to use Filters
Introduced in v5.1.20 See Mathematics Operators for an overview.
[[-2000]abs[]]=-1 =-2 =3 =4 =5 +[abs[]]A plugin to integrate the Ace editor into TiddlyWiki.
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...).
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:
| purpose | calculate the arccosine value (in radians) of a list of numbers |
|---|---|
| input | a selection of titles |
| output | the 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.
[[2]acos[]]=1 =2 =3 =4 +[acos[]]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.
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.
| Attribute | Description |
|---|---|
| $message | Optional message displayed to the user when asking for confirmation. |
| $prompt | Optional flag, set to "no" to disable the prompt for confirmation. Defaults to "yes" |
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:
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 action-createtiddler widget is invisible.
| Attribute | Description |
|---|---|
| $basetitle | The 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 |
| $savetitle | Deprecated 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 |
| $savedrafttitle | Deprecated 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 |
| $timestamp | 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" |
| $template | Introduced in v5.1.22 The title of a template tiddler, that will be used to create a new tiddler |
| $overwrite | Introduced 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 |
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.
| Variables | Description |
|---|---|
createTiddler-title | The tittle of the tiddler that has been created. See ActionCreateTiddlerWidget Example 5 |
createTiddler-draftTitle | This variable only exists to have feature parity with the deprecated parameters. It contains the title of a "draft tiddler" |
Use the $action-createtiddler widget to create and open a new, non-functional page control button tiddler
| title | Output |
Caption for new button:
The button in this example uses the $action-createtiddler widget to create "New Tiddler", "New Tiddler 1", " New Tiddler 2" and so on
| title | Output |
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.
| title | Output |
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
| title | Output |
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.
| title | Output |
The $action-createtiddler widget in this example uses the createTiddler-title variable to navigate to the created tiddler
| title | Output |
Use the $action-createtiddler widget to create and open a new, non-functional page control button tiddler
| title | Output |
Caption for new button:
The button in this example uses the $action-createtiddler widget to create "New Tiddler", "New Tiddler 1", " New Tiddler 2" and so on
| title | Output |
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.
| title | Output |
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
| title | Output |
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.
| title | Output |
The $action-createtiddler widget in this example uses the createTiddler-title variable to navigate to the created tiddler
| title | Output |
This is a tiddler used as a template in: ActionCreateTiddlerWidget Example 3
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.
The action-deletefield widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $tiddler | The title of the tiddler whose fields are to be modified (if not provided defaults to the current tiddler) |
| $field | Optional name of a field to delete |
| $timestamp | New 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 |
Use the $action-deletefield widget to delete the "caption" and "tags" fields of the current tiddler
| title | Output |
| caption | A caption |
| tags | tag1 tag2 tag3 |
Click and watch the "caption" and "tags" field disappear.
Use the $action-deletefield widget to delete the "list" and "tags" fields of the tiddler HelloThere
| title | Output |
Click HelloThere, then click and watch the "list" and "tags" fields disappear
Use the $field attribute of the $action-deletefield widget to delete the "text" field of the tiddler HelloThere
| title | Output |
Click HelloThere, then click and watch the contents of the "text" field disappear
Use the $field attribute of the $action-deletefield widget to delete a variable field name
| title | Output |
| description | This field will be deleted |
Click and watch the "description" field disappear.
Use the $timestamp attribute of the $action-deletefield widget to prevent creation/change of "modified" and "created" fields
| title | Output |
| description | This field will be deleted |
Click and watch the "description" field disappear without the "modified" and "created" fields getting added
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 action-deletetiddler widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $tiddler | Optional title of the tiddler to be deleted |
| $filter | Optional filter identifying tiddlers to be deleted |
Use the $tiddler attribute of the $action-deletefield widget to delete the "HelloThere" tiddler
| title | Output |
Use the $filter attribute of the $action-deletefield widget to delete all tiddlers tagged "TableOfContents"
| title | Output |
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.
The action-listops widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $tiddler | The title of the tiddler whose lists are to be modified (if not provided defaults to the current tiddler) |
| $field | The name of a field to be manipulated as a list (defaults to 'list') |
| $index | Optional index of a property in a data tiddler index to be manipulated as a list |
| $filter | An optional filter expression, the output of which will be saved to the field/index being manipulated |
| $subfilter | An optional subfilter expression, which takes the list being manipulated as input, and saves the modified list back to the field/index being manipulated |
| $tags | An 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 |
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]]"/>Without any prefixes, the filter run output is simply dominantly appended to the list.
See also the Examples.
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.
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"/>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.
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.
In some cases, there may occur unexpected de-duplication of lists.
list fieldWhen 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.
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:
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.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.
<$button>
<$action-listops $tags="+[append{Days of the Week!!short}] $:/tag1 $:/tag2 $:/tag3"/>
Populate 'tags'
</$button>
<$button>
<$action-listops $tags="+[!remove:2{!!tags}]"/>
Remove Last Two Tags
</$button>
<$button>
<$action-listops $tags="+[!prefix[$:/]]"/>
Remove System Tags
</$button>
<$button>
<$action-listops $tags="-Mon -Tue"/>
Remove Mon and Tue
</$button>
<$button>
<$action-listops $tags="+[prefix[$:/]] ActionWidgets Widgets"/>
Remove User Tags
</$button>
<$button>
<$action-listops $tags="+[[]] ActionWidgets Widgets"/>
Clear Tags
</$button>
<$list filter="[list[!!tags]]">
</$list>That renders as:
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.
The $action-log widget is invisible. Any content within it is ignored.
New in v5.4.0 Any multi-valued variables or attributes are logged as a list of values.
| Attribute | Description |
|---|---|
$$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 |
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}} />$$filter and $$message Log all core variables (which start with tv-) with a table title:
<$action-log $$message="Core Variables" $$filter="[prefix[tv-]]" />Change a misbehaving $action-setfield widget to an $action-log widget to verify that currentTiddler and value match their expected values:
<$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.
Log the tiddlerList function definition and its first evaluation result:
\function tiddlerList() [tag[Learning]]
<$action-log $$filter="[title[tiddlerList]]" value=<<tiddlerList>> />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.
The action-navigate widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $to | The title of the target tiddler for the navigation (if not provided defaults to the current tiddler |
| $scroll | Optional parameter determining whether the navigation will also cause a scroll to the target tiddler (see below) |
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:
Note that if navigating to multiple tiddlers at once you should use the same $scroll setting for all of them.
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:
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.
The action-popup widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $state | The title of the state tiddler for the popup |
| $coords | Optional coordinates for the handle to which popup is positioned (see Coordinate Systems for the supported formats) |
| $floating | Introduced 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.
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:
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.
The action-sendmessage widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $message | The message to send (eg, WidgetMessage: tm-new-tiddler) |
| $param | Optional parameter string whose meaning is dependent on the message being sent |
| $name | Optional name of additional parameter |
| $value | Value for optional parameter whose name is specified in $name |
| $names | Introduced in v5.2.1 Optional filter evaluating to a list of additional parameter names |
| $values | Introduced 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 |
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:
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.
The action-setfield widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $tiddler | The title of the tiddler whose fields are to be modified (if not provided defaults to the current tiddler) |
| $field | Optional name of a field to be assigned the $value attribute |
| $index | Optional index of a property in a data tiddler to be assigned the $value attribute |
| $value | The 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. |
| $timestamp | 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 modified with the attribute value providing the value to assign to the field |
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:
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.
The action-setmultiplefields widget is invisible. Any content within it is ignored.
| Attribute | Description |
|---|---|
| $tiddler | Optional title of the tiddler to modify (defaults to the current tiddler) |
| $fields | Optional filter evaluating to the names of a list of fields to assign. Either $fields or $indexes must be specified |
| $indexes | Optional filter evaluating to the names of a list of indexes to assign. Either $fields or $indexes must be specified |
| $values | Filter evaluating to the values to be assigned to the fields or indexes |
| $timestamp | 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" |
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:
The variable actionTiddler is used in subtly different ways by different widgets:
The variable actionTiddlerList is used:
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.
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:
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:
actions) on the triggering widget (this is the preferred way)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>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>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.
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:
| purpose | treating each input title as a number, add to each the numeric value of the parameter |
|---|---|
| input | a selection of titles |
| parameter | N=a number |
| output | the input as numbers, but with N added to each one |
Learn more about how to use Filters
Introduced in v5.1.20 See Mathematics Operators for an overview.
[[23]add[19]]=1 =2 =3 =4 +[add[4]]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:
<div class="tc-table-of-contents">
<<toc-selective-expandable 'TableOfContents'>>
</div>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.
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>
\endThe 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>| purpose | extend each input title with a prefix |
|---|---|
| input | a selection of titles |
| parameter | S=a string of characters |
| output | the input, but with S added to the start of each title |
Cat Garden [[Favourite Armchair]] +[addprefix[My ]]| purpose | extend each input title with a suffix |
|---|---|
| input | a selection of titles |
| parameter | S=a string of characters |
| output | the input, but with S added to the end of each title |
[[London]addsuffix[ Underground]]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.
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
| purpose | find which input title follows a specified one |
|---|---|
| input | a selection of titles |
| parameter | T=one of those titles |
| output | the 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.
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]]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:
| Field | Description |
|---|---|
| title | By default, alert titles have the prefix $:/temp/alerts/ |
| text | The text of the alert message |
| modified | Date of the alert (used for ordering the alerts on screen) |
| component | Component name associated with the alert |
| tags | Must include $:/tags/Alert |
| purpose | union of sets without de-duplication |
|---|---|
| input | all titles from previous filter runs |
| output | output titles are appended to the output of previous filter runs without de-duplication. |
This prefix has an optional shortcut syntax symbol =run
| purpose | find all titles of a fundamental category |
|---|---|
| input | ignored, unless the parameter is empty |
| parameter | zero or more categories |
| output | the 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:
| Category | Members | Sorted |
|---|---|---|
current | just the current tiddler | – |
missing | all non-existent tiddlers to which there is at least one hard link | no |
orphans | all tiddlers to which there are no hard links | by title |
shadows | all the shadow tiddlers that exist, including any that have been overridden with non-shadow tiddlers | no |
tags | all the tags in use on non-shadow tiddlers | no |
tiddlers | all the non-shadow tiddlers that exist | no |
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.
[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[]]| purpose | discard all items except those after the marker |
|---|---|
| input | a list of items |
| suffix | specifying a suffix ('include') will include the marker in the output |
| parameter | marker=the list item to be used as a marker |
| output | all items after the marker |
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]]| purpose | discard all items except those before the marker |
|---|---|
| input | a list of items |
| suffix | specifying a suffix ('include') will include the marker in the output |
| parameter | marker=the list item to be used as a marker |
| output | all items before the marker |
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[]]Current tiddlers:
Here are the details of the alpha releases of TiddlyWiki5. See TiddlyWiki5 Versioning for details of how releases are named.
Released 6th December 2013 at 17:53
See GitHub for detailed change history of this release
$:/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$:/tags/PageControls tiddlers from being reordered5.0.x-beta and the final release will be 5.1.xIntroduced 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 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.
\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
redirected-navigate-actions $navigator and $messagecatcher will redirect user back to standard layout, and open the tiddler there.$:/core/ui/CommandPaletteTemplate or $:/core/ui/PageTemplate/sidebar, if you want them exist on your layout.The Amazon Web Services Plugin provides several tools for working with Amazon Web Services:
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.
There are only 2 steps to making anchor links.
That's it.
Step 1: Create an 'anchor' (link target)
<a id="#Bottom_of_tiddler"></a>id attribute to any HTML5 tag and place a single # before the 'address' value. Here are some suggestions of tags you can use.Step 2: Create a link to the target anchor
<a href="##Bottom_of_tiddler">Bottom</a><a href> link using exactly the same 'address' value as the target but with double ## characters preceding it.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.
Step 1: Creating the target anchor
# 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.)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
href value should start with two # characters, one more than the id value of the target anchor.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:
<h2 id="#heading-01"> My Target Heading</h2>
<a href="##heading-01">Link to My Target Heading</a>
This looks like:
<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:
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
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 |
| 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 007 | If id values are duplicated, one will be ignored |
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>href and id values use the macro invocation syntax for attributes, using the qualify Macro to create a unique id value.id and the anchor link must be in the same tiddler.= and the <<.> characters after the target name, two >> to close the <<qualify macro, and one > to close the <a tag.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>| input | the filter output of all previous runs so far |
|---|---|
| output | output titles replace the output of previous filter runs |
This prefix has an optional shortcut syntax symbol +run
| purpose | append a range of items from an array to the list |
|---|---|
| input | a list of items |
| suffix | an integer N, defaulting to all |
| parameter | list=the array of items to be appended to the tail of the list |
| output | a list with items appended from the head of the parameter array |
! output | a list with items appended from the tail of the parameter array |
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]][list[Days of the Week]append:4{Days of the Week!!short}]| purpose | applies a set of patches to transform the input |
|---|---|
| input | a selection of titles |
| parameter | P=a string containing patches from the makepatches Operator |
| output | the transformed input to which the patches P have been applied |
Here are some recent articles written about TiddlyWiki. Submit new articles via GitHub or by posting in the TiddlyWiki Groups.
A collection of articles covering integration with Fargo, Font Awesome and Google Calendar, and tips for managing task lists. The original site is missing, but a link to an archive is provided.
https://web.archive.org/web/20221015011644/http://blog.jeffreykishner.com/tiddlywiki/
I have become a regular user of TiddlyWiki and have become so accustomed to using Font Awesome icons in Fargo that I wanted to incorporate the icons into my wikis as well.
Interesting article giving the perspective of someone who has been away from TiddlyWiki for a few years:
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.
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.
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)
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)
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)
| purpose | calculate the arcsine value (in radians) of a list of numbers |
|---|---|
| input | a selection of titles |
| output | the 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.
[[2]asin[]]=1 =2 =3 =4 +[asin[]]| purpose | calculate the arctangent value (in radians) of a list of numbers |
|---|---|
| input | a selection of titles |
| output | the arctangent (in radians) of the input numbers |
Learn more about how to use Filters
Introduced in v5.1.21 See Mathematics Operators for an overview.
[[2]atan[]]=1 =2 =3 =4 +[atan[]]| purpose | 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] |
|---|---|
| input | a selection of titles = coordinate Y (Y) |
| parameter | X=coordinate X |
| output | the 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
Introduced in v5.1.21 See Mathematics Operators for an overview.
[[2]atan2[5]]=1 =2 =3 =4 +[atan2[4]]Learn more at: Attribute selectors - CSS or CSS-Specification
Audio files can be incorporated into TiddlyWiki in a very similar way to images.
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 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:
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.
| purpose | treating each input title as a number, compute their arithmetic mean |
|---|---|
| input | a selection of titles |
| output | the arithmetic mean of the input as numbers |
Learn more about how to use Filters
Introduced in v5.2.0 See Mathematics Operators for an overview.
=1 =3 =4 =5 +[average[]]Note that if there is no input the operator returns NaN
[tag[NotATiddler]get[price]] +[average[]]Background actions are performed whenever there are changes to the results of a filter.
They can be useful for hooking into existing functionality by tracking changes to the tiddler store.
The following example tracks changes to the story list, reusing itself as the text of a notification at the same time:
| tags | $:/tags/BackgroundAction |
| track-filter | [list[$:/StoryList]] |
<$action-sendmessage $message="tm-notify" $param="SampleBackgroundAction: Story Change" list={{$:/StoryList!!list}}/>
Story List:
<ol>
<$list filter="[enlist<list>]">
<li>
<$text text=<<currentTiddler>>/>
</li>
</$list>
</ol>
| purpose | find the titles that link to each input title |
|---|---|
| input | a selection of titles |
| parameter | none |
| output | any 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.
[[HelloThere]backlinks[]][tag[TableOfContents]backlinks[]][all[current]backlinks[]]| purpose | find the titles that transclude each input title |
|---|---|
| input | a selection of titles |
| parameter | none |
| output | any 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.
[[Motovun Jack.jpg]backtranscludes[]][[Transclusion]backtranscludes[]]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:
A very simple example of the recipe/bag model might be for a single user who maintains the following bags:
Those bags would be used with the following recipes:
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:
Those bags would be exposed through the following hosted wikis:
Base64 is a way of representing binary data, such an image, as a string of text.
| purpose | find which input title precedes a specified one |
|---|---|
| input | a selection of titles |
| parameter | T=one of those titles |
| output | the 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.
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]]Called in normal wikitext context: <$transclude $variable=myvar/> or <<myvar>>
Called via widget attribute: <div class=<<myvar>>/>
Called via filter operator parameter: [<myvar>]
Called via function call in a filter expression: [function[.myfun]]
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 transclusion | output |
|---|---|
<<m1 foo>> | foo - foo - |
<<p1 foo>> | $a1$ - - foo |
<<f1 foo>> | $a1$ - - foo |
| Widget attribute | output |
<$text text=<<m1 foo>>/> | foo - <<__a1__>> - <<a1>> |
<$text text=<<p1 foo>>/> | $a1$ - <<__a1__>> - <<a1>> |
<$text text=<<f1 foo>>/> | $a1$ - - foo |
| Filter operator parameter | output |
[<m1 foo>] | foo - <<__a1__>> - <<a1>> |
[<p1 foo>] | $a1$ - <<__a1__>> - <<a1>> |
[<f1 foo>] | $a1$ - - foo |
| Function call in filter expression | output |
[function[m1],[foo]] | --tp-animation-duration CSS Variable |
[function[p1],[foo]] | --tp-animation-duration CSS Variable |
[function[f1],[foo]] | $a1$ - - foo |
| how declared | behaviour |
|---|---|
\define, $set, $let, $vars, \procedure, \widget | Every function is a variable, but only variables defined using \function are callable 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. |
| \function | The 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. |
| how declared | behaviour |
|---|---|
| \define | Textual 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, \widget | Body text is retrieved as-is and used as the filter operator's parameter. |
| \function | The 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. |
| how declared | behaviour |
|---|---|
| \define | All wikitext and variable substitution and textual substitution takes place |
$set, $let, $vars, \procedure, \widget | All wikitext and variable substitution takes place |
| \function | Invoking 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 |
| how declared | behaviour |
|---|---|
| \define | Textual 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, \widget | Body text is retrieved as-is and used as the attribute's value. |
| \function | When 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 |
New in v5.4.0 Using the multi-valued variable attribute syntax ((var)) instead of <<var>> passes the complete list of values to the attribute rather than just the first value. This is primarily useful for passing multi-valued variables to procedure and function parameters via the TranscludeWidget.
Here are the details of the beta releases of TiddlyWiki5. See TiddlyWiki5 Versioning for details of how releases are named.
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).
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
list-links macro (further improvements are planned).markdown and .md filestimeline macro to support a subfilter.jpeg file extensions@Jermolene would like to thank the contributors to this release who have generously given their time to help improve TiddlyWiki:
Some WikiText is recognised only while the parser is in block mode.
Common characteristics of such block mode WikiText:
| WikiText | Punctuation |
|---|---|
| Block Quotes in WikiText | Multi-line block quotes are enclosed by lines containing only the text <<<; single line block quotes are also possible. |
| Code Blocks in WikiText | Enclosed by lines containing only the text ``` |
| Description Lists in WikiText | Each term is on its own line and each definition is on its own line. |
| Hard Linebreaks in WikiText | Enclosed by lines containing only the text """. |
| Headings in WikiText | Entire line starting with !. |
| Horizontal Rules in WikiText | A line containing only the text ---. |
| Lists in WikiText | Each list item is on its own line. |
| Paragraphs in WikiText | Any 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 WikiText | Enclosed by lines starting with @@. |
| Tables in WikiText | Each table row is a line starting and ending with |. |
| Typed Blocks in WikiText | Enclosed 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.
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.
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 lineThat 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:
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
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.
There are two ways to produce HTML block quotes in TiddlyWiki5, one for content spread across multiple lines, and one for single line content.
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>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 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>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 textAnother 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 quoteWhich renders as:
A top quoteA subquoteAnother 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:
A quoteAnother quote
... 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>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 WikitextA paragraph appears before other wikitext, which needs to end with a blank line.
- List One
- List Two
A quoteA poem
with line beaks
needs to have
a blank line after
the final quotes
if followed
by other contentDeep Block QuoteA 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>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.

WikiText syntax uses a number of different types of brackets. Their names are shown in the table below:
| Appearance | Name | Short name | Usage |
|---|---|---|---|
() | Round brackets | Parenthesis | Not used in WikiText |
[] | Square brackets | Brackets | Links, Filters |
{} | Curly brackets | Braces | Text references, Filtered attributes |
<> | Angle brackets | Chevrons | HTML elements and widgets, Macros |
TiddlyWiki is designed to work with HTML5-compatible browsers.
The following table summarises the browser versions that are known to work with TiddlyWiki
| Browser | Status |
|---|---|
| Internet Explorer | Version 10 and above |
| Chrome | All recent versions |
| Firefox | All recent versions |
| Firefox for Android | All recent versions |
| Safari | Version 6 and above |
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:
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.
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.
The content of the $BrowseWidget widget is ignored.
| Attribute | Description |
|---|---|
| multiple | Set to "multiple" to select multiple file upload |
| deserializer | Introduced in v5.1.15 Optional name of deserializer to be used (by default the deserializer is derived from the file extension or type) |
| tooltip | Optional tooltip text |
| accept | Introduced in v5.1.23 Optional comma delimited list of file accepted extensions and/or MIME types |
| message | Optional override of widget message to be generated. The files will be passed in the JavaScript object event.target.files |
| param | Optional parameter to be passed with the custom message |
| disabled | New in v5.3.7 Optional. Set to "yes" to disable file browser. Defaults to "no". |
| tabindex | New 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 (née British Telecom) is the UK's largest telecommunications company. In 2007, Osmosoft was acquired by BT. @Jermolene subsequently left BT in 2011.
Build the specified build targets for the current wiki. If no build targets are specified then all available targets will be built.
--build <target> [<target> ...]Build targets are defined in the tiddlywiki.info file of a wiki folder.
See tiddlywiki.info Files for details of defining build targets.
TiddlyWiki5 can be used to build older 2.x.x versions of TiddlyWikiClassic from their constituent components. Doing so involves these features:
tiddlywiki/classictools plugin, containing a deserializer module which allows tiddlers to be loaded from TiddlyWiki 2.x.x .recipe filesstripcomments format for the ViewWidget, which strips single line JavaScript comments starting //#stripTitlePrefix='yes' attribute of the FieldsWidget, which removes prefixes wrapped in curly braces from the title attribute{tiddler}HelloThere would be transformed to HelloThereTiddlyWikiClassic 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| purpose | discard the last N input titles |
|---|---|
| input | a selection of titles |
| parameter | N=an integer, defaulting to 1 |
| output | all 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.
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]]The button widget displays an HTML <button> element that can perform a combination of optional actions when clicked:
actions attribute, which is the preferred approachactions attributeThe 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.
The content of the <$button> widget is displayed within the button.
| Attribute | Description |
|---|---|
| actions | A 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 |
| to | The title of the tiddler to navigate to |
| message | The name of the widget message to send when the button is clicked |
| param | The optional parameter to the message |
| set | A TextReference to which a new value will be assigned |
| setTitle | A title to which a new value will be assigned, without TextReference. Gets preferred over set |
| setField | A field name to which the new value will be assigned, if the attribute setTitle is present. Defaults to the text field |
| setIndex | An index to which the new value will be assigned, if the attribute setTitle is present |
| setTo | The 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 |
| selectedClass | An 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 |
| selectedAria | New in v5.4.0 An ARIA attribute to be set to true or false when selectedClass is defined. Allowed values are aria-checked (default), aria-selected and aria-pressed |
| default | Default value if set tiddler is missing for testing against setTo to determine selectedClass |
| popup | Title of a state tiddler for a popup that is toggled when the button is clicked. See PopupMechanism for details |
| popupTitle | Title 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 |
| popupAbsCoords | Introduced 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-label | Optional Accessibility label |
| role | Introduced in v5.2.3 Optional ARIA role |
| tooltip | Optional tooltip |
| class | An 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 |
| aria-* | New in v5.4.0 Optional ARIA attributes. |
| style | An optional CSS style attribute to be assigned to the HTML element |
| tag | An optional html tag to use instead of the default "button" |
| dragTiddler | An optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details |
| dragFilter | An optional filter making the button draggable and identifying the list of payload tiddlers. See DraggableWidget for details |
| tabindex | Sets the tabindex attribute of the button to the given value |
| disabled | Introduced 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:
<$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.
callee-name is a sequence of non-whitespace characters other than ( or >.whitespace denotes a sequence of whitespace characters.Each individual param-value has the following syntax:
param-name is a sequence of letters (A–Z, a–z), digits (0–9), hyphens (-) and underscores (_).value is specified as follows:new-value can either be a plain value or a full callee-name call, allowing for dynamic parameter values.This tiddler describes the different ways in which procedures, functions and macros can be called. See Call Syntax for a formal description of the syntax.
To perform a call, place <<double angle brackets>> around the callee name and any parameter values.
<<my-procedure param="This is the parameter value">>By default, parameters are interpreted as being in the same order as in the definition. A parameter value can be labelled with its name and an equals sign to allow them to be listed in a different order.
If no value is specified for a parameter, the default value given for that parameter in the procedure definition, function definition or macro definition is used instead. (If no default value was defined, the parameter is blank).
Each parameter value can be enclosed in 'single quotes', "double quotes", """triple double quotes""" or [[double square brackets]]. Triple double quotes allow a value to contain almost anything. If a value contains no spaces or single or double quotes, it requires no delimiters. Substituted Attribute Values enclosed in single or triple back quotes are also supported.
See the discussion about parser modes
Positional, old style colon named parameters, and new-style equals sign named parameters support static values
| title | Output |
foo1 - foo2 - foo3
foo 4 - foo 5 - foo 6
foo 7 - foo 8 - foo 9
foo 10 - foo 11 - foo 12
foo 13 - foo 14 - foo 15
New-style equals sign named parameters support dynamic values
| title | Output |
foo 1 - foo 2 - foo 3 - foo 4 - foo 5 - foo 6
$transclude WidgetThe shortcut syntax expands to the $transclude widget with the $variable attribute specifying the name of the procedure to transclude.
<$transclude $variable="my-procedure" param="This is the parameter value"/>The widget itself offers greater flexibility than the shortcut syntax, including the ability to override it with a custom widget.
The text returned from a call can be directly assigned to an attribute of a widget or HTML element. The result of the call is not wikified, which means that parameter handling does not take place.
<div class=<<myclasses>>>
...
</div>Calls can be used in filters. The text is not wikified which again means that the parameters will be ignored.
Note that currently only literal string parameters are supported
<$list filter="[<my-procedure>]">
...
</$list>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.
| purpose | modify input titles by successively evaluating a list of filters and applying the first result |
|---|---|
| input | the filter output of all previous runs so far |
| output | the input titles as modified by the filters returned by this filter run |
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.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]]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 are a key mechanism used to construct and customise TiddlyWiki's user interface.
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.
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:
[is[draft]then{$:/config/ui/EditTemplate}] – if it is a draft tiddler, use the template title given in the tiddler $:/config/ui/EditTemplate[{$:/config/ui/ViewTemplate}] – otherwise, use the template title given in the tiddler $:/config/ui/ViewTemplateThe TiddlyWiki core uses cascades to choose the following elements:
| Story Tiddler Template Cascade | The 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 Cascade | The optional icon associated with a particular tiddler (displayed alongside the title) |
| Tiddler Colour Cascade | The 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 Cascade | The template used to display the title of a particular tiddler (used by the default view template to display the tiddler title) |
| View Template Body Cascade | The 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 Cascade | The 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 Cascade | The 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.
CSS is a standard plain-text format used for defining the presentational style of the various elements on a web page.
| purpose | rounds a list of numbers up to the next largest integer |
|---|---|
| input | a selection of titles |
| output | rounds each of the input numbers up to the next largest integer |
Learn more about how to use Filters
Introduced in v5.1.20 See Mathematics Operators for an overview.
[[1.6]ceil[]][[-1.6]ceil[]]=-1.2 =-2.4 =3.6 =4.8 =5.1 +[ceil[]]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.
(none)
<<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.
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.
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 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.
[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.
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]]).
| purpose | generates string characters from their numeric character codes |
|---|---|
| input | ignored |
| parameter | C=numeric character code |
| output | a string formed from concatenating the characters specified by the numeric codes given in the parameter(s) |
Learn more about how to use Filters
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]).
[charcode[65]match[A]]The checkbox widget displays an HTML <input type="checkbox"> element that is dynamically bound to either:
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.
| Attribute | Description |
|---|---|
tiddler | Title of the tiddler to manipulate (defaults to the Current Tiddler) |
| The name of the tag to which the checkbox is bound | |
invertTag | When 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 | |
checked | The value of the field corresponding to the checkbox being checked |
unchecked | The value of the field corresponding to the checkbox being unchecked |
default | The default value to use if the field is not defined |
| Whether ambiguous values can produce indeterminate checkboxes (see below) | |
class | The class that will be assigned to the <label> element |
actions | Introduced in v5.1.14 A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
uncheckactions | Introduced in v5.1.16 A string containing ActionWidgets to be triggered when the checkbox is unchecked |
checkactions | Introduced in v5.1.20 A string containing ActionWidgets to be triggered when the checkbox is checked |
disabled | Introduced in v5.1.23 Optionally disables the checkbox if set to yes (defaults to no) |
tabindex | New 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 ModeUsing 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:
field ModeUsing 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:
filter ModeUsing 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:
indeterminate CheckboxesIf 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:
index ModeTo 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.
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:
listField ModeUsing 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 | |||
|---|---|---|---|
| neither | field missing or list empty no default defined | field has any value | – |
checked=item1 | item1 removed from list | item1 added to list | – |
unchecked=item2 | item2 added to list | item2 removed from list | – |
| both | item1 removed from listitem2 added to list | item1 added to listitem2 removed from list | item1 not in listitem2 not in listno 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.
listIndex ModeUsing 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 | |||
|---|---|---|---|
| neither | property missing or list empty no default defined | property has any value | – |
checked=item1 | item1 removed from list | item1 added to list | – |
unchecked=item2 | item2 added to list | item2 removed from list | – |
| both | item1 removed from listitem2 added to list | item1 added to listitem2 removed from list | item1 not in listitem2 not in listno default defined |
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:
tag ModeUsing 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:
Clear the password for subsequent crypto operations
--clearpasswordYou can use triple backticks ``` to mark code blocks ():
``` This will be monospaced ```
Renders as:
This will be monospacedTo be interpreted correctly, the three backticks need to be at the start of the line and immediately followed by a line-break.
Be aware that any preceding paragraph content should be properly terminated with a double line break, too. So, this example is wrong:
This is an ordinary paragraph ``` This will be monospaced ```
The correct version is:
This is an ordinary paragraph ``` This will be monospaced ```
Note that some keyboard layouts treat the backtick as a dead key, making it hard to type. The trick is to type three backticks followed by a space. Alternatively, type all six backticks in one go, then a space, and then move the cursor back three characters to type or paste the content.
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.
The content of the <$codeblock> widget is ignored.
| Attribute | Description |
|---|---|
| code | Contents of the block to render as code |
| language | Programming language for syntax highlighting |
The language attribute accepts either:
text/html or image/svg+xml)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 = falseThe CodeMirror plugin adds a sophisticated web-based editor to TiddlyWiki.
See https://tiddlywiki.com/plugins/tiddlywiki/codemirror for a demo.
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.
page-background<<colour code-border>><<colour foreground>><<colour page-background>><<colour sidebar-tab-background>><<colour tag-foreground>>Colour: <$edit-text tiddler='$:/_MyColour' tag='input' placeholder='(unset)' default=''/>
---
<$macrocall $name='colour-picker' actions="
<$action-setfield $tiddler='$:/_MyColour' $value=<<colour-picker-value>>/>
"/>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:
| Name | Value |
|---|---|
| title | Typically starting with $:/ |
| type | application/x-tiddler-dictionary |
| tags | $:/tags/Palette |
| name | Displayed in the palette browser |
| description | Displayed in the palette browser |
| text | name: value colour definitions |
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.
A command is one of the following words, written with a -- prefix and used as a command-line option under Node.js, indicating which action is desired. See Using TiddlyWiki on Node.js for details of how to use them.
Commands
Deprecated Commands
| purpose | select the titles of all the Node.js commands |
|---|---|
| input | ignored |
| parameter | none |
| output | the command words that can be given to TiddlyWiki on Node.js |
[commands[]]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>]"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.
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:
The core team is responsible for the maintenance and development of the TiddlyWiki core and official plugins.
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.
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:
The MultiWikiServer development repository is at https://github.com/TiddlyWiki/MultiWikiServer
The Succession Team is responsible for ensuring that personnel changes do not impact access to the external infrastructure used by the project.
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:
The Newsletter Team is responsible for producing the TiddlyWiki Newsletter. We would love to have your help if you would like to get involved.
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.
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.
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.
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.
Lifelong knowledge, deep in Mind.
Tidme uses advanced Incremental Learning concepts to make it your powerful second brain for acquiring lifelong knowledge.
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
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.
Project & todo management for TiddlyWiki.
https://github.com/ThaddeusJiang/Projectify
Projectify is a TiddlyWiki plugin for managing projects & todo lists, inspired by products like Todoist and Basecamp.
Projectify features:
Note: The original site, https://projectify.wiki, no longer exists. The provided site is a maintained fork, though not by the original creator.
An adaptation of the TiddlyWiki powered GTD® system formerly known as MonkeyGTD for TiddlyWiki version 5.
GSD5 is a Getting-Thing-Done tool for TiddlyWiki5 based off the mGSD classic TiddlyWiki.
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?
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.
A collection of references for testing concepts around TiddlyWiki 5...
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.
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.
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.
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.
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.
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.
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.
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
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
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.
Slider is a plugin to create an ordered set of tiddlers also called Trail.
https://kookma.github.io/TW-Slider/
A trail can be used to create a sequence of selected contents like step by step tutorial, guided help, lessons and similar.
The slider plugin user interface contains three sections
TW5-Graph is a framework to integrate TiddlyWiki with existing graphing and visualization engines (such as Vis-Network). The plugin allows for easy and sophisticated graphs to represent your tiddlers, or whatever else you want.
It is the spiritual successor to TiddlyMap.
With TW5-Graph you can:
There's loads TW5-Graph can do for you. Check out its demo website here.
Or visit its source code here.
TiddlyWiki-based memory programme using advanced FSRS algorithm
Project & todo management for TiddlyWiki.
https://github.com/ThaddeusJiang/Projectify
Projectify is a TiddlyWiki plugin for managing projects & todo lists, inspired by products like Todoist and Basecamp.
Projectify features:
Note: The original site, https://projectify.wiki, no longer exists. The provided site is a maintained fork, though not by the original creator.
BuggyJay's TiddlyClip browser extension for Firefox permits clipping of text and graphics from web pages:
http://tiddlyclip.tiddlyspot.com
TiddlyClip allows parts of webpages to be clipped into a TiddlyWiki, and consists of two parts, the browser addon and the TiddlyWiki plugin. The addon is completely memoryless, any configuration is determined by the current TiddlyWiki that the user has select to work with (we say that the addon is docked to the TiddlyWiki). TiddlyClip is designed to work (in a basic mode) without configuration. Once the addon and plugin are installed, all the user has to do is select which TW to dock to.
An adaptation of the TiddlyWiki powered GTD® system formerly known as MonkeyGTD for TiddlyWiki version 5.
GSD5 is a Getting-Thing-Done tool for TiddlyWiki5 based off the mGSD classic TiddlyWiki.
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.
An interactive network visualisation plugin based on Vis.js. A demo that also contains installation instructions can be found here: http://tiddlymap.org. The plugin's GitHub repository can be found here.
TiddlyMap is a TiddlyWiki plugin that allows you to link your wiki-topics (tiddlers) in order to create clickable graphs. By creating relations between your topics you can easily do the following:
- Create concept maps and quickly manifest your ideas in tiddlers.
- Create task-dependency graphs to organise and describe your tasks.
- Visualise your topic structures to get an immediate grasp of topics and relations.
In general you may create, visualise and describe any network-structure you have in mind.
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.
- [...]
An interactive timeline visualisation plugin based on Vis.js. A demo can be found here: http://kixam.github.io/TW5-visjsTimeline/.
vis.js Timeline is a TiddlyWiki plugin that allows you to link your wiki-topics (tiddlers) in order to create clickable timelines. This project is a direct continuation of emkay's plugin.
The Tinka plugin provides the ability to create and modify plugins in the browser, without requiring the use of Node.js.
See https://github.com/TinkaPlugin/Tinka for the GitHub repo.
https://tinkaplugin.github.io/
This is a Control Panel extension that aims to simplify the plugin creation and editing process. After installing, you will find a new tab in your control panel that makes creating and modifying plugins a little bit easier.
Featuring plugins that integrate two interesting new capabilities:
I developed some plugins related to engineering tasks.
After using them for personal projects I'm glad to share with TiddlyWiki community.
A collection of plugins from TheDiveO.
TheDiveO's Third Flow plugin construction system:
The ThirdFlow plugin brings to you another way to develop customisation plugins for TiddlyWiki 5. It is not enforcing a specific development flow, it simply tries to help you. Otherwise, it tries to stay out of your way.
TheDiveO's FontAwesome plugin:
The FontAwesome plugin supports embedding Font Awesome in TiddlyWiki 5. There is no need to install this font into your operating system in order to use it with TiddlyWiki 5. The font is already embedded in this TiddlyWiki 5 customisation plugin instead, so nothing else to install.
An experimental MathJax plugin for TiddlyWiki version 5. As Martin says, the implementation is a bit of a hack but may be useful until we have a better alternative.
http://mathjax-tw5.kantorsite.net
Welcome. I have created plugin for TiddlyWiki 5 which allows you to use MathJax (math in TeX and MathML) inside TiddlyWiki 5. It's unofficial plugin and it doesn't follow general policy of TiddlyWiki as stand-alone solution but it works. So you can use it if you want.
For those who use many tags or store many different topics in a common wiki the Locator plugin is a table of contents widget and an enhanced search engine that gives you the opportunity to filter results by related tags. Unlike table of contents, standard search and list of tags, this plugin offers these features in an organic, collaborative way.
A mapping plugin based on Leaflet library. Allows you to create maps based upon geographical data contained in tiddlers.
http://sycom.github.io/TiddlyWiki-Plugins/#Leaflet%20plugin
The leaflet plugin is a (working) attempt to integrate the leaflet library in TiddlyWiki in order to display geographical purpose tiddlers.
For now
<$leafmap>widget displays an interactive map. Select size, location and zoom, clustering distance, and background. You can display data : geojson, point(s), polygon(s) and/or polyline(s) directly or calling GeoTiddler(s). Tiddler can be called individually, by list or with a filter.Have a look at demo page on the web.
The purpose of the kin operator with examples:
Extend tiddlywiki to parse complex ("nested") json data tiddlers.
Json Mangler introduces a new path syntax for indexes of json data tiddlers , and includes many supporting tools, filters, widgets, etc.
Example Wiki: https://joshuafontany.github.io/TW5-JsonMangler/
A plugin that allows changes to be synchronised with the IndexedDB database that is built-in to most browsers.
https://web.archive.org/web/20180118083556/http://tw5-dev.cibm.de/
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...).
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.
I collect my tw5 creations on-line as http://eucaly-tw5.tiddlyspot.com/
Available Plugins :
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.
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
modifiedandcreated.
A plugin to integrate the Ace editor into TiddlyWiki.
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...).
A collection of references for testing concepts around TiddlyWiki 5...
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.
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.
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.
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?
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
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/
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.
A plugin that improves the usability of TiddlyWiki on smartphones by JD:
buggyj has created several useful plugins, including a WYSIWYG HTML editor, a configurable calendar and tag lists with draggable ordering.
Tiddlyshow is a small application of Tiddlywiki for presentation and slideshow. It can also be used as a plugin.
https://kookma.github.io/Tiddlyshow/
Tiddlyshow contains the following features
Refnotes plugin is a set of macros and stylesheets for creating abbreviations, footnotes and citations. It also makes tables of footnotes, abbreviations (glossary) and references (bibliography table).
https://kookma.github.io/TW-Refnotes/
Refnotes contains codes and elements to
Timelines plugin is for creating vertical and horizontal timeline and sequences.
https://kookma.github.io/TW-Timelines/
The content or description and data of events are stored in individual tiddlers.
Timelines contain two timeline macros and two sequence macros. A sequence macro shows event contents in sequence not necessarily in chronological order. The order can be determined by tag or list field or other methods.
This library contains most useful plugins developed under the name Kookma for Tiddlywiki 5.
https://kookma.github.io/TW-PluginLibrary/
It has two parts
The plugin library introduces a very simple mechanism like Tiddlywiki Official Plugin Library to let select among the published plugins and install any number of them you like.
Searchwikis plugin uses index (dataTiddler) to search multiple external Tiddlywikis.
https://kookma.github.io/TW-Searchwikis/
It has two parts
Then one master wiki can host many index tiddlers and lets to search several external wikis through index tiddlers.
Searchwikis enable to have a central wiki and search all other wikis from one place.
The utility plugin objective is to provide set of tools for developers and authors.
https://kookma.github.io/TW-Utility/
These tools include simple transclusions, show raw contents of tiddlers, author tools, wikitext macros, show fields in view mode, etc.
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
The concept behind Trashbin plugin is to have a simple mechanism to move deleted tiddlers to Trashbin and be able to restore them later if required.
https://kookma.github.io/TW-Trashbin/
The trash (also known as the Recycle Bin in Microsoft Windows) is a temporary storage for tiddlers that have been deleted in a Tiddlywiki by the user, but not yet permanently erased.
Typically, a trash bin is presented as a special storage, allowing the user to browse deleted (removed) tiddlers, undelete those that were deleted by mistake, or delete them permanently (either one by one, or by the "Empty Trash" function).
Todolist is a small pure wikitext plugin, contain all tools to work with todo list.
https://kookma.github.io/TW-Todolist/
With Todolist, easily organise and prioritise your tasks and projects so you’ll always know exactly what to work on next.
Todolist creates custom UI and lets you to add new items, set priority, done/undone items, archive, delete. Using Todolist plugin it is possible to create several todo lists in one Tiddlywiki.
Shiraz plugin is a very small in size and framework to create stylish contents in Tiddlywiki.
https://kookma.github.io/TW-Shiraz/
Shiraz plugin contains extended markups, macros, styles, and many customisation to empty Tiddlywiki and can be used as a starter kit.
Some of Shiraz features are:
Adding Shiraz plugin to any Tiddlywiki converts it to a full production tool. Shiraz uses modified CSS classes from Bootstrap.
Tiddler Commander plugin, in short Commander is a unique tool for batch operations on tiddlers.
https://kookma.github.io/TW-Commander/
Commander has many features including:
The core developers work hard year by year to continuously improve TiddlyWiki. Part of the satisfaction is that we are not just building software for ourselves, we’re serving the needs of a wider community of users.
That begs the question of how we can understand the needs of these other users. We do it in an informal way through every interaction with users on the forum, or on GitHub, but once in a while it can be useful to do take a more formal approach, and so we undertook the TiddlyWiki Community Survey 2025. This brief, anonymous survey was designed to give us insight into the needs of TiddlyWiki users, with a mix of structured and freeform questions.
The raw results of the survey are available in TiddlyWiki form on this new site:
https://tiddlywiki.com/surveys.html
The results of this survey will help inform future developments, helping us focus on what would make TiddlyWiki better for you, both as software and as a community. Even longer-term, it will help us refine the future vision of the project, ensuring it is based on the needs of our community. We intend to publish further analysis of the survey results in the coming weeks.
The new Surveys site also include the "The Great Viral TiddlyWiki Interview Project" from 2010. We invited TiddlyWiki users to join the interview project with these words:
For many people that use it. there is a distinct discovery moment when TiddlyWiki explodes in their brain. For others, it is a challenge to get their heads around TiddlyWiki at all.This project explores how people think about TiddlyWiki by collecting together responses to a set of questions about it.
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.
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).
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.
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.
This theme by JD features a left side bar, advanced functionality from the search bar and plenty of customizability built in.
A beautiful theme that leverages the white spaces between elements.
| purpose | filter the input by comparing each item against the parameter |
|---|---|
| input | a selection of titles |
| suffix | the compare operator uses a rich suffix, see below for details |
| parameter | the value to compare |
| output | those input titles matching the specified comparison |
! output | those 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:
The mode can be:
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].
[[20200101]compare:date:gt[201912311852]][[202001011852]compare:integer:gt[20191231]][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]]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 tiddlerAlso see: TestCaseTiddlers
<$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`${ [{!!base-url}] }$#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>That renders as:
this tiddler on tiddlywiki.com
... and the underlying HTML is:
<p>
<a href="#Concatenating%20a%20text%20reference%20to%20create%20a%20URL">this tiddler on tiddlywiki.com</a>
</p>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.
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! |
|
But that won't work. If you try this, the link will be interpreted very literally, and will attempt to take you to:
<<currentTiddler>>-ContactThe 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! |
|
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>><$let hash={{{ [<currentTiddler>encodeuricomponent[]] }}}>
<a href=`http://tiddlywiki.com/#$(hash)$`>this tiddler on tiddlywiki.com</a>
</$let>That renders as:
this tiddler on tiddlywiki.com
... and the underlying HTML is:
<p>
<a href="http://tiddlywiki.com/#Concatenating%20variables%20to%20create%20a%20URL">this tiddler on tiddlywiki.com</a>
</p>These are the concepts underlying TiddlyWiki. Understanding how these ideas fit together is the key to getting the most from TiddlyWiki.
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:
[[HelloThere]is[missing]then[FOO]]evaluates to(empty)[[Missing Tiddler]is[missing]then[FOO]]evaluates toFOO[[HelloThere]is[tiddler]else[BAR]]evaluates toHelloThere[[Missing Tiddler]is[tiddler]else[BAR]]evaluates toBARThese 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
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 URIOne 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 protocolThe 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 unknownNotes:
<%if %>, <%elseif%> or <%else%> with two line breaksYou 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.
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:
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.
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.
| purpose | filter the input by searching list fields for a value |
|---|---|
| input | a selection of titles |
| suffix | F=the name of a field (defaults to list) |
| parameter | S=a possible value to be found in list field F |
| output | those input tiddlers in which the list field F contains the value S |
! output | those input tiddlers in which the list field F does not contain the value S |
[contains:tags[HelloThere]][[$:/StoryList]contains[HelloThere]]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.
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.
| Group | Type | Content of type field |
|---|---|---|
| Developer | Data dictionary | application/x-tiddler-dictionary |
| Compound Tiddler | text/vnd.tiddlywiki-multiple | |
| JavaScript code | application/javascript | |
| JSON data | application/json | |
| Static stylesheet | text/css | |
| Image | GIF image | image/gif |
| ICO format icon file | image/x-icon | |
| JPEG image | image/jpeg | |
| PDF image | application/pdf | |
| PNG image | image/png | |
| Structured Vector Graphics image | image/svg+xml | |
| Text | HTML markup | text/html |
| CSS stylesheet | text/css | |
| Comma-separated values | text/csv | |
| Plain text | text/plain | |
| TiddlyWiki 5 | text/vnd.tiddlywiki | |
| TiddlyWiki Classic | text/x-tiddlywiki |
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.
target is undefined or not a valid colourHere 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.
PRs must meet these minimum requirements before they can be considered for merging:
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:
These a poorly worded PR titles:
PR titles may also include a short prefix to indicate the subsystem to which they apply. For example:
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:
| praise | Praises 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 |
| nitpick | Nitpicks are small, trivial, but necessary changes. Distinguishing nitpick comments significantly helps direct the reader's attention to comments requiring more involvement |
| suggestion | Suggestions 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 |
| issue | Issues represent user-facing problems. If possible, it's great to follow this kind of comment with a suggestion |
| question | Questions 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 |
| thought | Thoughts 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 |
| chore | Chores 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 |
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).
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
tiddlywiki-comJeremy Ruston, @Jermolene, 2011/11/22The 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".
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.
PRs must meet these minimum requirements before they can be considered for merging:
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:
These a poorly worded PR titles:
PR titles may also include a short prefix to indicate the subsystem to which they apply. For example:
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:
| praise | Praises 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 |
| nitpick | Nitpicks are small, trivial, but necessary changes. Distinguishing nitpick comments significantly helps direct the reader's attention to comments requiring more involvement |
| suggestion | Suggestions 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 |
| issue | Issues represent user-facing problems. If possible, it's great to follow this kind of comment with a suggestion |
| question | Questions 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 |
| thought | Thoughts 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 |
| chore | Chores 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 |
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).
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
tiddlywiki-comJeremy Ruston, @Jermolene, 2011/11/22The 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
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).
The following individuals have generously given their time to contribute to the development of TiddlyWiki:
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.
The default coordinate system is relative to the nearest positioned ancestor element. This is either:
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.
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.
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 |
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.
tc-btn-invisible)<<copy-to-clipboard "Mary had a little lamb">><$macrocall $name="copy-to-clipboard" src={{$:/SiteTitle}}/>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.
TiddlyWiki class definitions are prefixed with tc- and are mainly used in the "vanilla base" theme. The tc- prefix is reserved for TiddlyWiki, so it should not be used for user defined classes.
Users, especially plugin developers, should use their own prefixes eg: mytc- or something similar.
The following info can also be found in the $:/ControlPanel -> Advanced -> Stylesheets tab
All stylesheets used in this wiki are: (shadow tiddlers are bold)
Also see: Utility Classes
New in v5.4.0 Tiddlywiki CSS variable definitions starts with --tp-* and --tpc-*. They are mainly used to Write stylesheets in vanilla CSS. These prefixes are reserved for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.
Core CSS variables are defined in $:/core/stylesheets/custom-properties.
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.
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:
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:
The following macros are built into TiddlyWiki's core:
Widget messages are generated by Widgets in response to user actions. Messages have a name, an optional primary parameter, and one or more optional named parameters. These messages travel up the widget tree where they are handled by ancestor widgets or the core itself.
The following widget messages are implemented by the core:
The core team is responsible for the maintenance and development of the TiddlyWiki core and official plugins.
The following variables are built into TiddlyWiki's core:
The core will also use various configuration variables and macros if you define them:
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:
| purpose | calculate the cosine value of a list of angles (given in radians) |
|---|---|
| input | a selection of titles |
| output | the cosine of the input angles (numeric value between -1 and 1) |
Learn more about how to use Filters
Introduced in v5.1.21 See Mathematics Operators for an overview.
[[2]cos[]]=1 =2 =3 =4 +[cos[]]| purpose | count the number of entries in a list |
|---|---|
| input | a selection of titles |
| output | a 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.
[tag[HelloThere]count[]]The count widget displays the number of unique items in the output of specified filter expressions.
The content of the <$count> widget is ignored.
| Attribute | Description |
|---|---|
| filter | The filter expression to count |
There are <$count filter="[tag[Examples]]"/> tiddlers tagged with ExamplesThat renders as:
There are 8 tiddlers tagged with Examples
To create a custom export format that exports tiddlers as their raw body text:
.tid)\define renderContent()
{{{ $(exportFilter)$ ||$:/core/templates/plain-text-tiddler}}}
\end
<<renderContent>>The variable exportFilter contains a filter defining which tiddlers should be exported.
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
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:
To edit an existing tiddler, click the button at the top right of the tiddler.
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:
text/vnd.tiddlywiki, which means the tiddler contains WikiTextWhen you have finished editing, click a button at the top right of the tiddler:
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.
The easiest way to create a journal tiddler is to use the new journal button 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.
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 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.
To configure how new journal entries are created, visit the Basics tab under Info in the control panel :
DDth MMM YYYY causes new entries to have titles of the form "10th October 2014"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.
Visit the Making a custom journal button tiddler for instructions on how to make your own custom New Journal button
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:
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\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>>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:
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
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.
quoted-comma-sepThe 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 current tiddler is therefore often not the same as the tiddler that is being viewed or edited.
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.
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.
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>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!
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;
}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;
}This mechanism may be handy for users who want to write prose text! See: Hard Linebreaks with CSS
Learn more at: Attribute selectors - CSS or CSS-Specification
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"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;
}Learn more at: Attribute selectors - CSS or CSS-Specification
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
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
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;
}Learn more at: Attribute selectors - CSS or CSS-Specification
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.
Custom widgets are usually defined with the Pragma: \widget:
\widget $my.widget(attribute:"Default value")
This is the widget, and the attribute is <<attribute>>.
\endThe 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.
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.
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
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.
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≥
Information about customising TiddlyWiki. See Customising TiddlyWiki's user interface for an overview of the mechanisms employed.
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:
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:
configTiddler variableuserInput variablefirst-search-filter and second-search-filter to store the filters used for your search results. See the tiddler $:/core/ui/DefaultSearchResultList for details<$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>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.
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.
[is[system]!has[draft.of]removeprefix[$:/]addprefix[_system/]]
[is[draft]search-replace:g:regexp[/|\\],[_]addprefix[drafts/]]
[tag[task]addprefix[mytasks/]]
[!tag[externalnote]addprefix[wiki/]]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.
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.
[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.
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:
Here we provide an overview of those mechanisms and how they relate together.
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:
icon field to the title of an image tiddler to be used as the icon for this tiddlercolor field to a CSS colour that is then used for icons and tag pills associated with this tiddlerhide-body field to yes to hide the view template body for this tiddlerSee TiddlerFields for details of all the special fields.
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 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 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:
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:
See Cascades for more details.
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.
currentTiddler | The tiddler that must be used to store the field value. |
currentField | The 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. |
currentFieldName | The 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"/>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.
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.
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.
| purpose | toggle the titles specified in the first parameter in a cyclical manner |
|---|---|
| input | a list of items |
| parameter | the cycle operator accepts 1 or 2 parameters, see below for details |
| output | the input list with the titles specified in the parameter toggled in a cyclical manner |
Learn more about how to use Filters
The cycle operator requires at least one parameter.
[cycle[<titles>],[step-size]]Cycle through a list of values to add as a tag:
<$action-listops $tiddler="target" $tags="+[cycle[todo soon now maybe done ]]" />Cycle through a list of values to add as a tag, in reverse order:
<$action-listops $tiddler="target" $tags="+[cycle[todo soon now maybe done ],[-1]]" />These examples make use of the Days of the Week tiddler.
[list[Days of the Week]first[]] +[cycle{Days of the Week!!list}][list[Days of the Week]first[]] +[cycle{Days of the Week!!list},[2]]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
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:
... and the underlying HTML is:
<ul><li>– n-dash example </li><li>— m-dash example — have fun!</li></ul>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.
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.
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.
<style>
.jack {
background: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" $output="text/plain"/>);
height: 300px;
}
</style>
<div class="jack"/>The example has to invoke datauri through the $macrocall widget. It needs to prevent the macro's output from being parsed as WikiText, as that would transform the data URI into a $link widget and break the example. If the example was in a CSS tiddler, you could simply write:
background: url(<<datauri "Motovun Jack.jpg">>);
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.
The content of the data widget is ignored. It supports the following attributes:
| Attribute | Description |
|---|---|
$tiddler | Optional title of a tiddler to be used as a payload tiddler (optional) |
$filter | Optional filter string identifying tiddlers to be used as payload tiddlers (optional) |
$compound-tiddler | Optional title of a tiddler containing payload tiddlers in text/vnd.tiddlywiki-multiple format (see below) |
$compound-filter | New in v5.3.6 Optional filter, to create a list of tiddlers that contain compound tiddlers. |
| 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"
| title | Output |
[
{
"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"
| title | Output |
[
{
"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"
| title | Output |
[
{
"title": "Day: Thursday",
"text": "Today is Thursday",
"custom": "Beta"
},
{
"title": "Day: Tuesday",
"text": "Today is Tuesday",
"custom": "Beta"
}
]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
| title | Output |
[
{
"title": "Payload Tiddler",
"tags": "Alpha Beta Gamma",
"text": "This is a payload tiddler from a compound tiddler",
"custom": "Alpha"
}
]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:
- to indicate a negative yearTo 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
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:
| Token | Substituted Value |
|---|---|
[UTC] | Time-shift the represented date to UTC. Must be at very start of format string |
YYYY | Full year |
YY | Two-digit year |
wYYYY | Full year with respect to week number |
aYYYY | Introduced in v5.1.23 Full year but negative dates are displayed as positive |
wYY | Two 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) |
MMM | Month in full (e.g. "July") |
mmm | Short month (e.g. "Jul") |
MM | Month number |
0MM | Adds leading zero |
ddddd | Introduced in v5.2.0 Day of year (1 to 365, or 366 for leap years) |
0ddddd | Introduced in v5.2.0 Zero padded day of year (001 to 365, or 366 for leap years) |
DDD | Day of week in full (e.g. "Monday") |
ddd | Short day of week (e.g. "Mon") |
dddd | Introduced in v5.2.0 Weekday number from 1 through 7, beginning with Monday and ending with Sunday |
DD | Day of month |
0DD | Adds a leading zero |
DDth | Adds a suffix |
WW | ISO-8601 week number of year |
0WW | Adds a leading zero |
hh | Hours |
0hh | Adds a leading zero |
hh12 | Hours in 12 hour clock |
0hh12 | Hours in 12 hour clock with leading zero |
mm | Minutes |
0mm | Minutes with leading zero |
ss | Seconds |
0ss | Seconds with leading zero |
XXX | Milliseconds |
0XXX | Milliseconds with leading zero |
am or pm | Lower case am/pm indicator |
AM or PM | Upper case AM/PM indicator |
TZD | Timezone offset from UTC (e.g. "+01:00", "-05:00"…) |
TIMESTAMP | Introduced in v5.2.4 Number of milliseconds since the ECMAScript epoch, 1 January 1970. |
\x | Used 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.
| Template | Output |
|---|---|
DDth MMM YYYY | 16th February 2011 |
DDth MMM \M\M\M YYYY | 16th February MMM 2011 |
DDth mmm YYYY 0hh:0mm:0ss | 16th Feb 2011 11:38:42 |
TIMESTAMP to calculate time differenceYou can calculate the difference between two dates by doing the following:
abs operator to get an absolute value after subtractionHere is an example of calculating the number of days that passed between creation and last modification of current tiddler:
created and modified fields to timestamps86400000 which is the number of milliseconds in a 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>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
modifiedandcreated.
| purpose | filter the input by date |
|---|---|
| input | a selection of titles |
| suffix | F=the name of a date field, defaulting to modified |
| parameter | D=a { positive | negative } number of days, defaulting to 0 |
| output | those input tiddlers in which field F is D days in the { future | past } or any time { before | after } that, including { past | future } |
! output | those 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.
[days[-14]][!days:created[-800]]The filter can be used to highlight new items in a list. For example:
<ul>
<$list filter="[tag[ReleaseNotes]!<currentTiddler>!sort[modified]]">
<li>
<$link><$view field="title"/></$link>
<$list filter="[<currentTiddler>days[-180]]"> @@color:red;^^new^^@@</$list>
<$list filter="[<currentTiddler>days[-500]!days[-180]]"> @@color:black;^^recent^^@@</$list>
</li>
</$list>
</ul>That renders as:
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:
| purpose | apply base 64 decoding to a string |
|---|---|
| input | a selection of titles |
| suffix | optional: binary to produce binary output, urlsafe for URL-safe input |
| output | the input with base 64 decoding applied |
Learn more about how to use Filters
Introduced in v5.2.6See 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".
[[dGVzdA==]decodebase64[]][[8J+Yjg==]decodebase64[]][[8J-Yjg==]decodebase64:urlsafe[]]| purpose | apply HTML decoding to a string |
|---|---|
| input | a selection of titles |
| output | the 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:
& replaced with & replaced with (non breaking space)< replaced with <> replaced with >" replaced with "[[Title with < angle brackets >]] +[decodehtml[]][[Title with an & ampersand]] +[decodehtml[]]| purpose | apply URI decoding to a string |
|---|---|
| input | a selection of titles |
| output | the input with URI decoding applied |
Learn more about how to use Filters
Introduced in v5.1.14[[Title%20with%20Space]] +[decodeuri[]][[Title%20with%20Space]] [[Another%20title%20with%20Space]] +[decodeuri[]]| purpose | apply URI component decoding to a string |
|---|---|
| input | a selection of titles |
| output | the input with URI component decoding applied |
Learn more about how to use Filters
Introduced in v5.1.14See Mozilla Developer Network for details of the decodeURIComponent operation.
[[Title%20with%20Space]] +[decodeuricomponent[]][[Title%20with%20Space]] [[Another%20title%20with%20Space]] +[decodeuricomponent[]]"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:
TiddlerTitle and [[Title with spaces]][tag[HelloThere]]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.
These are definitions of technical words and phrases used in this documentation. (As distinct from the Concepts that make up TiddlyWiki itself).
To use HTML Definition Lists through WikiText, see Description Lists in WikiText.
Introduced in v5.1.20 Deletes a group of tiddlers identified by a filter.
--deletetiddlers <filter>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.
keyboard-driven-input macro:The following keyboard events invoke macros defined alongside keyboard-driven-input in $:/core/macros/keyboard-driven-input.
| Input | Purpose | Macro |
| typing input | composing a string to be used within list filters | keyboard-input-actions |
((input-up)) (
Up
) | temporarily selecting the previous item in the filtered list | input-next-actions with parameters afterOrBefore="before", reverse="reverse[]" |
((input-down)) (
Down
) | temporarily selecting the next item in the filtered list | input-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).
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 combination | Parameter |
((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.
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:
keyboard-driven-input macro will change their contents.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).
| Parameter name | Notes |
configTiddlerFilter | This 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. |
tiddler | This 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. |
storeTitle | This tiddler always reflects the user input (transcluded from the tiddler tiddler after each keystroke into the edit-text widget). |
selectionStateTitle | This 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. |
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]]"
/>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 name | Tiddler title | Contents of text field of the tiddler |
tiddler | kdi-demo-tiddler | |
storeTitle | kdi-demo-storeTitle | |
selectionStateTitle | kdi-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 features of TiddlyWiki are those that have been superseded by newer, improved ways of doing the same thing.
Deprecated features will still work, but are not recommended for new content.
Tiddlers tagged $:/deprecated:
Deprecated features are marked with a special warning button. See: How to apply custom styles by tag for an example.
These Core Classes are considered deprecated. It is not recommend to use them for styling.
tc-tagged-* Deprecated fromv5.1.16 Use Custom styles by data-tags instead.tc-reveal Deprecated fromv5.3.8 for styling purposes as it is subject to change.tc-language-(language code) Deprecated fromv5.3.8 Please use :lang() instead.Most deprecated macros are defined in $:/core/macros/deprecated. It is discouraged to use them.
Deprecated fromv5.4.0 The following core macros used to made it easy to specify alternative browser-specific properties when constructing a stylesheet tiddler. They are deprecated after 2017 baseline is supported in v5.4.0:
<<box-shadow shadow>>x-box-shadow properties<<filter filter>>x-filter properties<<transition transition>>x-transition properties<<transform-origin origin>>x-transition-origin properties<<background-linear-gradient gradient>>x-linear-gradient values of the background-image property<<column-count columns>>x-column-count propertyHTML 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:
... 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>You can create multiple descriptions for a term, or multiple terms for a single description:
; Mouse
: A rodent with a small body and a long tail
: A pointing device used to interact with a computer
; Apple
; Pear
: A type of fruit belonging to the Rosaceae family
That renders as:
... and the underlying HTML is:
<dl><dt>Mouse</dt><dd>A rodent with a small body and a long tail</dd><dd>A pointing device used to interact with a computer</dd><dt>Apple</dt><dt>Pear</dt><dd>A type of fruit belonging to the Rosaceae family</dd></dl>Description lists may also be nested to create lists within lists:
; Coffee
: A beverage prepared from roasted coffee beans
:; Black coffee
:: Coffee served without any additives
:; Milk coffee
:: Coffee combined with steamed or frothed milk
::; Latte
::: A coffee made with espresso and steamed milk
; Tea
: A beverage typically made from tea leaves
That renders as:
... and the underlying HTML is:
<dl><dt>Coffee</dt><dd>A beverage prepared from roasted coffee beans<dl><dt>Black coffee</dt><dd>Coffee served without any additives</dd><dt>Milk coffee</dt><dd>Coffee combined with steamed or frothed milk<dl><dt>Latte</dt><dd>A coffee made with espresso and steamed milk</dd></dl></dd></dl></dd><dt>Tea</dt><dd>A beverage typically made from tea leaves</dd></dl>| purpose | extract JSON representation of tiddlers from the input strings |
|---|---|
| input | a selection of strings |
| parameter | the deserializer module to be used to extract tiddlers from the input |
| output | JSON representations of tiddlers extracted from input titles. |
Learn more about how to use Filters
New in v5.3.0Deserializer 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:
| Deserializer | Description |
|---|---|
| (DOM) | Extracts tiddlers from a DOM node, should not be used with the deserialize[] operator |
| application/javascript | Parses a JavaScript module as a tiddler extracting fields from the header comment |
| application/json | Parses JSON into tiddlers |
| application/x-tiddler | Parses the .tid file format as a tiddler |
| application/x-tiddler-html-div | Parses the <DIV>.tiddler file format as a tiddler |
| application/x-tiddlers | Parses the MultiTiddlerFile format as tiddlers |
| text/css | Parses CSS as a tiddler extracting fields from the header comment |
| text/html | Parses an HTML file into tiddlers. Supports TiddlyWiki Classic HTML files, TiddlyWiki5 HTML files and ordinary HTML files |
| text/plain | Parses plain text as a tiddler |
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 "There"" 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]]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:
| Deserializer | Description |
|---|---|
| (DOM) | Extracts tiddlers from a DOM node, should not be used with the deserialize[] operator |
| application/javascript | Parses a JavaScript module as a tiddler extracting fields from the header comment |
| application/json | Parses JSON into tiddlers |
| application/x-tiddler | Parses the .tid file format as a tiddler |
| application/x-tiddler-html-div | Parses the <DIV>.tiddler file format as a tiddler |
| application/x-tiddlers | Parses the MultiTiddlerFile format as tiddlers |
| text/css | Parses CSS as a tiddler extracting fields from the header comment |
| text/html | Parses an HTML file into tiddlers. Supports TiddlyWiki Classic HTML files, TiddlyWiki5 HTML files and ordinary HTML files |
| text/plain | Parses plain text as a tiddler |
| input | ignored |
|---|---|
| parameter | none |
| output | the title of each available deserializer |
Learn more about how to use Filters
Introduced in v5.2.0[deserializers[]]Die deutsche Übersetzung von TiddlyWiki ist verfügbar unter:
Siehe auch: Deutsch (Österreich) Edition.
Die österreichische Übersetzung von TiddlyWiki ist verfügbar unter:
Siehe auch: Deutsch (Deutschland) Edition.
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:
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.
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).
<$diff-text source="This is the original text" dest="This is the text to compare to" mode="words>
These are the <<diff-count>> differences:
</$diff-text>The content of the $diff-text widget is displayed immediately before the differences. Within the content, 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.
| Attribute | Description |
|---|---|
source | The source text |
dest | The destination text |
cleanup | Optional post-processing to improve readability (default is semantic) |
editcost | New in v5.4.0 Threshold parameter for efficiency cleanup mode (default is 4) |
mode | New in v5.4.0 Specifies the granularity at which differences are computed and displayed (default is chars) |
cleanup / editcostThe cleanup attribute determines which optional post-processing should be applied to the diffs:
none: No cleanup is performedsemantic (default): Optimizes the differences for readabilityefficiency: Optimizes the differences to minimise the number of operations for subsequent processingefficiency mode, the editcost parameter controls the cost threshold for the cleanup algorithm, determining how aggressively the diff algorithm merges nearby edits for better human readability (default value is 4).modeThe mode attribute determines how differences are computed and displayed:
chars: Compares differences at the character level for precise change detectionwords: Compares differences at the word level for more readable text comparisonslines: Compares differences at the line level for better visibility of structural changesA basic example:
<$diff-text source="The quick brown fox jumps" dest="The slick brown fox leaps"/>In words mode, differences are computed at the words level:
<$diff-text mode="words" source="The quick brown fox jumps" dest="The slick brown fox leaps"/>To see the effects of all parameters, use this example:
This is a test tiddler is called SampleTiddlerFirstSecond.↩︎
It is used in [[DiffTextWidget]].↩︎
You can modifyedit its content.mode
cleanup
editcost: 4
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/highlightYou've never seen anything like TiddlyWiki. TiddlyWiki is:
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.
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.
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.
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.
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:
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:
This is a card for a 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:
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.
| purpose | treating each input title as a number, divide it by the numeric value of the parameter |
|---|---|
| input | a selection of titles |
| parameter | N=a number |
| output | the input as numbers, but with each one divided by N |
Learn more about how to use Filters
Introduced in v5.1.20 See Mathematics Operators for an overview.
[[355]divide[113]]=1 =2 =3 =4 +[divide[2]]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.
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.
| Macro | Used for | Example | Rendered |
| .def | the defining instance of a term | <<.def widget>> | widget |
| .em | minor emphasis within a sentence | <<.em not>> | not |
| .place | a placeholder for the user to fill in | <<.place tagname>> | tagname |
| .strong | major emphasis within a tiddler | <<.strong Important!>> | Important! |
| .word | a mention of an ordinary word or phrase | <<.word "hello world">> | "hello world" |
| .icon | an icon, sized to match the surrounding text | <<.icon "$:/core/images/globe">> |
doc-notedoc-tipdoc-warning| Macro | Used for | Example | Renderd |
| .infoBox | Text-box with an icon | <<.infoBox text:"A generic ...">> | |
| .note | Infos with a title | <<.note text:"Some text ...">> | |
| .tip | hints and tips | <<.tip text:"Eg: Turn ...">> | |
| .warning | warning advice | <<.warning text:"Eg: Make a backup ...">> |
| Macro | Example | Used for |
| .preamble | <<.preamble "your text comes here">> |
|
| Macro | Used for | Example | Rendered | ||||||||
| .tid | a tiddler title | <<.tid Example>> | Example | ||||||||
| .tag | a tag | <<.tag Example>> | Example | ||||||||
| .field | a field name | <<.field example>> | example | ||||||||
| .value | a field value | <<.value "example value">> | example value | ||||||||
| .op | a filter operator | <<.op backlinks>> | backlinks | ||||||||
| .var | a variable or macro name | <<.var currentTiddler>> | currentTiddler | ||||||||
| .wid | a widget name | <<.wid list>> | $list | ||||||||
| .attr | an attribute name | <<.attr filter>> | filter | ||||||||
| .param | a macro parameter name | <<.param text>> | text | ||||||||
| .tiddler-fields | a list of tiddler fields | <<.tiddler-fields "Monday">> | Monday
|
| Macro | Used for | Example | Renderd |
|---|---|---|---|
| .link | link containing WikiText | <<.link "^^an^^ ~~example~~" Example>> | an |
| .clink | code link | <<.clink `<$list>` ListWidget>> | <$list> |
| .dlink | definition link for a instance of a term | <<.dlink widget Widgets>> | widget |
| .dlink-ex | external link to a defining instance of a term | <<.dlink-ex Example "http://example.com/">> | Example |
| .flink | field link | <<.flink ListField>> | list |
| .mlink | macro link | <<.mlink qualify>> | qualify |
| .mlink2 | macro link with a specified target | <<.mlink2 foo "Examples of Macros">> | foo |
| .olink | operator link | <<.olink prefix>> | prefix |
| .olink2 | operator link with specified target | <<.olink2 foo prefix>> | foo |
| .vlink | variable link | <<.vlink currentTiddler>> | currentTiddler |
| .vlink2 | variable link with specified target | <<.vlink2 foo "Examples of Variables">> | foo |
| .wlink | widget link | <<.wlink ButtonWidget>> | $button |
| .wlink2 | widget link with specified text | <<.wlink2 foo ButtonWidget>> | foo |
| Macro | Used for | Example | Rendered |
| .key | a key on the keyboard | <<.key Escape>> | Escape |
| .keys | a key combination | <<.keys Ctrl+Enter>> | Ctrl+Enter |
See: CheckboxWidget
| Macro | Used for | Example |
| .doc-tabs | showing a tab set in a documentation tiddler | – |
| .doc-tab-link | button to activate a tab | – |
| .widget-attr-link | button with a widget attribute name to activate a tab | – |
| Macro | Used for | Example | Rendered |
| .sidebar-tab | the name of a sidebar tab | <<.sidebar-tab More>> | More |
| .more-tab | the name of a subtab of the More tab | <<.more-tab Shadows>> | Shadows |
| .info-tab | the name of a tiddler info tab | <<.info-tab Fields>> | Fields |
| .controlpanel-tab | the name of a Control Panel tab | <<.controlpanel-tab Settings>> | Settings |
| .advancedsearch-tab | the name of an Advanced Search tab | <<.advancedsearch-tab Filter>> | Filter |
| .toc-tab | name of the tw5.com TOC tab | <<.toc-tab>> | Contents |
| .example-tab | an example tab name | <<.example-tab "Notes">> | Notes |
| Open | <<.sidebar-tab Open>> | Open |
| Recent | <<.sidebar-tab Recent>> | Recent |
| Tools | <<.sidebar-tab Tools>> | Tools |
| More | <<.sidebar-tab More>> | More |
| 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 |
| 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 |
| 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 |
| Standard | <<.advancedsearch-tab Standard>> | Standard |
| System | <<.advancedsearch-tab System>> | System |
| Shadows | <<.advancedsearch-tab Shadows>> | Shadows |
| Filter | <<.advancedsearch-tab Filter>> | Filter |
| Macro | Used for | Example | Rendered |
| .button | a standard button name and icon | <<.button "new-tiddler">> |
| clone | <<.button "clone">> | |
| close | <<.button "close">> | |
| close-others | <<.button "close-others">> | |
| edit | <<.button "edit">> | |
| export-tiddler | <<.button "export-tiddler">> | |
| info | <<.button "info">> | |
| more-tiddler-actions | <<.button "more-tiddler-actions">> | |
| new-here | <<.button "new-here">> | |
| new-journal-here | <<.button "new-journal-here">> | |
| permalink | <<.button "permalink">> |
| cancel | <<.button "cancel">> | |
| delete | <<.button "delete">> | |
| save | <<.button "save">> |
| advanced-search | <<.button "advanced-search">> | |
| close-all | <<.button "close-all">> | |
| control-panel | <<.button "control-panel">> | |
| encryption | <<.button "encryption">> | |
| export-page | <<.button "export-page">> | |
| full-screen | <<.button "full-screen">> | |
| home | <<.button "home">> | |
| import | <<.button "import">> | |
| language | <<.button "language">> | |
| more-page-actions | <<.button "more-page-actions">> | |
| new-journal | <<.button "new-journal">> | |
| new-tiddler | <<.button "new-tiddler">> | |
| permaview | <<.button "permaview">> | |
| refresh | <<.button "refresh">> | |
| save-wiki | <<.button "save-wiki">> | |
| storyview | <<.button "storyview">> | |
| tag-manager | <<.button "tag-manager">> | |
| theme | <<.button "theme">> |
The documentation for TiddlyWiki tries to follow a consistent editorial style. It has two main areas, each with its own tone and audience:
We keep the two areas distinct. This avoids overwhelming relative newcomers, while still providing quick access to the information that expert users need.
Additional topics:
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[]].
TiddlyWiki is a free and open source project, and we rely on your generous donations to cover hosting costs and to support the ongoing growth of the project.
You can donate here:
https://opencollective.com/tiddlywiki
See Funding TiddlyWiki for more information about TiddlyWiki's funding and how you can help support the project.
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:
tm-new-tiddler for creating a new tiddler in draft modetm-edit-tiddler for moving a tiddler into edit mode tm-cancel-tiddler for cancelling a tiddler out of edit modetm-save-tiddler for saving a draft tiddlerTiddlyWiki 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:
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.
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.
The following widgets are concerned with drag and drop features:
The general sequence of a drag and drop operation is as follows:
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.
| Attribute | Description |
|---|---|
| tiddler | Optional title of the payload tiddler for the drag |
| filter | Optional filter defining the payload tiddlers for the drag |
| tag | Optional tag to override the default "div" element created by the widget |
| selector | Introduced in v5.2.2 Optional CSS Selector to identify a DOM element within the widget that will be used as the drag handle |
| class | Optional 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 |
| enable | Introduced in v5.2.3 Optional value "no" to disable the draggable functionality (defaults to "yes") |
| startactions | Optional action string that gets invoked when dragging starts |
| endactions | Optional action string that gets invoked when dragging ends |
| dragimagetype | Introduced 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.
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:
| Variables | Description |
|---|---|
modifier | The 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-coords | A 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-coords | Introduced 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-posx | x offset position of the dragged DOM node |
tv-selectednode-posy | y offset position of the dragged DOM node |
tv-selectednode-width | offsetWidth of the dragged DOM node |
tv-selectednode-height | offsetHeight of the dragged DOM node |
event-fromselected-posx | x position of the event relative to the dragged DOM node |
event-fromselected-posy | y position of the event relative to the dragged DOM node |
event-fromviewport-posx | x position of the event relative to the viewport |
event-fromviewport-posy | y position of the event relative to the viewport |
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.
| Attribute | Description |
|---|---|
| actions | Actions to be performed when items are dropped. It activates 1 action per item |
| listActions | New in v5.3.4 Actions to be performed when items are dropped. It activates 1 action for a the whole list of items |
| class | Optional 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 |
| tag | Optional 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 |
| enable | Introduced 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:
| Variables | Description |
|---|---|
actionTiddler | For parameter actions, the actionTiddler Variable contains the title of the item being dropped |
actionTiddlerList | For parameter listActions the actionTiddlerList Variable contains a Title List of all the items being dropped |
modifier | The modifier Variable contains the modifier key held while dragging (can be normal, ctrl, shift or ctrl-shift) |
This example displays a palette of icons. Dragging a tiddler onto one of the icons assigns that icon to the tiddler.
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
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.
| Attribute | Description |
|---|---|
| deserializer | Introduced in v5.1.15 Optional name of deserializer to be used (by default the deserializer is derived from the file extension) |
| enable | Introduced in v5.1.22 Optional value "no" to disable the dropzone functionality (defaults to "yes") |
| class | Introduced in v5.1.22 Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone") |
| autoOpenOnImport | Introduced in v5.1.23 Optional value "no" or "yes" that can override tv-auto-open-on-import |
| importTitle | Introduced in v5.1.23 Optional tiddler title to use for import process instead of $:/Import |
| actions | Introduced 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. |
| contentTypesFilter | Introduced in v5.2.0 Optional filter that specifies the content types accepted by the dropzone. |
| filesOnly | Introduced in v5.2.0 Optional. When set to "yes", the dropzone only accepts files and not string data. Defaults to "no" |
The dropzone widget displays any contained content within the dropzone.
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.
The following data transfer types are supported:
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.
(none)
<$set name="EXAMPLE" value="123.$(EXAMPLE2)$.789">
<$set name="EXAMPLE2" value="456">
<<dumpvariables>>
</$set>
</$set>| purpose | find titles that yield duplicate slugs |
|---|---|
| input | a selection of titles |
| output | input 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:
The Dynaview Plugin makes it possible to build user interfaces that dynamically respond to changes in the browser viewport via scrolling or zooming:
See the demo at https://tiddlywiki.com/plugins/tiddlywiki/dynaview
| purpose | select one of each group of input titles by field |
|---|---|
| input | a selection of titles |
| suffix | optionally, list-item or value |
| parameter | F=the name of a field, defaulting to title |
| output | a 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.
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]].
[each[color]][sort[title]each[type]][each:list-item[list]][[Non existing]] [[GettingStarted]] +[each:value[]]+[each[]] below[[Non existing]] [[GettingStarted]] +[each[]]+[each:value[]] above| purpose | select one of each group of input titles by date |
|---|---|
| input | a selection of titles |
| parameter | F=the name of a date field, defaulting to modified |
| output | a 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.
[eachday[created]]For an example of using the eachday operator to generate a two-tier list of groups and members, see GroupedLists.
La edición española de TiddlyWiki se encuentra aquí:
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:
You can see the current settings for the view template body cascade in $:/ControlPanel under the Info -> Advanced -> Cascades -> Edit Template Body tab.
The edit bitmap widget provides a user interface in the browser for editing bitmap tiddlers.
The content of the <$edit-bitmap> widget is ignored.
| Attribute | Description |
|---|---|
| tiddler | The tiddler to edit (defaults to the current tiddler) |
The edit bitmap widget can be configured with these system tiddlers:
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.
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.
| purpose | select the descriptions of the input editions |
|---|---|
| input | a selection of edition names |
| parameter | none |
| output | the 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.
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.
| purpose | select the names of all the TiddlyWiki editions |
|---|---|
| input | ignored |
| parameter | none |
| output | the name of each TiddlyWiki edition, in alphabetical order |
Learn more about how to use Filters
Lists the names and descriptions of the available editions. You can create a new wiki of a specified edition with the --init command.
--editionsThe 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.
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:
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.
The content of the <$edit-text> widget is ignored.
| Attribute | Description |
|---|---|
| tiddler | The tiddler to edit (defaults to the current tiddler) |
| field | The field to edit (defaults to text). Takes precedence over the index attribute |
| index | The index to edit |
| default | The default text to be provided when the target tiddler doesn't exist |
| class | A CSS class to be assigned to the generated HTML editing element |
| placeholder | Placeholder text to be displayed when the edit field is empty |
| focusPopup | Title of a state tiddler for a popup that is displayed when the editing element has focus |
| focus | Set to "yes" or "true" to automatically focus the editor after creation |
| focusSelectFromStart | Introduced 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. |
| focusSelectFromEnd | Introduced 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. |
| tabindex | Sets the tabindex attribute of the input or textarea to the given value |
| autocomplete | Introduced in v5.1.23 An optional string to provide a hint to the browser how to handle autocomplete for this input |
| tag | Overrides the generated HTML editing element tag. For a multi-line editor use tag=textarea. For a single-line editor use tag=input |
| type | Overrides the generated HTML editing element type attribute |
| size | The 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 |
| autoHeight | Either "yes" or "no" to specify whether to automatically resize textarea editors to fit their content (defaults to "yes"). This setting can be changed globally with an editor toolbar button |
| minHeight | Minimum height for automatically resized textarea editors, specified in CSS length units such as "px", "em" or "%". Has no effect if the CodeMirror Plugin is active |
| rows | Sets the rows attribute of a generated textarea. rows takes precedence over autoHeight, so text areas can be defined individually |
| cancelPopups | Introduced in v5.1.23 if set to "yes", cancels all popups when the input gets focus |
| inputActions | Introduced 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. |
| refreshTitle | Introduced in v5.1.23 An optional tiddler title that makes the input field update whenever the specified tiddler changes |
| disabled | Introduced in v5.1.23 Optional, disables the text input if set to "yes". Defaults to "no" |
| fileDrop | Introduced in v5.2.0 Optional. When set to "yes" allows dropping or pasting images into the editor to import them. Defaults to "no" |
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}}
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[]] }}} />
\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"/>
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).
The content of the <$edit> widget is ignored.
| Attribute | Description |
|---|---|
| tiddler | The tiddler to edit (defaults to the current tiddler) |
| field | The field to edit (defaults to text). Takes precedence over the index attribute |
| index | The index to edit |
| class | A CSS class to be added the generated editing widget |
| tabindex | Sets the tabindex attribute of the input or textarea to the given value |
| autocomplete | Introduced in v5.1.23 An optional string to provide a hint to the browser how to handle autocomplete for this input |
| cancelPopups | Introduced in v5.1.23 if set to "yes", cancels all popups when the input gets focus |
| inputActions | Introduced in v5.1.23 Optional actions that are triggered every time an input event occurs within the input field or textarea |
| refreshTitle | Introduced in v5.1.23 An optional tiddler title that makes the input field update whenever the specified tiddler changes |
<$edit tiddler=<<now YYYY-0MM-0DD>> class="tc-edit-texteditor"/>
<$edit-text tiddler="$:/status/UserName" tag="input" size=40 autocomplete="email"/>
| purpose | the filter run is only evaluated if the filter output of all previous runs so far is an empty list |
|---|---|
| input | all titles from previous filter runs |
| output | if 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. |
This prefix has a Shortcut Filter Run Prefix symbol ~run
Also see: Then Filter Run Prefix | then Operator and else Operator
| purpose | if the list of input titles is empty then return a list consisting of a single constant string, otherwise return the original titles |
|---|---|
| input | a selection of titles |
| parameter | E=a string |
| output | the original input titles unless empty, in which case return a list with the single entry E |
Learn more about how to use Filters
Introduced in v5.1.20 See Conditional Operators for an overview.
Also see: then Operator | Then Filter Run Prefix and Else Filter Run Prefix
[[HelloThereMissing]is[missing]else[yes]][[HelloThere]is[missing]else[yes]]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.
[!is[system]!sort[modified]limit[25]]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 . import.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
| purpose | apply base 64 encoding to a string |
|---|---|
| input | a selection of titles |
| suffix | optional: binary to treat input as binary data, urlsafe for URL-safe output |
| output | the input with base 64 encoding applied |
Learn more about how to use Filters
Introduced in v5.2.6See 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.
[[test]encodebase64[]][[😎]encodebase64[]][[😎]encodebase64:urlsafe[]]| purpose | apply HTML encoding to a string |
|---|---|
| input | a selection of titles |
| output | the 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 &< replaced with <> replaced with >" replaced with "[[Title with <angle brackets>]] +[encodehtml[]][[Title with an & ampersand]] +[encodehtml[]]| purpose | apply URI encoding to a string |
|---|---|
| input | a selection of titles |
| output | the input with URI encoding applied |
Learn more about how to use Filters
Introduced in v5.1.14[[Title with Space]] +[encodeuri[]][[Title with Space]] [[Another title with Space]] +[encodeuri[]]| purpose | apply URI component encoding to a string |
|---|---|
| input | a selection of titles |
| output | the input with URI component encoding applied |
Learn more about how to use Filters
Introduced in v5.1.14See 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: !'()*
[[Title with Space]] +[encodeuricomponent[]][[Title with Space]] [[Another title with Space]] +[encodeuricomponent[]]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.
When used as a single HTML file, TiddlyWiki5 allows content to be encrypted with AES 256 bit encryption in CCM mode using the Stanford JavaScript Crypto Library.
Note that TiddlyWiki has two other unrelated features concerned with passwords/encryption:
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.
The content of the <$encrypt> widget is ignored.
| Attribute | Description |
|---|---|
| filter | Filter defining the tiddlers to be included in the encrypted block. If not specified then all non-system tiddlers are used |
| purpose | select titles from the parameter interpreted as a title list |
|---|---|
| input | ignored |
! input | a selection of titles |
| suffix | D=Introduced in v5.1.20 dedupe (the default) to remove duplicates, raw to leave duplicates untouched |
| parameter | L=a title list |
| output | the titles stored as a title list at L |
! output | those input titles that are not listed in L |
Learn more about how to use Filters
<$set name="myList" value="first [[second with a space]] third">
<$list filter="[enlist<myList>]">
...[enlist[one two three]addsuffix[!]][enlist[one one one]][enlist:raw[one one one]][enlist{$:/StoryList!!list}]| purpose | select titles by interpreting each input title as a title list |
|---|---|
| input | a selection of titles |
| suffix | D=dedupe (the default) to remove duplicates, raw to leave duplicates untouched |
| output | the titles stored as a title list in each input title |
Learn more about how to use Filters
<$vars days={{{ [[Days of the Week]get[list]] }}}>
{{{ [enlist<days>] }}}
</$vars>is equivalent to:
{{{ [[Days of the Week]get[list]enlist-input[]] }}}[[Days of the Week]get[list]enlist-input[]]Contrast with:
[[Days of the Week]get[list]]'HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input[]]'HelloThere GettingStarted [[Customise TiddlyWiki]]''HelloThere HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input:raw[]]'HelloThere HelloThere GettingStarted [[Customise TiddlyWiki]]' +[enlist-input[]]The entity widget displays a specified HTML character entity.
The content of the <$entity> widget is not used.
| Attribute | Description |
|---|---|
| entity | The entity to display (eg, ×) |
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 pluginsTIDDLYWIKI_THEME_PATH - Search path for themesTIDDLYWIKI_LANGUAGE_PATH - Search path for languagesTIDDLYWIKI_EDITION_PATH - Search path for editions (used by the InitCommand)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 indexIntroduced 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.
The content of the $error widget is ignored.
| Attribute | Description |
|---|---|
| $message | The error message |
| purpose | apply CSS escaping to a selection of titles through the CSS.escape() method / operation |
|---|---|
| input | a selection of titles |
| output | the input with CSS escaping applied through the CSS.escape() method |
Learn more about how to use Filters
Introduced in v5.1.20See Mozilla Developer Network for details of the CSS.escape() operation.
[all[tiddlers]tag[Resources]escapecss[]]| purpose | escape special characters used in regular expressions |
|---|---|
| input | a selection of titles |
| output | the input with escaping applied to special regular expression characters |
Learn more about how to use Filters
Introduced in v5.1.14See Mozilla Developer Network for details of the regular expression syntax.
[[Title with dots . and dollars $]] +[escaperegexp[]]I collect my tw5 creations on-line as http://eucaly-tw5.tiddlyspot.com/
Available Plugins :
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.
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.
In order for the events to be trapped:
selector attributematchSelector attributeenabled="yes")The content of the <$eventcatcher> widget is displayed normally.
| Attribute | Description |
|---|---|
| selector | A CSS selector. Only events originating inside a DOM node with this selector will be trapped |
| matchSelector | Introduced 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>> |
| tag | Optional. The HTML element the widget creates to capture the events, defaults to: » span when parsed in inline-mode» div when parsed in block-mode |
| class | Optional. A CSS class name (or names) to be assigned to the widget HTML element |
| stopPropagation | Introduced 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 |
| enabled | New in v5.4.0 Optional. Enables or disables the event catcher widget. Set to "no" to remove all event listeners while keeping the widget’s DOM structure intact. Defaults to "yes" |
| pointerCapture | New in v5.4.0 Optional. Enables native pointer capture for pointer events. Possible values are "no", "yes", or "dynamic". Defaults to "no" |
| events | (removed – see below) Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" |
| actions-* | (removed – 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 |
New in v5.4.0 The attributes events and actions-* have been removed as they 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.
New in v5.4.0
The pointerCapture attribute enables native Pointer Events support using setPointerCapture(). This allows pointer interactions to continue to be tracked even if the pointer moves outside the widget’s DOM nodes or the browser viewport.
This is particularly useful for drag-and-drop interfaces, sliders, drawing tools, and other pointer-driven interactions.
no (default) Pointer capture is not used. Pointer events are only received while the pointer remains within the widget’s DOM nodes.
yes Pointer capture is enabled whenever a pointerdown event occurs. All pointer event handlers specified on the widget remain active for the lifetime of the widget.
dynamic Pointer capture is enabled only for the duration of an active pointer interaction.
Event handlers for pointerup, pointercancel, and optionally pointermove are attached only while pointer capture is active and are removed when the interaction ends.
This mode minimizes active event listeners and is recommended for performance-sensitive use cases.
pointerdown, pointermove, pointerup, and pointercancelpointerup or pointercancelNew in v5.4.0
The enabled attribute allows the event catcher widget to be temporarily disabled without removing it from the DOM.
When enabled="no":
The following variables are made available to the actions:
| Variables | Description |
|---|---|
dom-* | All DOM attributes of the node matching the given selector are made available as variables, with the prefix dom- |
modifier | The modifier Variable contains the Modifier Key held during the event |
event-mousebutton | The mouse button (if any) used to trigger the event (can be "left", "right" or "middle") |
event-type | The type property of the JavaScript event. Deprecated fromv5.4.0 Removed in favour of eventJSON |
event-detail-* | Any properties in the detail attribute of the event are made available with the prefix event-detail-. Deprecated fromv5.4.0 Removed in favour of eventJSON |
tv-popup-coords | A relative coordinate string that can be used with the ActionPopupWidget |
tv-popup-abs-coords | Introduced in v5.2.4 An absolute coordinate string that can be used with the ActionPopupWidget |
tv-widgetnode-width | Introduced in v5.2.3 offsetWidth of the DOM node created by the eventcatcher widget |
tv-widgetnode-height | Introduced in v5.2.3 offsetHeight of the DOM node created by the eventcatcher widget |
tv-selectednode-posx | x offset position of the selected DOM node |
tv-selectednode-posy | y offset position of the selected DOM node |
tv-selectednode-width | offsetWidth of the selected DOM node |
tv-selectednode-height | offsetHeight of the selected DOM node |
event-fromselected-posx | x position of the event relative to the selected DOM node |
event-fromselected-posy | y position of the event relative to the selected DOM node |
event-fromcatcher-posx | x position of the event relative to the event catcher DOM node |
event-fromcatcher-posy | y position of the event relative to the event catcher DOM node |
event-fromviewport-posx | Introduced in v5.2.0 x position of the event relative to the viewport |
event-fromviewport-posy | Introduced in v5.2.0 y position of the event relative to the viewport |
eventJSON | New in v5.4.0A stringified JSON object containing string-safe copies of the event’s own properties. Can be accessed using the jsonget Operator. |
This example illustrates how to work with click and right click events:
\procedure card-click-actions()
<$action-setfield $tiddler="$:/temp/selected-card" text=<<dom-data-card-id>>/>
\end
\procedure card-context-actions()
<$action-setfield $tiddler="$:/temp/context-menu"
text=`Showing context menu for card: {{!!card}}`
card=<<dom-data-card-id>>
x=<<event-fromviewport-posx>>
y=<<event-fromviewport-posy>>/>
\end
<$eventcatcher
selector=".gallery-card"
$click=<<card-click-actions>>
$contextmenu=<<card-context-actions>>
class="card-gallery">
<div class="gallery-card" data-card-id="card1" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">
<h3>1: Mountain Landscape</h3>
<p>Click to select, right-click for options</p>
</div>
<div class="gallery-card" data-card-id="card2" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">
<h3>2: Ocean View</h3>
<p>Click to select, right-click for options</p>
</div>
<div class="gallery-card" data-card-id="card3" style="border: 1px solid #ccc; padding: 10px; margin: 5px; cursor: pointer;">
<h3>3: City Skyline</h3>
<p>Click to select, right-click for options</p>
</div>
</$eventcatcher>
<!-- Display selected card info -->
<$reveal type="nomatch" state="$:/temp/selected-card" text="">
<div style="background: #f0f0f0; padding: 10px; margin-top: 10px;">
<strong>Selected:</strong> {{$:/temp/selected-card}}
</div>
</$reveal>
<!-- Display context menu info -->
<$reveal type="nomatch" state="$:/temp/context-menu" text="">
<div style="background: #ffe0e0; padding: 10px; margin-top: 10px;">
{{$:/temp/context-menu}}
</div>
</$reveal>title: $:/config/tiddlyweb/host
text: $protocol$//$host$/MyApp/
{
"name": "MyStuff",
"description": "A description of this wiki",
"dependencies": {
"sax": "1.2.4",
"tiddlywiki": "*"
}
}<div class="tc-table-of-contents">
<<toc-expandable "Contents">>
</div><div class="tc-table-of-contents">
<<toc-selective-expandable "Contents">>
</div>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><div class="tc-table-of-contents">
<<toc "Contents">>
</div><div class="tc-table-of-contents">
<<toc tag:"Contents" level:"1">>
</div><div class="tc-table-of-contents">
<<toc tag:"Contents" level:"2">>
</div><div class="tc-table-of-contents">
<<toc tag:"Contents" level:"4">>
</div>toc-level-indicator macro. \define toc-level-indicator()
<!-- remove the indicator -->
\end
<div class="tc-table-of-contents">
<<toc tag:"Contents" level:"1">>
</div><div class="tc-table-of-contents">
<<toc-expandable "Contents" "sort[title]">>
</div>Select a topic in the table of contents. Click the arrow to expand a topic.
<$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>"
/>Select a topic in the table of contents. Click the arrow to expand a topic.
<$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>"
/>{
"description": "My wiki",
"plugins": [
"tiddlywiki/tiddlyweb",
"tiddlywiki/filesystem"
],
"themes": [
"tiddlywiki/vanilla",
"tiddlywiki/snowwhite"
]
}
<?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>
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.
A complete online shop made in TiddlyWiki!
https://web.archive.org/web/20241127033249/http://luckysushi.ru/habarovsk/heeg.html#index
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:
- 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:
- See how the different types of passages are distributed throughout each Gospel.
- Hover over passages to see the verses and titles.
- Click on a passage to open it and see the themes and other data it mentions.
- 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.
- 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.
- 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.
A personal website built with TiddlyWiki.
TriTarget.org is a name I came up with in high school. I was big into computer programming and wanted a company name that was kinda catchy. When I made a few programs in BASIC I would brand them with TriTarget as a way to show off my company (Even though I didn't have one).
A git choose-your-own-adventure!ⓡ for walking yourself though fixing a broken Git repository.
http://sukima.github.io/GitFixUm/
This document is an attempt to be a fairly comprehensive guide to recovering from what you did not mean to do when using git. It isn't that git is so complicated that you need a large document to take care or your particular problem, it is more that the set of things that you might have done is so large that different techniques are needed depending on exactly what you have done and what you want to have happen.
A system for lesson planning built with TiddlyWiki.
I built a program to help enter and store lesson plan information and then facilitate/automate some of the tedious work involved in creating the actual lesson plan document.
A simple game built with TiddlyWiki, introduced in this post.
http://zorklike.tiddlyspot.com
I decided to see if it was possible to make some sort of game using only the core tiddlywiki with no plugins or javascript. I made a very bare bones zork/interactive fiction type game. It is currently the simplest thing I could make and claim it was a game, but I may add on to it in the future. It uses the 5.1.5 prerelease because the action-setfield widget saved lots of work making macros.
One goal of this is to use nothing besides what is contained in the core tiddlywiki, so there is no javascript and no plugins.
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.
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
A thesis notebook based on TiddlyWiki.
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.
| purpose | if output titles of this filter run are contained in the output of previous filter runs, they are removed, and otherwise ignored |
|---|---|
| input | all titles from previous filter runs |
| output | output titles are removed from the filter's output (if such tiddlers exist) |
This prefix has a Shortcut Filter Run Prefix symbol -run
| purpose | convert each number to exponential notation with N digits |
|---|---|
| input | a selection of titles |
| parameter | N=a number |
| output | the 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
123456789 +[exponential[4]]123456789 +[exponential[13]]1.23E23 +[exponential[90]]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 | ||
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:
The External Attachments Plugin provides support for importing tiddlers as external attachments. That means that instead of importing binary files as self-contained tiddlers, they are imported as "skinny" tiddlers that reference the original file via the _canonical_uri field. This reduces the size of the wiki and thus improves performance. However, it does mean that the wiki is no longer fully self-contained.
This plugin only works when using TiddlyWiki with platforms such as TiddlyDesktop that support the path attribute for imported/dragged files.
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.
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.
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.
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:
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.
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
]
}The following --save command (see SaveCommand) can be used to save the images of a wiki into an images subfolder:
--save [is[image]] imagesTwo --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/plainThe 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.
The following command will create external images in the myWiki/output folder.
tiddlywiki myWiki --build externalimagesOn 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 indexYou can't edit an external image directly in the browser except by changing the URI field to point to a different image.
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
Further information about specific TiddlyWiki features:
Last but not least, TiddlyWiki is a rare example of a practical quine
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.icoThe 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:
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.
| purpose | filter the input by field |
|---|---|
| input | a selection of titles |
| suffix | F=the name of a field |
| parameter | S=a possible value of field F |
| output | those input tiddlers in which field F has the value S |
! output | those 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:
FF exists but has an empty valueThe syntax of a filter step treats any unrecognised filter operator as if it was the suffix to the field operator.
[field:author[JeremyRuston]][plugin-type[theme]author[JeremyRuston]]
<$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>
The field mangler widget manipulates the fields and tags of a tiddler. It does so in response to the following Messages:
| Message | Description |
|---|---|
| tm-remove-field | Remove the field specified in event.param |
| tm-add-field | Add the field specified in event.param |
| tm-remove-tag | Remove the tag specified in event.param |
| tm-add-tag | Add the tag specified in event.param |
The field mangler widget displays any contained content, and responds to Messages dispatched within it.
| Attribute | Description |
|---|---|
| tiddler | Title of the tiddler to manipulate (defaults to the current tiddler) |
| purpose | select all field names of the input titles |
|---|---|
| input | a selection of titles |
| suffix | Introduced in v5.1.22 optional: include, exclude parameter list |
| parameter | Introduced in v5.1.22 optional: a list of field names |
| output | all 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.
[[HelloThere]fields[]][[HelloThere]fields:include[list title text non-existing]][[HelloThere]fields:include[list title text]sortby[title list text]][[HelloThere]fields:exclude[list title text]][[HelloThere]fields[]] -list -title -text[tag[Common Operators]fields[]]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.
The provided template is rendered with the following special substitutions:
| Symbol | Substitution |
|---|---|
| $name$ | Field name |
| $value$ | Field value |
| $encoded_value$ | HTML encoded form of field value |
The content of the <$fields> widget is ignored.
| Attribute | Description |
|---|---|
| tiddler | Title of the tiddler from which the fields are to be displayed (defaults to the current tiddler) |
| template | Text of the template (see above) |
| exclude | Lists of fields to be excluded (defaults to "text") |
| include | Lists of fields to be included, if the field exists. This parameter takes precedence over "exclude" |
| sort | Sorts the fields by name (defaults to "yes"). Set to "no", if "include" order should be retained! |
| sortReverse | Reverses the sort order |
| stripTitlePrefix | If 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.
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.
The content of the $fill widget is used as the content to be passed to the transclusion.
| Attribute | Description |
|---|---|
| $name | The name of the slot to be filled |
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.
| purpose | remove every input title for which the filter run output is an empty list |
|---|---|
| input | the filter output of all previous runs so far |
| output | the input titles for which the filter run is not empty |
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.[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]][tag[shopping]] :filter[{!!quantity}compare:integer:gt[4]] :map[addprefix[ ]addprefix{!!quantity}][tag[shopping]] :filter[{!!quantity}compare:integer:lteq[4]] :map[addprefix[ ]addprefix{!!quantity}]:filter and :and/+ filter run prefixesThe 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:
get[text]length[], links[], <index>remainder[2], {!!quantity}.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]] |
| purpose | apply a subfilter to each input title and return the titles that return a non-empty result from the subfilter |
|---|---|
| input | a selection of titles passed as input to the filter |
! input | a selection of titles passed as input to the filter |
| parameter | S=a filter expression |
| output | the selection of titles that pass the filter S |
! output | those 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
\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]] }}}These examples use the following predefined variables:
[get[text]length[]compare:integer:gteq[1000]][get[text]length[]compare:integer:lteq[2000]][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>]A filter operator is a predefined keyword attached to an individual step of a filter. It defines the particular action of that step.
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 |
|||
| jsondelete | delete a property from JSON objects | |||
| 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.
The parameter to a filter operator can be:
[like this]{like this}<like this>[<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>].(like this)Introduced in v5.1.23 Filter Steps support multiple parameters which are separated by a , character.
For example: [param1],[param2] or <param1>,{param2} or [param1],(param2)
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".
There are 2 types of filter run prefixes that are interchangeable; named prefixes and shortcut prefixes.
:filter examplesSee Filter Filter Run Prefix (Examples)
:intersection examplesSee Intersection Filter Run Prefix (Examples)
:reduce examplesSee Reduce Filter Run Prefix (Examples)
:sort examplesA 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.
The step's operator is drawn from a list of predefined keywords 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. Suffixes are separated by : characters, and each suffix group can contain multiple comma-separated values. For example, in compare:number:gteq, the first suffix is number and the second is gteq. In :sort:string:reverse,casesensitive, the first suffix is string and the second suffix group contains both reverse and casesensitive.
If a step's operator and suffix are omitted altogether, it defaults to the title operator. If a suffix is present but the operator name before the colon is empty (e.g. [:fieldname[value]]), the operator defaults to field.
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. New in v5.3.0 However, unrecognised operators whose name contains a . (dot) character are treated as user-defined filter operators, resolved by looking up a variable or function with that name.
Filter operators can be extended by plugins.
The output of a Filter Step depends on its operator:
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 :
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:
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 expressionProvision 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:
{{!!myfield}}{{##myindex}}][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.
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/]] }}} />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":
<<list-links "[tag[Filters]]">>That renders as:
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:
Resources to help you learn more about TiddlyWiki and its community.
The latest version v5.4.0 of TiddlyWiki (released on 20th April 2026)
Find out how you can help support TiddlyWiki financially
Subscribe to the TiddlyWiki Newsletter, a summary of the most interesting and relevant news from the TiddlyWiki community
Explore the responses to the 2025 community survey
Short video introducing basic TiddlyWiki concepts
A comprehensive interactive guide to TiddlyWiki, from the very basics to the advanced concepts, featuring exercises and takeaways to aid learning
Find out more about the new MultiWikiServer plugin that turns TiddlyWiki into a full-fledged server system supporting multiple user accounts and tiddler sharing
Celebrating 20 years since the launch of TiddlyWiki
With care, TiddlyWiki can be used totally privately, without needing to trust anything or anyone but your own device
Explore commercial products and services for TiddlyWiki
Support the development of TiddlyWiki by hiring Jeremy Ruston through Intertwingled Innovations Limited
Links to TiddlyWiki-related content collected by the community
Use TiddlyWiki plugins to easily create visualizations of your tiddlers.
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.
| purpose | select the first N input titles |
|---|---|
| input | a selection of titles |
| parameter | N=an integer, defaulting to 1 |
| output | the first N input titles |
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[]]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.
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.
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.
| purpose | convert each number to fixed point notation with N digits after the decimal point |
|---|---|
| input | a selection of titles |
| parameter | N=a number |
| output | the 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.
10.123456789 +[fixed[5]][[355]divide[113]fixed[7]][[1]divide[2]fixed[3]]| purpose | rounds a list of numbers to the largest integer less than or equal to each number |
|---|---|
| input | a selection of titles |
| output | rounds each of the input numbers to the largest integer less than or equal to the given number |
Learn more about how to use Filters
Introduced in v5.1.20 See Mathematics Operators for an overview.
[[1.6]floor[]][[-1.6]floor[]]=-1.2 =-2.4 =3.6 =4.8 =5.1 +[floor[]]| purpose | format the input string according to one of supported formats |
|---|---|
| input | a selection of titles |
| suffix | B=one of supported formats |
| parameter | C=optional format string for the formats |
| output | input strings formatted according to the specified suffix B |
Learn more about how to use Filters
The suffix B is one of the following supported string formats:
| Format | Description |
date | The 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") |
json | Introduced 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 |
relativedate | The input string is interpreted as a UTC date and displayed as the interval from the present instant. Any operator parameters C are ignored |
timestamp | New 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") |
titlelist | Introduced 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.
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[]][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:
Available character formatting in WikiText includes:
| Wikitext | Button | Shortcut | Rendered Output |
Double single quotes are used for ''bold text'' | ctrl-B | Double single quotes are used for bold text | |
Double slashes are used for //italic text// | ctrl-I | Double slashes are used for italic text | |
Double underscores are used for __underlined text__ | ctrl-U | Double underscores are used for underlined text | |
Double circumflex accents are used for ^^superscripted^^ text | ctrl-shift-P | Double circumflex accents are used for superscripted text | |
Double commas are used for ,,subscripted,, text | ctrl-shift-B | Double commas are used for subscripted text | |
Double tilde signs are used for ~~strikethrough~~ text | ctrl-T | Double tilde signs are used for | |
Single backticks are used for `code` | ctrl-M | Single 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
| Wikitext | Rendered Output |
``double backticks allows `embedded` backticks`` | double backticks allows `embedded` backticks |
The full list of KeyboardShortcuts can be found in the $:/ControlPanel -> Keyboard Shortcuts tab.
| Wikitext | Resulting 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^^ text | Double circumflex accents are used for <sup>superscripted</sup> text |
Double commas are used for ,,subscripted,, text | Double commas are used for <sub>subscripted</sub> text |
Double tilde signs are used for ~~strikethrough~~ text | Double tilde signs are used for <s>strikethrough</s> 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> |
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.
Use underline to describe text formatting that puts a line under the characters. Use underscore to refer to the underscore character ( _ ).
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>.)
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:
<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>| 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 |
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:
$:/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
@@.fourcolumns
<$list filter="[tag[Filter Operators]]" variable="foo">
<<foo>><br>
</$list>
@@
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
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:
<div class="dynamic-table">
<$list filter="[has[tags]tags[]sort[title]first[50]]">
<span class="item">
<$transclude tiddler="$:/core/ui/TagTemplate"/>
</span>
</$list>
</div><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>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.
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
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 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$
\endWith that definition in place, <<youtube 1g66s7UbyuU>> generates the URL https://www.youtube.com/watch?v=1g66s7UbyuU
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.
See WikiText for a detailed introduction to writing WikiText.
As the official TiddlyWiki forum, Talk TiddlyWiki 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.
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
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.
This example tiddler is used to illustrate some of the Filter Operators.
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:
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.
| purpose | apply a function to the input list, and return the result |
|---|---|
| input | a selection of titles passed as input to the function F |
| parameter | F=first parameter is the function name, subsequent parameters are passed to the function by position |
| output | the 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 called once with all of the input titles (in contrast, the filter Operator calls 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.
These examples use the following predefined variable:
$:/SiteTitleThey 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]]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]]textThe 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>]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]]text with the value set in the overriding tiddler. If the value is different, output the overriden valueThe 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>]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.
<$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.tiddlywikitext: 2 differences
My TiddlyWiki @@font-size:small; v<<version>>@@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]]
\endFunctions can be called in several ways:
<<myfun param:"value">><div class=<<myfun param:"value">>>[function[myfun],[value],...][my.fun[value]] or [.myfun[value]]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.
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:
To support these needs in the community, we have two initiatives:
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.
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.
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/plainThe 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).
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/plainIntroduced 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.
The content of the $genesis widget is used as the content of the dynamically created widget.
| Attribute | Description |
|---|---|
| $type | The type of widget or element to create (an initial $ indicates a widget, otherwise an HTML element will be created) |
| $remappable | Set 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 |
| $names | An optional filter evaluating to the names of a list of attributes to be applied to the widget |
| $values | An optional filter evaluating to the values corresponding to the list of names specified in $names |
| $mode | An 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.
<$genesis $type="div" class="tc-thing" label="Squeak">Mouse</$genesis>That renders as:
... 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:
... 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><$genesis $type="my-element" $names="one two" $values="1 2">Test Genesis Widget</$genesis>That renders as:
... and the underlying HTML is:
<p><my-element two="2">Test Genesis Widget</my-element></p>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/
| purpose | select all values of a field in the input titles |
|---|---|
| input | a selection of titles |
| parameter | F=the name of a field |
| output | the 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.
[all[current]get[draft.of]][get[tags]][get[tags]unique[]][all[current]get[myfield]]myfield is not returned by the get operator[all[current]has:field[myfield]] :map[get[myfield]]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}]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.
| purpose | select all values of a data property in the input titles |
|---|---|
| input | a selection of titles |
| parameter | P=the name of a property |
| output | the 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.
[[$:/palettes/Vanilla]getindex[background]]background of the DataTiddler $:/palettes/Vanilla[all[shadows+tiddlers]tag[$:/tags/Palette]getindex[background]][[ListopsData]getindex[DataIndex]]DataIndex in ListopsData is not returned by the getindex operator[[ListopsData]has:index[DataIndex]] :map[getindex[DataIndex]]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]]In the above example, count is used to check if getindex returns a result (i.e. the corresponding property has a value) or not.
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!
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.
There are three options for using TiddlyWiki on Android:
The Tiddloid and Tiddloid Lite app are Android apps that makes it possible to edit and save changes to TiddlyWiki HTML files.
.html or .htm extension of the files to be imported.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.
apt update
apt upgrade
apt install nodejs
npm install -g tiddlywikitermux-setup-storagecd storage/shared
tiddlywiki mynewwiki --init server
tiddlywiki mynewwiki --listenTiddlyWiki 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.
If the button doesn't work save this link: https://tiddlywiki.com/empty.htmlYour browser may ask you to accept the download before it begins
.html or .htm extensionTip: 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.
Firefox provides the best user experience for using TiddlyWiki with the following browser extensions:
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:
Note that Quine is published independently of TiddlyWiki
Debian/Ubuntu:apt install nodejs
May need to be followed up by:apt install npmArch Linuxyay -S tiddlywiki
(installs node and tiddlywiki)
brew install node
npm install -g tiddlywikiIf it fails with an error you may need to re-run the command as an administrator:sudo npm install -g tiddlywiki(Mac/Linux)
tiddlywiki --version
tiddlywiki mynewwiki --init server to create a folder for a new wiki that includes server-related componentstiddlywiki mynewwiki --listen to start TiddlyWikitiddlywiki mynewwiki --build indexThe -g flag causes TiddlyWiki to be installed globally. Without it, TiddlyWiki will only be available in the directory where you installed it.
TiddlyWiki can also be hosted on online services such as Dropbox and Cloudant.
TiddlyWiki on Safari can only save changes using the manual HTML5-compatible fallback saver module.
| purpose | select all values of variables named in the input titles |
|---|---|
| input | a selection of variable names |
| parameter | ignored |
| output | the 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.
[[currentTiddler]getvariable[]]Git (/ɡɪt/) is a distributed version control system that tracks changes in any set of computer files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different computers).
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 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.
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
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
The following sidebar tabs give examples of grouped lists created by nesting.
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>
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
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.
{
"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"
}A hard link is a link that can be detected by a superficial examination of WikiText.
A link is soft if it is:
to attribute is a transclusion, macro or variableThis concept is analogous to Hard and Soft Transclusions.
A hard transclusion is a transclusion that can be detected by a superficial examination of WikiText.
A transclusion is soft if it is:
$tiddler attribute is a transclusion, macro or variableThis concept is analogous to Hard and Soft Links.
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>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
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
| purpose | filter the input by field existence |
|---|---|
| input | a selection of titles |
| suffix | S=Introduced in v5.1.14 optionally, the keyword field or Introduced in v5.1.22 optionally, the keyword index |
| parameter | F=the name of a field or, optionally an index |
| output | without suffix » those input tiddlers in which field F has a non-empty valuesuffix field» those input tiddlers in which field F existssuffix index» those input data tiddlers in which index F exists |
! output | without suffix » those input tiddlers in which field F does not exist or has an empty valuesuffix field» those input tiddlers in which field F does not existsuffix index» those input data tiddlers in which index F does not exist |
[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]]| purpose | filter the input by tiddler modification status |
|---|---|
| input | a selection of titles |
| parameter | none |
| output | those input tiddlers that have been modified during this session |
! output | those 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.
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 headingCSS classes can be assigned to individual headings like this:
!!.myStyle This heading has the class `myStyle`That renders as:
myStyle... and the underlying HTML is:
<h2 class="myStyle">This heading has the class <code>myStyle</code></h2>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.
Explore the responses to the 2025 community survey
Find out how you can help support TiddlyWiki financially
A comprehensive interactive guide to TiddlyWiki, from the very basics to the advanced concepts, featuring exercises and takeaways to aid learning
Support the development of TiddlyWiki by hiring Jeremy Ruston through Intertwingled Innovations Limited
Short video introducing basic TiddlyWiki concepts
The latest version v5.4.0 of TiddlyWiki (released on 20th April 2026)
Explore commercial products and services for TiddlyWiki
Find out more about the new MultiWikiServer plugin that turns TiddlyWiki into a full-fledged server system supporting multiple user accounts and tiddler sharing
Subscribe to the TiddlyWiki Newsletter, a summary of the most interesting and relevant news from the TiddlyWiki community
With care, TiddlyWiki can be used totally privately, without needing to trust anything or anyone but your own device
Links to TiddlyWiki-related content collected by the community
Use TiddlyWiki plugins to easily create visualizations of your tiddlers.
Celebrating 20 years since the launch of TiddlyWiki
Displays help text for a command:
--help [<command>]If the command name is omitted then a list of available commands is displayed.
If you find TiddlyWiki useful, there are lots of ways you can help assure its future and make it better.
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.

There are many ways you can contribute to TiddlyWiki:
The main TiddlyWiki documentation and code lives on GitHub, and welcomes contributions:
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}}A default tag-tiddler colour can be specified by creating a tiddler called $:/config/DefaultTiddlerColour containing the CSS color value. For more details see: Tiddler Colour Cascade
A default tiddler icon can be specified by creating a tiddler called $:/config/DefaultTiddlerIcon containing the title of the tiddler containing the icon.
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.
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":
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":
<$set name="tv-enable-drag-and-drop" value="yes">
<<list-tagged-draggable tag:"HelloThere">>
</$set>That renders as:
Note that when using the DropzoneWidget and the DroppableWidget directly the enable attribute works independently of the global setting.
$:/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.
Introduced in v5.1.19 When saving a TiddlyWiki using the 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.
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.
$:/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.
Set the $:/config/ui/SideBar/More/horizontal tiddler to yes, to align the More -> Tabs in horizontal orientation.
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
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
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.
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.
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:
Introduced in v5.1.14 Controls the minimum length of a search string before results are displayed.
Defaults to "3".
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.
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.
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.
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 serverEngaging 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).
The input fields of Tiddlers that are being edited can be assigned a tabindex value (preferably 1) so that the Tab key can be used to directly move the focus from one input to the next or backwards using shift-Tab
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.
[all[current]tagging[]] +[!is[draft]][all[current]tagging[]] [all[current]is[tiddler]] +[!is[draft]]Your $:/core/config/TagPillDragFilter
defaults to:
[all[current]tagging[]] +[!is[draft]]
Introduced in v5.1.16 Tag Dropdown: Controls the minimum length of an input string before results are displayed.
Defaults to "0".
Determines the template used when saving via the "save wiki" page control button.
Defaults to $:/core/save/all.
You can change this setting to choose what is saved when the "save wiki" button is clicked.
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):
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
The most useful configuration settings for TiddlyWiki are exposed in the control panel but some more advanced settings do not have a full user interface. Instead, the underlying configuration tiddlers are edited directly.
To change these settings on an empty TiddlyWiki, you can drag the links to the individual configuration tiddlers directly from this wiki into yours.
The Highlight plugin provides the ability to apply syntax colouring to text.
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.
Gathering the history of TiddlyWiki. This is an ongoing project. Contributions and reminiscences are welcome.
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">×</$button> <$link><$view field="title"/> <$reveal type="match" state="$:/HistoryList!!current-tiddler" text=<<currentTiddler>>>✓</$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.
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}}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>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:
tiddlywiki.info file in your wiki folder:"config": { "retain-original-tiddler-path": true }
To create a new tab in the sidebar menu:
caption fieldlist-after or list-before fields as discussed in Tagginglist-after to $:/core/ui/SideBar/Open to place a sidebar tab immediately after the "Open" tabNote that you can create new tabs under the "More" tab in the same way by using the tag $:/tags/MoreSideBar.
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:
| Tag | Generated Class Name |
|---|---|
$:/mytag | tc-tagged-%24%3A%2Fmytag |
Doctor Who | tc-tagged-Doctor%20Who |
£35.23 | tc-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\%2FStylesheetFirst install TiddlyWiki as described in Installing TiddlyWiki on Node.js.
~/MyWiki)tiddlywiki.info containing the following text:{"themes": ["tiddlywiki/vanilla","tiddlywiki/snowwhite"]}tiddlerseditions/empty folder from the TiddlyWiki5 repo~/MyWiki/tiddlers directorytiddlywiki ~/MyWiki --render $:/core/save/all index.html text/plainImagine 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.
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/TemplateThe 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 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:
| code-body | yes |
| list-before | $:/config/StoryTiddlerTemplateFilters/default |
| tags | $:/tags/StoryTiddlerTemplateFilter |
[tag[$:/tags/TiddlerList]then[$:/_tw5.com/CustomStoryTiddlerTemplateDemo/Template]]
Finally, we need to create the demo tiddler itself:
| created | 20211204122107920 |
| filter | HelloThere Community GettingStarted Features Reference Plugins Learning |
| modified | 20211204131610322 |
| tags | $:/tags/TiddlerList |
| type | text/vnd.tiddlywiki |
This 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.
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.
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 darkorchidThe 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 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:
| created | 20211206114433294 |
| list-before | $:/config/TiddlerColourFilters/default |
| modified | 20211206114433294 |
| tags | $:/tags/TiddlerColourFilter |
| type | text/vnd.tiddlywiki |
[tag[TableOfContents]then[#1e90ff]]
[tag[Working with TiddlyWiki]then[darkorchid]]
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 .
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/helpThe 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 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:
| created | 20211205195110592 |
| list-before | $:/config/TiddlerIconFilters/default |
| modified | 20211205195217941 |
| tags | $:/tags/TiddlerIconFilter |
| type | text/vnd.tiddlywiki |
[tag[TableOfContents]then[$:/core/images/globe]]
[tag[Working with TiddlyWiki]then[$:/core/images/help]]
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/spiralhere. More button icons can be found in the Icon Gallery- shortcuts
- This is the Keyboard Shortcut Descriptor eg:
((temp-bold))- button-classes New in v5.4.0
- Additional CSS classes applied to the created button, definable as a list or filter expression
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!
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
If you don't need the config tiddlers anymore you can
TiddlyWiki distinguishes two types of keyboard shortcuts:
input fields or textareas which are handled by the $keyboard widget The latter are handled by a mechanism that starts to work when a wiki is loaded
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
my-shortcutmy-shortcutmy-shortcutmy-shortcutmy-shortcutmy-shortcutmy-shortcutAt this point the shortcut is defined and its actions can be configured
A
$keyboardwidget detects the key combinations pressed within aninputortextareafield within its scope. The$keyboardwidget needs to "embrace" theinputortextareafield and itskeyattribute 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
$keyboardwidget will invoke the actions defined in itsactionsattribute when it detects the key-combination defined in itskeyattribute being pressed in anyinputortextareafield within its scope
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
\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]]
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.
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.
You can copy the code for the “reveal backups” button from the tiddler $:/TiddlyDesktop/Settings and paste it into WikiListToolbar.
Just as usual in TiddlyWiki: you can use the palette, or define your own custom CSS.
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">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.
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.
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.
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.
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.
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.
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.
Currently, the export formats available are:
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.
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:
$:/tags/Stylesheet.tc-subtitle .tc-tiddlylink {display:none;}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;)Here's how to display the last modification date of a wiki in a banner in the corner of the window:
<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>right to right-bottomleftYou 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:
CamelCase is used in most Wikis, but it can interfere with text presentation in some situations.
To prevent a particular CamelCase word from being linked, simply put a tilde (~) in front of the word, like this:
~CamelCaseIf you need to disable CamelCase for just an entire tiddler, you can use the \rules pragma:
\rules except wikilinkTo 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.
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.
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
This process will work on most desktop browsers. Note that none of your personal data leaves your browser with this process.
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.
You can also download https://tiddlywiki.com/upgrade.html locally and perform the same drag-and-drop procedure to upgrade your files.
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:
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:
You can see which shadow tiddlers have been overridden in the Filter tab of advanced search. Select "Overridden shadow tiddlers" from the dropdown.
You can change the width of the main column of tiddlers (also known as the story river) by:
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 (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
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. & for the & character.
The value of Tiddlers™ cannot even be expressed in £, € or $.Displays as:
The value of Tiddlers™ cannot even be expressed in £, € or $.
Comprehensive lists of html entities can be found at...
| HTML Entities | ||||||
|---|---|---|---|---|---|---|
| | no-break space | |||||
| ⁠ | | zerro width WordJoiner | ' | ' | single quote, apostrophe | |
| – | – | en dash | " | " | quotation mark | |
| — | — | em dash | ′ | ′ | prime; minutes; feet | |
| … | … | horizontal ellipsis | ″ | ″ | double prime; seconds; inches | |
| © | © | Copyright symbol | ‘ | ‘ | left single quote | |
| ® | ® | Registered symbol | ’ | ’ | right single quote | |
| ™ | ™ | Trademark symbol | “ | “ | left double quote | |
| † | † | dagger | ” | ” | right double quote | |
| ‡ | ‡ | double dagger | « | « | left angle quote | |
| ¶ | ¶ | paragraph sign | » | » | right angle quote | |
| § | § | section sign | × | × | multiplication symbol | |
| ↑ | ↑ | up arrow | ↓ | ↓ | down arrow | |
| ← | ← | left arrow | → | → | right arrow | |
| ⇐ | ⇐ | double left arrow | ⇒ | ⇒ | double right arrow | |
| ↔ | ↔ | left right arrow | ⇔ | ⇔ | double left right arrow | |
The table below shows how accented characters can be built up by substituting the underscore (_) in the second table into the corresponding character. eg:
| Code | Character | Example | Result |
Ä | Ä | Ä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 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>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>>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.
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.
In an extension of conventional HTML syntax, attributes of elements and widgets can be specified in several different ways:
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>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>In HTML, a tag is used for creating an element.
The name of an HTML element is the name that appears at the beginning of the element's start tag and at the end of the element's end tag (if the element has an end tag). For example, the p in the
https://developer.mozilla.org/en-US/docs/Glossary/Tag<p>start tag and</p>end tag is the name of the HTML paragraph element. Note that an element name in an end tag is preceded by a slash character:</p>, and that for void elements, the end tag is neither required nor allowed.
The image-picker macro displays an interactive image picker, as can be seen in the core text editor.
imageTitle contains the title of the tiddler containing the selected image.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]]