[yunruse]

This is very neat! I'd be interested to see something like this with a saving mechanism reminiscent of TiddlyWiki [0], which is saved as a portable HTML file. Documents that contain their own editors like this are really neat for offline use and long-term storage.

[0] https://tiddlywiki.com/#SavingMechanism

[smusamashah]

I tried this script (which Claude came up with) to save file with all it's changes. The steps are

1. Put this script in html file and add a save/download button to trigger it

2. Set `contenteditable` on you editable elements

That's it. Now make changes on the page and click download button to save the page with your changes. This should allow seeing your work without necessarily depending on JS.

The script:

    <script>
    function downloadHTMLFile() {
      // Get the current HTML content
      const html = document.documentElement.outerHTML;

      // Create a temporary link element
      const link = document.createElement('a');
      link.setAttribute('download', 'example-page.html');

      // Encode the HTML content as a data URI
      const encodedContent = encodeURIComponent(html);
      link.setAttribute('href', 'data:text/html;charset=utf-8,' + encodedContent);

      // Append the link to the DOM and click it
      document.body.appendChild(link);
      link.click();

      // Remove the temporary link element
      document.body.removeChild(link);
    }
    </script>

[nicoburns]

No need for the script. Browsers have "save as file" functionality built in!

[pseudosavant]

I have implemented Google Drive and MS OneDrive support in my one-file video player app. I'm using it for reading, but I think it could be used to push back changes to a file for saving.

[zimpenfish]

I guess that's something you could add into the remote backup server. I'm considering writing my own (in Go/Rust) and I might see if I can add that.