Miscellaneous HTML+JavaScript tools I have built, almost all with the assistance of LLMs.
This collection is partly an experiment in how much it's possible to get done through prompting alone, against projects with extremely low stakes. The prompts I used are linked to from the commit messages for each tool. Most of them used a version of the custom instructions described here.
Everything I built with Claude Artifacts this week describes how I built a lot of these.
- OCR for PDF files and images that runs entirely in your browser
- Render Markdown renders Markdown to HTML using the GitHub Markdown API
- Annotated presentation creator to help turn slides into an annotated presentation
- Box shadow CSS generator generates the CSS for a box shadow with interactive settings
- Compare PDFs provides a visual comparison of the pages of two PDF files
- Image resize and quality comparison converts an image to JPEGs using a number of different quality settings so you can select the smallest file size that is still usefully legible (how I built this)
- YouTube Thumbnails - paste in the URL to a YouTube video, get back all of the URLs to thumbnail images of different sizes for that video
- SVG to JPEG/PNG - turn an SVG file into a rendered JPEG or PNG (how I built this)
- Jina Reader - convert any URL to copyable Markdown using the Jina Reader API
- Extract URLs - copy a section from a web page to your clipboard, paste it in here and get back a plain text list of all of the linked URLs from that section
- EXIF Data Viewer - view EXIF data for an image
- MDN Browser Support Timelines - search for web features and view the browser support timeline pulled from MDN
- Timestamp Converter - convert between Unix timestamps and human-readable dates
- Timezones - select two timezones to see a table comparing their times for the next 48 hours
- Social media cropper - open or paste in an image, crop it to 2x1 and download a compressed JPEG for use as a social media card
- Writing Style Analyzer - identify weasel words, passive voice, duplicate words - adapted from these shell scripts published by Matt Might
- Navigation for headings - paste in an HTML document with headings, each heading is assigned a unique ID and the tool then generates a navigation
<ul> - JSON to YAML - convert JSON to YAML, showing different styles of YAML output
- YAML Explorer - nested hierarchy explorer for YAML files, which can be loaded from an external URL and have their expand/collapse state persisted in the URL to the tool
- Word Counter - count words across multiple blocks of text, persisted to localStorage
- PHP Deserializer - paste in serealized PHP data, get back JSON
- Haiku generates Haikus from your camera using Claude 3 Haiku
- Chrome Prompt Playground is a UI for running prompts through the Google Chrome Canary experimental Gemini Nano LLM and saving the results in local storage
- Gemini API Image Bounding Box Visualizer - run prompts against Google Gemini models that return bounding box co-ordinates and visualize them against the original image, see this post for details
- Claude Token Counter - counts the number of tokens in a Claude prompt
- OpenAI audio input - record audio through the microphone and send it to OpenAI's audio model
- OpenAI audio output - run prompts against OpenAI that produce audio output and listen to it or download it from the browser
- Arena animated animates the progression of the LMSYS Chatbot Arena, inspired by this visualization by Peter Gostev (via Time-Winter-4319 on Reddit)
- California Clock Change - shows when the clocks will next change for daylight saving time in California
- Bluesky WebSocket Firehose showing a live firehose of Bluesky activity, described here
- Bluesky resolve DID turns a Bluesky ID such as
simonwillison.netinto a DID - Prompts.js small JavaScript library enabling
await Prompts.alert("hi")andawait Prompts.confirm("Continue?")andawait Prompts.prompt("Enter your name") - aria-live-regions demonstrates ARIA live regions
On Observable:
- Blog to newsletter helps me turn my blog into a newsletter
- Weeknotes helps me write my weeknotes
- Convert Claude JSON to Markdown for sharing Claude conversation transcripts
- Hacker News homepage with links to comments ordered by most recent first