"Emergency Save" - How to Save a Wiki if the UI is Broken

Tips & Tricks
, ,
#1

There have been some discussions here in the group, where users told us, that they managed to break their UI.

This post describes a mechanism using the browser developer tools, that lets you save your wiki, even if your UI will not let you do that.

Use the following steps:

  • F12 open the dev-console
  • In the Console tab enter the following text
$tw.saverHandler.saveWiki({template:"$:/core/save/all", 
method: "download",
downloadType: "text/plain", 
variables: {filename: "backup-x.html"}})
  • This should open the browser save file dialogue with a predefined filename, that can be changed.

If you did not mess up the $:/core/save/all template it should work.
I did test this with the TW halted at a breakpoint. … So the UI is frozen, similar to js-scripts stopped.

Have fun!
Mario

12 Likes
How to resave TW file? Lost connection to network drive
Escaping infinite loops and saving wiki
Perform advanced filtering of Tiddlywiki open on web pages through the browser console?
Tiddlyhost error on one computer only: file changed on server
#2

Or as a bookmarklet:

javascript:(function()%7B%24tw.saverHandler.saveWiki(%7Btemplate%3A%22%24%3A%2Fcore%2Fsave%2Fall%22%2C%20%0Amethod%3A%20%22download%22%2C%0AdownloadType%3A%20%22text%2Fplain%22%2C%20%0Avariables%3A%20%7Bfilename%3A%20%22backup-x.html%22%7D%7D)%7D)()%3B

To use, create a bookmark (perhaps of this page), then edit the bookmark (right-click on most desktop browsers), and enter the above as the URL, changing the title as you see fit. Then click it on any wiki, and it will offer a backup file whenever you like.

This should work whenever the above works, but doesn’t require opening the web developer console.

3 Likes
#3

Yes in FireFox it can be a Bookmarklet, if the bookmarks bar is visible. It will work with every TW loaded into a browser tab. So it’s more like a “general” save than an emergency save.

image
image1566Ă—1149 166 KB

1 Like
#4

It also works in Chrome and Edge on Windows, and Brave on Windows or Ubuntu.

#5

I found the script I actually use for my bookmarklet, which I wrote when this topic was first posted, and meant to share then, but totally forgot. The code looks like this:

const filename = ($tw.wiki.getTiddler('$:/config/SaveWikiButton/Filename')?.fields?.text ?? 'MyTiddlyWiki.html')
      .replace(/\.([^\.]+)$/, (_, ext) => '-' + new Date().toISOString().replace(/\D/g, '') + '.' + ext);
$tw.saverHandler.saveWiki({
  template:"$:/core/save/all", 
  method: "download",
  downloadType: "text/plain", 
  variables: {filename}
})

Which generates bookmarklet code of

javascript:(function()%7Bconst%20filename%20%3D%20(%24tw.wiki.getTiddler('%24%3A%2Fconfig%2FSaveWikiButton%2FFilename')%3F.fields%3F.text%20%3F%3F%20'MyTiddlyWiki.html')%0A%20%20%20%20%20%20.replace(%2F%5C.(%5B%5E%5C.%5D%2B)%24%2F%2C%20(_%2C%20ext)%20%3D%3E%20'-'%20%2B%20new%20Date().toISOString().replace(%2F%5CD%2Fg%2C%20'')%20%2B%20'.'%20%2B%20ext)%3B%0A%24tw.saverHandler.saveWiki(%7B%0A%20%20template%3A%22%24%3A%2Fcore%2Fsave%2Fall%22%2C%20%0A%20%20method%3A%20%22download%22%2C%0A%20%20downloadType%3A%20%22text%2Fplain%22%2C%20%0A%20%20variables%3A%20%7Bfilename%7D%0A%7D)%7D)()%3B

The instructions above still apply:

To use, create a bookmark (perhaps of this page), then edit the bookmark (right-click on most desktop browsers), and enter the above as the URL, changing the title as you see fit. Then click it on any wiki, and it will offer a backup file whenever you like.

And it generates file names like NRT_Balancing_Notes-20241126213219815.html or TTEC_Chess-20241126212235734, or if you don’t have a value in $:/config/SaveWikiButton/Filename, just MyTiddlyWiki-20241126213459896.html. The timestamps are the same style as used internally by TW, although I use local time rather than UTC.

The name MyTiddlyWiki.html might not suit you for a generic backup. Just replace that in the bookmarklet code with whatever you prefer, perhaps, tiddlywiki.html.

But a significant limitation is that this doesn’t take into account the techniques from another recent thread, which allows you to build a timestamp into your filename. I will try to ponder this later, as I think it would be useful to handle that case as well.

1 Like
#6

It’s possible to use this approach with Firefox on Android as well. It requires installing the MobiDevTools browser extension. This packages GitHub - liriliri/eruda: Console for mobile browsers and provides a dev-console on mobile.

1 Like