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 colophon includes links to the prompts and chat transcripts I used to create and iterate on each of these tools.
The code lives in simonw/tools. Most of these used a version of the Claude custom instructions described here.
- 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
- SQL Pretty Printer - paste in SQL to pretty print it
- Pipfile.lock Dependency Parser - paste in a
Pipfile.lockJSON file to extract just the dependency versions] - Paste rich text - paste from your clipboard and see any rich text as HTML
- 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
- JSON schema builder - interactive tool for building a JSON schema
- 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
- APSW SQLite query explainer - paste in a SQLite SQL query, get back a detailed explanation created using
apsw.ext.query_info() - Encrypt / decrypt message - encrypt a message with a passphrase, send someone a link and they can decrypt it again
On Observable:
- Blog to newsletter helps me turn my blog into a newsletter
- Convert Claude JSON to Markdown for sharing Claude conversation transcripts
- Hacker News homepage with links to comments ordered by most recent first
To browse these tools locally without setting up a server:
# Install dependencies and build the local index
uv run --no-project --with markdown ./build_local_index.py
# Or using pip
pip install markdown
python build_local_index.pyThis creates index.html as a searchable and filterable index of all locally-available HTML tools with descriptions if available.
You can also choose to build colophon.html locally, if it doesn't already exist, which contains the development history with links to LLM transcripts (if it doesn't already exist),
The local index provides:
- Keyboard-accessible functionality to find tools by name or description
- Sorting by name or recent update date
- Direct links to open tools in your browser
- Tool descriptions from
.docs.mdfiles