Useful patterns for building HTML tools
a day ago
- #JavaScript
- #HTML
- #LLMs
- HTML tools combine HTML, JavaScript, and CSS in a single file for useful functionality.
- Over 150 HTML tools built in the past year, mostly written by LLMs.
- Examples include svg-render, pypi-changelog, and bluesky-thread.
- Tools are hosted on tools.simonwillison.net with links to source code on GitHub.
- Key patterns: single file, no React, CDN dependencies, small size.
- Prototyping with LLM platforms like ChatGPT, Claude, and Gemini.
- Using coding agents for complex projects and debugging tools.
- Persisting state in URLs and localStorage for secrets or larger state.
- Leveraging CORS-enabled APIs and WebAssembly for advanced functionality.
- Remixing previous tools and recording prompts/transcripts for reproducibility.