Plugin Development Workflow

So I’m curious what is everyone’s best workflow for plugin development?

The article on gives a good overview of how to setup the git
structure and to use the tiddlywiki node package, but it’s very light on the workflow of development itself.

Do people edit the files in a 3rd party editor (Vs code, vim etc), and if so do you just restart the tiddlywiki server? Or are you just doing everything in the tiddlywiki interface?

I’ve been using watch-fs plugin as I like using vscode for rapid development, but it crashes a lot when I am using tiddlers that become json due to field manipulation. I also noticed that watch-fs doesn’t seem to track the files in the plugins folder.

How is everyone solving these issues? Is their a better workflow that I should be using?

There are three ways to create plugins:

  1. Using Node.JS and develop code in third party editor like VS Code
  2. Using Node.JS and develop code in browser, using Tiddlywiki editor (ThirdFlow )
  3. Using single file html and develop code in browser, using Tiddlywiki editor ( Gatha, Tinka)

Note: ThirdFlow, Gatha, and Tinka are Tiddlywiki plugins developed by people to simplify the workflow.

I mainly use ThirdFlow and Gatha. In my workflow Gatha is the easiest.

I use nodemon to launch tiddlywiki and monitor for file changes in the plugins directory.

Here is an example:

1 Like

I put the plugin development environment together with the notebook tiddlywiki wiki, since the plugin environment is local, there is no need to set any additional environment variables, Therefore, it is also very convenient to build plugin library for personal

Previously, I often used Gatha to quickly package plugins when I was unskilled, it was really convenient for convenient plugin developers, but after I used it for a while, I found that the tiddlers generated by Gatha were a little unfriendly to me, so I gave up temporarily took it

There is a another way to create a plugin, without using ANY extra tools like ThirdFlow, Gatha, or Tinka…

After developing your plugin tiddlers using a third-party editor like VSCode or the in-browser TiddlyWiki tiddler editor:

  1. Open the TiddlyWiki that contains the desired tiddlers
  2. Open in a separate browser window
  3. Drag-and-drop the desired tiddlers into
  4. The $:/Import tiddler will appear. DO NOT press the “Import” button!
  5. Instead, EDIT the $:/Import tiddler
  6. Change the tiddler’s title to your desired plugin name (e.g., $:/plugins/yourname/pluginname)
  7. Scroll to the bottom of the tiddler to see the “extra” fields
  8. Change the value of the plugin-type field from “import” to “plugin”
  9. Delete the status field
  10. Scroll back to the top of the tiddler and press the “done” (checkmark) button to save the tiddler changes.

That’s it! You now have an INSTALLED plugin containing the “imported” tiddlers, which are all available as shadow tiddlers! Note that if there are any .js tiddlers in your plugin, you will need to save-and-reload for those tiddlers to take effect.

To install your plugin in another TiddlyWiki, you can simply drag-and-drop the newly created plugin tiddler (e.g. $:/plugins/yourname/pluginname) into that other TiddlyWiki.



I did create a video series, that may be interesting for you.

See: New HowTo Playlist: Use Plugins with TiddlyWiki and Build Single-File Wikis using the CLI


I’ve developed my own—probably inefficient—workflow, since I haven’t been able to understand how people do this. I’m eager to learn, but I really can’t relate to what you’re saying in this thread.

This is for my Javascript-based Markdown export plugin:

  • I have a single-file demo wiki that contains some tiddlers with test data.
  • I develop in Typescript files, using Visual Studio Code, using my own inferred type definitions.
  • I create all content tiddlers (readme, license, test data, and so on) in the browser in the single-file demo wiki. This is saved to the html file using the Timimi extension.
    • I have extracted these tiddlers to .tid files during the build stage below, and update them using Visual Studio Code.
  • I have created a file using Visual Studio Code

I then have to run my custom build script after every change:

  1. Compile Typescript to Javascript
  2. Split/extract single-file wiki to a folder (tiddlywiki --load $TW_SINGLE_FILE --savewikifolder TW5)
  3. If a new version of the plugin was supplied to the build script, it updates the version field in
  4. Copy, all Javascript files and all .tid files to the plugins\markdown-export folder inside the folder from #2
  5. Generate a plugin JSON file that I believe the CPL plugin library requires…?
  6. Rebuild single-file wiki from folder and replace the previous version with the new one.
  7. Remove the wiki folder created in #1.

This currently takes 8 seconds. Then I either refresh the single-file wiki in the browser to do some manual testing, or run a test script, that exports my test data and compares with expected output.

I realize now that I can probably make this faster by not removing and re-creating the wiki folder after each update and test. Then I should split the make script into several scripts:

  • Prepare: Split/extract single-file wiki to a folder
  • Build: Compile Typescript to Javascript and copy Javascript and .tid files to the correct folder
  • Publish: Update, generate JSON file and rebuild single-file wiki

Ideas for improvements are welcome.


I have a request, @EricShulman. Please also write a guide on how to create a plugin library.

It seems that most people rely on Plugin Library to receive updates, which makes a library an essential part of the plugin publication.

1 Like

just a simple shellscript

1 Like

Here’s a starting point: Creating Libraries

1 Like

I’m using Best TW Dev Framework! Easy WYSIWYG plugin developing, support TypeScript