Patterns and Insights for Building Single-File HTML Applications
By
simonw
Slow-proofed and worth the wait. Worth its weight in flour.
Summary
The article discusses the author's experience building over 150 'HTML tools' - single-file HTML applications that combine HTML, JavaScript, and CSS to provide useful functionality. The author shares patterns and insights gained from creating these tools, most of which were written by LLMs. The article presents practical examples and patterns for building such tools, drawing from two years of experience creating dozens of regularly used applications.
Key quotes
· 4 pulledI've started using the term HTML tools to refer to HTML applications that I've been building which combine HTML, JavaScript, and CSS in a single file and use them to provide useful functionality.
I have built over 150 of these in the past two years, almost all of them written by LLMs.
This article presents a collection of useful patterns I've discovered along the way.
These are some of my recent favorites. I have dozens more like this that I use on a regular basis.
You might also wanna read
wterm: A DOM-based Web Terminal Emulator Powered by Zig and WebAssembly
wterm is a web-based terminal emulator that renders directly to the DOM, providing native text selection, copy/paste, find functionality, an
wterm.dev·2d ago
Gridland: React Framework for Building Terminal Apps That Render in Browser and Terminal
Gridland is a React framework that enables developers to build terminal applications that can render in both the browser and terminal enviro
Product Hunt·1mo ago
OpenPolicy Astro Integration: Zero-Build Privacy Policy Generation
The article discusses OpenPolicy's Astro integration for generating privacy policies, terms, and cookie policies directly within Astro page
openpolicy.sh·1mo ago
Vite+: Unified Toolchain for Web Application Development
Vite+ is a new unified toolchain for web application development that aims to simplify the development workflow by combining runtime managem
Product Hunt·2mo ago
Chrome DevTools MCP Server Update Enables Coding Agents to Debug Active Browser Sessions
Chrome DevTools MCP server now allows coding agents to directly connect to active browser sessions, enabling them to reuse existing sessions
developer.chrome.com·2mo ago
ClickSay: Developer Tool for Capturing Web Elements and Generating AI Coding Prompts
ClickSay is a developer tool that allows users to click any element on a webpage to instantly capture its CSS selector, computed styles, HTM
Product Hunt·2mo ago