- HTML·JavaScript·CSS को एक फ़ाइल में बाँधकर चलने वाले HTML tools बनाने के अनुभव के आधार पर बार-बार आने वाले डिज़ाइन पैटर्न का सार
- 2 साल में बने 150 से ज़्यादा छोटे tools वास्तव में कैसे बनाए और maintain किए जाते हैं, यह ठोस उदाहरणों के साथ समझाया गया है
- build step के बिना संरचना और CDN के उपयोग से copy-paste आधारित development flow स्वाभाविक रूप से बनता है
- URL·localStorage·फ़ाइल खोलना·डाउनलोड·Pyodide·WebAssembly तक, सिर्फ़ browser capabilities से संभव दायरा बढ़ता है
- prompts और results के रिकॉर्ड, और पुराने tools के recombination के ज़रिये tool collection खुद development की बुनियाद बनती जाती है
HTML tools की अवधारणा और उदाहरण
HTML tool की बुनियादी संरचना
- inline JavaScript और CSS के साथ single HTML file संरचना
- JSX build की ज़रूरत वाले React का उपयोग न करने से copy और redistribution आसान हो जाता है
- ज़रूरी libraries को CDNjs या jsDelivr जैसे CDN से सीधे load किया जाता है और dependencies को न्यूनतम रखा जाता है
- code size को कुछ सौ lines तक रखकर maintenance का बोझ कम किया जाता है, और LLM के लिए जल्दी पढ़ना और edit करना आसान बना रहता है
Canvas·Artifacts आधारित prototyping
- ChatGPT Canvas, Claude Artifacts, Gemini Canvas का उपयोग करके HTML tools को तुरंत चलाते हुए शुरुआती रूप तैयार करना
- “No React” शर्त डालकर build step के बिना सीधे चलने वाला code generate करना
- JSON को paste करने पर YAML में बदलने वाला उदाहरण
ज़्यादा जटिल होने पर coding agent पर स्विच
- Claude Code या Codex CLI का उपयोग करने पर Playwright आदि के साथ browser testing शामिल करते हुए repetitive work को automate किया जा सकता है
- ज़्यादा जटिल tools, जैसे Bluesky thread viewer, में ऐसे agents पर “upgrade” करने का तरीका अपनाया जाता है
- simonw/tools repository में सीधे PR बनाकर tools जोड़े या update किए जाते हैं
- web-based agent का उपयोग करके काम करने की प्रक्रिया Claude Code for web उपयोग वीडियो में देखी जा सकती है
CDN आधारित dependency management
- अतिरिक्त libraries का उपयोग करना हो तो उन्हें CDN से load किया जाता है
- LLM के Artifacts/Canvas में CDN allow-list होती है, इसलिए “PDF.js का उपयोग करो” जैसे निर्देश से URL configure हो जाता है
- ज़रूरत पड़ने पर cdnjs·jsDelivr से URL ढूँढकर chat में paste किया जाता है
- npm install या build process के बिना एक ही HTML फ़ाइल से काम चल जाता है
- npm+build step individual tools को जल्दी hack करने और self-host करने की productivity घटाते हैं
- CDN URL में version शामिल होने से लंबे समय तक reproducibility बनी रहती है
बाहरी static hosting
- LLM platform के अंदर की hosting में sandbox restrictions ज़्यादा होती हैं, इसलिए external URL data/image load करना या external links देना कई बार blocked होता है
- user experience के लिहाज़ से warning messages, extra loading और platform promotion जैसी समस्याएँ आ सकती हैं
- “No React + CDN” संयोजन build के बिना कहीं भी deploy करना आसान बनाता है
- GitHub Pages पर HTML फ़ाइल upload करते ही वह fixed URL पर उपलब्ध हो जाती है
- ज़्यादातर tools simonw/tools repository में manage किए जाते हैं और tools.simonwillison.net के ज़रिये उपलब्ध हैं
copy-paste केंद्रित input/output
- बहुत से tools pasted input को transform करके फिर clipboard पर copy करने को मुख्य mechanism की तरह इस्तेमाल करते हैं
- mobile पर copy-paste असुविधाजनक होने की वजह से “Copy to clipboard” button अक्सर जोड़ा जाता है
- OS clipboard कई formats को साथ रख सकता है, और JavaScript paste event से ऐसे “rich” data तक पहुँचा जा सकता है
- प्रमुख tools
debugging tools
- browser में संभाले जा रहे वास्तविक data structures को देखने के लिए dedicated tools बनाना
- clipboard-viewer: text·rich text·image·file सहित पूरा clipboard data दिखाना
- अतिरिक्त tools
URL में state store करना
- server DB के बिना भी URL में बहुत सारी state store की जा सकती है
- bookmark और sharing को ध्यान में रखने वाले tools में यह pattern पसंद किया जाता है
- icon-editor: 24×24 icon editing state को URL में ही सुरक्षित रखता है
localStorage का उपयोग
- localStorage एक browser API है जो user device पर data को स्थायी रूप से store करता है और server पर expose नहीं करता
- URL में रखना मुश्किल बड़े state या API keys जैसे secret values को store करने के लिए इसका उपयोग किया जाता है, ताकि static host के server logs में exposure का risk न रहे
- word-counter: लिखे जा रहे text को auto-save करना
- render-markdown: markdown लिखते समय content को बनाए रखना
- haiku: webcam image के आधार पर haiku बनाने के लिए API key को localStorage में store करना
CORS-enabled API का उपयोग
- CORS(Cross-origin resource sharing) वह mechanism है जो नियंत्रित करता है कि browser JavaScript दूसरे domain के API को call कर सकती है या नहीं
- खुले CORS headers वाले API, HTML tools के लिए फ़ायदेमंद resource होते हैं, और समय के साथ ऐसी सूची इकट्ठी करना उपयोगी है
- iNaturalist, PyPI, GitHub(public repo content को raw.githubusercontent.com से anonymous access), Bluesky, Mastodon आदि का उपयोग
- tool उदाहरण
LLM API को सीधे call करना
- OpenAI·Anthropic·Gemini JSON API को CORS के ज़रिये browser से सीधे call किया जाता है
- API key को HTML में hardcode करने पर चोरी और billing risk होता है, इसलिए localStorage में store करने वाला “secrets pattern” उपयोग किया जाता है
- user experience के लिहाज़ से API key जारी करने और paste करने की प्रक्रिया friction पैदा करती है, लेकिन यह काम करती है
- उदाहरण tools
फ़ाइल खोलने से न डरें
<input type="file"> के ज़रिये फ़ाइल को server पर upload किए बिना भी browser में सीधे पढ़कर उपयोग किया जा सकता है- ocr: PDF.js और Tesseract.js का उपयोग करके PDF को page images में बदलना और browser में OCR चलाना
- social-media-cropper: image खोलने/paste करने के बाद social media ratios में crop का समर्थन, जैसे Twitter/LinkedIn 2:1, Substack 1.4:1
- ffmpeg-crop: video crop के लिए ffmpeg command generate करना
download files उपलब्ध कराना
- server के बिना भी browser में files generate करके download के रूप में दी जा सकती हैं
- JavaScript ecosystem में कई formats बनाने वाली libraries मौजूद हैं
- उदाहरण tools
Pyodide और WebAssembly
- Pyodide एक distribution है जो Python को WebAssembly में compile करके browser में चलाता है
- इसे CDN से साफ़-सुथरे तरीके से load किया जा सकता है, इसलिए HTML tools में इसका उपयोग न करने की कोई वजह नहीं है
- micropip के ज़रिये CORS के साथ PyPI के pure Python packages अतिरिक्त रूप से load किए जा सकते हैं
- tool उदाहरण
WebAssembly से दायरा और बढ़ाना
- Pyodide की बुनियाद WebAssembly है, और इसी वजह से दूसरी languages में लिखा software भी browser में load किया जा सकता है
- Squoosh.app browser में कई image compression libraries उपलब्ध कराता है
- tool उदाहरण
पुराने tools का recombination
- 100 से ज़्यादा tools का एक public collection होने से LLM उनके recombination को आसानी से कर सकता है, और यही एक और बड़ा फ़ायदा है
- कभी-कभी पुराने tool को context में copy करके डाला जाता है, और coding agent में नाम से reference दिया जाता है या example search कराया जाता है
- काम कर रहे tools का source code editing library usage patterns सहित documentation की भूमिका निभाता है, जिससे LLM की success rate बढ़ती है
- pypi-changelog बनाने की पूरी प्रक्रिया का record: prompt transcript
- “pypi package explorer” tool देखने को कहने के बाद zip-wheel-explorer source पढ़वाकर, PyPI API से wheel लाकर versions के बीच diff render करने और Copy button देने वाला नया tool बनवाने के लिए prompt तैयार किया गया
- browser में OCR चलाना भी देखें
prompts·transcripts का record
- LLM उपयोग के record को save और public करने की आदत से अपनी ही उपयोग क्षमता को बेहतर बनाया जा सकता है
- chat-style LLM platforms में बने tools के लिए share feature को record mechanism की तरह इस्तेमाल किया जाता है
- Claude Code·Codex CLI जैसे agents का उपयोग करते समय पूरे terminal transcript को copy करके terminal-to-html से log को HTML में बदला जाता है और Gist के रूप में share किया जाता है
- तैयार tool को repo में save करते समय commit message में transcript link शामिल किया जाता है - records collection: tools.simonwillison.net/colophon
समापन
- पिछले डेढ़ साल में इस तरीके से LLM और HTML tools की खोज करना बहुत आनंददायक रहा, और HTML से क्या-क्या बनाया जा सकता है तथा LLM की क्षमताओं को समझने में इससे बड़ी मदद मिली
- अपनी tool collection शुरू करने के लिए GitHub repo बनाकर GitHub Pages चालू करें और .html फ़ाइलें copy करके डाल दें—बस यहीं से शुरुआत हो सकती है
- बोनस के रूप में Claude Code और shot-scraper का उपयोग करके इस लेख के screenshots जोड़े गए transcript का link दिया गया है
अभी कोई टिप्पणी नहीं है.