Building Simple HTML Tools with AI: From Idea to Deploy in Minutes

I’ve been having way too much fun building small web tools lately. You can check them out at tools.vinlam.com: a Hyrox race predictor, a treadmill pace converter, and a text formatter for LLMs.

The Single-File Magic#

I was inspired by Simon Willison’s recent post on “Useful patterns for building HTML tools”. The idea is simple: build self-contained HTML tools where everything lives in one file. HTML, CSS, and JavaScript all together. No React, no build steps, no npm packages to manage. Just open the file and it works.

This approach clicked for me immediately. Build steps add friction. They introduce errors. They slow down iteration. When you’re trying to quickly solve a problem, the last thing you want is to debug webpack configs or deal with dependency hell.

AI-Powered Development with Artifacts or Canvas#

The progress in AI coding agents has been genuinely impressive. I’ve been using a mix of ChatGPT, Gemini, Claude, and Claude Code, choosing based on how much “thinking” the task requires.

The easiest way to prototype is with ChatGPT, Claude, or Gemini. They can write HTML and Javascript applications and show the output directly in the browser. They’re interactive and dynamic, which saves that extra bit of friction. You can stay in the browser rather than spinning up a new terminal session.

ChatGPT and Gemini call this “Canvas” and Claude calls it “Artifacts”. You can even publish and share these outputs with others.

The screenshot below shows my initial prompt with Claude to generate the Hyrox Predictor Artifact.

Initial prompt for the Hyrox Predictor tool

That’s it. A few minutes later and two more prompts to steer it, I had a working tool with a clean interface, unit toggle, and a reference table. You can see the full conversation here if you’re curious about the back-and-forth.

I still use an IDE for established codebases (applications with authentication systems, databases, and all the typical complexity of modern web development). Those projects are valuable, but they require mental overhead and careful architecture.

But these AI tools are transformative for experimental and exploratory coding. What’s remarkable is how quickly you can go from idea to working tool. I can describe what I need in a few sentences (often verbally), and within minutes I have something functional that I can ship immediately.

The simplicity is the feature. The lack of friction means I can scratch that creative itch without needing to plan and architect. I can make things for the sake of making.

Deployment is Beautifully Simple#

GitHub Pages makes hosting trivial. Push to a public repo and it’s live. Setting up the custom subdomain (tools.vinlam.com) took maybe three minutes. No CI/CD pipelines to configure, no serverless functions to manage, no databases to provision.

This is the workflow:

1. Tell AI what I want
2. Test the HTML file locally
3. Push to GitHub
4. It’s live

That’s it.

Ideas Actually Become Real#

I have a notes app full of ideas that never went anywhere. The barrier to implementation was just high enough that most ideas stayed as notes.

But now? The friction is so low that I actually build things. An idea that would have taken me hours or days to implement (if I ever got around to it) now takes minutes. The mental barrier of “is this worth the effort?” has basically disappeared.

When building is this easy, you stop filtering ideas based on implementation complexity. You just build them and see if they’re useful.

Having one repository to manage all these mini projects is also surprisingly nice. Less overhead to keep track of individual tools, easier to maintain consistency, and simpler to discover what I’ve already built.

What I’ve Learned#

Single-file HTML tools are incredibly powerful for solving specific, focused problems. You don’t need a framework. You don’t need a build process. You just need HTML, some CSS for styling, and JavaScript for interactivity.

AI coding agents have made this even more accessible. You don’t need to be a JavaScript expert. You don’t need to remember CSS syntax. You just need to clearly describe what you want to build.

The combination of simple architecture and AI assistance has changed how I approach side projects. I still build complex systems when needed, but now I have another mode: rapid, experimental, frictionless creation. Ideas go from “I should build that someday” to “let me spend 2 minutes on this right now.”

That shift in workflow is hard to overstate.

Check out the tools at tools.vinlam.com. They’re all open source on GitHub if you want to see how they work or build your own.