- Zusammenfassung wiederkehrender Designmuster auf Basis der Erfahrung mit der Entwicklung von HTML-Tools, die HTML, JavaScript und CSS in einer Datei bündeln und direkt ausführbar machen
- Anhand konkreter Beispiele wird erklärt, wie in den letzten 2 Jahren mehr als 150 kleine Tools tatsächlich gebaut und gepflegt wurden
- Durch eine Struktur ohne Build-Schritt und die Nutzung von CDNs entsteht ganz natürlich ein Copy-and-Paste-basierter Entwicklungsfluss
- Der mit reinen Browser-Funktionen abdeckbare Bereich wird bis zu URL,
localStorage, Datei öffnen, Download, Pyodide und WebAssembly erweitert
- Durch Prompts, aufgezeichnete Ergebnisse und die Neukombination bestehender Tools wird der Trend verstärkt, dass die Tool-Sammlung selbst zur Entwicklungsgrundlage wird
Konzept und Beispiele für HTML-Tools
Grundstruktur eines HTML-Tools
- Aufbau als einzelne HTML-Datei mit inline eingebettetem JavaScript und CSS
- Da kein React verwendet wird, das einen JSX-Build benötigt, wird Kopieren und Weiterverteilen vereinfacht
- Benötigte Bibliotheken werden direkt von CDNs wie CDNjs oder jsDelivr geladen, Abhängigkeiten werden minimiert
- Der Codeumfang bleibt bei einigen hundert Zeilen, um den Wartungsaufwand niedrig zu halten und den Zustand beizubehalten, in dem ein LLM ihn schnell lesen und ändern kann
Prototyping auf Basis von Canvas und Artifacts
- Nutzung von ChatGPT Canvas, Claude Artifacts und Gemini Canvas, um HTML-Tools sofort auszuführen und ihre erste Form festzulegen
- Durch die Vorgabe „No React“ wird Code erzeugt, der ohne Build-Schritt direkt funktioniert
- Beispiel zum Umwandeln von eingefügtem JSON in YAML
Wenn es komplexer wird: Wechsel zu Coding-Agenten
- Mit Claude Code oder Codex CLI lassen sich wiederkehrende Aufgaben einschließlich Browser-Tests mit Playwright automatisieren
- Bei komplexeren Tools, etwa einem Bluesky-Thread-Viewer, wird auf diese Weise auf solche Agenten „hochgestuft“
- Tools werden durch direkt erstellte PRs in das Repository simonw/tools eingefügt oder aktualisiert
- Ein mit webbasierten Agenten umgesetzter Arbeitsprozess ist im Video zur Nutzung von Claude Code for web zu sehen
CDN-basierte Abhängigkeitsverwaltung
- Zusätzliche Bibliotheken werden beim Einsatz von einem CDN geladen
- Da die Artifacts/Canvas-Funktionen von LLMs eine CDN-Allowlist haben, wird durch Anweisungen wie „PDF.js verwenden“ die URL-Zusammenstellung ermöglicht
- Falls nötig, werden URLs auf cdnjs oder jsDelivr gesucht und in den Chat eingefügt
- Alles funktioniert als einzelne HTML-Datei ohne npm-Installation oder Build-Prozess
- npm plus Build-Schritt verringert die Produktivität beim schnellen Hacken und Self-Hosting einzelner Tools
- Da Versionsangaben in der CDN-URL enthalten sind, bleibt die langfristige Reproduzierbarkeit erhalten
Externes statisches Hosting
- Internes Hosting auf LLM-Plattformen ist oft durch Sandbox-Beschränkungen limitiert, sodass das Laden externer URL-Daten/Bilder oder externe Links blockiert sein können
- Aus Sicht der User Experience können Warnmeldungen, zusätzliche Ladezeiten oder Plattformwerbung dazwischenfunken
- Die Kombination „No React + CDN“ lässt sich ohne Build leicht überall veröffentlichen
- Lädt man eine HTML-Datei auf GitHub Pages hoch, ist sie sofort über eine feste URL erreichbar
- Die meisten Tools werden im Repository simonw/tools verwaltet und unter tools.simonwillison.net bereitgestellt
Ein- und Ausgabe mit Fokus auf Copy-and-Paste
- Viele Tools basieren im Kern darauf, eingefügte Eingaben umzuwandeln und das Ergebnis wieder in die Zwischenablage zu kopieren
- Weil Copy-and-Paste auf Mobilgeräten unpraktisch ist, wird häufig ein „Copy to clipboard“-Button ergänzt
- Die Betriebssystem-Zwischenablage kann mehrere Formate gleichzeitig enthalten, und auch in JavaScript-Paste-Events lässt sich auf solche „reichhaltigen“ Daten zugreifen
- Repräsentative Tools
Debugging-Tools
- Spezielle Tools werden erstellt, um die tatsächlichen Datenstrukturen zu prüfen, die im Browser verarbeitet werden
- clipboard-viewer: Zeigt alle Zwischenablage-Daten wie Text, Rich-Text, Bilder und Dateien an
- Weitere Tools
Zustand in der URL speichern
- Auch ohne Server-Datenbank lässt sich viel Zustand in einer URL speichern
- Dieses Muster wird bei Tools bevorzugt, die auf Lesezeichen und Teilen ausgelegt sind
- icon-editor: Bewahrt den Bearbeitungszustand eines 24×24-Icons direkt in der URL auf
Nutzung von localStorage
localStorage ist eine Browser-API, die Daten dauerhaft auf dem Gerät des Nutzers speichert, ohne sie einem Server preiszugeben- Es wird für große Zustände verwendet, die schwer in einer URL unterzubringen sind, oder für geheime Werte wie API-Schlüssel, um das Risiko ihrer Offenlegung in Server-Logs statischer Hosts zu vermeiden
- word-counter: Speichert Text während des Schreibens automatisch
- render-markdown: Erhält Inhalte während des Schreibens von Markdown
- haiku: Speichert einen API-Schlüssel in
localStorage und erzeugt auf Basis eines Webcam-Bildes ein Haiku
Nutzung CORS-fähiger APIs
- CORS (Cross-origin resource sharing) ist ein Mechanismus, der steuert, ob Browser-JavaScript APIs anderer Domains aufrufen darf
- APIs mit offenen CORS-Headern sind wertvolle Ressourcen für HTML-Tools, und es lohnt sich, mit der Zeit eine Liste davon aufzubauen
- Verwendet werden unter anderem iNaturalist, PyPI, GitHub (Inhalte öffentlicher Repositories sind anonym über raw.githubusercontent.com zugänglich), Bluesky und Mastodon
- Tool-Beispiele
LLM-APIs direkt aufrufen
- Die JSON-APIs von OpenAI, Anthropic und Gemini werden per CORS direkt aus dem Browser aufgerufen
- Wenn API-Schlüssel fest in HTML eingebettet werden, drohen Diebstahl und Kostenrisiken, daher wird ein „Secrets-Muster“ mit Speicherung in
localStorage verwendet
- Aus Sicht der User Experience ist das Ausstellen und Einfügen von API-Schlüsseln mit viel Reibung verbunden, funktioniert aber
- Beispiel-Tools
Keine Angst davor, Dateien zu öffnen
- Mit
<input type="file"> lassen sich Dateien direkt im Browser lesen und nutzen, ohne sie auf einen Server hochzuladen
- ocr: Wandelt mit PDF.js und Tesseract.js PDFs in Seitenbilder um und führt OCR im Browser aus
- social-media-cropper: Unterstützt nach dem Öffnen/Einfügen eines Bildes das Zuschneiden auf Social-Media-Formate wie Twitter/LinkedIn 2:1 oder Substack 1.4:1
- ffmpeg-crop: Erzeugt ffmpeg-Befehle zum Zuschneiden von Videos
Dateien zum Download anbieten
- Auch ohne Server lassen sich Dateien im Browser erzeugen und zum Download bereitstellen
- Im JavaScript-Ökosystem gibt es Bibliotheken zum Erzeugen vieler verschiedener Formate
- Beispiel-Tools
- svg-render: Rendert SVG und bietet den Download als PNG/JPEG an
- social-media-cropper: Bietet den Download zugeschnittener Bilder an
- open-sauce-2025: Erstellt einen Zeitplan und bietet den Download einer ICS-Datei zum Hinzufügen zu Kalendern an
Pyodide und WebAssembly
- Pyodide ist eine Distribution, die Python per WebAssembly kompiliert und im Browser ausführt
- Da es sich sauber über ein CDN laden lässt, gibt es keinen Grund, es nicht für HTML-Tools zu verwenden
- Über micropip können reine Python-Pakete von PyPI zusätzlich per CORS geladen werden
- Tool-Beispiele
Mit WebAssembly weiter ausdehnen
- Dass Pyodide möglich ist, liegt an WebAssembly; dadurch lässt sich auch in anderen Sprachen geschriebene Software im Browser laden
- Squoosh.app bietet mehrere Bibliotheken zur Bildkomprimierung im Browser an
- Tool-Beispiele
Frühere Tools neu kombinieren
- Wenn es mehr als 100 Tools in einer einzelnen öffentlichen Sammlung gibt, können LLMs diese leicht neu kombinieren — das ist ein weiterer Vorteil
- Manchmal wird ein früheres Tool in den Kontext kopiert; bei Coding-Agenten wird es per Namen referenziert oder als Beispielsuche herangezogen
- Der Quellcode funktionierender Tools dient als Dokumentation, einschließlich der Nutzungsmuster von Editierbibliotheken, und erhöht die Erfolgswahrscheinlichkeit von LLMs
- Vollständige Aufzeichnung des Entstehungsprozesses von pypi-changelog: Prompt-Transkript
- Der Prompt weist zunächst an, sich das Tool „pypi package explorer“ anzusehen, dann den Quellcode von zip-wheel-explorer zu lesen und anschließend ein neues Tool zu erstellen, das Wheels über die PyPI-API lädt, Diffs zwischen Versionen rendert und einen Copy-Button anbietet
- Siehe auch OCR im Browser ausführen
Aufzeichnung von Prompts und Transkripten
- Die Gewohnheit, LLM-Nutzungsverläufe zu speichern und zu veröffentlichen, kann die eigenen Fähigkeiten im Umgang damit verbessern
- Für mit chatbasierten LLM-Plattformen erstellte Tools wird die Share-Funktion als Aufzeichnungsmechanismus genutzt
- Beim Einsatz von Agenten wie Claude Code oder Codex CLI wird das vollständige Terminal-Transkript kopiert, mit terminal-to-html in HTML umgewandelt und als Gist geteilt
- Beim Speichern fertiger Tools im Repository werden Transkript-Links in Commit-Messages aufgenommen – Sammlung der Aufzeichnungen: tools.simonwillison.net/colophon
Zum Schluss
- In den letzten anderthalb Jahren hat es viel Freude gemacht, auf diese Weise gemeinsam mit LLMs HTML-Tools zu erkunden, und es hat sehr dabei geholfen, sowohl die Möglichkeiten von HTML als auch die Fähigkeiten von LLMs zu verstehen
- Wer seine eigene Tool-Sammlung starten möchte, kann einfach ein GitHub-Repository anlegen, GitHub Pages aktivieren und .html-Dateien hineinkopieren
- Als Bonus wird ein Transkript-Link bereitgestellt, in dem mit Claude Code und shot-scraper Screenshots für diesen Artikel hinzugefügt wurden
Noch keine Kommentare.