> HTML tools may not have access to server-side databases for storage but it turns out you can store a lot of state directly in the URL.
I use indexedDB for it and will use sqlite if I start to get more serious data needs.
Useful patterns for building HTML tools
51–60 of 101 posts
Re: Useful patterns for building HTML tools
#52I've been calling these Single-File Web Apps. I've written a couple myself:
Re: Useful patterns for building HTML tools
#53> Avoid React, or anything with a build step. The problem with React is that JSX requires a build step, which makes everything massively less convenient. I prompt “no react” and skip that whole rabbit hole entirely. I haven’t found too many issues with loading React and Babel from a CDN. I find React easier to read than straight HTML/JS. I find it more annoying to code in but seeing what state is needed in what compo…
Yep - the author is very opinionated and it's good because it works really well for his workflows/usecase.
I'm with you though, personally react is a acceleration mechanism for me because I often find existing well built components already. I don't built the same thing as the author though.
Re: Useful patterns for building HTML tools
#54One thing I tend to do myself is use https://generator.jspm.io/ to produce an import map once for all base dependencies I need (there's also a CLI), then I can easily copy/paste this template and get a self-contained single-file app that still supports JSX, React, and everything else. Some people may think it's overkill, but for me it's much more productive than document.getElementById("...") everywhere.
I don't have a lot of public examples of this, but here's a larger project where I used this strategy for a relatively large app that has TypeScript annotations for easy VSCode use, Tailwind for design, and it even loads in huge libraries like the Monaco code editor etc, and it all just works quite well 100% statically:
HTML file: https://github.com/blixt/go-gittyup/blob/main/static/index.h...
Main entrypoint file: https://github.com/blixt/go-gittyup/blob/main/static/main.js
Re: Useful patterns for building HTML tools
#55I've been calling these Single-File Web Apps. I've written a couple myself: ≈ https://fuzzygraph.com ≈ https://hypervault.github.io/
Slight correction: I'd only refer to it as a "Single-File Web App" if it has no external dependencies (where as the "HTML Tool" definition allows for external dependencies loaded from CDNs).
Re: Useful patterns for building HTML tools
#56Thanks 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…
Thanks for showing this! It’s cool, and I enjoyed reading through some of the code.
Note that I tried to use some of the regex tools that needed LLMs and got a rate limit error.
Re: Useful patterns for building HTML tools
#57Awesome. This is the way.
Re: Useful patterns for building HTML tools
#58I just shipped a new one of these a few minutes ago (from my phone). I found out about a new Python HTML parsing library - https://github.com/EmilStenstrom/justhtml - and wanted to try it out but I'm out without my laptop. So I had Claude Code for web build me a playground interface for trying it out: https://tools.simonwillison.net/justhtml It loads the Python library using Pyodide and lets you try it out with a sim…
You can use react with jsx without any build step in single html file as well.
Re: Useful patterns for building HTML tools
#59Great timing - I've taken up vibecoding and picked personal tools with simple HTML/CSS/JS/python stack as the learning ground too. Personal tools seem like a reasonable place for happy path vibecoding given small blast radius and LLMs can do that sort of static page in front of python backend really well. I've also been surprised how much active learning I'm doing despite specifically not look at code. Between the ne…
> Presumably much of that learning boost is because I'm a hobbyist tier programmer, guessing professionals wouldn't experience the same since they learned this via manual coding trial & error over years.
I can only speak for myself and my not-quite two decades of professional experience, but yes pretty much!
It’s neat to see that sped up for others though with lower stakes, though it’s not quite the same unless you prompt your agent to question you back a lot (Claude is much better at this in my experience)
Re: Useful patterns for building HTML tools
#60I've also been creating HTML tools over the years when I couldn't find client-side only websites for PDF to SVG, CSV to Sheet, Audio to Video, Video to MP4.
I list them at https://client-side.app/