12 ms·
Web apps in a single, portable, self-updating, vanilla HTML file
- alxgsv 1y ago[dead]
- tommica 1y agoVery interesting concept. I've imagined our internal claim cases to be standalone html pages, making them easily versioned for when new regulations come. Simplicity is a good goal to have, and these guys have it.
- wmertens 1y agothis falls down really quickly once you get past a couple MB worth of data, like trying to add images.
- sylware 1y agoBut depends on the whatng cartel web engines... Nothing to be proud of, mate.
- fowlie 1y agoThis is just awesome! But seems like a closed source project, and the pricing page returns HTTP 404. Are there any open source alternatives like this? First time I hear about this idea. However, I can imagine it wouldn't take much effort to implement the basics. Chromium even has a design mode you can activate by typing `document.designMode='on'` in the console. Then you would just need to write a little javascript that handles auth, a save button, and a backend to persist the altered html.
- panphora 1y agoThere is an open source, local app version by the same author (me) here: https://hyperclay.com/hyperclay-local https://hyperclay.com/hyperclay-local
- lcabral 1y agoThere is no reference to its license model...
- panphora 1y agoSorry about that, it's fixed now: MIT License
- theelous3 1y agofwiw, for this kind of tech - personal level projects - there is not a snowball's first summer outing in hell's chance I'm going to pay for someone else to host my thing remotely. I would like to just self host, and if it was good I would buy a license for it so I can self host - but I think you have a customer in mind that doesn't exist. Your ideal customer a) is extremely technically proficient, such that they are even capable of finding this in the first place, and their brain doesn't glaze over at "jQuery is Your Starting Point" - the opening line of your docs. b) They for some reason would rather pay for someone else to do the world's easiest hosting job and deal with whatever baggage and limitations come with this. Or am I misunderstanding? Like it's a nodejs server on some aws box. Charging people for this is fine, but not allowing them to do it themselves seems... ridiculous? You gotta eat, I know, but I'm wondering who it is that is ok paying for someone else to do the easiest part what they do for a living.
- zahlman 1y ago> You gotta eat, I know, but I'm wondering who it is that is ok paying for someone else to do the easiest part what they do for a living. I don't think that hosting is necessarily "part of what they do for a living" for people who write the code.
- theelous3 1y agoI mean, if you can't host a box, hang up the gloves.
- regularfry 1y ago
- mnhnthrow34 1y agoMavo seems pretty similar, saves to github, allows flipping the UI to admin/editor mode https://mavo.io/ https://mavo.io/ I really liked this when it was launched and thought it had a great deal of potential when it launched. I think the main difference is that it's more focused on content-editing, not updating the code of the page itself.
- sydbarrett74 1y agoI'm getting a 404 for most of the pages. Not confidence inspiring.
- panphora 1y agoI wasn't planning to launch today hehe. The changelog and pricing links are fixed!
- VagabundoP 1y agoReading that website was quite enjoyable. Simple scrolling and loved the look.
- silicon5 1y ago[dead]
- pinoy420 1y ago[dead]
- mcteamster 1y agoBeen doing something similar with save files for my game. Line 1 is "<!DOCTYPE html><html><head><script>const rawData =" and line 2 is all the state. Then the save button downloads document.documentElement.outerHTML with line 2 replaced by the current state. No server required. https://github.com/mcteamster/white/blob/main/src/lib/data.ts#L56 https://github.com/mcteamster/white/blob/main/src/lib/data.t...
- fallinditch 1y agoI am trying something similar: I made game as a standalone HTML file with a feature that allows users to edit text and save as a new local version. Works on my phone (Android with Brave) but not on iOS with Safari.
- qingcharles 1y agoI keep this bookmark in Chrome which lets me open an editor in a tab and Chrome maintains the state of the textarea even through reboots as long as you don't close the tab: data:text/html,<html><head><title>Notepad</title><style>html,body{margin:0;padding:0;}textarea{padding:10px;font-family:Courier;font-size:16px;height:100%;width:100%;border:none;outline:none;}</style></head><body><textarea style="height:100%;width:100%;font-size:16px;padding:10px;"></textarea><script>document.getElementsByTagName('textarea')[0].focus()</script></body></html>
- b2ccb2 1y agoYou can get rid of the JS by setting the autofocus[1] attribute to the textarea. [1] https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/autofocus https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...
- qingcharles 1y agoThank you, I'm going to try this.
- qingcharles 1y agoThanks, I trimmed it down to this: data:text/html,<title>Notepad</title><textarea autofocus spellcheck=0 style="position:fixed;inset:0;padding:1em;border:0;font:monospace">
- KoolKat23 1y agoThis is great and all (I've been making my own standalone web app htmls), but one issue I've found when sharing with others is iOS (iPhone/iPads) don't support them. Apple ugh. Any suggestions how to overcome this? I believe it's a security setting, not allowing localstorage to be set.
- meistertigran 1y agoYou can do that with htmlsync.io
- KoolKat23 1y agoThank you, I'll take a look.
- janfoeh 1y agoThis is a nice idea; I am just not keen on having to host a nodejs server. Now I am wondering whether the same thing could be achieved with just nginx & WebDAV?
- rbbydotdev 1y agoI really like this idea, I envision something where this would be made possible on browsers now. This could only happen after further consideration about the security implications of localhost html files using secure context apis like indexeddb and localstorage The powers that be would rather turn this concept into a mArKetPlaCe -- Just let us create! Why must we always kneel before the altar of capitalism? I experimented a bit with the concept to build my resume, I had naively been using gatsby a while back. "Just use a plain html file!" - It was a real "duh!" moment. You just edit the embedded markdown then viola. Want a pdf? Press cmd+P https://github.com/rbbydotdev/resume https://github.com/rbbydotdev/resume
- cetinsert 1y agoI would love to have people try building these on https://RTCode.io https://RTCode.io The playground has lots of unique features, CLI agent integration for AI to let you collaborate with Claude Code or Codex CLI, etc. You can deploy straight to https://RTEdge.net https://RTEdge.net The playground has HTML I ↔ O iframe with mostly reload-free 2-way IO sync, built-in service/edge workers with URL imports of ESM, and a whole lot more. You can see some examples under Code > New… Here is a recent one for accessible multi-OS keyboard shortcuts: https://kbd.rt.ht/?io https://kbd.rt.ht/?io
- muspimerol 1y agoHow does versioning work? After you fork an HTML app, is there a way to update it and get newer features without manual intervention? I'm thinking about the Kanban board example I saw in the demo video. It looks like column re-ordering wasn't supported yet. What if I fork the app, put time into creating my Kanban, then I want to update to a new version that supports column re-ordering?
- drykiss 1y agoIs this a closed source project? I don't want to give my email address to get a chance to even try it.
- mootoday 1y agoFull disclaimer: I only scanned the article, but based on the title, SvelteKit does that with a single option "inline". https://svelte.dev/docs/kit/configuration#output https://svelte.dev/docs/kit/configuration#output
- koolala 1y agoHow so? Can you describe what usecase that enables?
- mootoday 1y agoI ended up reading the entire article and what SvelteKit does isn't exactly the same, you can't edit the site. The use case for a single html file for me is to provide a local dev experience for my customers that mirrors production. `my-cli dev` spins up the services needed for my platform, including the SvelteKit web app.
- Ezhik 1y agoI really want to see more HyperCard-style data persistence, where both the code and the data are one one document, so this is cool to see. I was actually just playing with a similar concept, except as an Obsidian plugin: https://bsky.app/profile/ezhik.jp/post/3lwoazfypx22j https://bsky.app/profile/ezhik.jp/post/3lwoazfypx22j
- zbentley 1y agoTiddlyWiki is another (20+ year old and still being updated!) took in this space. It looks like hyperclay is a bit more oriented towards multitenancy and database-backed persistence than TiddlyWiki (very much trying to be a single-writing-user tool) after a quick read? https://en.m.wikipedia.org/wiki/TiddlyWiki https://en.m.wikipedia.org/wiki/TiddlyWiki
- rokob 1y agoEvery time I see projects like this what I hear is: “I hate JavaScript, just use html and web standards (oh and a bunch of JavaScript but I hate JavaScript so let’s not talk about it much).”
- evrennetwork 1y ago[dead]
- endergen 1y agoI for one, like the fun you had on the page. Ignore the haters. Only critique would be you should just explain how it works near the top. I think most devs myself included want to first understand what it is before the why it’s awesome. ps. Way back there was a project called tiddlywiki that was a self modifying html file and was pretty popular. I think initially there was no way to save new version but to basically save the file to disk to either fork a file or replace itself.
- daitangio 1y agoNice… keep in mind there are already very mature tools like https://tiddlywiki.com/ https://tiddlywiki.com/ which supports a plugin architecture.
- 4b11b4 1y agoThe drag and drop on you personal dev blog seems very broken, or I'm an idiot
- MASNeo 1y agoI have already moved most MVP to single file apps. This gives my intuition much more tools. Thanks for building this!
- codedokode 1y agoI would like web standards have better support for pages stored in a local file (opened using file:// protocol). Sometimes I write simple HTML/Vue based mini-apps for myself and every time something doesn't work and I need workarounds, for example: - local HTML file cannot import local JS modules, so I have to use legacy writing style - local HTML file cannot open other local files (for example, audio files) I understand that there is a risk if we allow local HTML files to access anything, but there should be some way - for example, a file or directory might have some suffix that allows access to it. I do not want to use a web-server because it feels like overengineering and I don't want to open a terminal, navigate to a directory and start a server every time, it takes too much time. I just want to type the URL and have my app running.
- cluckindan 1y agoA significant hindrance for generator-type apps is that only pages loaded via HTTPS have access to the clipboard API, so ”copy to clipboard” does not work via file:///. You can have a zero-build zero-dependency offline-only app which users could theoretically just save as a page, but copy buttons will not work, so you have to detect the API not being available and replace buttons with popover textareas. Clunky. As for running a local server, VS Code devcontainers are the solution. Open your workspace, it runs the devcontainer, and you have a server up without extra hassle. Add a command to generate certs and you can have HTTPS locally.
- codedokode 1y ago> As for running a local server, VS Code devcontainers are the solution. Open your workspace, it runs the devcontainer, and you have a server up without extra hassle it's not easy to install VS Code, let alone use it. VS Codium (and VS Code) are Electron apps, and it is difficult to sandbox them, as Electron (and Chromium as well) use suid helper - a priviledged binary that launches as root, and I won't allow suid binaries in a sandbox. Also, it requires GPU access for fast rendering, and it is difficult to provide in a safe way or switch to software rendering (I couldn't figure it out). Electron apps are a pain to install. One could use a virtual machine, but it would use more resources. Obviously, that's not VS Code's issue, it is a problem with Linux which doesn't come with a good sandbox. It is much easier to type python -m http.server to launch a server, but you need to open a terminal and navigate to a directory first, that takes lot of time I would rather spend on something different (like figuring out how to work around issues with suid binary in Electron apps). And this looks like a hacky workaround, launching a web server only to gain more privileges in a browser.
- pmarreck 1y agoI too have an odd obsession with keeping everything in 1 file. I recently (as an experiment) exclusively vibe-coded an Asteroids clone (with a couple of nifty additions), all in a single HTML file, including a unit test suite, which also works on either desktop or mobile: https://github.com/pmarreck/vibesteroids/blob/yolo/docs/index.html https://github.com/pmarreck/vibesteroids/blob/yolo/docs/inde... Playable version (deployed via github docs) is here: https://pmarreck.github.io/vibesteroids/ https://pmarreck.github.io/vibesteroids/ Hit Esc to pause and see instructions (pause should be automatic on mobile; can re-pause by tapping top center area). Type shift-B (or shake mobile device... you also would have had to approve its ability to sense that on iOS) to activate the "secret" ability (1 per life) No enemy UFO's to shoot (yet) but the pace does quicken on each level which feels fun. It doesn't update itself, however... (and I just noticed it has a test fail, and a test rendering bug... LOL, well at least the tests are valid!)
- mclau157 1y agoI have an odd obsession with github repos that only have 1 file
- nonethewiser 1y agoDoesnt really sound like an odd obsession - it's an AI workflow thing. Just copy-pasting everything.
- dogemurder 1y agoI really like this. If you ever plan an AMI with this, deploying hyperclay on maybe a t3 instance, installing Node.js via the package manager (https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-up-node-on-ec2-instance.html https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-...), and then setting up the Hyperclay server using npm to handle requests, I think a lot of startups could be users. Would it be fair to say that Hyperclay could offer a lean way to rapidly prototype and iterate on MVPs, like landing pages, dashboards, or user-feedback-driven tools, where frontend changes (e.g., A/B testing UI elements) automatically update the underlying HTML source for instant deployment?? If it was marketed to startups to reduce development overhead by eliminating separate build pipelines or servers, allowing small teams to focus on core features rather than infrastructure, definite winner. Not sure how much your into AWS but this made me think of an AWS partner we use HostJane could use Hyperclay to help bundle cost-optimized spot instances for testing (mainly tech startup clients - https://www.hostjane.com https://www.hostjane.com), then push out a seamless CI/CD via CodePipeline, global distribution through CloudFront, Hyperclay could enable clients to scale from proof-of-concept to production affordably while maintaining full control over their app's evolution without vendor lock-in. Potentially doing away with complex databases or backend frameworks... amazing, well done!
- conartist6 1y agoHow did it do safe version control efficiently?
- pkilgore 1y agoSo you need a server for this to work and that server is closed source?
- coneonthefloor 1y agoWait until they find out about PHP. Mind blown.
- calebm 1y agoI wrote a simple file encryption app some years ago that is a single self-contained HTML file. When you use it to encrypt files, it outputs another self-contained HTML file with a copy of the encrypted data inside, along with the code to decrypt it (if the correct password is specified): https://hypervault.github.io/ https://hypervault.github.io/
- ForHackernews 1y ago> The coolest part? It's just an HTML file. Nothing special. Change it, it serializes its DOM, and sends it to a /save endpoint. Nothing magic about it. *The tech: Hyperclay is a NodeJS server and frontend JS library* So... it's not just an HTML file.
- netbioserror 1y agoI've built some single-file HTML page tools at work that use newer Web APIs (WebSerial, WebUSB) and essentially utilize the browser as a cross-platform application virtual machine, which is a great way to think about browsers. With WASM compilation, Canvas, and WebSockets, combined with this self-modifying concept where an HTML file is a contained, stateful application that can persist, we've got very interesting possibilities for the future of user-facing applications, both local and fetched remotely. This is probably exactly what some of the visionaries at Google were thinking of when they concepted the Chromebook and Chrome OS.
- criswell 1y agoThis is a really cool idea. The use of custom attributes without `data-` before it makes me a little nervous. Is that a concern here? I saw `project` being used on elements and if that's officially used for something eventually can it muddy things up?
- chuckadams 1y agoHTML5 is surprisingly lax about using arbitrary attributes and tags: any attribute or tag without a dash in it could potentially conflict with a future version of the spec, but it doesn't go out of its way to forbid them either. data-* attributes are special in that they appear in the .dataset property in the DOM, but anything with a dash should be future-proof against the HTML spec.
- udev4096 1y agoIt's even easier with Go + templ. You can compile a whole site into a single executable file, in the range of 20-30MB. Use sqlite with it and you've built yourself a portable and dynamic site capable of running almost anywhere in an instant. Use nginx load-balancing with a central sqlite if you need to scale
- dirkc 1y agoInitiatives like this that makes creating web pages more direct are great! I've done something similar using IPFS for persistence [1]. The format is different - it's a tutorial starting out with the dev tools that guides you to build an editor + site. I wish that IPFS was more usable and mature as a general web technology! I've considered trying this with Git as the backend, but I haven't done much research into what the tradeoffs or complications would be? [1] - https://www.thebacklog.net/projects/agregore-web-apps/ https://www.thebacklog.net/projects/agregore-web-apps/
- est 1y agoI spent a weekend making a self-host twitter alternative. source: https://github.com/est/gitweets/ https://github.com/est/gitweets/ demo: https://f.est.im/ https://f.est.im/ (renders via github API) Basically it renders its self git repo commit history as a feed timeline. Never lose your data on microblogging service providers again! Clone the repo anywhere anytime, make tweets by "git commit --allow-empty". Everything is placed inside a single-html.
- lioeters 1y agoI like the idea very much. The prototype looks good, so simple yet it has a lot of potential leveraging Git. To login, it asks for read/write permission on all my public repositories. I guess that's necessary to make tweets as commits from the web interface?It's a hard ask from a user wanting to join. Maybe better if it could be limited to a single repo. > Authorize gitweets to access your GitHub account > This application will be able to read and write all public repository data. This includes the following: Code Issues Pull requests Wikis Settings Webhooks and services Deploy keys
- est 1y ago> I guess that's necessary to make tweets as commits from the web interface? Yes! Just make your "gitweet" locally and git push. The login button is for lazy person like me to make git commits in the browser via the Github REST API. Sadly the written permission for OAuth apps is either none or all repos. To use single-repo access, there are three choices - github app - deploy key - fine grained PAT I think they are too much hassle for non-tech user. The OAuth process is the most simple and smooth one. I hope github could provide repo-selection for OAuth, or allow specify which repo to connect with Github App. I plan to add deploy-key based auth later. This could be also used for non-github services.
- meistertigran 1y agoThis is really cool. About to try it out! I build something along those lines as well. My problem was that I couldn't synchronize localStorage data, so I made htmlsync.io.
- deleted 1y ago[deleted]
- DonnyV 1y agoLooks like your Kanban demo app is broken.
- hammerbrostime 1y ago... I would like to up the anty and have web apps work in a portable vanilla HTML file WITHOUT needing a webserver to run it. E.g., double click and run. CORS be damned! Webservers are a pain in the ass and a legitimate barrier to entry. Wouldn't it be great it you could literally send around a single file, especially to non-technical users who cant run a web server, to run your apps?
- BowBun 1y agoThis is what people did before web apps. Package a binary and ship it to customers. Problems with the approach: * Customers still ask you why stuff doesn't work, except now it's their hardware * Observability is not as strong on self-hosted solutions * There is no true universal binary, so no matter what you have to put constraints up (only runs on windows, mac, etc.) * Updates are way harder Browsers are built to browse the web, trying to remove the web out of browser apps seems illogical
- tonyhart7 1y agono open source???? meh
- davidcollantes 1y agoHitting "Request Access" on https://hyperclay.com/request-early-access https://hyperclay.com/request-early-access with an empty field (no email provided) renders "Subscribed!".
- baobabKoodaa 1y agoI tried one of the demos and it didn't work; my changes were not persisted when I refreshed the page. I don't know how it's supposed to work, exactly, but a single self-contained HTML isn't it.
- turnsout 1y ago> The first thing you should reach for is jQuery And I'm out! Honestly I was nodding along with the landing page. But including a dependency to an old timey JS library which is now largely unnecessary given new native web APIs? That seems contrary to the spirit of this project.
- nashashmi 1y agoI am trying to figure this out. The writer despairingly says a backend is needed to store changes in state. The writer calls this backend DB and API. The writer then substitutes DB and API with "server" like it is a solution So now we have a webapp. The webapp connects to a backend. The webapp stores changes in the backend. The webapp loads changes in the backend. The original problem still persists?! State can be stored in browser with localstorage. Or in device with file access. That is about it. Across devices, you need online storage and access key. I feel like this was a writeup on the problem with vanilla HTML app development. Also, can we all agree that calling a webpage an app is an afront to all webpages? We should have two categories: webpages and webapps. A web page can contain a webapp. A web app is anything where the content changes and where it connects to a backend to store or load data. So interactive html stuff is not a webapp, but JS literally changing the data makes it a webapp, even a simple HTML page with a JS clock makes that portion of the page a webapp.
- nashashmi 1y ago"Malleable" apps. Meaning the HTML file serving the webapp itself gets modified. Ok.
- curtisblaine 1y agoSo: 1) it says it’s a vanilla HTML file but it needs a server running 2) it’s just a landing page that collects your email to give you “early access”. I really wonder what this is doing on the home page.
- tempfile 1y agoI am not sure how this proposal deals with the problem of templating. If you have a bunch of documents (say, blog articles) that should have a consistent layout, you are going to want to create a template for them. But then the document you see isn't the "true" document, and in order to save the content you're going to have to annotate it to "reverse" the templating. If it does this, then it is very exciting indeed, but I could not see it.
- shlomo_z 1y agoWhat happens if the user has an extension in his browser that modifies a page or adds JS to it? Will it get added to upstream?
- jerryjappinen 1y agoThis seems cool but the web site is not doing it any favors. I thought it's a joke but apparently it's a serious project?
- rebeling 1y agoHyperclay is really cool. I love the idea of making edits persist right in the DOM. I hacked on something in a similar spirit called Dominique https://rebeling.github.io/dominique/?edit=1 https://rebeling.github.io/dominique/?edit=1 no backend/frontend separation, just “one-end.” It’s more about playful editing with AI support (click anywhere and change text/structure instantly), whereas Hyperclay goes deeper with persistence and versioning. Fun to see, thanks for sharing!
- RS-232 1y agoSo we’re back to PDF?
- rasengan0 1y agoi just standardize to TiddlyWiki (2004) https://tiddlywiki.com/#History%20of%20TiddlyWiki https://tiddlywiki.com/#History%20of%20TiddlyWiki format now supporting json to maintain interop with PlainText editors emacs, vim, mobile, or bespoke GenAi DIY vibe code import/export tool, etc and all done! [{ "title": "HyperClay", "text": "2025-08-18 Experience the Zen of making, hosting, and sharing great software in a single, portable, self-updating, vanilla HTML file\nBuild web apps like you're sculpting clay, not managing infrastructure.\n\nModern web development forces you through layers of abstraction: config files, build steps, magic frameworks, deployment pipelines.\n\nHyperclay returns to a simpler model: your app is a single HTML file you (and your clients) manipulate directly. Edit the file through its visual UI and it persists its own state.\n\nWhat if web apps were as simple to edit as documents? Hyperclay makes it possible: UI, logic, and data live in one self-modifying HTML file. Edit it live. Share it instantly. Download and use it locally.\n\n---via [[Single-file HTML apps | Hyperclay|https://hyperclay.com/ https://hyperclay.com/]]", "tags": "SelfHost Html TiddlyWiki Spa NodeJs", "type": "text/vnd.tiddlywiki", "created": "20250818000000000", "modified": "20250818000000000" }]
- _aobj 1y agoChecked out "Hyperclay" which seems to leverage DOM (Digital Object Model) via a virtual DOM. This is cool, but could do with some "Shopify" legalise. My Hacker News "profile", gives some indication of why I think this is cool but needs a legal makeover.
- drewchew 1y agoThis looks super cool and I'm hyped to try it. Reminds me of Decker https://www.beyondloom.com/decker/index.html https://www.beyondloom.com/decker/index.html which I saw on hacker news ~18 months ago, similar ethos but this seems like it will be more applicable to daily use cases.
- AuthAuth 1y agoI'm a noob web dev and I do not understand what is the value here. If I had a html page and I needed to update things on it couldnt I use JS script blocks? If this is going to use a nodejs server and frontend JS library is it really making anything easier?
- rfarley04 1y agoSomebody's been reading The Oatmeal recently (but seriously, very cool)
- jaza 1y agoIt's been too long! Off to The Oatmeal I go...
- swiftcoder 1y agoVery nice concept! I've been thinking for a while that the web really suffers from not having a built-in concept of (ideally fairly anonymous) identity. I shouldn't need to maintain a whole authentication system and a database full of PII just to let you see the same data across your laptop and your phone...
- bapak 1y agoYou mean HTTP auth?
- swiftcoder 1y agoNo, specifically not. I don't want to store your username and passwords in a database (and then deal with account recovery, password rotation, etc) - I want identity. The browser should be able to vend me an (opaque, anonymous) token that identifies you as an individual. If your mobile and desktop browser vend the same token, then the website sees you as having the same identity on both platforms.
- koolala 1y agoCould you put a token in a http auth username? Leave the password blank?
- swiftcoder 1y agoYou could, but it's at the behest of the client, so browsers would have to implement that for it to be useful. If browsers are going to implement something, might as well come up with a decent standard.
- chuckadams 1y agoThe privacy implications of this are a deep and toxic swamp into which every previous attempt has sunk. Right now, control over an email account is the best we've got.
- phantomathkg 1y agoAt first I thought it is tiddlywiki but it is not.
- panphora 1y agoThe author (me) was strongly inspired by TiddlyWiki -- I love that software and wish it was allowed to proliferate more. If only browser vendors allowed their users to persist HTML files back to their own machines, we'd have a whole new ecosystem of personal applications! I wish I could change the name from Hyperclay to TiddlyApp :)
- zahlman 1y ago> If only browser vendors allowed their users to persist HTML files back to their own machines, we'd have a whole new ecosystem of personal applications! The trick TiddlyWiki does with data URLs (IIRC?) (https://tiddlywiki.com/#Saving%20with%20the%20HTML5%20saver https://tiddlywiki.com/#Saving%20with%20the%20HTML5%20saver) seems pretty close to me.
- jermolene 1y agoThank you for your kind words, much appreciated, speaking as the creator/maintainer of TiddlyWiki. I really like what you've done, and the way you've described it on the site. I hope you will enjoy success with it, and have as much fun with it as I have with TiddlyWiki.
- pavlov 1y agoThis is coming close to WWW's original vision because the very first web browser was also an editor. Tim Berners-Lee's application on the NeXT was basically a wrapper for the operating system's built-in rich text editing class named TextView. (It later became NSTextView on Apple's Mac OS X and still powers the TextEdit app on Mac.) We lost editing for two reasons: 1) The HTTP PUT method didn't exist yet, so edited HTML files could only be saved locally. 2) Mosaic built a cross-platform web browser that defined what the WWW was for 99% of users, and they didn't include editing because that would have been too complex to build from scratch in their multi-platform code base.
- Theodores 1y agoSaving files locally was the same as saving files on the web in the original TBL context. Imagine having a nice UNIX workstation on your desk at a university. This would resolve to machine.department.university.ac.uk rather than be hidden behind a router. If you wanted then you could run an x window on it or transfer files to and from it. With standard issue Netscape of the era you could save an HTML file locally and it be fully accessible anywhere on the web. The university would have the skills to setup the network for this, which was a difficult skill at the time. In reality you would not save everything locally. The main department server would have a network share for you that would be mounted with NFS. So your files would be 'saved locally' over the NFS share to resolve to department.university.ac.uk/user. You could also login to any workstation in the department for it to mount your NFS shares, with PCs of the era usually capable of running x windows and NFS in the university setting. Servers physically existed in the server room rather than in the cloud. I much preferred this model as, on SGI workstations, you had it all working out of the box. All you needed was some help with the networking. Also important is that the web was originally all about structuring information rather than hacking it to make it pretty. It was up to the client to sort out the presentation, not the server. In time we lost the ability to structure information in part because the 'section' element did not make it into HTML. Everyone wanted the WYSIWYG model that worked with word processors, where it was all about how it looked rather than how it worked. We proceeded to make HTML that started as a soup of nested tables before the responsive design people came along and made that a soup of nested div elements. Eventually we got article, section and other elements to structure information, but, by then it was too late. It is easy to design something that is incredibly complicated and only understood by a few. It is far harder to design something that is simple and can be understood by the many. We definitely lost the way with this. Nowadays people only care about platforms such as social media, nobody is writing HTML the TBL way, with everything kept simple. HTML has become the specialist skill where you need lots of pigeon holes skills. Nobody on these teams of specialists have read the HTML spec and no human readable HTML gets written, even though this is fully doable. It seems that you are one of the few that understands the original context of HTML.
- brumar 1y agoVery good. I was wondering why nobody did something like that before. At least this was my conclusion from my google searches few months ago. From a design perspective, I don't like storing state in the DOM itself, I would have find much more flexible to have the state in a json as a single source of truth and use reactive patterns such as state change => ui change and not hiting the DOM directly. That sounds like big framework things, but it saved me from acute headaches in a personal similar framework I did for self-contained apps. It was not HTML but I thought I would apply the same logic if I had to do it for html apps too.
- modeless 1y agoI guess your searches missed Tiddlywiki. I think there have been a couple of other takes on the concept too.
- clemensnk 1y agoAlso our Webstrates (https://webstrates.net https://webstrates.net) system stores state in the DOM itself. But it's more a system for research prototyping than publishing web pages.
- Tepix 1y agoLooks like it's on Github at https://github.com/panphora/hyperclay-local https://github.com/panphora/hyperclay-local
- panphora 1y agoThis is a version that lets you easily update HTML apps locally. The hosted version is for when you want to share your apps or let other people fork them online. But the ultimate goal is to have an ecosystem of where you can host/deploy/use HTML apps, including other competing services.
- maelito 1y agoAm I the only one that does not understand what the author wants to explain ? Do we need a story with illustration to understand how a new framework works ? What's the plain markdown 2 to 3 paragraph that explains the concept ? Edit : here it is. https://docs.hyperclay.com/docs/docs-tldr-paste-in-llm/#how-hyperclay-works https://docs.hyperclay.com/docs/docs-tldr-paste-in-llm/#how-... > Whenever the page changes—or the user explicitly saves the page—we grab all the HTML, make a few modifications, and then POST it to the backend’s “save” endpoint. Wait, so instead of storing JSON we store HTML with all its verbosity and all its tags that have nothing to do with the user edit (e.g. a small profile description change) ? What about if the webmaster then wants to change the HTML title of the profile description block ? The user's version just diverged from the webmaster's ?
- panphora 1y ago> instead of storing JSON we store HTML with all its verbosity and all its tags that have nothing to do with the user edit Yes. In exchange, we get a portable, malleable, self-contained application. That's the tradeoff. > What about if the webmaster then wants to change the HTML title 1. The webmaster owns my-app.hyperlay.com (or somecustomdomain.com). 2. The user forks their version and gets user-version.hyperclay.com (or user-version.somecustomdomain.com) You need to fork before editing. In the future, we'll have support for shipping updates to forked applications that can be accepted or denied by the end users.
- general1726 1y agoOr you will rename one page, instantly breaking URL pointing on that page on all already saved pages.
- heikkilevanto 1y agoInteresting idea. Well put it on the list of things I should try some day. After a quick look at the site, I like the idea. But I wonder where it's limitations start to get in the way. How about security, if I can modify the page, who else can? And who controls that? How much code and logic does it handle before getting difficult to maintain? And how much data? If I make an useful app with it, say to track beers, can I share the app with other people without so they can track their own beers, without sharing my personal data?
- panphora 1y ago1. Security: It operates under the same security model as most website builders (think SquareSpace), we completely trust the end user to modify their own site in their own best interest. If the end user violates this trust, they will lose access to their paid account and could be liable to damages from other users. Their actions, their consequences. 2. Who can modify: You can modify any app you create. You can also "enable signups", which allows other users to easily fork your app, but they all trace back to your source app. We're making a plan right now where you can ship updates to forked apps. 3. Difficult to maintain: Pieter Levels (of NomadList) famously codes his $60k/month apps in single index.php files, so I suppose it matter how you organize your code and what level of navigating-through-the-cruft you're comfortable with. 4. Other people can fork your app and track their own beers. We also want to integrate collaboration features, so 2 people can have control over the same page simultaneously, but for now it's best for single-user apps.
- clemensnk 1y agoThis is really neat! It echoes many of the ideas we've been exploring with the Webstrates project (https://webstrates.net https://webstrates.net). We've been using the DOM as persistence layer for building malleable collaborative software for smaller groups, whereas hyperclay focuses on using the same mechanisms for traditional webpages. Recently, I have been experimenting with a local-first approach to Webstrates (https://github.com/Webstrates/MyWebstrates https://github.com/Webstrates/MyWebstrates). Might be interesting to explore if a Webworker-based approach like in MyWebstrates could be used for offline editing in hyperclay.
- panphora 1y agoHi Clemens, I'm a big admirer of yours and what you're doing with Webstrates. I first heard of you about a year ago, when I was first exploring the ideas that became Hyperclay. I love the idea of a local-first Hyperclay. Offline editing is one of the pillars of personal software and I'd like to head in that direction. Would you be open to hopping on a video call at some point? I'd love to compare notes.
- clemensnk 1y agoI'd love to. Drop me a mail and let's find a suitable time.
- dazhbog 1y agoHere's a video of the creator explaining more https://www.youtube.com/watch?v=OUiTBFDxwaM https://www.youtube.com/watch?v=OUiTBFDxwaM
- visarga 1y agoIf you use Claude to generate apps in the artifact they are very similar - self contained and easy to create and share.
- meistertigran 1y agoYou don't get localStorage persistence though.
- bflesch 1y agoI appreciate the storytelling and the nice graphics, but after reading 10 screen lengths of this story I still don't understand what technology they are using to achieve this. Is it a lot of words to talk about localstorage? How exactly are the changes persisted to the HTML file? Is it using FileSystemAPI to overwrite the previous HTML file? How can they implement it seamless for the user without them having to choose the proper file in the "Save As.." dialog?
- panphora 1y agoThere's two approaches Hyperclay takes. 1. Hosted: You get a bunch of "HTML Apps" that persist themselves by calling their own /save endpoint. We grab the HTML and overwrite their-app-name.html, making a backup/version along the way. (Each user can edit their own app only, but they can also enable signups so that other people can fork their app. We also have plans to allow them to ship optional updates to forked apps.) 2. Local: You download the open-source Hyperclay Local [0] and you can have your own personal, local HTML apps that also call the /save endpoint and make backups. You're also open to extracting the core code from this to host your own personally malleable apps on your own server (just implement some kind of auth) [0] https://hyperclay.com/hyperclay-local https://hyperclay.com/hyperclay-local
- nonethewiser 1y agoAnd probably uses the Mutation Observer to capture DOM changes https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...
- herpdyderp 1y agoSo… it's a server that stores HTML files?
- jnd-cz 1y agoSounds like modern version which replaces FTP access with nodejs server. But you have to host it on a server or pay monthly fee anyway so you do need a server. AKA ad for OPs business.
- mettamage 1y agoThe title reminds me of TiddlyWiki.
- keepamovin 1y agoGreat name, cool idea and this guy communicates well. Inspiring to see!
- dr_kiszonka 1y agoSlightly tangential: a lot of my vibe coding experiments are standalone SPAs because I can't be bothered to set up a secure server (and I am too cheap to pay for it). I love that I can open my "mobile-first" apps directly from my phone's Downloads folder. I have a feeling that a lot of these little tools people make with low-code vibe AI apps do not require more than a single HTML page with JS imports. (I also suspect that there is a ton of duplication in what people create, but, of course, I have no data to back it up.)
- thunderbong 1y agoVery interesting. Pricing page returns a 404 as of now, though. https://www.hyperclay.com/pricing https://www.hyperclay.com/pricing
- jomoho 1y agoThis reminds me of a self contained svg editor running in the browser , that I wrote a few years ago.
- Sammi 1y agoTo take this concept one step further towards perfection, you would want to lose the backend completely and persist directly to a git repo using https://isomorphic-git.org/ https://isomorphic-git.org/
- felipeccastro 1y agoAnd if keeping in local storage a list of all pages, you can create an index html automatically in a predefined format which makes it more of a database rather than loose documents.
- dirkc 1y agoI like the idea! You would still need something to serve the HTML file, but that isn't so bad. But in my experience the potential audience shrinks significantly once anything git related is expected from a user.
- koolala 1y agoIt stinks github or gitlab or any free git hosting providers didn't work with isomorphic git.
- BoppreH 1y agoFor people who are confused: Hyperclay is a NodeJS server and frontend JS library that allows HTML pages to update their DOM and then replace their own .html source with the updated version. Imagine clicking a checkbox, which adds the `checked` attribute to its element, then using Hyperclay to globally persist this version of `document.body.outerHTML`, so that it's there next time someone visits the page. There's automatic versioning and read/write permissioning. It's a pretty cool project! I'll definitely try for my own personal tools. Do note that, from my understanding, it's most useful when there's one developer who is also the only content editor. Otherwise you'll have editors overwriting each other's changes, and if there are multiple copies there's no easy for the developer to push a change to all copies.
- panphora 1y agoI added this word-for-word to the home page. Thank you! Note: we are working on a way for a developer to push "DOM-based schema migrations" to all forked apps.
- BoppreH 1y agoI'm flattered you liked my description so much! It's a really special project, thanks for sharing it.
- bzmrgonz 1y agoI love this, I think this brings "block editing" capabilities to the masses, which is a big selling point for WordPress. In recent months, I've been looking at micro-sites and I concluded that Carrd is king for this type of landing pages/microsites. So this looks very promising for this respect. Either of you care to share or dispel security concerns or describe attack surface? For the past 6 months I've been looking at HUGO sites and the simplest deployment approach I found was alpine/sqlite/hugo containers at 5-10mb in size. Is there a way to delegate control/editing of sections/pages? I think the world needs a simple platform to build sites and delegates sections to respective departments/units. The only platform which seems solid for this is drupal, but it's kind of overkill for SMB orgs.
- pjmlp 1y agoSomeone rediscoved Windows 98 HTA archives. https://en.wikipedia.org/wiki/HTML_Application https://en.wikipedia.org/wiki/HTML_Application
- keviv 1y agoCame here to comment the same.
- Piskvorrr 1y agoHTAs were equal parts great (for their time) and terrible (plus they stuck around until IE died): a bog-standard webpage, but IE-only and with local-user process execution powers. Also, the local persistence was...problematic. Only similar in the vaguest sense.
- j45 1y agoBefore that it likely was Outlook Web Access. https://en.wikipedia.org/wiki/Outlook_on_the_web https://en.wikipedia.org/wiki/Outlook_on_the_web
- insin 1y agoThe original Electron! Pity the versions of IE it was available for were still hell to debug in.
- pjmlp 1y agoBack in those days you had to install the Office Scripting Debugger, I think that was the name, when browser debuggers were still extensions.