tools.simonwillison.net colophon

The tools on tools.simonwillison.net were mostly built using AI-assisted programming. This page lists 93 tools and their development history.

This page lists the commit messages for each tool, many of which link to the LLM transcript used to produce the code.

Here's how I built this colophon page. The descriptions for each of the tools were generated using Claude 3.7 Sonnet.

This tool converts Hacker News threads into a structured text format. Enter a Hacker News post ID or URL in the input field, then click "Fetch and format" to retrieve the thread. The tool organizes comments in a hierarchical format with path numbers (like [1.2.3]) indicating the reply structure, making it easy to track conversation flow and export threads for reference elsewhere.

Development history (2 commits)
7c4615 April 12, 2025 07:59

The LLM pricing calculator allows you to determine costs for working with large language models. Enter your input and output token counts, along with the respective pricing per million tokens, to calculate the total cost in both dollars and cents. The tool includes a comprehensive table of current model prices that you can sort by model name, input cost, or output cost, and clicking any model automatically fills in its pricing details.

Development history (27 commits)
148bc1 October 16, 2024 20:50
2e0a70 October 25, 2024 16:32
o1-preview and o1-mini
3e633a October 25, 2024 16:38
Clarify prompt/completion tokens, use sentence case
720f22 November 04, 2024 10:34
7dcb4c December 03, 2024 16:51
Prices for Amazon Nova models

https://aws.amazon.com/bedrock/pricing/
561dc2 December 05, 2024 06:12
cbba87 December 30, 2024 08:52
o1 and o1-preview same cost
c510cb January 21, 2025 08:44
deepseek-chat and deepseek-reasoner
639629 January 21, 2025 09:13
All per million tokens
576800 January 21, 2025 09:21
e94be7 January 21, 2025 09:51
Display dynamic prices correctly
0f3607 January 21, 2025 09:51
Update disclaimer
4f1863 January 31, 2025 12:52
o3-mini
c29b97 January 31, 2025 19:12
o1-mini price drop to match o3-mini
b2b5a8 February 16, 2025 12:23
chatgpt-4o-latest
08b464 February 25, 2025 12:11
gemini-2.0-flash-lite and updated Gemini pricing

https://ai.google.dev/gemini-api/docs/pricing

Also Claude 3.7 Sonnet
9cab8d February 27, 2025 12:54
GPT-4.5 is eye-poppingly expensive

https://openai.com/api/pricing/
96f34e March 19, 2025 16:48
o1-pro
4ac544 April 03, 2025 11:04
5ad150 April 09, 2025 22:37
Grok 3 pricing

https://x.ai/api
07c91d April 10, 2025 06:48
354b7f April 10, 2025 12:47
Tweaked headings
d0d1ac April 10, 2025 12:48
More sentence case
a06508 April 10, 2025 14:44
0187e86 April 10, 2025 21:28
Update llm-prices.html

> The only remaining hiccup is that `aria-sort` should go on the `<th>`s rather than the buttons

https://dragonscave.space/@jscholes/114315875469821641

https://claude.ai/share/0ba69bfa-7235-4ca7-ae3a-dbfeed8c555c

This page demonstrates an interactive footnote system that enhances content by providing additional information without disrupting reading flow. When users hover over or click a footnote marker, a popup appears with the footnote text, eliminating the need to scroll to the bottom of the page. The system includes accessibility features with proper ARIA roles and supports both desktop and mobile interactions through hover and click events.

Development history (1 commit)
77c9ac0 April 08, 2025 15:49

This tool converts rich text into a clean HTML subset by letting you paste formatted content from any source. Paste text into the editable area to generate sanitized HTML code that only includes supported elements like paragraphs, headings, links, and lists. The tool provides both a code view of the resulting HTML and a live preview window to verify the output appearance.

Development history (1 commit)

The Census Explorer application provides an interface to explore American Community Survey data through the Census Reporter API. Users can search for geographic areas and specific census tables, then visualize the resulting data. The interface follows a clear three-step workflow: first search and select geographies and tables, then view the data in tabular or chart formats. Data can be toggled between different ACS releases and refreshed as needed.

Development history (1 commit)
43c7b98 April 04, 2025 11:42

This tool helps you explore U.S. Census data through the Census Reporter API. Search for geographical areas like cities or counties, then select data tables related to demographics, income, or other census topics. Once you've selected both a geography and at least one data table, you can retrieve and view the census data with estimates and margins of error displayed in organized tables.

Development history (1 commit)
d98b017 April 04, 2025 11:40
Create census-reporter-gemini.html

https://gemini.google.com/share/d4f49e8a2bd3

This page provides a demonstration environment for testing and understanding passkeys. Users can register new passkeys, authenticate with existing ones, and manage their stored credentials. The demo operates entirely in the browser using localStorage for credential storage, with a debugging section that shows technical details of credential creation and authentication responses.

Development history (2 commits)
6b0d8cd April 04, 2025 08:36
Update passkeys.html

Prompt:

> Make it so that the result of authenticating is displayed in a neat way below that authentication button

The Lightning Timer is a customizable countdown application designed for time-sensitive presentations or tasks. Set your preferred duration and optional warning time through the settings gear icon. Click the timer to start, pause, or reset it. The screen changes color as time runs low, providing a visual cue when your allotted time is nearly exhausted.

Development history (2 commits)
7b5e57d April 03, 2025 11:18
Lightning timer now has configuration controls

Lots of improvements: https://claude.ai/share/d58b4388-bf15-47e3-9c96-ad763a414666

The Incomplete JSON Pretty Printer formats truncated or incomplete JSON data into a readable structure. It features automatic formatting as you type, copy to clipboard functionality, and a sample example to demonstrate its capabilities. The tool helps developers visualize and work with partial JSON data by applying proper indentation and structure to make the content more readable.

Development history (2 commits)
30a947 March 21, 2025 10:10
Create incomplete-json-printer.html

Created with GPT-4.5 and Canvas

https://chatgpt.com/share/67dd9d55-7f70-8006-b55d-72730f60ddbe
85618b7 March 27, 2025 17:05
Update incomplete-json-printer.html

Many improvements, including a Pelican themed example and fix to indentation: https://claude.ai/share/22dc4b58-e8c4-44a4-9650-a37d21513b8d

The Clipboard Format Viewer allows you to inspect the raw data available when pasting content. When you paste text, images, files, or other content, the tool displays all available formats and their corresponding data in an organized view. Each format is shown in its own section, with special handling for images and files to provide visual previews where possible.

Development history (3 commits)
0b1822 October 20, 2024 21:20
box-sizing: border-box;

This tool visualizes bounding box coordinates returned by the Gemini API for uploaded images. Upload an image, enter a prompt asking for object detection, and the application will process your request using the selected Gemini model. The tool displays the original image with colored bounding boxes overlaid on a coordinate grid (0-1000), and extracts each detected region as a separate image for detailed inspection.

Development history (9 commits)
4be279 August 26, 2024 08:34
Rename gemini-bbox-tool.html to gemini-bbox.html
3aa392 August 26, 2024 08:39
Better h1
665528 August 26, 2024 10:41
b382ff August 27, 2024 14:34
Ability to try different models

https://gist.github.com/simonw/d77ab3ef497ed79f353633322cc6d38a

I tweaked it so the initial image preview would be hidden on prompt response, and changed the sort order of the select box options.
79898f October 03, 2024 15:08
Update Gemini model lists
15376f October 03, 2024 15:24
06a135 December 11, 2024 09:18
gemini-2.0-flash-exp
c8706b February 05, 2025 09:43
New Gemini models for bbox tool

https://simonwillison.net/2025/Feb/5/gemini-2/

Plus fixed cropped image display to have a max width 100
3c6702b March 25, 2025 12:21
Updated model list, including new gemini-2.5-pro-exp-03-25

https://claude.ai/share/d1deed46-931c-4e24-8e44-b9b695ad245a

The Avatar Web Component allows users to select, crop, and resize profile images directly in the browser. Users can upload images by clicking, drag-and-drop, or pasting from clipboard, then precisely crop the image using the interactive resizing handles. The component automatically maintains the proper aspect ratio, generates a JPEG preview, and saves the resulting image data to a specified form field.

Development history (1 commit)
51b0130 March 24, 2025 11:49

This tool checks the storage size of any Hugging Face model. Enter a model URL or path (like "mlx-community/Llama-3.2-3B-Instruct-4bit"), and the application will fetch and display the model's size in MB or GB. The tool accepts both full Hugging Face URLs and direct model paths as input.

Development history (1 commit)
ab388dd March 24, 2025 07:53

The Filter Badge Component allows users to create and manage data filtering criteria through an interactive interface. Users can add filters by clicking the "Add filter" button, then select a column, operator, and value to define each filter. Each part of the filter is keyboard accessible, with support for tab navigation, Enter/Space key actions, and direct value editing through a popover interface.

Development history (2 commits)
79a40e March 18, 2025 15:06
57dfbef March 18, 2025 15:14
Mobile display tweaks + better keyboard support

https://claude.ai/share/98fc30dc-be94-4879-b856-06fa027bad15

This page tracks the progress of the current U.S. presidential term with a visual progress bar and statistical information. It displays days elapsed, days remaining, and the percentage of the term completed, while also tracking the time until midterm elections. The progress bar includes a marker showing when midterms occur during the presidential term, with additional statistics about the days until midterms and how far through the first half of the term we currently are.

Development history (4 commits)
1cba17 February 21, 2025 20:17
Create progress.html

Prompt to my custom Claude project for artifacts was:

> Build a progress bar through the current US presidency

It did the 2021 to 2025 one so I said:

> That's wrong it started in January 2025 and ends four years later
c90501 February 21, 2025 20:20
Update progress.html

Prompt:

> Make it larger on my phone
806768 March 15, 2025 07:37
Update progress.html

Progress to midterms. https://claude.ai/share/dd9252c1-a24f-4c8d-9429-6195ce863960
7adcf4d March 18, 2025 11:31

This page displays a product catalog with a side panel dialog system. When users click on a product, details appear in a side panel implemented using the HTML <dialog> element. The panel can operate in two modes: non-modal (allowing interaction with the main page) or modal (blocking interaction until closed). Users can also submit feedback about products through a form in the side panel.

Development history (3 commits)
d69f5b March 14, 2025 16:02
fe9aae March 16, 2025 08:44
cdcd42f March 16, 2025 11:45

The Species observation map allows you to search for wildlife sightings around the world using data from iNaturalist. Search for a species by name, specify how far back in time to look, and view observations plotted on an interactive map with clustered markers. Each marker provides detailed information about the observation including date, location, observer name, and photos when available.

Development history (2 commits)
6d38c5 March 14, 2025 12:59
b875298 March 14, 2025 20:18

This tool enables you to create a subset of your Swagger API documentation by selecting specific endpoints. Paste your Swagger JSON, choose the desired paths and methods, and generate a new Swagger document containing only those selected endpoints. The tool automatically includes all referenced schema definitions to ensure your subset documentation remains valid and complete.

Development history (1 commit)
4927798 March 14, 2025 12:50

The Token Usage Calculator analyzes token consumption across different LLM API calls. Paste YAML-formatted data from the llm logs -su command to view a breakdown of input and output tokens grouped by model name. The calculator automatically processes your data and displays total token usage statistics for each model detected in your logs.

Development history (1 commit)
330106e March 13, 2025 17:20

This guide provides a comprehensive overview of CSS text wrapping properties, including word-wrap/overflow-wrap, word-break, white-space, text-overflow, hyphens, line-break, and text-wrap. Each property is explained with multiple visual examples demonstrating different values, and includes tables summarizing the available options with their effects on text display. The page also includes browser compatibility information for each property and useful notes about implementation requirements.

Development history (1 commit)
bfc5f5e March 11, 2025 08:00

This web application provides information about clock changes due to Daylight Saving Time in California (Pacific Time zone). The page displays the most recent time change, the upcoming change, current time status (PST or PDT), and offers helpful information about how the change might affect daily routines, including pet schedules. The application automatically detects if users are in the Pacific timezone and shows relevant timing details for both past and future clock adjustments.

Development history (5 commits)
e62d0d November 02, 2024 22:23
e7c655 November 03, 2024 08:30
5f7244 November 03, 2024 08:44
Clarify gain/loss one hour of sleep
2fcb00 March 10, 2025 21:14
Update California clock change to include text about if is currently daylight savings time or not

Prompt was:

> Update California clock change to include text about if is currently daylight savings time or not

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/simonw/tools?shareId=XXXX-XXXX-XXXX-XXXX).
fb99136 March 10, 2025 21:26
Fix DST bug

I prompted Claude 3.7 Sonnet thinking with this file and:

> Check the DST display logic

It suggested this fix.

The Social Media Card Cropper allows you to create customized social media cards with correct aspect ratios for different platforms. Upload images by dropping, selecting, or pasting from clipboard, then crop and adjust your image with the interactive controls. Choose from preset aspect ratios for Twitter/LinkedIn, Facebook, Instagram, or Substack, adjust the background color, and download your finished card in the optimal dimensions for your selected platform.

Development history (5 commits)
a10954 February 28, 2025 16:02
a57b5c February 28, 2025 16:10
zoom in and out and background color

https://gist.github.com/simonw/a3e7f3ce34e26ab7c207fe641853e4a0

Pure vibe based coding, I hacked at it until it seemed to work, didn't even look at the code
43d55a March 09, 2025 09:22
Note it's for Substack
0b619c1 March 09, 2025 09:31

This tool allows you to extract HTML code from formatted text copied from websites. Paste content into the editable area to see the underlying HTML code displayed in a dedicated output field. The extracted HTML can be copied to your clipboard with a single click and a preview shows how the content will render when used in another webpage.

Development history (3 commits)
fd9daf March 07, 2025 14:58
63852f March 07, 2025 15:05
Maybe fix for Windows?
49c382e March 07, 2025 20:35
Paste rich text in README

This tool enables secure message encryption with a passphrase. Enter your message and a passphrase to generate an encrypted link that you can share with others. Recipients can decrypt the message by visiting the link and entering the correct passphrase. All encryption and decryption occurs in the browser using the Web Crypto API for enhanced security.

Development history (1 commit)
b4e3e15 March 07, 2025 20:34

The JSON Schema Builder allows you to create JSON schemas with a visual interface. Add properties by specifying their name, type, and whether they're required, then build nested objects and arrays. Your schema is displayed in real-time and can be copied to the clipboard with a single click. The tool also automatically saves your work in the URL, enabling you to share your schema with others.

Development history (1 commit)
0a186e5 March 07, 2025 18:17

This tool converts simple schema definitions written in a compact DSL format into JSON Schema. Enter field definitions with types and descriptions in the text area, and the converter generates the appropriate JSON Schema in real-time. Toggle the "Array items schema" checkbox to wrap your schema in an array structure, and use the "Load example" button to see how the syntax works.

Development history (1 commit)
e3f4763 March 05, 2025 11:17
Create schema-dsl.html

https://claude.ai/share/c89fc8fd-b868-491f-bece-bd5b97acac1c but then I had to modify it a bunch to get it to work - the micropip install of llm didn't work because not all dependencies work in Pyodide.

This tool extracts and formats Python dependencies from a Pipfile.lock file. Paste your Pipfile.lock JSON content into the text area and click "Parse Dependencies" to convert it into both Pipfile format and requirements.txt format. You can copy either format to your clipboard using the designated buttons.

Development history (1 commit)
0a11eb2 March 03, 2025 16:30
Pipfile.lock Dependency Parser

Built this today to help fix an old development environment.

https://gist.github.com/simonw/e13064e2e830db77887373ced5df1b5b

This text editor allows you to create and manage multiple writing sections with real-time word and character counts. Each section auto-saves your content to local storage after one second of inactivity, ensuring your work is preserved between sessions. You can add new sections or remove existing ones as needed, with all changes automatically backed up.

Development history (4 commits)
e831d3 December 19, 2024 12:11
98408b December 19, 2024 12:24
40aa7b December 19, 2024 17:31
Show textarea when page first loads

I didn't even use an LLM to write this!
cb33238 February 25, 2025 21:52

Jina Reader provides a web interface to view and process online content using the Jina Reader API. Enter a URL to fetch its content in various formats (Markdown, HTML, Text, or LLM Markdown), and the result will be displayed in both raw and rendered forms. You can also run Claude AI analysis on the fetched content using customizable prompts to generate summaries or other text transformations.

Development history (5 commits)
7acfb0 October 14, 2024 09:24
5a8732 October 14, 2024 10:51
206d99 October 14, 2024 18:01
box-sizing: border-box on iframe
727bbf October 14, 2024 18:14
7d7e2ce February 12, 2025 08:45
Optionally run Jina reader output through Claude with summary prompt

https://gist.github.com/simonw/f768916929eb5b7268354ddcb1021b94

This tool analyzes SQLite queries using the APSW (Another Python SQLite Wrapper) library. Enter your SQL query in the main text area or set up initial database schema in the collapsible section. You can add parameter values if your query uses parameterized statements. After clicking "Execute query," the tool provides detailed information about query execution plans, expanded SQL statements, and other diagnostic data to help you understand and optimize your SQLite queries.

Development history (1 commit)
0af3172 February 06, 2025 17:47

This SQL Pretty Printer tool formats SQL queries according to your preferences. You can customize the dialect, tab width, keyword casing, and indentation style to match your project requirements. The tool displays a formatted version of your SQL in real-time as you type, and provides a copy button for easily transferring the formatted query to your clipboard.

Development history (1 commit)
71a762d February 03, 2025 22:38

This tool converts GitHub issues into markdown format for easy reference and sharing. Enter a GitHub issue URL, click "Convert to markdown," and the tool will fetch the issue content including all comments and format it as markdown. The converted markdown can be copied to your clipboard with a single click for use in documentation or other contexts.

Development history (1 commit)
d47fdbd February 03, 2025 14:43

This tool allows you to compare image quality and filesize at different compression levels. Upload an image by dragging, clicking, or pasting it into the interface. The tool will display versions of your image at original and half size with various quality settings (100%, 90%, 70%, 50%, and 30%), showing file size for each variation. For transparent images, a background color picker lets you choose the fill color.

Development history (3 commits)
5b41e7 July 25, 2024 15:01
Create image-resize-quality.html

Adapted from this Claude artifact https://claude.site/artifacts/45ecf75e-d8e2-4d2a-a3b9-d8c07c7bd757
fa5a39 August 01, 2024 10:46
Added paste support

curl 'https://tools.simonwillison.net/image-resize-quality' | llm -m claude-3.5-sonnet --system 'output just the new HTML for a version of this page that also allows users to paste images'
41c4d15 January 29, 2025 09:43
Add background color feature to image-resize-quality

https://gist.github.com/simonw/04e9fd78af5f739d97deb69a75c9aa2a

This tool converts images to JPEG format with adjustable quality. Users can upload an image by clicking on the drop zone or dragging and dropping a file, then adjust the JPEG compression quality using the slider. The converted image is displayed with its data URI and approximate file size, allowing users to find the optimal balance between image quality and file size.

Development history (1 commit)
a124524 January 27, 2025 10:49
image-to-jpeg.html

I built this one using GPT-4 back in April 2023

https://gist.github.com/simonw/66918b6cde1f87bf4fc883c67735195d

This tool renders JSON responses from Claude API that contain citations. Paste a JSON response into the text area and click "Render message" to display the message with proper formatting and citation blockquotes. The renderer uses a sandboxed iframe for security, ensuring the content is displayed safely while maintaining proper styling and organization of the text and cited passages.

Development history (2 commits)
d97ff4e January 23, 2025 20:05
Use Title Case

This tool converts PHP serialized data to JSON format. Paste serialized PHP data in the input field and it will automatically be converted to formatted JSON, which you can then copy to your clipboard with a single click. If there are any errors in the deserialization process, the tool will display a helpful error message.

Development history (1 commit)
4c11c72 January 22, 2025 15:26

This demo page allows you to test how screen readers announce dynamic content changes through ARIA live regions. The interface lets you choose between "assertive" and "polite" announcement priorities, then test immediate or delayed notifications. The page includes detailed instructions for enabling and using VoiceOver on both macOS and iOS devices to experience how assistive technologies process these dynamic updates.

Development history (2 commits)
30ad8d4 January 07, 2025 19:50
Switch between polite and assertive

This tool resolves a Bluesky handle to its corresponding DID (Decentralized Identifier). Enter any Bluesky handle in the input field and click "Resolve" to retrieve the associated DID. The tool communicates with the Bluesky API and displays the result or an error message if the handle cannot be found.

Development history (2 commits)
1472c5d January 06, 2025 10:49
Use public.api.bsky.app instead

Much higher rate limits: https://bsky.app/profile/futur.blue/post/3lf3q6hlqgk2o

The Bluesky WebSocket Feed Monitor connects to the Bluesky social network's WebSocket API and displays real-time feed data in a log. Users can establish a connection, send custom JSON messages to filter the feed by specific collections or user DIDs, and view incoming messages in the output area. The interface provides controls to connect, disconnect, send messages, and clear the log history.

Development history (2 commits)
7c6af8e January 06, 2025 10:05
Ability to send messages back to Bluesky firehose

https://gist.github.com/simonw/9c4525e0364d60c1a8a7bd663ff0df35

YAML Explorer is a web-based tool that allows you to visualize and explore YAML data in an interactive tree view. You can paste YAML directly into the text area or load it from a URL, and the tool will convert it into a navigable structure with expandable sections. The explorer preserves your view state in the URL so you can share specific views with others.

Development history (1 commit)
ee48769 December 22, 2024 14:44

This interface connects to OpenAI's real-time audio API using WebRTC technology. Users can start an audio session by providing their OpenAI API token and selecting a voice option, allowing for voice-based interactions with GPT-4o. The page displays detailed statistics about each interaction including token usage and estimated costs, while also maintaining a running log of all session events.

Development history (4 commits)
3b2429 December 17, 2024 14:06
Rename openai-webrtc to openai-webrtc.html
8bb09d December 17, 2024 14:12
55c754 December 17, 2024 14:28

The Gist Audio Player allows you to play and download audio from GitHub Gists containing OpenAI GPT-4o audio responses. Enter a Gist URL containing base64-encoded WAV data from the GPT-4o-audio-preview model, and the player will extract the audio, display the transcript, and provide playback controls. You can also share specific audio by using the URL parameter format ?gist=GIST_ID.

Development history (2 commits)
e92642 October 27, 2024 20:32
0f89a8f December 17, 2024 18:15
Update gpt-4o-audio-player.html

Handle long truncated gists

Claude prompt was:

> This breaks if the JSON is too long and is truncated by the gist API

This page allows you to generate human-like speech from text using OpenAI's GPT-4o audio models. Enter your prompts, select a model and voice, then generate audio output which can be played, downloaded, or shared via GitHub Gist. The interface displays both the audio player and a transcript of the spoken content, along with the complete API response for reference.

Development history (7 commits)
4b61d0 October 27, 2024 20:55
8c026b October 27, 2024 21:20
b9fa5d October 27, 2024 21:25
box-sizing: border-box;
fb5160 November 28, 2024 09:18
e717ab December 17, 2024 13:48
d6c784 December 17, 2024 13:54
Updated list of voices

https://platform.openai.com/docs/api-reference/chat/create#chat-create-audio says:

> The voice the model uses to respond. Supported voices are ash, ballad, coral, sage, and verse (also supported but not recommended are alloy, echo, and shimmer; these voices are less expressive).

This converter transforms JSON to YAML in three different formats: block style (standard indentation), flow style (compact representation), and quoted strings (all string values enclosed in double quotes). Simply paste your JSON into the input field and the tool automatically generates the corresponding YAML formats, with copy buttons for each output style.

Development history (1 commit)

The Writing Style Analyzer helps improve your writing by identifying problems that weaken your prose. The tool automatically detects weasel words (vague terms that lack precision), passive voice constructions, and accidentally duplicated words. Paste your text into the input area to receive immediate feedback with highlighted issues and their surrounding context.

Development history (4 commits)
ac6a1f December 14, 2024 10:06
0fbf511 December 14, 2024 11:10

This web application allows you to interact with Google's Gemini AI models through a simple chat interface. Users can select different Gemini model versions, send messages, and receive responses in real-time with markdown rendering support. The app requires a Gemini API key on first use and displays usage metadata and response time for each interaction.

Development history (4 commits)
2f2bfd August 27, 2024 14:57
4983cf August 27, 2024 16:24
79898f October 03, 2024 15:08
Update Gemini model lists
06a135d December 11, 2024 09:18
gemini-2.0-flash-exp

This Timezone Meeting Planner allows you to compare time differences between two timezones. Select locations from the dropdown menus to generate a 48-hour comparison table showing the corresponding times in both locations. The tool updates the URL with your selections so you can share specific timezone comparisons with others.

Development history (2 commits)
1459a6 July 04, 2024 13:18
Experimental timezones.html

Not fully tested yet, built this with Claude 3.5 Sonnet
a142037 December 10, 2024 18:43
Timezone Meeting Planner

A better version, brand new.

https://gist.github.com/simonw/3cb034fa3d327f1114da18219f2192fd

Prompts.js is a JavaScript library that provides modern alternatives to the browser's built-in alert, confirm, and prompt dialogs. The library offers an async/await syntax allowing for cleaner code when working with user interactions. Demonstrations on this page show how to trigger different types of dialogs, with the results displayed in a dedicated area below the buttons.

Development history (2 commits)
afbc22 December 06, 2024 16:52
Rename prompt-js.html to prompts-js.html
3d76b53 December 07, 2024 14:14
Load latest prompts.js from CDN

The Timestamp Converter tool transforms Unix timestamps into human-readable date and time formats. Enter a Unix timestamp (in seconds or milliseconds) in the input field to see the corresponding UTC and local time displayed below. The converter automatically initializes with the current timestamp and updates the displayed times as you type.

Development history (1 commit)

This web application allows you to view your Bluesky social media timeline by logging in with your username and app password. After authentication, it fetches your timeline and displays posts with avatars and content in a readable format. The timeline automatically refreshes every 10 seconds to show new content, and you can stop the auto-refresh at any time.

Development history (1 commit)

This tool allows you to explore the contents of package files directly in your browser. Enter a URL to a zip, tar.gz, or wheel file, and the browser will download and extract the contents, displaying a list of files that you can click to view. The tool supports Python wheel packages from PyPI and other package formats without requiring any installation.

Development history (2 commits)
429eb8 November 19, 2024 11:08
zip-wheel-explorer

Created first version using a Claude 3.5 Haiku prompt similar to this:

> web app with an input box to paste in a URL to a zip or .tar.gz or wheel file - it then uses fetch() to fetch that binary file and uses the necessary JavaScript libraries to unzip it and then shows a list of the files in that package, clicking each of those shows the content of that file

But had to edit a lot - to use jsdelivr for example, and to remove the .tar.gz support which didn't work.
6025f62 November 19, 2024 11:19
Simplified

The API Explorer provides a sandboxed interface for testing APIs through a secure iframe implementation. Users can enter an API URL and view the JSON response without security risks, as the parent page handles the actual fetch requests through a message-passing protocol. The interface demonstrates secure cross-frame communication using postMessage() while maintaining appropriate isolation between contexts.

Development history (3 commits)
52c094 November 14, 2024 19:30
Note this is a sandbox experiment
3011fee November 14, 2024 19:39
sandbox=allow-forms for Chrome, new APIClient class

In Chrome the form wouldn't submit because no allow-forms so I added that

Got Claude to write a neat APIClient class using promises so I can do const response = await api.callAPI(url);

https://gist.github.com/simonw/54d91de17fdde1bce715f6a7859c935e

This bounding box tool allows you to draw selection boxes on images to get coordinates. Upload an image by pasting, dragging, or selecting a file, then draw and adjust your bounding box. The tool generates coordinates as percentages of the image dimensions, making them useful for responsive applications or when working with images of different sizes.

Development history (1 commit)

This web application displays timeline views of browser support for web APIs based on MDN's browser compatibility data. Users can search for specific APIs by name, view when different browsers added support for those APIs, and access detailed information including MDN documentation links, specifications, and status indicators. The interface shows a chronological timeline of browser support with version numbers and release dates, along with information about browsers that don't support the selected API.

Development history (6 commits)
59323c November 10, 2024 17:54
mdn-timelines

I didn't save all the prompts for this one (I'm using a new tool).
472b46 November 10, 2024 18:21
58e7ef November 10, 2024 18:59
Use GitHub tree API to get more than first 1000 files

Also some CSS tweaks and autocomplete search now does term1.*term2
ab7baa November 10, 2024 19:02
Remove console.log
c81ecb November 11, 2024 04:19
link to blog post
41ce0b8 November 11, 2024 04:25
fix for back button bug

I prompted Claude:

> `There's a bug where hitting back cannot get to the previous page`

This page provides an interactive sandbox for testing HTML and JavaScript code with customizable iframe security controls. It features a code editor on the left where you can write HTML, and a preview pane on the right that renders your code within an iframe. The sandbox controls beneath the preview allow you to enable or disable specific security restrictions such as scripts, forms, popups, and same-origin policy, letting you experiment with different security contexts.

Development history (1 commit)

This page displays a container with a "Rainbow Border" label and a toggle button to control animation effects. When activated, the container shows an animated rainbow-colored glowing border that pulses and changes color gradients in a continuous flow. The animation uses CSS keyframes to create a smooth transition between colors and opacity levels, giving the border a vibrant, dynamic appearance that loops infinitely until deactivated.

Development history (1 commit)
99021c5 November 03, 2024 12:30

The Claude Token Counter allows you to calculate token usage for messages sent to Claude 3.5 Sonnet. Enter an optional system prompt and required user message, then add image or PDF files by dragging and dropping them into the designated area. After providing your Anthropic API key (stored locally in your browser), click "Count Tokens" to receive a detailed breakdown of token consumption for your inputs.

Development history (1 commit)

This demonstration shows how to embed SVG graphics directly in HTML using Base64 encoding. The page displays three example SVGs encoded as data URIs within image tags, along with their decoded source code below. Base64 embedding allows SVG graphics to be included without external file dependencies, while the browser's security model prevents any embedded JavaScript from executing when SVGs are loaded as images.

Development history (2 commits)
a7289c8 October 26, 2024 13:49
Display decoded SVGs on page

Some help from https://gist.github.com/simonw/e07899a173ffe9f5723994e1405f909a

This tool allows you to visualize the progressive rendering of SVG files. Paste your SVG code into the top text area, set a duration, and click "Render" to see the SVG build gradually character by character. You can also use the live editor to make real-time changes and see them reflected immediately in the preview area below.

Development history (1 commit)
ba6a1be October 25, 2024 17:51

This page allows you to fetch and convert GitHub issues to markdown format. Enter a GitHub issue URL in the input field and click "Fetch Issue" to retrieve the issue content including comments. You can provide a personal access token for accessing private repositories or to avoid rate limiting, which will be saved in your browser for future use.

Development history (1 commit)

This QR Code Decoder allows you to extract text and links from QR code images. Upload an image file, drag and drop it onto the designated area, or paste an image from your clipboard. The tool automatically processes the image and displays the decoded content, converting URLs into clickable links for easy access.

Development history (3 commits)
47b5cd October 17, 2024 14:55
Add jsQR credit
345bdc9 October 21, 2024 11:29
box-sizing: border-box;

This interactive demo allows you to experiment with the text-wrap: balance CSS property on a navigation bar. You can control how many navigation items are displayed using the slider and toggle the text-wrap balance feature on and off to observe how it affects the distribution of navigation links across multiple lines. The navigation bar has a fixed width of 400px to demonstrate wrapping behavior.

Development history (3 commits)
a36eaf October 20, 2024 05:39
1a8556 October 20, 2024 05:42
No need for margin-bottom on inline element
2c59da7 October 20, 2024 16:20
max-width: 100% for phones with screens narrower than 400px

https://urbanists.social/@georgelund/113342149599402190

This converter transforms regular text into the ARES Phonetic Alphabet, commonly used in emergency communications. Enter text in the input field and click "Convert" to translate each letter and number into its corresponding phonetic code word (Alpha for A, Bravo for B, etc.). Spaces are marked as "(SPACE)" in the output to maintain clarity in the converted message.

Development history (1 commit)

This HTML Entity Escaper converts special characters in text to their corresponding HTML entities. The tool transforms characters like ampersands, angle brackets, and quotes into their HTML entity equivalents, making them safe to display on web pages without being interpreted as actual HTML code. After pasting text into the input box, the escaped version appears automatically in the output box for easy copying.

Development history (1 commit)
4ac8c4f October 19, 2024 15:43

This page provides an interface for recording audio, which can then be submitted to OpenAI's GPT-4o audio model along with a text prompt. The application allows users to record speech through their microphone, review the recording, and submit it to the API for processing. After submission, the page displays both the formatted response and detailed information about token usage and associated costs.

Development history (6 commits)
cdf77e October 17, 2024 12:09
3e8687 October 17, 2024 12:38
6edb36 October 17, 2024 12:41
font-size: 16px; on input
0d07f5 October 17, 2024 12:44
box-sizing: border-box;
bf3b3a October 18, 2024 10:05
white-space: pre-wrap;
1c63c27 October 18, 2024 10:08

This tool extracts URLs from copied web page content. Paste HTML content into the editable area, and the tool automatically parses out all hyperlinks and displays them in a clean list format. The extracted URLs can be copied to your clipboard with a single click for use in other applications.

Development history (1 commit)
0f7fb49 October 15, 2024 16:19

This interactive tool allows users to query a SQLite database of pelican sightings in Half Moon Bay. The application loads a WASM-based SQLite engine in the browser and initializes a sample database with pelican observation data. Users can modify and execute SQL queries directly in the browser to explore different pelican species, locations, and sighting counts.

Development history (1 commit)
9521114 October 15, 2024 11:44

This page displays an interactive CSS grid layout with a symmetrical animation effect. The grid contains four colored blocks of different sizes, with one block (colored green) that can be clicked to expand and cover the entire grid area. When expanded, clicking again triggers a smooth animation that returns the block to its original position and size.

Development history (1 commit)
1faccef October 13, 2024 11:42

The Event Planner tool allows users to create events by entering details such as title, description, location, date, time, and timezone. After submitting the form, the application displays the event information, calculates the time remaining until the event, and provides a Google Calendar link for easy addition to your personal calendar. The tool supports multiple US timezones and formats the event details in a clear, readable format.

Development history (1 commit)
1d19215 October 10, 2024 19:17

This tool converts JPG or PNG images to SVG format using the imagetracerjs library. You can upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. After conversion, the SVG appears on screen and its code is displayed in a text field below, which can be copied to the clipboard with a single click.

Development history (1 commit)
4ff37f2 October 06, 2024 20:37

This tool converts SVG images to JPEG or PNG formats. Upload an SVG file or paste SVG code, adjust settings including output format, background color, transparency, and dimensions, then convert to generate a downloadable image. The converted image can be previewed, downloaded, and its HTML image tag with base64 encoding can be copied for embedding in websites.

Development history (6 commits)
b20a4c October 06, 2024 10:00
Background color default to white
c10d66 October 06, 2024 10:12
tweak CSS
c0608a October 06, 2024 12:03
Reset color to white, not black
d911c2 October 06, 2024 12:32
Various fixes to SVG tool

Tweaked CSS
Selecting transparent now toggles to PNG
Copy to clipboard button no longer uses alert()
bc43f4c October 06, 2024 12:33
Tool is now called SVG to JPEG/PNG

This demonstration showcases MapLibre GL integration with OpenFreeMap, displaying 1000 randomly generated points within San Francisco. The code provides three different marker implementation options: scaled markers using MapLibre's built-in functionality, custom HTML elements styled as circular markers, and a more performant circle layer using GeoJSON data. The map initializes with a tilted perspective and automatically adjusts its bounds to encompass all generated markers.

Development history (2 commits)
4507280 September 28, 2024 14:01
map.setPitch(50)

This page displays the User Agent string of your current browser. The User Agent contains information about your browser, operating system, and device, which websites can use to identify how to properly deliver content to you.

Development history (1 commit)

This interactive tool renders Markdown and LaTeX math formulas in real-time. As you type in the text area, the content is converted to formatted HTML in the preview pane, supporting both inline math expressions ($...$) and block math equations ($$...$$). The generated HTML can be copied to clipboard for use in other applications or websites.

Development history (4 commits)
112b42 September 20, 2024 19:30
ceff93 September 20, 2024 21:50
Better HTML export + no alert on copy button
fe5c3a September 20, 2024 22:51
Avoid zoom on textareas on iOS
b04b092 September 20, 2024 22:54
textarea width

This tool allows you to upload files or images directly to GitHub repositories using the GitHub API. Enter your GitHub token, repository details, and file path, then choose between text content or image upload. The application handles the base64 encoding required by GitHub's API and provides a link to view your file once successfully uploaded.

Development history (1 commit)
4b7902d September 20, 2024 17:08

The Image Token Calculator allows you to estimate the token cost for processing images with AI models. Upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. After uploading, the calculator will display the image dimensions, number of tiles required to process the image, and the total token cost based on a calculation of 1000 tokens per tile.

Development history (1 commit)
8ad34e5 September 19, 2024 22:54
Create jina-embeddings-image-token-calculator.html

https://gist.github.com/simonw/7f3d2ff63423078f04d1fb2fc2b3e2a5

This tool enables you to view and download YouTube video thumbnails in various resolutions. Enter a YouTube URL or video ID in the input field to see all available thumbnail versions with their dimensions. Click on any thumbnail to expand it, or use the clipboard icon to copy the direct image URL for use in your projects.

Development history (3 commits)
11dddd September 19, 2024 20:53
994cfc September 19, 2024 20:58
Improved click area and layout of copy URL thing

And I didn't even get an LLM to write this for me!
8d67d6c September 19, 2024 21:03

The Pomodoro Timer is a productivity tool that helps you manage work sessions using timed intervals. Enter your goal, select a duration (5-60 minutes), and track your progress with detailed session logs. The application records your session history including start/end times, durations, and any pauses, storing this data locally for future reference.

Development history (5 commits)
1e1e75 August 28, 2024 14:49
Fix bug where timer did not run in background

https://gist.github.com/simonw/cd3e400f5d09e8ed6482c7c6e8af2db2
9c0765 August 28, 2024 16:53
a678b5 August 30, 2024 07:22
CSS tweaks
ddaf7da August 30, 2024 08:08

This page implements an automatic redirect to the "/gemini-bbox" location. When a user visits this page, their browser will immediately redirect them to the new location, with a fallback text link provided if the automatic redirection fails to work.

Development history (6 commits)
469aeb August 25, 2024 21:27
lineWidth = 5
71c413 August 26, 2024 08:33
Re-compress image first and display grid lines

There was a VERY weird bug where the TIFF orientation of a photo could cause the wrong coordinates to be returned.

Working around that bug by first doing a round-trip through custom canvas JPEG compression.

Also added grid to make it easier to debug.

Many prompt sessions got here, most recently this one: https://gist.github.com/simonw/0a8b8e76cd73b1bfb72daa716641a57e
4be279 August 26, 2024 08:34
Rename gemini-bbox-tool.html to gemini-bbox.html
85126d August 26, 2024 08:35
Redirect to gemini-bbox
ce18cd2 August 26, 2024 08:37
Fix redirect

This tool analyzes JPEG images to determine their TIFF orientation metadata. Upload an image by dragging and dropping or clicking to select a file, and the application will extract and display the orientation information. The tool parses the EXIF header to find the orientation tag and shows both the orientation value and a human-readable description of how the image is oriented.

Development history (1 commit)
9b6cdd5 August 26, 2024 08:20
tiff-orientation

Debug tool for figuring out if a JPEG has TIFF orientation data in it.

Claude prompts: https://gist.github.com/simonw/9bf1bd4cce6d113c55db0e5a03769b52

This Audio Spectrum Visualizer uses the Web Audio API to capture microphone input and display real-time frequency data. The application processes audio through an analyzer node and renders the spectrum as a series of colored bars on an HTML canvas, with the height and color of each bar representing different frequency amplitudes. Upon loading, the page requests microphone access and begins continuously updating the visualization.

Development history (1 commit)
1390c40 August 23, 2024 22:04
audio-spectrum visualizer

By Claude 3.5 Sonnet: https://gist.github.com/simonw/48b2762d1c77e529d3c36e75ee6f478b

This webpage enables you to generate haikus based on images captured from your device's camera. After granting camera access, capture an image using the center button, and Claude will analyze the image and generate a haiku inspired by what it sees. The interface allows switching between front and rear cameras if your device has multiple cameras available.

Development history (5 commits)
e4975a April 15, 2024 16:26
haiku.html
e7512f April 15, 2024 16:45
ow switch button if more than one camera
03ce79 April 15, 2024 16:51
More tweaks to switch camera button
9d5f90 April 15, 2024 16:51
Switch camera button inline, not block
0249ab8 August 22, 2024 19:10
Use anthropic-dangerous-direct-browser-access: true

Now talks to the Anthropic API directly using their new anthropic-dangerous-direct-browser-access: true header.

Also shows a "Generating..." message.

Code change mostly by Claude: https://gist.github.com/simonw/6ff7bc0d47575a53463abc3482608f74

The EXIF Data Viewer allows you to extract and view metadata from your digital photos. Upload any image to display embedded EXIF information including GPS coordinates (latitude and longitude) if available. The tool presents both specific location data and a complete breakdown of all metadata tags contained within the image file.

Development history (1 commit)
687d450 July 17, 2024 09:28
EXIF data viewer

Created with Claude 3.5 Somnet

This interactive tool allows you to create and customize CSS box shadows using simple slider controls. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity to generate the perfect shadow effect for your web elements. The tool provides a live preview of your shadow and displays the corresponding CSS code, which you can copy to your clipboard with a single click.

Development history (2 commits)
18f741 July 08, 2024 12:22
Box shadow CSS generator

Mostly by Claude 3.5 Sonnet: https://twitter.com/simonw/status/1810335524017877240
44e0b09 July 08, 2024 13:05
Link to how I built it

This playground allows you to run prompts against the Gemini Nano experimental model directly in Chrome Canary. Enter your prompt in the text area, click "Execute prompt" to see the generated response, and view your interaction history which is saved locally in your browser. The interface requires Chrome Canary with the "Prompt API for Gemini Nano" flag enabled.

Development history (2 commits)
be05fc July 03, 2024 10:09
Chrome Prompt Playground

Claude 3.5 Sonnet built most of this - transcript here: https://gist.github.com/simonw/e62440114960bc98f200eb3d92593896
e16f128 July 03, 2024 12:37
About this project link

This PDF comparison tool enables side-by-side visual comparison of two PDF documents. Upload two PDFs by dragging them into the drop zone or clicking to select files. The tool renders each page of both documents and generates a third visualization that highlights differences between corresponding pages in red, making it easy to identify discrepancies between versions.

Development history (1 commit)

This interactive visualization displays the evolution of Elo ratings for large language models in the LMSYS Chatbot Arena over time. The chart shows how different models compare against each other, with higher positions indicating stronger performance. You can control the animation speed using the slider, pause/play the animation with the button, or upload custom JSON data with model ratings. The timeline at the bottom shows the current date being displayed as the animation progresses.

Development history (1 commit)
9a2450d June 26, 2024 05:39
Add /arena-animated

This tool performs Optical Character Recognition (OCR) on PDF documents and images directly in your web browser. Upload a file by dragging and dropping or clicking the dropzone, and the text content will be extracted using Tesseract.js. For PDFs, each page is processed separately and compiled into a full document, with support for multiple languages.

Development history (14 commits)
5dffa7 March 30, 2024 09:34
Change URL to /ocr - since it does more than PDfs now, refs #1
5ca65c March 30, 2024 09:37
margin-bottom on dropzone, refs #1
cc6091 March 30, 2024 09:49
Upgrade to latest PDF.js, refs #1
9fb049 March 30, 2024 11:10
Source code. How I built this.
711cb7 March 31, 2024 15:21
Remove some indentation
8872d1 March 31, 2024 15:32
Language support for OCR, closes #4
495be5 March 31, 2024 16:19
Set and get ?language= in URL bar, refs #4
0efe8a March 31, 2024 16:20
Remove console.log, refs #4
eae14a March 31, 2024 17:11
Query string history now works for English default too, refs #4
c4c833 March 31, 2024 20:00
Support pasted images, refs #7
17f46e March 31, 2024 20:19
Re-run OCR if language is changed, refs #6
4c6c9e March 31, 2024 20:28
Add rough progress indicator to rerunOCR, refs #6
c4cd84 March 31, 2024 21:16
Don't re-run OCR if no file provided, closes #6

This page creates an interactive map with markers based on CSV data. It accepts parameters in the URL to set the center, zoom level, search query, individual markers, and a CSV file URL for bulk marker placement. The markers are displayed on an OpenStreetMap base layer, and the map view automatically updates the URL when panned or zoomed.

Development history (1 commit)
82fd5da May 02, 2024 20:14
Create csv-marker-map.html

This tool converts Markdown to HTML using the GitHub Markdown API. Enter Markdown text in the top textarea, click "Render", and view the HTML output in the bottom textarea with a live preview below. Options include stripping hidden HTML elements and using GitHub Flavored Markdown mode. The tool automatically generates a table of contents from headings and preserves your input in local storage.

Development history (3 commits)
782395 April 21, 2024 22:47
86ac9d April 21, 2024 22:49
Fix link to TIL
a278a1b April 21, 2024 22:59
Clean up markdown heading elements

This page serves as an automatic redirect to the OCR application. It uses the HTML meta refresh tag to immediately forward visitors to the /ocr URL, while also providing a fallback link for users whose browsers don't support automatic redirects or have disabled this feature.

Development history (8 commits)
497178 March 29, 2024 14:01
Create pdf-ocr.html

Refs #1
fb7041 March 29, 2024 14:02
Tiny bit of text at the top

Refs #1
bb6c87 March 29, 2024 15:02
Update full document after each page

Refs #1
16a97a March 29, 2024 15:19
Plausible analytics
f3410f March 30, 2024 09:26
A ton of UI tweaks

- Shows full document textarea at top, but only if there are multiple pages
- Prevents user from selecting a new file while a file is being processed
- Better indications of progress, including a done x of y message
4caf66 March 30, 2024 09:29
Bump width from 800 to 1000

This is the width used for the images extracted from the
PDF. I found that the Claude 3 Model Card PDF had OCR
errors at 800px what went away at 1000px.

Refs #1
d89c22 March 30, 2024 09:33
Upgrade to latest Tesseract.js, refs #1
5dffa7e March 30, 2024 09:34
Change URL to /ocr - since it does more than PDfs now, refs #1