Useful patterns for building HTML tools
simonwillison.net
Useful patterns for building HTML tools
1–10 of 101 posts
Re: Useful patterns for building HTML tools
#2Amazing article with lots of useful info. Big kudos, Simon.
This really showcases the power of the single page apps and why web will be always ahead of native for this kind of Swiss Army Knife tools.
With LLMs, it gets ridiculously easy to “develop” (generate) those too.
Re: Useful patterns for building HTML tools
#3Amazing article with lots of useful info. Big kudos, Simon. This really showcases the power of the single page apps and why web will be always ahead of native for this kind of Swiss Army Knife tools. With LLMs, it gets ridiculously easy to “develop” (generate) those too.
It really is wild how quickly these things pop out - this one here took a couple of prompts, probably ten minutes from idea to shipping a working implementation: https://tools.simonwillison.net/pypi-changelog?package=llm&c...
Re: Useful patterns for building HTML tools
#4Pretty nice. I've been using LLMs to generate different Python and JS tools for wrangling data for ontology engineering purposes.
More recently, I've found a lot of benefit from using the extended thinking mode in GPT-5 and -5.1. It tends to provide a fully functional and complete result from a zero-shot prompt. It's as close as I've gotten to pair programming with a (significantly) more experienced coder.
One functional example of that (with 30-50% of my own coding, reprompting and reviews) is my OntoGSN [1] research prototype. After a couple of weeks of work, it can handle different integration, reasoning and extension needs of people working in assurance, at least based on how I understood them. It's an example of a human-AI collab that I'm particularly proud of.
[1] Playground at w3id.org/OntoGSN/
Re: Useful patterns for building HTML tools
#5Nice, I do this often enough that I created a bookmarklet to download an HTML file from clipboard after copying ChatGPT's code block.
I've also been using LLMs to create and maintain a "work assist" Chrome extension that I load unpacked from a local directory. Whenever I notice a minor pain point, I get the LLM to quickly implement a remedy. For example, I usually have several browser tabs open for Jira, and they all have the same company logo as the favicon, so my Chrome extension changes the favicon to be the issue type icon (e.g. Bug, Story, etc) when the page loads. It saves a little time when I'm looking for a specific ticket I've already opened.
Re: Useful patterns for building HTML tools
#6I also find that sticking to a single file makes coding agents perform better (fewer surgical edits, faster outputs, sensible changes, etc).
Not sure why, but the moment the file is split into files and subfolders, coding agents tend to do a lot more changes that what is absolutely necessary. That way a single html file wins!
Re: Useful patterns for building HTML tools
#7Thanks 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 their dashboard.
Some tools can make use of Workers/Functions for backend processing and secrets. I try to keep these to a minimum but they're occasionally useful.
I have an AGENTS.md that's updated with a Github action to automatically pull in Claude-style Skills from the .skills directory. I blogged about this pattern and am still waiting for a standard to evolve [2].
I have a base stylesheet that I instruct agents to pull in. This gives a bit of consistency and also let's them use Tailwind, which they'd seem to love.
[0] https://tools.dave.engineer/
Re: Useful patterns for building HTML tools
#8[deleted]
Re: Useful patterns for building HTML tools
#9[dead]
Re: Useful patterns for building HTML tools
#10Really enjoyed this, interesting read as always! It reminded me of Google Labs’ recent GenTabs project [1], and also of a recent ACM paper on user-assembled LLM-mediated tools from web content [2]. Feels like similar concepts are emerging in multiple places, all centered around lightweight intent-driven tools rather than traditional apps, which I think makes a lot of sense. Curious how this will evolve!