Web apps in a single, portable, self-updating, vanilla HTML file
hyperclay.com630 points by pil0u 3 days ago
630 points by pil0u 3 days ago
For 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.
I'm still confused - if it requires a NodeJS server, then it wouldn't be a fully self-contained HTML file would it?
It technically doesn't say "self-contained", but it does say "portable" and "self-updating", which I must agree is misleading.
If you want something actually self contained play with this https://startr.style/modernism/
This thing comes across so pretentiously, but they have some really novel CSS ideas I might try. The idea of making selector based on [style*="--bgc:"] and using that to set background color like style="--bgc: red" is not something that I would have thought of.
Happy you enjoyed it. Most of my creations just build on and with Startr.Style. It's a tight alternative to Tailwind's mess of classes. I especially love how directly it translates to pure styling yet allows us to have responsive design eg add the -md suffix to --bgc to specify background colors for tablets and up.
When I work on Modernism or any of the other experimental pages on https://startr.style I don't do it with any pretension but out of a love and familiarity of code and what the web can be. As child I traded helping out at a local computer store for time exploring Gopher and then Mosaic's window to the web.
I appreciate your efforts :)
I think what gets me is there's 6 paragraphs in a row that either start with "Modernism" or have it in the first sentence, and it comes along with words like "transcends", "echoes", "essence", "exude", "crafts." They're good paragraphs by themselves and make good points, I just think that together they come out a little breathless, and maybe some consolidation is in order :)
I notice from your profile that you haven't submitted your site to HN, I think you should do so, I think it would generate some interesting discussion.
In my perspective, for truly "self-contained", "portable" and "self-updating" and even "un-hosted" web apps, the only option nowadays are prehistoric data-URIs, that are slowly losing abilities anyway (basically can live only as bookmarks or direct URL pastes, and their only persistence option is location #hash that needs re-bookmarking):
data:text/html;charset=utf-8,<body id=b onload=b.innerHTML=decodeURIComponent((l=location).hash.slice(1)) onkeyup=document.title=b.innerText.split('\n')[0]||'.' onblur=try{history.pushState({},document.title,'\u0023'+b.innerHTML)}catch(e){l.hash=b.innerHTML} contenteditable bgcolor=darkslategray text=snow link=aqua vlink=lime style=text-align:center>#Hello, HN!<br><br>Do you like this %E2%9D%9Dun-hosted%E2%9D%9E app?<br>With persistence<a href="https://news.ycombinator.com/reply?id=44944112">%E2%80%A6?</a>You probably wouldn't fault another piece of software for calling itself single-file even if it requires an operating system to run. It makes more sense to look at from a (build-)artifact POV - ignoring the foundations the artifact rests on if they're not specific to it.
I 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.
I'm flattered you liked my description so much! It's a really special project, thanks for sharing it.
I 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.
Thanks. Author mentioned TiddlyWiki as inspiration. But the whole point of TiddlyWiki was that it doesn't need a server right?
So I'm trying to understand the difference, the payoff. I understand that local web APIs are ass and you very quickly run into the need for a server.
But I'm wondering about the utility of combining the two approaches. It seems like a contradiction in terms. Here's a server to help you with your dev setup oriented around not needing a server.
I guess the main win would be cross device access? You have it online and you can edit it easily.
I'm editing my stuff on my phone in a text editor. And syncing it to my laptop with a sync app.
Thanks. Author mentioned TiddlyWiki as inspiration. But the whole point of TiddlyWiki was that it doesn't need a server right?
I did a deep dive on TiddlyWiki recently. No, it doesn't need a server; an entire site can be self-contained in one HTML file.
If you want to run it as a multiuser, web accessible wiki, it runs on top of NodeJS.
Turns out, the original TiddlyWiki used a java jar to handle the file persistence. (I remember it being so magically automatic, but recently investigated how it was done)
I don't think that's right - IIRC it used to be possible to write out a file, if loaded from a file:// URL, directly from JavaScript. Then that ability got nobbled because security (justifiable) without properly thinking through a good alternative (not justifiable). I mourn the loss of the ability, TiddlyWiki was in a class of its own and there should have been many more systems inspired by its design. Alas.
ETA: Wikipedia has reminded me the feature was called UniversalXPConnect, and it was a Firefox thing and wasn't cross-browser. It still sucks that it was removed without sensible replacement.
I used TiddlyWiki a lot to manage my D&D 3.5 campaign back in the day. As I recall, it originally was a true stand-alone HTML document capable of overwriting itself, but once browsers dropped support for this capability, users had to begin using various workarounds, and this remains the status quo today.
TiddlySaver.jar was one such workaround. A check in the Wayback Machine suggests that it was originally required only for Safari, Opera, and Chrome; IE and Firefox needed no such plugin. Nowadays, there are several workarounds, and setting up one is a mandatory installation step: standalone applications, browser extensions, servers, etc. Some are clunky (e.g. you have to keep your wiki in your Downloads directory or the browser can't write to it), and either way, TiddlyWiki is no longer truly a single stand-alone HTML file, at least not for writing purposes. It's still a very versatile tool, though.
How would TiddlyWiki write to filesystem (save) without a server?
I thought opening index.html in the browser was basically just a demo.
TiddlyWiki can replicate itself. All users can freely edit any TiddlyWiki and save their changes to their filesystem. There's a few options for exports.
It is a common gotcha that new users will lose some of their work while they learn persistence.
Tiddlywiki has two modes of running. In one, you simply save the file as HTML and all your content is saved inside the file.
The other mode is with a nodejs server (it's what I'm using). This allows me to access the wiki from all devices.
I see, so you make edits, the Javascript edits the html, therefore File -> Save Page will download an html file with your changes in it that you can open again.
I forget that File -> Save is even a thing for websites.
Note: The TiddlyWiki documentation explicitly advises that File -> Save Page does not work.
You have to click a save button in the app, and it will generate a valid copy. However, most users deploy some plugin or software which allows transparent auto-saving.
I used https://github.com/slaymaker1907/TW5-browser-nativesaver, that still works with the current version 5.3.8, though just in Chromium based browsers. You save the file once and from then on, as long as the tab is open, it autosaves itself.
That said, I advise against Tiddly Wiki, after using it for long. It has multiple bugs, which the author won't fix (e.g. div's inside p's), It has a cryptic syntax (e.g. code in attribute values), and tagging is not implemented in a way which makes a wiki scale (well, technically it is, tags can have tags). It is a thing where features are added but nothing outdated gets deprecated, so it is bloated. One will be more productive by using a folder with markdown files, and a browser add-on like Markdown Viewer.
I don't know, for me it works, but I don't do anything fancy with it. I just put it on a server, so I can access it from all my devices. I don't even use tags, just tiddlers with sources which are other tiddlers or external web pages.
My solution to a lot of issues is to use Tiddlywiki Classic. No divs inside p that I can find, less bloat (412 KB for a blank file instead of 2.5 MB), and it's still maintained. The main advantage, to me, is that it fits more tiddlers on screen at a time, which is the main point of TiddlyWiki for me; TW5 adds large amounts of spacing, borders, and large font sizes, which looks nicer but is less practical.
It's not perfect, though. Paragraphs are rendered by using two br tags, instead of p tags. Link syntax is the reverse of MediaWiki syntax; i.e. [[foo|bar]] links to "foo" in MediaWiki, but "bar" on TiddlyWiki, which trips me up constantly. There's other syntax awkwardness like sensitivity to spacing and newlines. Journals sort in alphabetical, not chronological order.
iirc browsers used to allow direct filesystem access.
They never did, if anything it's the opposite in that I think there are now APIs that can make this possible.
With TiddlyWiki you had to essentially File -> Save As and save the HTML back over itself. There were other ways too but they were all workarounds to the issue that browsers don't allow direct access.
They did back around 2008. I used Wiki on a stick - see https://stickwiki.sourceforge.net/which was kind of neat) but after a few years, Chrome etc stopped letting it save itself.
Thanks for the description, I kept reading the webpage and didn't understand what the project was or how it worked. Yours is really succinct and clear.
To be completely honest, I don't see how this is more useful than adding a sync layer to localStorage. I did make a service that does that at htmlsync.io and am genuinely curious how this solution is better.
Just like with https://tiddlywiki.com/
Your notes are the HTML file! You can keep it in your documents folder, sync it via any service, track it in version control, etc. It’s for folks who know what the filesystem is, don’t know how to host a server (or don’t want to), but want a website-like experience. Works offline, too!
So like, Obsidian, but for HTML?
The file itself provides both the dynamic functionality and data storage, but you need an engine (like obsidian) to make the data persistence and dynamic parts work together. I.e. if there is a button that adds a task to a todo app, your engine modifies the HTML file with the new content.
I finally also recalled this project (tiddlywiki), but CMIIW, the statefulness of the hyperclay is only for developers, the end user will get the same conventional html. Without some kind of common solution/protocol/standard on the browser side that would allow persistence it's not so exciting. Theoretically there might be some kind of simple protocol that would save html file versions on the server based on the cookie, but there are so many ways this can go wrong
This all sounds like something from 2001. I was doing pretty much exactly this around 2001, using contenteditable with an IIS/JScript back-end.
I think contenteditable is more akin to a rich-text document, while Hyperclay goes a bit beyond by allowing JS to edit the DOM too. I think Smalltalk images and virtual machines are a closer comparison, but applied to the web. You download the image, with some running code, use it, and persist the whole application state.
> while Hyperclay goes a bit beyond by allowing JS to edit the DOM too.
So revolutionary!! How did they achieve this technical feat!?
Yeah, sounds like Tiddly Wiki or similar except with the need for a backend component.
Edit: actually it looks more like a library/framework to make such apps. And now I'm not sure if it needs a backend component or nodejs or not.
The idea would work a lot better with something like Cloudflare Workers. You don’t really need it to run 24/7 and it would fall into the free tier.
If I need a server to run this then surely I can use sqlite and save different versions of the page without overwriting the html page every time.
How does this differ from htmx?
htmx is a javascript library that reads configuration from html attributes and sends http requests based on that configuration
hyperclay is a web server that stores and serves versions of html files
htmx requires a server. This enables a single html file to modify itself.
No, this need a server too. Everything that saves changes to non local (shareable) locations needs some kind of a server. The best solutions are of course when OP hosts the server and you pay for it /s
So it's a wiki?
I don't get it.
Wiki has specific content you can add. New article, body of an article, etc. This lets you change all the html. With this, you could edit your wiki into a calculator.
I 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?
There'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)
So… it's a server that stores HTML files?
Sounds 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.
And probably uses the Mutation Observer to capture DOM changes
https://developer.mozilla.org/en-US/docs/Web/API/MutationObs...
I'm also a bit lost after scrolling through it. It seems if we take this one step further and add a bit of syntax to HTML to be executed on the server you'll have invented PHP / WordPress right?
AFAICT this is another cycle of; a decent system becoming overcomplicated because someone wanted to make it multi-tenant, and the re-discovery that 90% of the "improvements/advancements" are essentially bloat in the context & freedom you find/create.
I have to say, it feels rather strange to read
> It would be a great to ignore all the noise of modern web dev and just build the experience I want
sandwiched in between meme images that intersperse short bursts of text as if the reader needs constant distraction from the act of reading.
The experience I want is a short prose description up front, backstory that flows, and diagrams only where they actually illustrate a concept that needs it.
There's a DB on the server. It's just storing HTML with all its views instead of storing JSON, an extract of the information that is allowed to change...
From what I understood the html file itself is updated so it's updating forms, attributes and other tags to include the new changes
This 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.
Making a more read/annotate/write web is near and dear to my heart. There's a lot I find admirable - noble about pages like Hyperclay!
But also, it's a distinctly different answer for each page to build its own toolkit for the user (Hyperclay) vs TBL's read-write web. The user-agent ought, imo, afford standard tools that are going to work across web pages, that extend the user agency whatever site they are visiting.
Yes, I agree. My dream would be to one day work on a browser and integrate Hyperclay into it. I believe web apps have been around long enough as a core web technology that browsers should ship with a local web host, knowledge of what a user and user account is, and the ability to persist to disk whatever the user chooses.
In a similar vein, it looks like there is a working group for linked web storage at:
https://www.w3.org/groups/wg/lws/
That would likely have some overlap.
If you were to have an accepted w3c proposal and working implementation in local browser forks, you could potentially chat with the browser teams to add the experimental feature first through a flag users would manually have to turn on, and then later potentially it could get integrated.
> Making a more read/annotate/write web is near and dear to my heart
Isn't that basically Wikipedia? I can't imagine a much simpler system that could work at modern web scale.
I think the scale difference is the whole point. Wikipedia has billions of active users, while these Hyperclay-style persistent documents have only a few.
Saying "we don't need this because Wikipedia already solved it" is kind of like saying in 1976: "Nobody needs the Apple II, we already have IBM mainframes that have solved every useful problem in computing much better."
To add to that the W3C maintained the Amaya "browser", or web editor how they liked to call it, for like a decade and a half, as their vision for the web.
I think it was not just an appealing idea but Amaya itself was a solid implementation for a "testbed" (again, their words).
I can see why it died but I still think it is a bit of a shame it did.
I had never heard of Amaya before.
> It supports HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, many CSS 2 features, and SVG.
Perfect. Doesn't need anything else.
Saving 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.
> web browser was also an editor
Ummmm all the browsers I know of are also editors... Are there any that aren't?
Edit - does no one use dev tools anymore? No HTML? No vanilla JS and CSS? Everyone just using TS, React and gluing things together? Like, you literally have an entire IDE in your browser (assuming you use anything derived from Chrome, Firefox or Safari) that can code a web page live...
You're describing built-in developer tools for editing local files during development. The comment you're replying to is describing the vision of a browser which can edit remote files as part of the normal user workflow, not as a developer-only activity.
NeXT machines were hardly mass market user machines... They were almost exclusively developer machines.
Also Chrome does have stuff like SSH extensions.
That being said, some of the computing paradigms of the 80's and early 90's were very cool and I wish they caught on... Lisp machines, Smalltalk, early web ideas were interesting...
DevTools was not part of the original browsers. Firebug brought the concept to existence in the first place.
As a sidenote, does manipulating forms count as editing?
>Firebug brought the concept to existence in the first place.
There were other browser "dev tools" before firebug.
https://www.otsukare.info/2020/08/06/browser-devtools-timeli...
Crazy - I had forgotten about the earlier ones! The IE one I used at some point, and fiddler too
I still use Fiddler. I prefer it to browser inspector network tab when I need to get into the weeds. It does so much, and I can write custom proxy tweaks with Javascript (actually JScript.NET, but works just like good old JS), and it works with other software, I use it with NodeJS all the time. It's like the Swiss army knife of HTTP.
Netscape had a JavaScript debugger, IE had a debugger as well. What firebug did was pull the inspector, debugger, console, and everything together in a really nice dev experience. The goal posts were moved far back and the major browsers hurriedly released their “dev tools” to counter FireBug. Chrome being the first after, followed shortly by Safari (who already had an inspector). It would take MS another 6 years to do the same for IE8.
Netscape had editing tools. Firefox has editing tools. Chrome has editing tools. I think Safari does too?
Like, Netscape Composer came OUT of Navigator...
I 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.
A 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.
This is so weird that a random website on a random server (having SSL doesn’t change that in the slightest) is considered less of a risk than a file I have on my own computer.
Can somebody help me understand what’s going on?
There’s some discussion in the specs here https://w3c.github.io/webappsec-secure-contexts/#is-origin-t...
> In particular, the user agent SHOULD treat file URLs as potentially trustworthy.
> User agents which prioritize security over such niceties MAY choose to more strictly assign trust in a way which excludes file.
A potentially trustworthy URL is a secure context: https://html.spec.whatwg.org/multipage/webappapis.html#secur...
So this is a matter of browsers not implementing it, probably because there’s just not a lot of demand for it.
The random website cannot access arbitrary files on your computer's file system and send it somewhere else. An html file with javascript running locally, if trusted, on a typical personal computer could do that.
There should be some way to mark files as accessible, for example, place them into a folder with a specific name (like "html-accessible-files") on the same level as HTML file.
Internet Explorer in an ancient age used to have .HTA ("HTML Application") files for a double-click a self-contained HTML file that can act as a small local application. It did a lot of what PWAs are still trying to do, somewhat more effectively and simpler. (.HTA was mostly just a ZIP file! Simple to build.) It also had a lot of security holes that gave it a terrible reputation and a lot of reasons it got killed. (It was very early days for "AJAX" and modern browser security tools like CORS and whatnot, after all.)
Such things seem to be cycles.
Today a lot of browsers support .MHT which is a similar format, but also worse in many other ways. (The M stands for MIME and wrapping a website like an email seems somehow sillier and weirder to me than wrapping it in a ZIP file, though I get that MIME wrappers are ancient internet tech with an ancient track record.)
Then we see all the millions of apps in PWAs and Electron downloads.
At some point it feels like we should have better solutions and cut some of the gordian knot cycling between "local apps are too much of a security risk" and "local apps should be complicated collections of Service Workers to get offline support" and "local apps should just embed a full browser and all its security implications/risks rather than allowing browsers to directly open local apps" and back and forth. .HTA and .MHT both showcase possible directions back to "simpler" than PWAs/Electron, they just have such fascinating and weird histories.
The rule was probably intended to block public non-SSL pages, so your clipboard data doesn't ever get sent over the wire unencrypted.
Why does it block local pages? Well what benefit of is to Apple or Google if it were easier to make good localhost webapps?
Try deleting Safari site data(indexed DB etc) for your localhost site. You won't be able to. Hell, even deleting data for a specific public site is hilariously painful. Try adding a certificate authority to your iPhone. Try playing locally cached audio blobs via web APIs on an iPhone. There's probably 1000 more.
> 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.
> but you need to open a terminal and navigate to a directory first, that takes lot of time
It does?
It does, given that I don't always remember the path to the app. Also, on my Linux system the terminal doesn't remember windows and tabs and I have to open them all manually after reboot (I could ask ChatGPT to write a script for that but it would be easier if I hadn't to).
Maybe you can associate html files with or use open with to pass them into a script that calls python -m http.server and creates and opens a url to the file via the python server in the browser.
Chromium based browsers treat localhost as a secure context, so HTTPS isn't required to access APIs like the clipboard, web serial, etc.
Not just localhost, but *.localhost too. It's not just Chromium, it's a standard that Firefox supports too (Safari as usual is kind of spotty): https://www.w3.org/TR/secure-contexts/#is-origin-trustworthy
Is that a recent development? It was not so a couple years ago, at least not when a non-80 port is specified.
Windows used to have HTA applications, html files with a different extension that opened in a browser without menus and had access to filesystem APIs over javascript (jscript). It was probably a security nightmare, but I could see a modern version of that built on electron. Access to a folder and a sqlite db would be enough.
There's also Orca for building sandboxed wasm apps but it removes the browser and the Dom and only gives you a canvas to work with.
> 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
I'd love for there to be an "offline only" mode for browsers where you can either access the local filesystem or remote pages, but not both. I don't think this would completely solve the use case you describe, since there would still presumably be circumstances where it would be helpful to reference something external, but it feels like it would be pretty useful to be able to use a browser as a limited server for static files, and it would be relative simple and intuitive compared to needing to have something in the files themselves indicate the intended semantics.
Interesting, I also had an idea of "sandbox mode", into which the page can voluntarily switch after loading and which prevents it from using network, cookies or any ways to exfiltrate the data. This can be used for online utilities like text encryption, audio file format conversion etc. The browser could indicate that the page is in a sandbox mode so that the user can trust it.
It's been a while, but if I remember correctly you can't use some <canvas>/WEBGL features on images that are loaded from file:// URLs because of CORS (I think it was off-screen canvas). The only workaround I found was to embed the images inside the HTML using base64.
And to embed them you need a build step, and setting it up might take longer than writing the mini app itself.
This is quite similar to what I was trying to explore with [1] & [2] yesterday. Currently, the only option I found is to use localStorage and give the user the option to manually export and import.
Hyperclay has given me some ideas. What I want is something like [3] but that the user only needs to install once. One electron app that can load our mini-apps.
[1] - https://news.ycombinator.com/item?id=44930814
I had the same problem, regarding localStorage synchronization. For that I made htmlsync.io, but only really worth it for people who have many local apps like that and really need the localStorage sync.
This is pretty cool! What kind of users are you targeting? Technical folks or those dipping their toes into dev with vibe coding?
Thanks! Pretty much, yes. Also if you are a dev and just don't want to spin up a server for every simple app you vibe code, you could find this useful.
To be honest, I wanted this for myself and felt guilty not making something more serious out of it since I liked the idea.
“…I don't want to open a terminal, navigate to a directory and start a server every time, it takes too much time…”
I have a shell script that does these steps - including opening the browser with the target url. I use it on a regular basis.
I was annoyed too when they started to close off HTML as a local platform.
But! it is still very open (you complain about audio and javascript but they both work) also I've figured that it isn't really much of a problem to start a python/node webserver for the things I'm not allowed to do. Literally a fraction of a second. Just set up a "webserver_here" command in your terminal, or keep one running constantly. Also I'm starting to fear local HTML more and more, I'd actually be happier with a much stricter boundary.
The local html file can read local resources via src=file_path attributes on html tags (img, audio, video, script etc).
But the src-included files must be in the same directory as the root html file (or a descendant directory)
I used this in my macOS app Pocket Log to output a local html audio log (https://enzom.dev).
I have been using python http server to get this working. Go to a place where you have your index.html, start a python server, python3 -m http.server, and voila, everything is now importable and locally accessible.
Been 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.t...
I 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>
You 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/...
Thanks, 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">I 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.
TiddlyWiki 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?
This is really neat! It echoes many of the ideas we've been exploring with the Webstrates project (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). Might be interesting to explore if a Webworker-based approach like in MyWebstrates could be used for offline editing in hyperclay.
Hi 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.
Interesting 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?
1. 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.
Someone rediscoved Windows 98 HTA archives.
The original Electron! Pity the versions of IE it was available for were still hell to debug in.
Back in those days you had to install the Office Scripting Debugger, I think that was the name, when browser debuggers were still extensions.
HTAs 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.
Looks like it's on Github at https://github.com/panphora/hyperclay-local
This 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.
To 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/
It stinks github or gitlab or any free git hosting providers didn't work with isomorphic git.
I 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.
And 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.
I 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.
"Malleable" apps. Meaning the HTML file serving the webapp itself gets modified. Ok.
Very 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...
You mean HTTP auth?
HTTP auth is not an authentication system, it only describes how credentials should be passed from the client to the server and how the server should respond to them.
No, 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.
The 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.
> Right now, control over an email account is the best we've got.
And it's a poor enough solution that we have to build extra layers around it (for example, Apple's auth "login with Apple ID", which lets you hide your real email address behind an anonymous relay)
Could you put a token in a http auth username? Leave the password blank?
You 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.
I'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.
Am 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-...
> 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 ?
> 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.
Or you will rename one page, instantly breaking URL pointing on that page on all already saved pages.
At first I thought it is tiddlywiki but it is not.
The 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 :)
Thank 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.
> 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) seems pretty close to me.
I 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-...), 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), 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!
I 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/
What 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?
I 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
How 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?
It'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
Hyperclay 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 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!
i just standardize to TiddlyWiki (2004) 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/]]", "tags": "SelfHost Html TiddlyWiki Spa NodeJs", "type": "text/vnd.tiddlywiki", "created": "20250818000000000", "modified": "20250818000000000" }]
Initiatives 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/
> 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.
I 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.
Very 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.
I guess your searches missed Tiddlywiki. I think there have been a couple of other takes on the concept too.
Also our Webstrates (https://webstrates.net) system stores state in the DOM itself. But it's more a system for research prototyping than publishing web pages.
Nice… keep in mind there are already very mature tools like https://tiddlywiki.com/ which supports a plugin architecture.
I spent a weekend making a self-host twitter alternative.
source: https://github.com/est/gitweets/
demo: 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.
I 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> 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.
I 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.
This looks super cool and I'm hyped to try it. Reminds me of Decker 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.
Slightly 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.)
This 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.
There is an open source, local app version by the same author (me) here: https://hyperclay.com/hyperclay-local
fwiw, 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.
> 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.
I think you're underestimating the market here. It's not just extremely technically proficient people, it's the glitch people, the "custom myspace theme" people, possibly even the jsfiddle people.
The `/save` endpoint looks almost trivial. Knocking up a mimic wouldn't take much. The client libs will be interesting, but from the looks of things they're not quite there yet.
Mavo seems pretty similar, saves to github, allows flipping the UI to admin/editor mode 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.
Here's a video of the creator explaining more
Checked 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.
This 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?
I'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?
I 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/inde...
Playable version (deployed via github docs) is here: 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!)
Doesnt really sound like an odd obsession - it's an AI workflow thing. Just copy-pasting everything.
Full disclaimer: I only scanned the article, but based on the title, SvelteKit does that with a single option "inline".
How so? Can you describe what usecase that enables?
I 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.
This 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.
> 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.
Hitting "Request Access" on https://hyperclay.com/request-early-access with an empty field (no email provided) renders "Subscribed!".
This 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?
HTML5 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.
The title reminds me of TiddlyWiki.
Reading that website was quite enjoyable. Simple scrolling and loved the look.
I'm getting a 404 for most of the pages. Not confidence inspiring.
I wasn't planning to launch today hehe. The changelog and pricing links are fixed!
Great name, cool idea and this guy communicates well. Inspiring to see!
Very 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.
This 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.
So:
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.
This 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?
I have already moved most MVP to single file apps. This gives my intuition much more tools. Thanks for building this!
Is this a closed source project? I don't want to give my email address to get a chance to even try it.
This reminds me of a self contained svg editor running in the browser , that I wrote a few years ago.
The drag and drop on you personal dev blog seems very broken, or I'm an idiot
So you need a server for this to work and that server is closed source?
I 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
How did it do safe version control efficiently?
Looks like your Kanban demo app is broken.
this falls down really quickly once you get past a couple MB worth of data, like trying to add images.
I 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.
So we’re back to PDF?
... 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?
This 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
But depends on the whatng cartel web engines... Nothing to be proud of, mate.
Somebody's been reading The Oatmeal recently
(but seriously, very cool)
Wait until they find out about PHP. Mind blown.
no open source???? meh
[dead]
[dead]
[dead]
[dead]
If you use Claude to generate apps in the artifact they are very similar - self contained and easy to create and share.
Every 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).”
I would love to have people try building these on 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
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