Miscellaneous HTML+JavaScript tools I have built, almost all with the assistance of LLMs.
Prompts 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
- 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
- Prompts.js small JavaScript library enabling
await Prompts.alert("hi")andawait Prompts.confirm("Continue?")andawait Prompts.prompt("Enter your name")
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