Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Useful patterns for building HTML tools

simonwillison.net

Post reply on HN
Print view View original

81–90 of 101 posts

Re: Useful patterns for building HTML tools

#81

Post by aag »

cxr wrote: post #76
meistertigran wrote: post #62

I was also heavy on these single-file HTML tools. My problem was not being able to sync the localstorage data between PC and smartphone. I made a paid service which did that automatically. It didn't take off unfortunately, and I am keeping it on maintenance mode because it has some amount of free users that rely on it. For anyone interested, to achieve synchronization I basically just use the https://github.com/googl…

> My problem was not being able to sync the localstorage data between PC and smartphone That's what remoteStorage is for. https://remotestorage.org/ >

I can't get that page to respond. Did you mean https://remotestorage.io/>?

Re: Useful patterns for building HTML tools

#82

Post by sails »

dave1010uk wrote: post #7

Thanks Simon! My tool collection [0] is inspired by yours, with a handful of differences. I'm only at 53 tools at the moment. What I did differently: Hosted on Cloudflare Pages. This gives you preview URLs for pull requests out the box. This might be possible with Github Pages but I haven't checked. I've used Vercel for similar projects in the past. Cloudflare seems to have the odd failed build that needs a kick from…

These are great. Something you might find interesting is that you can expose a google sheet to have an interactive database. I have a map similar to yours, but with surf spots. Maybe defeats the point, but I find it handy

Edit: come to think of it, I should revisit it now that everyone can vibe code. The sheet was to allow people to add to it, now maybe easier for me to take a message and ask an agent to update the html directly

Re: Useful patterns for building HTML tools

#83

Post by shekhargulati »

I also started building similar tools in early 2025 and have built around 80 of them so far: https://tools.o14.ai/. Recently, I built a data viewer app (https://tools.o14.ai/excel-qa-review.html) where I can upload an Excel or CSV file containing chat queries and answers for quick manual review.

Reviewing data in Excel is painful, especially when answers are in HTML or Markdown, because you don’t get proper rendering. Building small, custom tools that reduce the friction of reviewing data makes life much easier and more pleasant. These days, I use Claude Code for Web to build most of these apps, and they are deployed on Vercel.

Re: Useful patterns for building HTML tools

#84

Post by 01HNNWZ0MV43FF »

insin wrote: post #75

Makes me wish there was a cross-platform equivalent to HTML Applications [1]. They were hell to develop at the time, but being able to create single-text-file tools with a browser UI, file system and network access, and app automation via COM was amazing [1] https://en.wikipedia.org/wiki/HTML_Application

That would be neat. So instead of having to write a whole Electron or Tauri app and package it, you just target some shell program.

You could definitely build such a shell with Electron or Tauri, it punches a big hole in their security model, but you could do it.

Re: Useful patterns for building HTML tools

#85

Post by smusamashah »

I made a heart monitor for very high heart rate https://github.com/SMUsamaShah/heart-rate which can be installed on phone as a PWA too. It could use some more polish, more features which I could do with an LLM again.

LLMs are generating app for an idea that can fit in few hundred lines of html/js. Had an idea that what if brushes were dithered in a painting tool and made a dithered painting tool. https://github.com/SMUsamaShah/dither-painter

These tools and code are ephemeral though. You don't need to use mine for example. Just ask the LLM of the time to implement the idea and in most cases it will work fine.

Re: Useful patterns for building HTML tools

#88

Post by jddj »

dave1010uk wrote: post #7

Thanks Simon! My tool collection [0] is inspired by yours, with a handful of differences. I'm only at 53 tools at the moment. What I did differently: Hosted on Cloudflare Pages. This gives you preview URLs for pull requests out the box. This might be possible with Github Pages but I haven't checked. I've used Vercel for similar projects in the past. Cloudflare seems to have the odd failed build that needs a kick from…

Awesome.

Couple of unsolicited comments: first is that on mobile, the featured badge sits on top of the right facing arrow. Second is that the bubble level seems to be upside down? The bubble sinks rather than floats at least on my pixel

Re: Useful patterns for building HTML tools

#89

Post by meistertigran »

dansjots wrote: post #70
meistertigran wrote: post #62

I was also heavy on these single-file HTML tools. My problem was not being able to sync the localstorage data between PC and smartphone. I made a paid service which did that automatically. It didn't take off unfortunately, and I am keeping it on maintenance mode because it has some amount of free users that rely on it. For anyone interested, to achieve synchronization I basically just use the https://github.com/googl…

I wonder if you can hack a LocalStorage sync feature via ATProto PDS, since you can put arbitrary JSON records via /xrpc/com.atproto.repo.putRecord and not just Bluesky posts. The only drawback I can think of is that all of your commits are broadcast on a megaphone to the network firehose, but encryption can alleviate that somewhat.

I am not familiar with it, but I was thinking about making an open source version of this, but using webRTC, to just directly allow peer-to-peer synchronization without a centralized server.

In this type of scenario there are a lot considerations to be made though, specifically since you can't use CRDT's to handle concurrent updates on the data you have to either 1) not allow offline use of the apps, 2) create a merge conflict resolving interface or 3) just overwrite all changes with the latest one.

Idk if people would be interested in this and I haven't been using my HTML tools for a while now, so it's just an idea, maybe someone else wants to work on.

Re: Useful patterns for building HTML tools

#90

Post by sallveburrpi »

tkclough wrote: post #71

I'm a big fan of using this kind of thing at work. Rather than setting up a web server or packaging something into an installer, I just pop the bundled HTML file on a shared drive. The CDN approach works, but I don't love depending on some third-party service just so your app continues working. Instead, I like using vite with vite-plugin-singlefile. This lets you package your JS and CSS into a single HTML: https://ww…

How does the camera mode work? I tried it and it jumps wildly between 60 and 100 oO
Post reply on HN