@simonw
Here's a collection of useful patterns I've found after vibe-coding 150 different single-file HTML tools over the past couple of years https://t.co/CXs38rwO92 https://t.co/UuN4EfupAs
🐦 Twitter Post Details
Viewing enriched Twitter post
📊 Media Metadata
{
"media": [
{
"url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_0.jpg?",
"media_url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_0.jpg?",
"type": "photo",
"filename": "media_0.jpg"
},
{
"url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_1.jpg?",
"media_url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_1.jpg?",
"type": "photo",
"filename": "media_1.jpg"
},
{
"url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_2.jpg?",
"media_url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_2.jpg?",
"type": "photo",
"filename": "media_2.jpg"
},
{
"url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_3.jpg?",
"media_url": "https://crmoxkoizveukayfjuyo.supabase.co/storage/v1/object/public/media/posts/1998862222395846726/media_3.jpg?",
"type": "photo",
"filename": "media_3.jpg"
}
],
"processed_at": "2025-12-11T00:28:39.321557",
"pipeline_version": "2.0"
}🔧 Raw API Response
{
"type": "tweet",
"id": "1998862222395846726",
"url": "https://x.com/simonw/status/1998862222395846726",
"twitterUrl": "https://twitter.com/simonw/status/1998862222395846726",
"text": "Here's a collection of useful patterns I've found after vibe-coding 150 different single-file HTML tools over the past couple of years https://t.co/CXs38rwO92 https://t.co/UuN4EfupAs",
"source": "Twitter for iPhone",
"retweetCount": 24,
"replyCount": 9,
"likeCount": 265,
"quoteCount": 1,
"viewCount": 18784,
"createdAt": "Wed Dec 10 21:07:45 +0000 2025",
"lang": "en",
"bookmarkCount": 277,
"isReply": false,
"inReplyToId": null,
"conversationId": "1998862222395846726",
"displayTextRange": [
0,
158
],
"inReplyToUserId": null,
"inReplyToUsername": null,
"author": {
"type": "user",
"userName": "simonw",
"url": "https://x.com/simonw",
"twitterUrl": "https://twitter.com/simonw",
"id": "12497",
"name": "Simon Willison",
"isVerified": false,
"isBlueVerified": true,
"verifiedType": null,
"profilePicture": "https://pbs.twimg.com/profile_images/378800000261649705/be9cc55e64014e6d7663c50d7cb9fc75_normal.jpeg",
"coverPicture": "https://pbs.twimg.com/profile_banners/12497/1642751752",
"description": "Creator @datasetteproj, co-creator Django. PSF board. Hangs out with @natbat. He/Him. Mastodon: https://t.co/t0MrmnJW0K Bsky: https://t.co/OnWIyhX4CH",
"location": "San Francisco, CA",
"followers": 123825,
"following": 5593,
"status": "",
"canDm": true,
"canMediaTag": true,
"createdAt": "Wed Nov 15 13:18:50 +0000 2006",
"entities": {
"description": {
"urls": [
{
"display_url": "fedi.simonwillison.net/@simon",
"expanded_url": "https://fedi.simonwillison.net/@simon",
"url": "https://t.co/t0MrmnJW0K",
"indices": [
96,
119
]
},
{
"display_url": "simonwillison.net",
"expanded_url": "http://simonwillison.net",
"url": "https://t.co/OnWIyhX4CH",
"indices": [
126,
149
]
}
]
},
"url": {
"urls": [
{
"display_url": "simonwillison.net",
"expanded_url": "https://simonwillison.net/",
"url": "https://t.co/p4R0XiEYEc",
"indices": [
0,
23
]
}
]
}
},
"fastFollowersCount": 0,
"favouritesCount": 61941,
"hasCustomTimelines": true,
"isTranslator": false,
"mediaCount": 3794,
"statusesCount": 59283,
"withheldInCountries": [],
"affiliatesHighlightedLabel": {},
"possiblySensitive": false,
"pinnedTweetIds": [],
"profile_bio": {},
"isAutomated": false,
"automatedBy": null
},
"extendedEntities": {
"media": [
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "\n The anatomy of an HTML tool\n Prototype with Artifacts or Canvas\n Switch to a coding agent for more complex projects\n Load dependencies from CDNs\n Host them somewhere else\n Take advantage of copy and paste\n Build debugging tools\n Persist state in the URL\n Use localStorage for secrets or larger state\n Collect CORS-enabled APIs\n LLMs can be called directly via CORS\n Don’t be afraid of opening files\n You can offer downloadable files too\n Pyodide can run Python code in the browser\n WebAssembly opens more possibilities\n Remix your previous tools\n Record the prompt and transcript\n Go forth and build\n",
"id_str": "1998861409808191488",
"indices": [
159,
182
],
"media_key": "3_1998861409808191488",
"media_url_https": "https://pbs.twimg.com/media/G71h3J7akAAuOEH.jpg",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 882,
"w": 1026,
"resize": "fit"
},
"medium": {
"h": 882,
"w": 1026,
"resize": "fit"
},
"small": {
"h": 585,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 882,
"width": 1026,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 1026,
"h": 575
},
{
"x": 0,
"y": 0,
"w": 882,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 774,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 441,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 1026,
"h": 882
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998861409808191488"
}
}
},
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "Screenshot of PyPI package changelog tool showing the differences between llm 0.27 and 0.27.1 with a copy diff button",
"id_str": "1998861876730744832",
"indices": [
159,
182
],
"media_key": "3_1998861876730744832",
"media_url_https": "https://pbs.twimg.com/media/G71iSVWbUAA0lha.png",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 800,
"w": 800,
"resize": "fit"
},
"medium": {
"h": 800,
"w": 800,
"resize": "fit"
},
"small": {
"h": 680,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 800,
"width": 800,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 800,
"h": 448
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
},
{
"x": 49,
"y": 0,
"w": 702,
"h": 800
},
{
"x": 200,
"y": 0,
"w": 400,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998861876730744832"
}
}
},
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "Screenshot of SVG to JPEG/PNG tool showing the classic SVG tiger with options to convert to JPG or PNG with a custom background color and output width",
"id_str": "1998862127503900673",
"indices": [
159,
182
],
"media_key": "3_1998862127503900673",
"media_url_https": "https://pbs.twimg.com/media/G71ig7jaAAE7IlX.png",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 800,
"w": 800,
"resize": "fit"
},
"medium": {
"h": 800,
"w": 800,
"resize": "fit"
},
"small": {
"h": 680,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 800,
"width": 800,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 800,
"h": 448
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 702,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 400,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998862127503900673"
}
}
}
]
},
"card": null,
"place": {},
"entities": {
"hashtags": [],
"media": [
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "\n The anatomy of an HTML tool\n Prototype with Artifacts or Canvas\n Switch to a coding agent for more complex projects\n Load dependencies from CDNs\n Host them somewhere else\n Take advantage of copy and paste\n Build debugging tools\n Persist state in the URL\n Use localStorage for secrets or larger state\n Collect CORS-enabled APIs\n LLMs can be called directly via CORS\n Don’t be afraid of opening files\n You can offer downloadable files too\n Pyodide can run Python code in the browser\n WebAssembly opens more possibilities\n Remix your previous tools\n Record the prompt and transcript\n Go forth and build\n",
"id_str": "1998861409808191488",
"indices": [
159,
182
],
"media_key": "3_1998861409808191488",
"media_url_https": "https://pbs.twimg.com/media/G71h3J7akAAuOEH.jpg",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 882,
"w": 1026,
"resize": "fit"
},
"medium": {
"h": 882,
"w": 1026,
"resize": "fit"
},
"small": {
"h": 585,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 882,
"width": 1026,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 1026,
"h": 575
},
{
"x": 0,
"y": 0,
"w": 882,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 774,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 441,
"h": 882
},
{
"x": 0,
"y": 0,
"w": 1026,
"h": 882
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998861409808191488"
}
}
},
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "Screenshot of PyPI package changelog tool showing the differences between llm 0.27 and 0.27.1 with a copy diff button",
"id_str": "1998861876730744832",
"indices": [
159,
182
],
"media_key": "3_1998861876730744832",
"media_url_https": "https://pbs.twimg.com/media/G71iSVWbUAA0lha.png",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 800,
"w": 800,
"resize": "fit"
},
"medium": {
"h": 800,
"w": 800,
"resize": "fit"
},
"small": {
"h": 680,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 800,
"width": 800,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 800,
"h": 448
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
},
{
"x": 49,
"y": 0,
"w": 702,
"h": 800
},
{
"x": 200,
"y": 0,
"w": 400,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998861876730744832"
}
}
},
{
"display_url": "pic.x.com/UuN4EfupAs",
"expanded_url": "https://x.com/simonw/status/1998862222395846726/photo/1",
"ext_alt_text": "Screenshot of SVG to JPEG/PNG tool showing the classic SVG tiger with options to convert to JPG or PNG with a custom background color and output width",
"id_str": "1998862127503900673",
"indices": [
159,
182
],
"media_key": "3_1998862127503900673",
"media_url_https": "https://pbs.twimg.com/media/G71ig7jaAAE7IlX.png",
"type": "photo",
"url": "https://t.co/UuN4EfupAs",
"ext_media_availability": {
"status": "Available"
},
"features": {
"large": {
"faces": []
},
"medium": {
"faces": []
},
"small": {
"faces": []
},
"orig": {
"faces": []
}
},
"sizes": {
"large": {
"h": 800,
"w": 800,
"resize": "fit"
},
"medium": {
"h": 800,
"w": 800,
"resize": "fit"
},
"small": {
"h": 680,
"w": 680,
"resize": "fit"
},
"thumb": {
"h": 150,
"w": 150,
"resize": "crop"
}
},
"original_info": {
"height": 800,
"width": 800,
"focus_rects": [
{
"x": 0,
"y": 0,
"w": 800,
"h": 448
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 702,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 400,
"h": 800
},
{
"x": 0,
"y": 0,
"w": 800,
"h": 800
}
]
},
"allow_download_status": {
"allow_download": true
},
"media_results": {
"result": {
"media_key": "3_1998862127503900673"
}
}
}
],
"symbols": [],
"timestamps": [],
"urls": [
{
"display_url": "simonwillison.net/2025/Dec/10/ht…",
"expanded_url": "https://simonwillison.net/2025/Dec/10/html-tools/",
"url": "https://t.co/CXs38rwO92",
"indices": [
135,
158
]
}
],
"user_mentions": []
},
"quoted_tweet": null,
"retweeted_tweet": null,
"article": null
}