tools.joostvanderlaan.nl

Miscellaneous HTML+JavaScript tools built mostly with the help of LLMs. See also /python/ for tools written using Python.

This collection is an experiment in prompt-driven development with very low stakes.

The colophon lists commit messages and transcripts for every tool.

The code lives in javdl/tools.

Image and media

Social media cropper crop images to 2×1 for social sharing
Image resize and quality comparison compare JPEG quality settings
Image to JPEG convert PNG or WebP files to JPEG
Image to SVG trace bitmap images to SVG paths
SVG to JPEG/PNG render an SVG to a raster image
SVG sandbox display decoded SVG files safely
SVG progressive render watch an SVG draw itself
BBox cropper draw bounding boxes and read the coordinates
Mask visualizer inspect JSON masks with bounding boxes
FFmpeg crop helper generate FFmpeg commands for cropped videos
TIFF orientation viewer inspect EXIF orientation metadata
Avatar web component upload and crop avatars in place
YouTube Thumbnails list thumbnail URLs for a video

Text and document

OCR recognize text from images and PDFs in your browser
PDF OCR run optical character recognition on uploaded PDFs
Compare PDFs visualize differences between two PDFs
Render Markdown convert Markdown to HTML using the GitHub API
HTML preview type HTML on the left and see it rendered on the right
RTF to HTML inspect RTF clipboard data and convert it to HTML
Markdown math live preview of Markdown with LaTeX equations
Footnotes experiment demo linking footnotes to popups
Reading time calculator estimate how long text will take to read
Word counter count words across multiple text blocks
Text wrap balance nav explore the text-wrap: balance property
Navigation for headings generate an ID-based table of contents
Paste rich text inspect HTML and plain text on your clipboard
Paste HTML subset see which tags survive HTML sanitization
Clipboard viewer debug everything stored in your clipboard
Extract URLs pull a list of links from pasted HTML
JSON to Markdown transcript convert transcript JSON to Markdown
JSON to YAML convert between JSON and YAML formats
YAML Explorer browse YAML documents in a collapsible tree
JSON schema builder visually design a JSON schema
Incomplete JSON printer pretty print partial JSON documents
PHP Deserializer turn serialized PHP into JSON
SQL Pretty Printer reformat SQL queries for readability
Pipfile.lock parser extract dependency versions from Pipfile.lock

Data and time utilities

Timestamp Converter convert Unix timestamps to readable dates
Timezones compare times across multiple time zones
Date calculator count days between dates or only weekdays
Transfer time estimator work out how long file transfers will take
Token usage calculator summarize LLM token logs by model
LLM prices redirect quick link to the latest model pricing site
CSV marker map plot markers on a map from a CSV file
Species observation map browse recent iNaturalist sightings

GitHub and development

GitHub API write upload text or images directly to a repo
GitHub issue viewer fetch GitHub issues and comments
GitHub issue to Markdown turn an issue thread into Markdown
Zip/Wheel explorer view the contents of Python wheels and zips
Ares phonetic alphabet convert text to the ARES emergency phonetic code
Code with Claude 2025 prototype workflow for Claude coding
Side panel dialog demo experiment with the HTML dialog element
Broadcast channel chat chat across tabs using BroadcastChannel

Bluesky WebSocket Firehose watch real-time activity on Bluesky
Bluesky resolve DID convert a handle like simonwillison.net into a DID
Bluesky timeline view a user’s recent posts and replies
Bluesky thread export save a Bluesky thread to Markdown
Bluesky quote finder find all quotes of a Bluesky post
Event planner rough schedule planner stored in localStorage
Passkeys demo experiment with browser-based passkey authentication

LLM playgrounds and debuggers

Haiku generate haikus using Claude Haiku and your webcam
Chrome Prompt Playground run prompts on Chrome’s Gemini Nano
Gemini bounding box visualizer visualize bounding boxes returned by Gemini
Gemini chat client simple chat UI for the Gemini API
Gemini mask visualizer overlay segmentation masks from Gemini
Gemini image JSON renderer display images from Gemini JSON output
Claude Token Counter count tokens for Claude prompts
OpenAI audio input record and send audio to OpenAI models
OpenAI audio output generate speech with OpenAI voices
OpenAI WebRTC demo interact with OpenAI’s real-time audio API
GPT-4o Gist audio player play audio responses stored on GitHub Gist
JSON schema builder build JSON schemas with a visual editor

Miscellaneous

Arena animated animated chart of the LMSYS Chatbot Arena
California Clock Change see when daylight saving time changes
Open Sauce 2025 schedule browse the upcoming conference sessions
OpenFreeMap demo MapLibre demo with random points in San Francisco
Progress of the US presidency track days elapsed in the current term
User Agent display show your browser’s user agent string
Encrypt / decrypt message share short encrypted messages
ARIA live regions demo of dynamic page announcements
Prompts.js small library for nicer JavaScript prompts
APSW SQLite query explainer explain SQLite queries using APSW

On Observable

Blog to newsletter helps turn blog posts into a newsletter
Convert Claude JSON to Markdown for sharing Claude transcripts
Hacker News homepage with links to comments ordered by most recent first

This site is open source. Improve this page.