Des modèles pour créer des outils HTML utiles

• Synthèse de modèles de conception récurrents tirés de l’expérience de création de HTML tools, qui regroupent HTML, JavaScript et CSS dans un seul fichier exécutable
• Explication, à travers des cas concrets, de la manière dont plus de 150 petits outils créés sur deux ans sont réellement conçus et maintenus
• Une structure sans étape de build et l’usage de CDN favorisent naturellement un flux de développement fondé sur le copier-coller
• L’éventail de ce qu’il est possible de faire s’élargit, des URL à localStorage, en passant par l’ouverture de fichiers, le téléchargement, Pyodide et WebAssembly, uniquement avec les capacités du navigateur
• L’enregistrement des prompts et des résultats, ainsi que la recombinaison d’outils existants, renforcent une dynamique où la collection d’outils devient elle-même la base du développement

---

Concept et exemples de HTML tools

• On appelle HTML tools de petits outils web immédiatement exécutables, qui placent JavaScript et CSS dans un seul fichier HTML
• Plus de 150 ont été créés au cours des deux dernières années, la plupart étant composés de code écrit par des LLM
• Exemples représentatifs
  • svg-render : convertit du code SVG en images PNG ou JPEG
  • pypi-changelog : génère un diff des changements entre des releases d’un paquet PyPI
  • bluesky-thread : affiche un fil de discussion Bluesky dans une structure imbriquée
• L’ensemble de la collection est disponible sur tools.simonwillison.net, et la vue mensuelle permet d’observer le rythme de création
• Pour la plupart des outils, le code source GitHub ainsi que les prompts ou transcriptions sont publiés

Structure de base d’un HTML tool

• Composition en un seul fichier HTML avec JavaScript et CSS intégrés en ligne
• L’absence de React, qui nécessite une compilation JSX, rend la copie et la redistribution plus simples
• Les bibliothèques nécessaires sont chargées directement depuis des CDN comme CDNjs ou jsDelivr, avec un minimum de dépendances
• La taille du code est maintenue à quelques centaines de lignes pour réduire la charge de maintenance et conserver un état que les LLM peuvent lire et modifier rapidement

Prototypage avec Canvas et Artifacts

• Utilisation de ChatGPT Canvas, Claude Artifacts et Gemini Canvas pour exécuter immédiatement des outils HTML et en définir rapidement une première forme
• Ajout de la contrainte « No React » pour générer du code qui fonctionne directement, sans étape de build
• Exemple de conversion de JSON collé en YAML
  • Résultat ChatGPT Canvas : JSON to YAML (ChatGPT), conversation complète
  • Résultat Claude Artifact : JSON to YAML (Claude), conversation complète
  • Résultat Gemini Canvas : JSON to YAML (Gemini), conversation complète

Passage à un agent de codage quand cela devient plus complexe

• Avec Claude Code ou Codex CLI, il devient possible d’automatiser des tâches répétitives, y compris des tests navigateur avec Playwright
• Pour des outils plus complexes, comme un visualiseur de fils Bluesky, cette approche consiste à « monter en gamme » vers ces agents
• Les outils sont ajoutés ou mis à jour via des PR créées directement dans le dépôt simonw/tools
  • Dépôt : github.com/simonw/tools
  • Historique réel des PR : liste des PR fermées
• Un exemple de flux de travail avec un agent web est visible dans la vidéo sur l’usage de Claude Code for web

Gestion des dépendances via CDN

• Lorsqu’une bibliothèque supplémentaire est nécessaire, elle est chargée depuis un CDN
• Les Artifacts/Canvas des LLM imposent une allow-list de CDN, ce qui permet de construire les URL à partir d’instructions comme « utiliser PDF.js »
• Si besoin, les URL sont recherchées sur cdnjs ou jsDelivr puis collées dans la conversation
• Tout fonctionne dans un seul fichier HTML, sans installation npm ni processus de build
  • Un enchaînement npm + build réduit la productivité lorsqu’il s’agit de bidouiller rapidement un outil individuel et de l’auto-héberger
• Les URL CDN incluent les versions, ce qui aide à préserver la reproductibilité sur le long terme

Hébergement statique externe

• L’hébergement interne aux plateformes LLM comporte souvent de nombreuses limitations de sandbox, qui peuvent bloquer le chargement de données ou d’images depuis des URL externes, ainsi que les liens sortants
• Côté expérience utilisateur, cela peut aussi ajouter des avertissements, des temps de chargement supplémentaires ou de la promotion pour la plateforme
• La combinaison « No React + CDN » facilite le déploiement n’importe où, sans build
• Il suffit de placer un fichier HTML sur GitHub Pages pour obtenir immédiatement une URL fixe
  • Documentation GitHub Pages : docs.github.com/pages
• La plupart des outils sont gérés dans le dépôt simonw/tools et fournis via tools.simonwillison.net

Entrées/sorties centrées sur le copier-coller

• Beaucoup d’outils reposent sur un mécanisme central : transformer une entrée collée puis permettre de la copier à nouveau dans le presse-papiers
• Comme le copier-coller est peu pratique sur mobile, un bouton « Copy to clipboard » est souvent ajouté
• Le presse-papiers du système peut contenir plusieurs formats à la fois, et les événements paste de JavaScript permettent aussi d’accéder à ces données « riches »
• Outils représentatifs
  • hacker-news-thread-export : convertit un fil HN en texte destiné à l’entrée d’un LLM
  • paste-rich-text : extrait le HTML d’un texte enrichi collé
  • alt-text-extractor : extrait le texte alternatif après collage d’une image

Outils de débogage

• Création d’outils dédiés pour inspecter les structures de données réellement manipulées dans le navigateur
• clipboard-viewer : affiche l’ensemble des données du presse-papiers, y compris texte, texte enrichi, images et fichiers
• Autres outils
  • keyboard-debug
  • cors-fetch
  • exif

Stocker l’état dans l’URL

• Il est possible de stocker beaucoup d’état dans l’URL, même sans base de données côté serveur
• Ce modèle est privilégié pour les outils conçus avec le partage et les favoris en tête
• icon-editor : conserve directement dans l’URL l’état d’édition d’une icône 24×24

Utilisation de localStorage

• localStorage est une API navigateur qui stocke durablement des données sur l’appareil de l’utilisateur, sans les exposer au serveur
• Il sert à conserver un état volumineux difficile à placer dans l’URL, ou des valeurs secrètes comme des clés API, afin d’éviter leur exposition dans les logs d’un hébergement statique
• word-counter : sauvegarde automatiquement le texte en cours d’écriture
• render-markdown : préserve le contenu pendant la rédaction en Markdown
• haiku : stocke une clé API dans localStorage pour générer un haïku à partir d’une image webcam

Exploiter des API compatibles CORS

• CORS (Cross-origin resource sharing) est le mécanisme qui détermine si le JavaScript d’un navigateur peut appeler l’API d’un autre domaine
• Les API avec des en-têtes CORS ouverts sont des ressources particulièrement utiles pour les HTML tools, et il vaut la peine d’en constituer une liste au fil du temps
• Exemples utilisés : iNaturalist, PyPI, GitHub (avec accès anonyme au contenu de dépôts publics via raw.githubusercontent.com), Bluesky, Mastodon
• Exemples d’outils
  • species-observation-map
  • zip-wheel-explorer
  • github-issue-to-markdown
  • terminal-to-html
  • bluesky-quote-finder

Appeler directement des API de LLM

• Les API JSON d’OpenAI, Anthropic et Gemini peuvent être appelées directement depuis le navigateur via CORS
• Comme intégrer une clé API dans le HTML expose à des risques de vol et de facturation, le « secrets pattern » consistant à la stocker dans localStorage est utilisé
• Du point de vue de l’expérience utilisateur, l’émission et le collage d’une clé API créent des frictions, mais cela fonctionne
• Exemples d’outils
  • openai-audio-output
  • gemini-bbox

Ne pas avoir peur d’ouvrir des fichiers

• Avec <input type="file">, un fichier peut être lu et exploité directement dans le navigateur, sans être téléversé vers un serveur
• ocr : utilise PDF.js et Tesseract.js pour convertir un PDF en images de pages et effectuer l’OCR dans le navigateur
• social-media-cropper : permet d’ouvrir ou coller une image puis de la rogner selon des formats pour réseaux sociaux (par exemple Twitter/LinkedIn 2:1, Substack 1.4:1, etc.)
• ffmpeg-crop : génère une commande ffmpeg de recadrage vidéo

Proposer des fichiers à télécharger

• Même sans serveur, il est possible de générer un fichier dans le navigateur et de le proposer au téléchargement
• L’écosystème JavaScript dispose de nombreuses bibliothèques pour produire divers formats
• Exemples d’outils
  • svg-render : rend du SVG et propose le téléchargement en PNG/JPEG
  • social-media-cropper : permet de télécharger l’image recadrée
  • open-sauce-2025 : crée un planning et propose le téléchargement d’un fichier ICS à ajouter au calendrier

Pyodide et WebAssembly

• Pyodide est une distribution qui compile Python en WebAssembly pour l’exécuter dans le navigateur
• Comme il se charge proprement via CDN, il n’y a guère de raison de ne pas l’utiliser dans des HTML tools
• micropip permet de charger en plus, via CORS, des paquets Python purs depuis PyPI
• Exemples d’outils
  • pyodide-bar-chart
  • numpy-pyodide-lab
  • apsw-query

Aller plus loin avec WebAssembly

• Si Pyodide est possible, c’est grâce à WebAssembly, qui permet aussi de charger dans le navigateur des logiciels écrits dans d’autres langages
• Squoosh.app fournit dans le navigateur plusieurs bibliothèques de compression d’images
• Exemples d’outils
  • ocr : Tesseract.js s’appuie sur un port WebAssembly du moteur OCR Tesseract existant
  • sloccount** : portage dans le navigateur de l’utilitaire SLOCCount de David Wheeler, écrit en Perl et en C. Présentation détaillée.
  • micropython** : @micropython/micropython-webassembly-pyscript

Recombiner des outils précédents

• Disposer d’une collection publique unique de plus de 100 outils présente un autre avantage : les LLM peuvent facilement les recombiner
• Il arrive d’insérer un ancien outil dans le contexte, ou, avec un agent de codage, de s’y référer par son nom ou de lui demander de rechercher des exemples
• Le code source d’outils fonctionnels joue le rôle de documentation, jusque dans les motifs d’usage des bibliothèques d’édition, ce qui augmente les chances de réussite du LLM
• Enregistrement complet du processus de création de pypi-changelog : transcription du prompt
  • Le prompt demande de regarder l’outil « pypi package explorer », puis de lire le code source de zip-wheel-explorer, de récupérer les wheels via l’API PyPI, d’afficher le diff entre versions et d’ajouter un bouton Copy dans un nouvel outil
• Voir aussi exécuter l’OCR dans le navigateur

Enregistrer prompts et transcriptions

• Prendre l’habitude de sauvegarder et publier l’historique d’utilisation des LLM permet d’améliorer sa propre maîtrise de ces outils
• Pour les outils créés sur des plateformes de LLM en mode chat, la fonction de partage sert de moyen d’archivage
• Lors de l’utilisation d’agents comme Claude Code ou Codex CLI, la transcription complète du terminal est copiée puis transformée en HTML avec terminal-to-html, avant d’être partagée sous forme de Gist
• Lorsqu’un outil finalisé est enregistré dans le dépôt, le message de commit inclut un lien vers la transcription — recueil des archives : tools.simonwillison.net/colophon

Conclusion

• Depuis un an et demi, l’exploration des LLM et des outils HTML de cette manière a été extrêmement plaisante et a beaucoup aidé à comprendre à la fois l’étendue de ce que l’on peut créer en HTML et les capacités des LLM
• Pour démarrer sa propre collection d’outils, il suffit de créer un dépôt GitHub et d’activer GitHub Pages pour commencer simplement en y copiant des fichiers .html
• En bonus, un lien vers la transcription ayant servi à ajouter les captures d’écran de cet article avec Claude Code et shot-scraper est fourni
  • Transcription Claude Code + shot-scraper