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

Javascript Widget Tutorial

 2nd March 2024 at 11:06am

Introduction

This tutorial provides step-by-step, interactive examples of how to write code for tiddlywiki widgets. The demo javascript code can be modified without having to reload the entire wiki.

Intended audience:

  1. Those who know tiddlywiki well and know programming and javascript and want to write their own widget.
  2. Those who know tiddlywiki well and don't know javascript, but want to understand more about how tiddlywiki works. You should be able to skim through and interact with the demos and learn something.

We don't make any effort to explain javascript here. For that you will need other resources, like MDN.

The tutorial

Notes

tiddlywiki doesn't support dynamically reloading javascript. If you change a javascript tiddler, then you need to save and reload the wiki before the changes will take affect.

To avoid the need for such reloads, the excellent innerwiki plugin is used. This allows an inner wiki to be created from a subset of tiddlers in the outer wiki. Each time the inner wiki is refreshed, its entire wiki is reloaded and the javascript changes in the inner wiki will take affect.

Without the need for reloads, a tiddlywiki instance with the innerwiki plugin installed works great as a playground for interacting with tiddlywiki javascript.

Other documentation on writing TW widgets

Full API doc

Github Pages of TW5-Typed