Yes, I have done a lot of analysis on the structure of tiddlywiki and featherwiki to figure out the right way to do this in a more repeatable way. And that's the basis that I'm using for the projects I'm working on. I'm planning to write a blog post on this soon because I've learned a lot. So stay tuned.

For the benefit of the Hacker News audience that are curious, let me take a stab here.

The general strategy is to include JavaScript in the HTML document that knows how to look at various nodes in the DOM and create a new version of the document that uses an updated set of data.

Some sections of the data can be pulled verbatim. So, for example, if you have one giant script at the bottom of the doc, you can give it an ID of perhaps S, and then use that ID to retrieve the outer HTML of that script tag and insert it into the clone.

Other areas of the DOM need to be templated. So for example, I insert a script that is of type JSON, and that contains all of the data for the application. This can be pulled and stringified when creating the clone.

For a minority of attributes like the title and document settings like whether or not you're in light or dark mode, you want to avoid a flash of unstyled content and so you actually templatize those elements so they are written into the cloned copy with the updated data directly inline.

There's no real magic to it, but it can be a little bit tedious. One really interesting gotcha is that the script tag is parsed with higher precedence than quote tags. And so I have to break up all script tags that appear in any string that I'm manipulating so that the parser does not close out the script I'm writing.

I have a very minimal app that uses this technique called Dextral. I'll be happy to host it on my site and link it here.