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
- SQL Pretty Printer - paste in SQL to pretty print it
- Pipfile.lock Dependency Parser - paste in a
Pipfile.lock JSON file to extract just the dependency versions]
- Paste rich text - paste from your clipboard and see any rich text as HTML
LLM playgrounds and debuggers
Miscellaneous
On Observable
On Observable: