tools.simonwillison.net colophon

Create css-text-wrapping.html

https://claude.ai/share/909d9faf-2667-405e-9cc9-82f1d860f517

california-clock-change

https://gist.github.com/simonw/9510723176f5b44ac1ebc495c95a4bc7

Add section describing effect on dog

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

Clarify gain/loss one hour of sleep

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).

Fix DST bug

I prompted Claude 3.7 Sonnet thinking with this file and:

> Check the DST display logic

It suggested this fix.

Social media cropper

https://gist.github.com/simonw/12b8f88932a71450071190e1289a17e9

Support 2:1 and 14:10 ratios

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

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

Note it's for Substack

Better UI, better zoom feature

https://claude.ai/share/6aa82d4d-4549-4366-a565-7941d2b8b4aa

Create paste-rich-text.html

https://claude.ai/share/91ca3daa-de03-4122-8065-c44e5881f12f

Maybe fix for Windows?

Paste rich text in README

Encrypt / decrypt message

https://claude.ai/share/8d3330c8-7fd4-46d1-93d4-a3bd05915793

Create json-schema-builder.html

https://claude.ai/share/c84c867a-dbaf-41c2-a6f1-ae7dad002485

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.

Pipfile.lock Dependency Parser

Built this today to help fix an old development environment.

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

Create llm-prices.html

https://gist.github.com/simonw/6b684b5f7d75fb82034fc963cc487530

o1-preview and o1-mini

Clarify prompt/completion tokens, use sentence case

claude-3.5-haiku

Refs https://github.com/simonw/llm-claude-3/issues/23

Prices for Amazon Nova models

https://aws.amazon.com/bedrock/pricing/

Claude 3.5 Haiku price drop

https://www.anthropic.com/news/trainium2-and-distillation

o1 and o1-preview same cost

deepseek-chat and deepseek-reasoner

All per million tokens

Handle DeepSeek scheduled price change

https://gist.github.com/simonw/843085aebd6139340ff119a09c6c8701

Display dynamic prices correctly

Update disclaimer

o3-mini

o1-mini price drop to match o3-mini

chatgpt-4o-latest

gemini-2.0-flash-lite and updated Gemini pricing

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

Also Claude 3.7 Sonnet

GPT-4.5 is eye-poppingly expensive

https://openai.com/api/pricing/

Create word-counter.html

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

Support multiple word counters at once

https://gist.github.com/simonw/889e4e8a66382528142c5adf73c29da2

Show textarea when page first loads

I didn't even use an LLM to write this!

Add a character counter

https://claude.ai/share/3db659f4-4b8f-4845-830b-234ae440e399

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

Update progress.html

Prompt:

> Make it larger on my phone

Create jina-reader.html

https://gist.github.com/simonw/053b271e023ed1b834529e2fbd0efc3b

Improvements to Jina Reader tool

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

box-sizing: border-box on iframe

Alternative output options

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

Optionally run Jina reader output through Claude with summary prompt

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

APSW SQLite query explainer

https://gist.github.com/simonw/8d79d2a4e746f7c8966d2ae1fea90cb3

Rename gemini-bbox-tool.html to gemini-bbox.html

Better h1

Flip direction of y axis

Thanks https://mastodon.social/@jgilbert/113029443306185312

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.

Update Gemini model lists

Display images for each bounding box

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

gemini-2.0-flash-exp

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

sql-pretty-printer.html

https://gist.github.com/simonw/2b1e9976fea563169433655bf559a428

github-issue-to-markdown

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

Create image-resize-quality.html

Adapted from this Claude artifact https://claude.site/artifacts/45ecf75e-d8e2-4d2a-a3b9-d8c07c7bd757

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'

Add background color feature to image-resize-quality

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

image-to-jpeg.html

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

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

render-claude-citations

https://gist.github.com/simonw/b68414ae1d7af23a721892521727e975 and https://gist.github.com/simonw/85bd050908486de36b078c8c7d01e903

Use Title Case

php-deserializer.html

https://gist.github.com/simonw/4ff879668a84218a1eb94b6406ee2f79

aria-live-regions

https://gist.github.com/simonw/50946b742ef5da7d0435c341b2d6fa8bw

Switch between polite and assertive

Use public.api.bsky.app instead

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

bluesky-firehose

https://gist.github.com/simonw/15ee25c9cc52b40e0733f2f889c1e873

Ability to send messages back to Bluesky firehose

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

tools.simonwillison.net/yaml-explorer

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

Rename openai-webrtc to openai-webrtc.html

Update openai-webrtc.html

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

Option to select a voice

https://gist.github.com/simonw/088575887c629b64282241544a0395b1

Event log and pricing estimates

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

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

And some hand-editing.

gpt-4o-audio-player.html

https://gist.github.com/simonw/88e8789c329a70ec5f68328f2cf60767

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

openai-audio-output.html

https://gist.github.com/simonw/43bc2c59a5d1dc317076713c7f3870d0

System prompt and copy-out JSON

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

box-sizing: border-box;

Option to save audio to a Gist

https://gist.github.com/simonw/29efb202da39775761ab6ab498d942ca

Ability to select a model

https://gist.github.com/simonw/11f34f256fbeebda741be384b07303e7

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).

GPT-4o mini audio preview

https://github.com/simonw/scrape-openai-models/commit/d77f407e45ee0e9ab714555cc8357c3a3e3e1ae7#diff-b546905e3eaa417cad3f64329ae02e69b2844d8551db177d092ef2d9a3a81276R183

json-to-yaml.html

https://gist.github.com/simonw/95c26586503afb22e60bcca9c721ee16

Navigation for headings

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

Update nav-for-headings.html

I prompted in the existing conversation:

> Make sure to populate existingIds with the IDs on the page to start

writing-style.html

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

Update writing-style.html

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

Based on comments here: https://news.ycombinator.com/item?id=42407250#42416823

Update writing-style.html

https://gist.github.com/simonw/19daf53f52cb3d24ccf98f8ec2a0d176

Update writing-style.html

https://gist.github.com/simonw/4d6ae3d79b99a0b7528cc4a0ca37d904

Create gemini-chat.html

https://gist.github.com/simonw/498a66c1c4b5053a6dfa2015c3675e24

Fix bug where prompt was sent twice

https://gist.github.com/simonw/59ef2abf59029e80c1e713506cfe9cd3

Update Gemini model lists

gemini-2.0-flash-exp

Experimental timezones.html

Not fully tested yet, built this with Claude 3.5 Sonnet

Timezone Meeting Planner

A better version, brand new.

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

Rename prompt-js.html to prompts-js.html

Load latest prompts.js from CDN

unix-timestamp

https://gist.github.com/simonw/8c04788c5e4db11f6324ef5962127ecb

bluesky-timeline

https://gist.github.com/simonw/487fb1b1b022f8a990ef98829cc13194

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.

Simplified

iframe-api-explorer

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

Note this is a sandbox experiment

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

bbox-cropper

https://gist.github.com/simonw/799babf92e1eaf36a5336b4889f72492

mdn-timelines

I didn't save all the prompts for this one (I'm using a new tool).

Display nested compatibility data too

https://gist.github.com/simonw/8c71a931921789e11f1d33f09d9ad9ae

Use GitHub tree API to get more than first 1000 files

Also some CSS tweaks and autocomplete search now does term1.*term2

Remove console.log

link to blog post

fix for back button bug

I prompted Claude:

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

iframe-sandbox.html

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

Create animated-rainbow-border.html

https://gist.github.com/simonw/2e56ee84e7321592f79ceaed2e81b0a9

claude-token-counter

Initial: https://gist.github.com/simonw/d6797005adf1688427470f9fcb8d287f

Modifications: https://gist.github.com/simonw/ebc1e32b9f3ddc0875ce8d875d7100bd

Create link-temp.html

svg-sandbox.html

https://gist.github.com/simonw/4e6ff3b3c56b7a4810aa4c8becfc2f40

Display decoded SVGs on page

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

svg-progressive-render.html

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

github-issue.html

https://gist.github.com/simonw/1aab96fefec312cc9476786315633b4b

Create qr.html

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

Add jsQR credit

box-sizing: border-box;

clipboard-viewer.html

https://gist.github.com/simonw/5393dd81fcabc9f854e8bbec205e7e1e

box-sizing: border-box;

text-wrap-balance-nav.html

https://gist.github.com/simonw/53648554917862676ccd12dcf5cc9cab

No need for margin-bottom on inline element

max-width: 100% for phones with screens narrower than 400px

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

Create ares.html

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

Create escape-entities.html

https://gist.github.com/simonw/77f91b65e29f43083f9510ae0c19a128

Create openai-audio.html

https://gist.github.com/simonw/0a4b826d6d32e4640d67c6319c7ec5ce

Better output plus pricing calculator

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

font-size: 16px; on input

box-sizing: border-box;

white-space: pre-wrap;

Download audio button

https://gist.github.com/simonw/1710416131aa98395a15ec6bcc534c69

Create extract-urls.html

https://gist.github.com/simonw/0a7d0ddeb0fdd63a844669475778ca06

Create sqlite-wasm.html

https://gist.github.com/simonw/677c3794051c4dfeac94e514a8e5b697

Create click-grid-to-expand.html

https://gist.github.com/simonw/4120213beeb2e7d52c8b135ddb5aea4b

Create event-planner.html

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

Create image-to-svg.html

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

SVG to image render

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

Background color default to white

tweak CSS

Reset color to white, not black

Various fixes to SVG tool

Tweaked CSS
Selecting transparent now toggles to PNG
Copy to clipboard button no longer uses alert()

Tool is now called SVG to JPEG/PNG

Create openfreemap-demo.html

https://openfreemap.org/quick_start/

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

map.setPitch(50)

/user-agent tool

Refs https://github.com/simonw/shot-scraper/issues/158#issuecomment-2378280142

Create markdown-math.html

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

Better HTML export + no alert on copy button

Avoid zoom on textareas on iOS

textarea width

Create github-api-write.html

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

Create jina-embeddings-image-token-calculator.html

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

Create youtube-thumbnails.html

Started in ChatGPT:

https://chatgpt.com/share/66ecf1a3-928c-8006-81f3-8869faa57071

Finished in Claude:

https://gist.github.com/simonw/86f62917dd1d4300aebceaeb725d38ce

Improved click area and layout of copy URL thing

And I didn't even get an LLM to write this for me!

URL bookmark support

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

Pomodoro Timer

https://gist.github.com/simonw/34eb6f6a6338c0e81308912b9ec2ffbc

Fix bug where timer did not run in background

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

Pomodoro stores session details now

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

CSS tweaks

Add delete button to pomodoro

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

Gemini bbox visualization tool

Prompts:

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

Which used https://gist.github.com/simonw/40ff639e96d55a1df7ebfa7db1974b92

See also:

https://github.com/simonw/llm/issues/557#issuecomment-2309217476

lineWidth = 5

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

Rename gemini-bbox-tool.html to gemini-bbox.html

Redirect to gemini-bbox

Fix redirect

tiff-orientation

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

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

audio-spectrum visualizer

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

haiku.html

ow switch button if more than one camera

More tweaks to switch camera button

Switch camera button inline, not block

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

EXIF data viewer

Created with Claude 3.5 Somnet

Box shadow CSS generator

Mostly by Claude 3.5 Sonnet: https://twitter.com/simonw/status/1810335524017877240

Link to how I built it

Chrome Prompt Playground

Claude 3.5 Sonnet built most of this - transcript here: https://gist.github.com/simonw/e62440114960bc98f200eb3d92593896

About this project link

Compare PDFs

See also https://gist.github.com/simonw/9d7cbe02d448812f48070e7de13a5ae5

Add /arena-animated

Change URL to /ocr - since it does more than PDfs now, refs #1

margin-bottom on dropzone, refs #1

Upgrade to latest PDF.js, refs #1

Source code. How I built this.

Remove some indentation

Language support for OCR, closes #4

Set and get ?language= in URL bar, refs #4

Remove console.log, refs #4

Query string history now works for English default too, refs #4

Support pasted images, refs #7

Re-run OCR if language is changed, refs #6

Add rough progress indicator to rerunOCR, refs #6

Don't re-run OCR if no file provided, closes #6

Upgrade PDF.js

Address https://codeanlabs.com/blog/research/cve-2024-4367-arbitrary-js-execution-in-pdf-js/

Create csv-marker-map.html

Create render-markdown.html

Copied from https://github.com/simonw/til/commits/main/templates/pages/tools/render-markdown.html

Fix link to TIL

Clean up markdown heading elements

Create pdf-ocr.html

Refs #1

Tiny bit of text at the top

Refs #1

Update full document after each page

Refs #1

Plausible analytics

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

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

Upgrade to latest Tesseract.js, refs #1

Change URL to /ocr - since it does more than PDfs now, refs #1