webmachinelearning/webmcp: 🤖 WebMCP
🤖 WebMCP. Contribute to webmachinelearning/webmcp development by creating an account on GitHub.
Web Development Patterns
Summary
Simon Willison shares design patterns for building single-file HTML applications that bundle HTML, JavaScript, and CSS. He has built over 150 such tools, mostly LLM-generated, and documents techniques like CDN dependencies, URL-based state, localStorage, CORS APIs, Pyodide, and WebAssembly for practical, copy-paste web
Highlights
- Single-file HTML apps with inline JS and CSS are the most productive format for building focused, distributable web utilities
- Avoid React and build steps entirely; prompt LLMs with 'no react' to keep tools simple and copy-paste friendly
- State can be persisted via URL parameters or localStorage, enabling shareable and persistent tool sessions without a backend
- Pyodide and WebAssembly extend browser capabilities, allowing Python and compiled code to run directly in these single-file tools
- LLMs can be called directly via CORS, enabling AI-powered features within these tools without a server
auto-generated
Context
Audience
Web developers and technical users who build small, focused browser-based utilities, especially those leveraging LLMs for code generation
DomainWeb Development
Formatlong-form article
Accessfree online
Source Overview
The article defines “HTML tools” as single-file HTML applications that bundle HTML, JavaScript, and CSS to perform focused tasks, many generated with LLMs.
It outlines core design patterns: keep each tool in a single small file, avoid React and build steps, load minimal dependencies from CDNs, and make code easy to copy, paste, and host. It also lists practical techniques like prototyping in LLM canvases, persisting state via URLs or localStorage, calling CORS-enabled APIs and LLMs directly, using Pyodide/WebAssembly, and reusing previous tools and prompts.
Topics
Related
tools.simonwillison.netPyodideWebAssemblyCDN libraries (jsdelivr, cdnjs)LLM canvas prototyping
