Announcing JigglyWiki. A TiddlyWiki experiment with jQuery.
August 27th, 2008
Once upon a time I was resistant to the idea of Javascript libraries. That was due to a couple of things. Firstly, I was comfortable with writing the Javascript for my projects myself and didn’t like the idea of relying on someone else’s code which I couldn’t easily inspect. Secondly, at the time there weren’t really any libraries. Then there were a few, but they were all, well, to be blunt, a bit pants.
That all changed for me when jQuery came along. jQuery is a lightweight, elegant but powerful Javascript library originally developed by John Resig. jQuery provides fast and efficient interrogation and manipulation of the DOM and borrows conventions from CSS and XPATH to provide concise and expressive queries to be constructed. It’s worth checking out if you haven’t already.
TiddlyWiki has been around since before the existence of Javascript libraries and long before jQuery came along, so it was never developed in a way to take advantage of such things. It could easily be argued that TiddlyWiki is itself, a Javascript library since it provides helper functions for many common Javascript tasks. The extent of this library though, is a little limited since it has evolved to serve a single purpose: To drive TiddlyWiki.
Recently I have been longing to experiment with replacing a lot of the TiddlyWiki core with code built to take advantage of jQuery. The idea of developing TiddlyWiki with a Javascript library turns out not to be a new one as similar discussions have occurred in the past and different libraries considered.
I then began to imagine other benefits from reengineering TiddlyWiki from first principles taking advantage of all of the lessons learned over its lifetime.
It became too hard to resist.
Over the course of 2 reasonably long train journeys, I set about building my own version of TiddlyWiki with jQuery at its core. I settled on a number of objectives:
- To use jQuery to provide the core TiddlyWiki functions.
- To make the code modular such that the core could be very small and additional functionality could easily be included via bespoke jQuery plugins.
- To use unobtrusive Javascript.
- For the document to be sensibly parsed by screen readers and web crawlers.
- To allow navigation of the document even without Javascript
- To use HTML and CSS which is valid according to the W3C.
- To conform to the TiddlyWiki naming convention and adopt a suitably ridiculous working title for the project.
An important thing to note, is that I am not attempting to replace TiddlyWiki. I see JigglyWiki as an experimental prototype to explore ways that TiddlyWiki 3.0 might evolve.
I also hoped to keep this quiet for long enough to allow it to progress to the point that I was happy to reveal a working prototype for general discussion. That proved tricky thanks to my own excitement and the way that gossip spreads around the web and discussion groups!
In its current state, it provides some of the more basic TiddlyWiki functions in terms of displaying tiddlers and allowing editing. It also demonstrates how it might elegantly degrade when CSS or Javascript are not available. Below are a few different build which demonstrate those scenarios.
- Just the HTML. I’ve not included CSS or any of the Javascript here. The data store is visible and you can navigate the document via the tiddler links.
- The HTML and CSS. This will function just as the version above, only it will look a bit prettier. In environments where Javascript is not available or is slow to be initialised, this is how things look until the Javascript kicks in.
- HTML, CSS and Javascript. Now the data store is hidden and the default content is displayed with additional, Javascript dependent functionality included.
I’d love to get comments on this approach. I’d also be very interested to get advise on TiddlyWiki issues that we might be able to avoid if the opportunity to develop this into TiddlyWiki 3.0 really did come about. I’m less interested in bug reports though. This is a very early proof of concept which will contain many bugs and glitches.
You can get to the source of this project via the TiddlyWiki subversion repository
More to come!

I’m excited by this. Impressive results already. TiddlyWiki might be due for a full rewrite. What’s Jeremy make of it?
How big is jQuery UI and would it be useful? Also I’m not getting any wysiwyg, only raw html when I edit.
[…] the French accent lends this name much more gravitas due to the soft ‘j’. Marvelous!) JigglyWiki deserves a blog post of its own. For now, through, let’s just describe it as and experiment to explore what TiddlyWiki 3.0 […]
@Simon,
Thanks. I’m excited by the possibilities but at the moment just enjoying the selfishness of it - No backwards compatibility or upgrade path. Treating this as an experiment allows a bit more freedom. Jeremy is enthusiastic about this in terms of it being an exploration of what might be a good TW3 approach.
@Simon
I’m keen to make use of jQuery UI where possible. I think it could enable some rich UI. It is a bit heavier than I originally thought, although it is modular, allowing you to get the bits you need. Core is 5K but just adding drag/drop takes it up to 26k which seems like a lot to me.
I dropped in a WYSIWYG jQuery plugin and added a single line of code to enable simple WYSIWYG editing (which has some glitches, I notice).
You can see that at my playground
WYSIWYG text highlighting for some in Tiddler dev?
@BenJam I’m not sure that I understand your question. I’ll be including WYSIWYG tiddler editing as an option. That is currently easy to do to a basic level, but the WYSIWYG editor that I have been including as a plugin targets regular ol’ html rather than some of the specifics of tiddlywiki wikitext.
[…] more important project Phil Hawksworth has initiated to build a JQuery based Tiddlywiki framework: JigglyWiki. I think this nascent effort is going to produce some wonderful plugins for the JQuery community […]
Are you still actively developing this? Have you checked out the latest releases of the jQuery UI - this might be a lighter and better solution than before.