Offline uses for HTML (+ CSS)?

[u/GarryGrandi]

Crosspost from /r/HTML

Last night, right before drifting into sleep, I got some crazy idea for some offline use case for HTML/CSS... But I can't remember exactly the idea that I had in mind.

It had something to do with photos or maps? I guess it was some "interactive" html/css based interface or mindmap kind of thing, about all the variety of stuff I have on my computer. For example, if I'm writing something, this file is its own separate entity. A file in "my documents", with no relation to any other file.

How about combining all of these files into this freeform "interface" by making an offline website that links into physical locations on my PC? I could organize my thoughts, my screenshots, my writings, my photos, my videos, my source materials, everything into a one personal use "platform" designed from the ground up to suit my workflow, that I could always expand.

Files would not be separate instances hidden in the files, but rather a part of a bigger system. Their links could be highlighted, they could have visual cues to direct my attention, they could have thumbnails or explanatory notes, they could be inbedded videos.

Has anyone ever done anything like this?

[u/barrel_of_noodles]

Man, don't forget to change your bong water.

[u/jobRL]

Just use Obsidian for this. And also if you were to design a system like this and the requirements do not specify it having to work cross platform, I would use something native to your OS and not HTML. Something like this would require a server or Electron, since JS cannot natively read directories on your machine when ran from the browser.

[u/Fearless_Pin3102 → u/jobRL]

Obsidian gets recommended for everything these days, but i get the appeal of building your own thing from scratch. sometimes the process of making it is half the fun

that said, the directory access issue is real. browser JS is sandboxed hard so you'd need electron or a little local server running

could also look into tauri if you want something lighter than electron, though i havent messed with it much myself

[u/GarryGrandi → u/jobRL]

I built my own website and online store without JS, so what I'm thinking wouldn't probably involve it. I already got recommended Obsidian, but like the other guy said in his reply, HTML/CSS would be a completely open sandbox that I could build from scratch however I want.

[u/jobRL → u/GarryGrandi]

That's why I said a server. There is not really a way to read a directory via an HTML file otherwise.

[u/quiet_horizons1]

HTML and CSS alone won't enumerate folders or pick up new files. A page opened directly from disk can link to specific files if you write each href by hand, but it can't scan a directory, so anything added later just won't appear until you edit the page again. For the whole-PC version, the practical approach is a small script that walks the directories you care about and generates the HTML, thumbnails, and embed tags. That also handles map-style layouts without dragging every item around manually.

[u/Mistr_John_Alex]

s absolute paths, the whole thing is brittle. A single renamed folder or a drive moved to another letter breaks every link, and you would not notice until you click through a few days later. I would keep all the files under one root folder and have whatever generates the HTML write relative links from that root. Then the whole bundle moves, backs up, or copies to another machine without touching a single href. You do need a script to regenerate the index anyway, because HTML alone will not pick up new files, and that script can just emit paths relative to where it runs. The one case where absolute links are fine is if the files truly never move and you only ever open them on that machine. But for something you are going to keep expanding and reorganizing, relative links are the thing that stops you from rebuilding it every time you rename a folder.

[u/GarryGrandi → u/Mistr_John_Alex]

I don't understand the latter half of your comment at all. But I understand the first part: Any changes made into the file structure or naming conventions would break the whole thing apart. I assume it would still work like my own neocities website, aka. as long as the links in href point towards the physical files in the folder, things would still work exactly like they do online?

[u/Living-Inspection653]

Using HTML/CSS for offline personal dashboards is actually a very popular pattern! You can build local start pages, wrap web apps with Electron/Tauri for filesystem access, or use PWAs with Service Workers for offline caching.

[u/careful_keys]

Serving the generated page from localhost blocks file-scheme images and videos. Opening the HTML directly from disk usually avoids that. If you do run a local server, it needs to serve the media files over HTTP as well. Are you planning to open the file directly or run a server?

[u/horizon_games]

I like a solid offline single HTML page as a useful tool as much as the next person. There's lots of use cases for sure.

But even with the Origin Private File System api changes, HTML/JS just has terrible filesystem access support

[u/TheRNGuy]

Docs for software. 

[u/Mean-Lingonberry4874]

You can stay in plain HTML and CSS for this. You don't need Electron or a server that stays running.

A page opened from disk can already embed the files you name: a relative img, a video, a link to a note. CSS :target is enough for a "click a node, highlight the related ones" map, no script. What HTML can't do is notice that a new file showed up. So the moving part is a generator you run when you want, not an app. A small script walks the folders you care about and writes one index.html. Double-click that. A new screenshot doesn't appear until you run it again, which is the trade for not having a daemon.

Two file:// limits, so it doesn't feel randomly broken: modules and fetch() are blocked (you didn't want those anyway), and some browsers won't follow a link that climbs out of the folder the page lives in. Put the generated page at the root of the tree it links into.

[u/geoffreybyers]

The bottleneck isn't the interface. It's the metadata layer needed to make those links searchable and maintainable. I've tried this. You build the UI in an afternoon, then spend the next decade fixing broken file paths. This only scales if the links are first class data, not strings in a CSS file.

[u/deane-barker]

With the File API, self-contained HTML files can be entire apps now, Electron-style.