| CARVIEW |
tools.simonwillison.net colophon
The tools on tools.simonwillison.net were mostly built using AI-assisted programming. This page lists 168 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 Haiku 4.5.
Track your browsing activity and viewing patterns with this personal analytics dashboard that stores all data locally in your browser. The tool displays comprehensive statistics including total visits, unique pages visited, and time-based breakdowns through interactive charts showing visits by day or hour. A detailed table view shows your most visited pages and recent activity, with options to export your analytics data as JSON or clear all stored information at any time.
Development history (3 commits)
- footer.js now records each page visit with slug (pathname only) and timestamp
- New analytics.html page shows:
- Summary stats (total visits, unique pages, today, this week)
- Visits over time line chart (last 14 days)
- Top pages doughnut chart (top 10)
- Most visited pages table (top 20)
- Recent visits table (last 100 with human-readable times)
- Copy JSON to clipboard button for full data export
- Clear data option
- Uses Chart.js for visualizations
Co-authored-by: Claude <noreply@anthropic.com>
- Add privacy notice explaining that analytics are stored locally in
localStorage and not shared with anyone including site administrator
- Add toggle buttons to switch between hourly (48 hours) and daily
(14 days) views on the Visits Over Time chart
- Implement getVisitsByHour function for hourly aggregation
- Adjust chart display settings based on view mode
Co-authored-by: Claude <noreply@anthropic.com>
Also ported footer to a module.
https://claude.ai/share/e7afb27a-e5b9-4fab-a17e-ca609520b2e3
Create a newsletter from Simon Willison's blog posts, links, and other content by selecting content from the past several days and arranging it in your preferred order. The tool fetches data from a Datasette backup and integrates with Substack by comparing against previous newsletter RSS feeds to avoid duplicating content. Generate and copy the formatted HTML directly to your clipboard for pasting into Substack, with options to include or exclude various content types and preview the final newsletter layout.
Development history (2 commits)
* Add blog-to-newsletter.html - standalone port from Observable
Port the Observable notebook at observablehq.com/@simonw/blog-to-newsletter
to a standalone HTML tool that works without Observable dependencies.
Features:
- Fetches blog content from Datasette API (entries, blogmarks, quotations, TILs, notes)
- Fetches previous newsletter RSS to filter already-sent content
- Drag-and-drop story reordering
- Copy rich text newsletter to clipboard
- Copy just links/quotes/TILs option
- Markdown rendering for blogmarks and notes
- Cutoff comment support
- Search previous newsletter links
* Improve drag-and-drop story ordering with touch support
- Add visual drag handle indicator (⋮⋮) on each item
- Better visual feedback with blue drop indicator line
- Smooth transitions and hover/active states
- Full touch device support with touchstart/touchmove/touchend
- Prevent text selection during drag operations
- Handle edge cases for dragging to list boundaries
* Add warning for long URLs with edit functionality
- Detect URLs longer than 200 characters in the generated newsletter
- Display warning box with list of long URLs and their character counts
- Add "Edit URL" button for each long URL that opens a prompt()
- URL replacements persist and are applied to the newsletter HTML
- Warning auto-hides when no long URLs remain after editing
---------
Co-authored-by: Claude <noreply@anthropic.com>
> Modify blog-to-newsletter and add a “Copy HTML newsletter to clipboard” button
Adds a new button next to the existing rich text copy button that copies
the raw HTML source of the newsletter to the clipboard, useful for pasting
into email HTML editors or other tools that need the markup directly.
Co-authored-by: Claude <noreply@anthropic.com>
Create cooking recipes with detailed step-by-step instructions and automatically track elapsed time and upcoming tasks during meal preparation. Load recipes from URLs or paste JSON directly, save frequently-used recipes for quick access, and optionally cook multiple recipes simultaneously with synchronized timers. The application stores all state in your browser's local storage, allowing you to pause and resume cooking sessions at any time, and includes a QR code transfer feature for continuing your cooking session on a mobile device.
Development history (4 commits)
> Build cooking-timer.html - start with a copy of the existing timer that talks about chickpea stew, create a modified version that can support any recipe. When you first start it running it shows a starter field where it asks you to paste in either the URL to a recipe.json or the recipe JSON directly - it includes an example of the recipe format (make up a fun recipe for guacamole for the example) as JSON which you can copy and paste to somewhere else, plus a link that says "Create one with Claude" which links to the claude.ai page with a querystring parameter that pre-populates Claude and populates it with an example JSON document and a following prompt that says "output this format for the following recipe:"
>
> If you enter a URL the page redirects to ?url=THAT_URL - any time you load the page with that format it attempts to fetch() the JSON from that URL and use it
>
> If you paste in JSON instead then it stashes that in localStorage. It can actually stash multiple recipes in localStorage and shows a list on that initial homepage of stored recipes (with their names and creation dates - make sure the JSON format has a space for a name) for the user to select
>
> For any recipe you have loaded by URL that URL and the recipe name are also stored in localstorage so the "previous recipes" UI can link to those as well
>
> Once you have selected a recipe the tool works exactly the same way as the original. It uses localStorage to remember the time such that if you refresh the page it can jump right back to where you are
>
> Add a reset button with. a clear name that goes back to that initial state.
Create cooking-timer.html that allows users to load recipes via:
- URL parameter (?url=...) for recipe.json files
- Pasting JSON directly into the interface
- Selecting from previously saved recipes in localStorage
Features:
- Example guacamole recipe with copyable JSON format
- Link to Claude for generating new recipe timers
- Persistent timer state across page refreshes
- Recipe history with delete functionality
- "Choose Different Recipe" button to return to selection screen
https://gistpreview.github.io/?33f973d84f202869a4567e6af097315e/index.html
> Modify cooking-timer.html
>
> A major feature of blackened-cauliflower-and-turkish-style-stew.html was that it helped cook two recipes at the same time
>
> Since cooking-timer.html has a feature that can display previous recipes we have a good starting point for adding that feauter
>
> Add checkboxes to the previous recipes and a button for "Cook these at the same time". Make sure that once that option has been selected the URL state updates to reflect the recipes that have been cooked. As before, the start time should be saved in localStorage (and the URL bits too) such that if you come back to the page the state can be resumed automatically - skipping the initial screen unless you hit the "Choose different recipe" reset button
- Add checkboxes to the Previous Recipes list for selecting multiple recipes
- Add "Cook these at the same time" button that appears when 2+ recipes exist
- Merge steps from selected recipes into a combined timeline sorted by time
- Color-code recipe tags to distinguish steps from different recipes
- Update URL state to reflect selected recipes (?recipes=id1,id2,...)
- Persist multi-recipe session state in localStorage for auto-resume
- Show recipe badges in header during multi-recipe cooking sessions
- Reset button properly clears multi-recipe state and returns to setup screen
https://gistpreview.github.io/?24075b22aa8f33f5e4c1dfa3a647b2e8
> Modify cooking-timer.html to add a new feature: set desired serving time. This feature is available when the Start Cooking visible is shown. Clicking it brings up a input type=time that lets the user set the desired serving time for the meal. Once a serving time has been selected treat it as if the start cooking button has been clicked, update all times on the page to the time they need to be done in order to meet that serving time, then run the timer as normal.
Allows users to set a desired serving time instead of starting immediately. The timer calculates when to start each step to meet the target time, showing a countdown until cooking begins and displaying correct clock times in the timeline.
https://gistpreview.github.io/?fc5236c585ebfc7dd7748e9173ed6ac2/index.html
> Modify cooking-timer.html to add a "transfer to your phone" button which is always available on the timer page - clicking it shows a large QR code in a modal (use an appropriate NPM library loaded via CDN) - that QR code contains a URL that has EVERYTHING needed to transmit state to a new browser, right down to the timing (it includes the time the timer started, an end time if one is set) - it also includes the URLs to recipes that are being cooked by URL and the full JSON of any recipes specified using JSON
>
> Use a # URL not a ? URL so nothing gets logged to servers on the way
>
> The user will scan that QR code with their phone camera and naigate to that URL in their mobile browser. Implement logic that inflates that #fragment state back into a full page, redirecting to a URL if needed and adding the recipes to that browser's localStorage - de-duplicating by URL or by full JSON content to make sure existing recipes are not duplicated
>
> On scanning the QR code and loading that page the timer should be running at the same point as the one on the original computer, with all settings mirrored across
>
> Since the logic for this one is complex write tests for it. Include those tests in the .html file itself, have them run on every page load and have them be invisible if they pass and have them add an errors failed details/summary box (collapsed) at the bottom of the page if they fail
>
> Use Playwright to run these tests yourself before committing
Add a "Transfer to Phone" button that generates a QR code containing all timer state encoded in the URL fragment. When scanned on a phone:
- Timer continues running at the same point (synced via startTime)
- All recipes are transferred (URLs by reference, JSON by value)
- Recipes are deduplicated on import to avoid duplicates in localStorage
- State is fully restored including multi-recipe mode
Implementation:
- Uses qrcode-generator library for QR code rendering
- State serialized as base64-encoded JSON in URL fragment (#transfer=...)
- Fragment URLs avoid server logging of transferred data
- Inline tests run on page load, hidden when passing
- Playwright tests verify transfer functionality
Follow-up prompts:
> Use compression to make the QR code data smaller (it can be too long) - run curl against https://textarea.my/ to see how that app uses the web browser libraries and imitate it
> That worked great! The transfer to iphone button and choose different recipe buttons are too big on mobile and end up stacked on top of each other, make them smaller and ensure that if they are stacked there is a gap between them
https://gistpreview.github.io/?d72df1d31ec6787a083e48af3fbee025
Track power outages affecting the Half Moon Bay area with this interactive map displaying real-time PG&E outage data within a 15-mile radius. The application visualizes outage locations as point markers and affected areas as polygons, while displaying key statistics including the number of outages, impacted customers, and affected regions. Custom markers can be added by providing a URL parameter, and the map automatically refreshes every five minutes to ensure current outage information.
Development history (2 commits)
Prototype: https://gistpreview.github.io/?68a549ff77cefe1e1aa8dca0d5ae366c/index.html
Added #url= mechanism: https://gistpreview.github.io/?348230e4c9fdcbd03d4cfe5c5a48b0f6
> Modify pge-outages-hmb to add a toggle for hiding and showing the content of the overlay panel - it defaults to visible but you can click to hide it which reduces it to just the PG&E Outage Map header and an expand button. Save the hide/expand state in a localStorage key
Add a toggle button (-/+) to hide/show the info panel content while keeping the header visible. State is persisted in localStorage using the key 'pge-outages-hmb-panel-collapsed'. Panel defaults to expanded.
https://gistpreview.github.io/?393a8596cbb1e26065fa8f2aa866e245/index.html
Test HTTP requests directly from your browser and inspect what response data CORS rules allow you to access. This tool lets you configure custom headers, request bodies, and HTTP methods while showing exactly which response headers and data the browser permits you to read. It's useful for debugging CORS issues, testing API endpoints, and understanding how browser security policies affect your requests.
Development history (4 commits)
https://chatgpt.com/share/691ffa4a-41a0-8006-834b-55067e8f4ede
I had to delete "flex: 1 1 240px;" from input[type="text"]
- Read ?url=... parameter on page load and auto-fetch
- Update page URL with ?url=... when making fetch requests
- Allows sharing direct links to test specific URLs
Co-authored-by: Claude <noreply@anthropic.com>
* Enhance CORS-fetch with HTTP methods, request body options, and URL state
- Add HTTP method selector (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS)
- Add request body options: None, JSON, and Form (URL-encoded)
- Add key/value pair editor for form-encoded bodies
- Implement #fragment URL scheme to persist form state
- Load state from URL on page load without auto-executing
- Make all form elements mobile-friendly (16px font to prevent iOS zoom)
- Increase touch targets to 44px minimum height
- Support legacy ?url= query parameter
* Add curl import and custom headers support to CORS-fetch
- Add curl command parser that extracts method, URL, headers, and body
- Auto-parse curl commands on paste for instant form population
- Add collapsible custom headers editor with key/value pairs
- Headers are included in fetch requests and persisted in URL fragment
- Support for common curl flags: -X, -H, -d, --data-raw, etc.
- Intelligently detect JSON vs form-encoded body from curl data
- Header count badge shows number of configured headers
* Fix curl parser to handle attached flag values
Handle cases where curl flags have values directly attached without space:
- -d'...' and -d"..." for data
- --data=..., --data-raw=..., --data-binary=...
- -H'...' for headers
- --header=...
- -XPOST for method
Previously these would fail to parse because the tokenizer combines
the flag and value into one token when there's no separating space.
* Hide curl import in collapsible details/summary
- Wrap curl import in <details> element, closed by default
- Only import on button click, not on paste
- Remove clear button
* Fix add header/field buttons not working after import
The createKvPairRenderer closure captured array references at creation
time. When arrays were later reassigned (e.g., after curl import or
loading from URL), the renderer still pointed to the old arrays.
Fix by never reassigning arrays - instead use .length = 0 to clear
and push new items to preserve the same array reference.
* Add defensive object creation when loading state from URL fragment
Ensure key/value pairs are created as new objects with default empty
strings when loading from URL fragment. This prevents potential issues
with undefined values or object reference problems.
* Update document.title to reflect current request settings
Shows title like "POST api.example.com/path - CORS Fetch" when a URL
is entered, or just "CORS Fetch Tester" when empty. Title updates
when URL or method changes, after loading from URL fragment, and
after curl import.
---------
Co-authored-by: Claude <noreply@anthropic.com>
> Modify the cors-fetch tool such that if the response cleanly parses using JSON.parse it is automatically displayed pretty indented with a toggle at the top to switch between formatted and original
When the response body is valid JSON, automatically pretty-print it with 2-space indentation. A toggle switch appears above the body output to switch between formatted and original views. The toggle defaults to formatted and resets when a new JSON response is received.
https://gistpreview.github.io/?21b21ef0b16f9cc78b8f51a70986b1dd/index.html
Execute JavaScript code in a minimal MicroQuickJS sandbox running via WebAssembly, with results displayed for the final expression in your code. Code snippets are automatically saved in the URL hash, making it easy to share executable examples with others. The interface includes pre-built examples demonstrating various JavaScript techniques compatible with this ES5-like runtime environment.
Development history (2 commits)
* Add MicroQuickJS code executor
Creates microquickjs.html - a sandboxed JavaScript executor using
Fabrice Bellard's MicroQuickJS engine compiled to WebAssembly.
Features:
- Minimal ES5-like JavaScript sandbox
- Memory and time limits via WASM isolation
- No console.log (returns last expression value)
- Example snippets adapted for MicroQuickJS dialect
- URL hash sharing for code snippets
Includes mquickjs.js and mquickjs.wasm from research repository.
* Fix button selector in mobile media query
Make button width: 100% only apply to buttons within .button-group,
not all buttons (like example buttons).
* Increase textarea font-size to 16px to prevent mobile Safari zoom
---------
Co-authored-by: Claude <noreply@anthropic.com>
* Add optimized MicroQuickJS WASM and version selector
- Add mquickjs_optimized.js and mquickjs_optimized.wasm (148 KB vs 223 KB)
- Add WASM version selector dropdown defaulting to optimized build
- Version persists via URL parameter (?wasm=original for non-optimized)
- Both versions tested with playwright-python and work correctly
* Add playwright test script for microquickjs.html
Tests both optimized and original WASM versions with 6 test cases
covering basic operations, functions, JSON, arrays, and strings.
Refs: https://github.com/simonw/research/pull/52
---------
Co-authored-by: Claude <noreply@anthropic.com>
Execute JavaScript code in a sandboxed QuickJS environment that runs via WebAssembly, enabling secure and fast script execution directly in the browser. Code is automatically saved to the URL hash, making it easy to share executable snippets with others. The interface includes ten built-in examples ranging from basic algorithms to practical string and array manipulation, along with keyboard shortcuts and real-time execution timing.
Development history (3 commits)
* Add quickjs.html - JavaScript code executor using QuickJS WebAssembly
A UI that lets users enter JavaScript code in a textarea and execute it
using quickjs-emscripten. Features:
- Sandboxed execution via QuickJS running in WebAssembly
- Console.log/warn/error/info support
- URL hash state persistence (code saved as #url-encoded-javascript)
- Auto-execute when loading page with hash
- Keyboard shortcut (Ctrl/Cmd + Enter) to run code
- Tab key support for indentation
- Copy output to clipboard
- Execution time display
* Fix QuickJS loading and add Playwright tests
Changes to quickjs.html:
- Switch from esm.sh to cdn.jsdelivr.net (fixes MIME type errors)
- Use IIFE global build instead of ES modules (better compatibility)
- Fix version from 0.31.1 (doesn't exist) to 0.31.0
Add test infrastructure:
- tests/conftest.py: Improved server fixture with proper startup waiting
- tests/test_quickjs.py: Comprehensive Playwright tests for QuickJS executor
- Tests skip gracefully when CDN is unreachable (isolated environments)
- Covers page load, initialization, code execution, URL hash state, etc.
* Add interactive examples with pill-style buttons
- Added 10 clickable example snippets: Hello World, Factorial, Fibonacci,
Array Methods, Objects & JSON, Prime Numbers, String Fun, FizzBuzz,
Sorting, and Date & Time
- Examples load into textarea and auto-execute when clicked
- Pill-style buttons with hover effects for clean UI
- Removed placeholder text in favor of example buttons
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Claude <noreply@anthropic.com>
To avoid zoom in Mobile Safari
Track and manage two simultaneous recipes with this interactive cooking timer that displays the current step, upcoming tasks, and a complete timeline with clock times. The timer persists across browser sessions, allowing you to pause and resume your cooking progress at any point. Color-coded tags distinguish between the Cauliflower & Couscous and Chickpea Stew recipes to help you stay organized while juggling multiple dishes.
Development history (2 commits)
Test llm-lib, a unified JavaScript library that provides a consistent interface for multiple large language model providers including OpenAI, Anthropic Claude, and Google Gemini. Configure your provider credentials and model settings, then send messages either as complete responses or as real-time streams. The demo includes code examples showing how to integrate the library into your own projects.
Development history (2 commits)
https://gistpreview.github.io/?bed47b0f2389b7b8f09c9e5b76f8ba6d
Context I provided was: https://gist.github.com/simonw/fb521cd7bbce3cb62bd0756037e7137b
> Based ot these three examples design and implement a pure JavaScript browser library for running LLM prompts - both streaming and non-streaming - against the three different providers. The library should provide a single common abstraction for running a prompt and streaming (or returning) the result.
https://gistpreview.github.io/?f88ffd3a551f42421494a78b98c5e41a
Determine whether images contain birds using OpenAI's CLIP model running directly in your browser through Transformers.js. Upload images by dragging and dropping, pasting from your clipboard, or selecting files, or use your device's camera for real-time analysis. The tool processes all images locally with no data sent to external servers, and includes a webcam mode with pinch-to-zoom functionality for mobile devices.
Development history (6 commits)
* Add is-it-a-bird.html - CLIP-powered bird detection tool
A standalone tool that uses Transformers.js to run OpenAI's CLIP model
entirely in the browser for zero-shot image classification. Features:
- Drag-drop, file select, or paste image support
- Uses Xenova/clip-vit-base-patch32 model via Transformers.js
- Compares images against bird, animal, object, person, landscape labels
- Green background when bird detected (>50% confidence), pink otherwise
- Shows detailed similarity scores for all categories
- Runs 100% client-side with no server uploads
* Allow image selection while CLIP model is still loading
- Images can now be selected/dropped/pasted before model finishes loading
- No errors or alerts shown - image is queued and classified automatically
- Prominent yellow "loading" banner with spinner stays visible until ready
- Once model loads, any pending image is classified immediately
* Add accurate download progress bar for CLIP model loading
- Shows real-time download progress with actual bytes (X MB / Y MB)
- Tracks progress across all model files being downloaded
- Displays current file being loaded
- Progress bar with percentage indicator
- Preserves progress display when image is queued during loading
* Defer model loading until user action
- Model no longer auto-loads on page load
- Shows "Load 150 MB model" button with size info upfront
- Model starts loading when user either:
- Clicks the load button
- Selects/drops/pastes an image
- Image is queued and auto-classified once model finishes
* Remove source code link from footer
---------
Co-authored-by: Claude <noreply@anthropic.com>
> Fetch https://observablehq.com/@simonw/openai-clip-in-a-browser and analyze it, then build a tool called is-it-a-bird.html which accepts a photo (selected or drag dropped or pasted) and instantly loads and runs CLIP and reports back on similarity to the word “bird” - pick a threshold and show a green background if the photo is likely a bird
> Guess the URL to fetch the JS version of my notebook
> Make it so you can still select images while the model is loading - without any errors or warnings - but a prominent “model Loading” message will remain visible. And your photo will be classified as soon as it finishes
> Is it possible to show an accurate loading progress bar or do we not know the total size?
> Also show the model size in MB and don’t start loading until the user either selects an image or clicks a “load X MB model” button
> Remove the source code link
> Add a very subtle link to https://xkcd.com/1425/ to the is it a bird tool
Co-authored-by: Claude <noreply@anthropic.com>
* Add webcam mode with continuous bird detection
- Add toggle buttons to switch between Image and Webcam modes
- Add webcam container with video feed displayed in page (not fullscreen)
- Support front/rear camera switching on mobile devices
- Run bird classification every 500ms while camera is active
- Auto-load CLIP model when camera starts if not already loaded
- Display real-time results with color-coded background
* Add pinch-to-zoom for webcam and update title
- Add pinch-to-zoom gesture support on webcam preview (1x to 4x)
- Show zoom level indicator during pinch gesture
- Double-tap to reset zoom to 1x
- Wrap video in container with overflow hidden for smooth zooming
- Change page title to "Is it a bird?"
---------
Co-authored-by: Claude <noreply@anthropic.com>
Move the webcam controls below the bird detection result and score
details so users see the most important information (is it a bird?)
at the top of the results area.
Co-authored-by: Claude <noreply@anthropic.com>
Create custom photo print layouts for A4 pages with adjustable grid configurations, image fitting options, and portrait or landscape orientations. Users can add photos by uploading files or dragging and dropping them directly onto the page, then remove individual photos or clear the entire layout before printing. The preview displays actual print dimensions, allowing precise control over how photos will appear on the final printed output.
Development history (2 commits)
Started https://claude.ai/share/cc7160b3-76c0-45b8-ad13-7c37deabeb04
Fixed a bug with Claude Code:https://gistpreview.github.io/?3b4421605480fe4514d29389cca63b90
---
A tool to help print things out on a single piece of printer paper
You can open as many photos as you like and then select if it should be lintel's adapt or portrait and how many items in a row
It shows a preview (movie friendly) and offers a print button which prints them thanks to a dynamic print style sheet
----
image-print.html is meant to help me print images but the print button
does not have the desired effect, describe how it works right now
----
Fix that
* Make empty state clickable to add photos
The empty state in the image-print tool now opens the file picker
when clicked, providing a more intuitive way to add photos on mobile
where the file input may not be immediately visible.
* Center empty state in preview area
Use grid spanning and flexbox to properly center the empty state
both horizontally and vertically within the preview container.
---------
Co-authored-by: Claude <noreply@anthropic.com>
Convert Markdown text to HTML using GitHub's official Markdown API, with options to render standard Markdown or GitHub Flavored Markdown (GFM). The tool displays a live preview of the rendered content, automatically generates a table of contents for headings, and provides the raw HTML output for copying, while also offering cleanup options to remove GitHub-specific formatting artifacts.
Development history (6 commits)
Copied from https://github.com/simonw/til/commits/main/templates/pages/tools/render-markdown.html
The clipboard copy was failing in many scenarios because it only used
navigator.clipboard.writeText() without a fallback. This API can fail
when the page lacks focus, permissions are denied, or in certain browser
contexts.
Added a robust fallback approach:
1. Try navigator.clipboard.writeText() first (modern API)
2. Fall back to document.execCommand('copy') on textarea
3. As last resort, select text and prompt user to copy manually
Also simplified the success feedback by removing the floating message
animation in favor of a simpler button text/color change.
Co-authored-by: Claude <noreply@anthropic.com>
Remove touchstart handler that was intercepting button taps and calling
synthetic click(), which broke the user gesture chain required by
Mobile Safari for clipboard access.
Simplify copy button to match text-indentation.html pattern.
https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2F86d8fcbad4f70661616db0d783e1c43e%2Fraw%2Fd2edbbeb3484169aa769e9eb984e99dbc9760c15%2Findex.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1&sel=81
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Explore the CSS Grid Lanes polyfill, which brings native masonry-style layout capabilities to all browsers through the display: grid-lanes property. The demonstration showcases six practical layout patterns including photo galleries, varying column widths, newspaper-style articles with spanning elements, explicit item placement, horizontal brick layouts, and mega menus. Each example includes the relevant CSS code and interactive previews that automatically detect native browser support or activate the polyfill as needed.
Development history (1 commit)
Started in Opus: https://claude.ai/share/2d1d2c3b-9ee5-407d-ab64-9135553e3086
Moved to Claude Code: https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2F2a157668c080cc01954e46f914572af4%2Fraw%2Fed96915788447940bfc51524ff5ee5ca657c767c%2F16c4b025-7b6e-43f0-854e-ca7363f2fee9.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1&sel=3
Here is the README it wrote:
A JavaScript polyfill for the new `display: grid-lanes` CSS feature, enabling native masonry-style layouts in browsers that don't yet support it.
CSS Grid Lanes is a new CSS feature [introduced by WebKit](https://webkit.org/blog/17660/introducing-css-grid-lanes/) that enables true masonry-style layouts using native CSS. It allows items to flow into columns (or rows) like a waterfall, with each item positioned in whichever lane gets it closest to the top.
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
```
This polyfill supports:
- ✅ `display: grid-lanes` detection and layout
- ✅ `grid-template-columns` for waterfall (vertical) layouts
- ✅ `grid-template-rows` for brick (horizontal) layouts
- ✅ `repeat()` with `auto-fill` and `auto-fit`
- ✅ `minmax()` for flexible lane sizes
- ✅ `gap`, `column-gap`, `row-gap` spacing
- ✅ `item-tolerance` for placement sensitivity
- ✅ Spanning items with `grid-column: span N`
- ✅ Explicit placement with `grid-column: N / M`
- ✅ Negative indices (e.g., `grid-column: -2 / -1`)
- ✅ Responsive layouts (auto-recalculates on resize)
- ✅ Dynamic content (watches for DOM changes)
```html
<script src="https://unpkg.com/grid-lanes-polyfill@1.0.0/grid-lanes-polyfill.min.js"></script>
```
```bash
npm install grid-lanes-polyfill
```
```javascript
import GridLanesPolyfill from 'grid-lanes-polyfill';
```
Download `grid-lanes-polyfill.js` and include it in your project:
```html
<script src="path/to/grid-lanes-polyfill.js"></script>
```
The simplest way to use the polyfill is to initialize it after the DOM is ready:
```html
<script>
document.addEventListener('DOMContentLoaded', function() {
GridLanesPolyfill.init();
});
</script>
```
The polyfill will automatically find all elements with `display: grid-lanes` and apply the layout.
You can also apply the polyfill to specific elements:
```javascript
const container = document.querySelector('.my-container');
const instance = GridLanesPolyfill.apply(container);
// Later, to refresh the layout:
instance.refresh();
// To remove the polyfill:
instance.destroy();
```
```javascript
if (GridLanesPolyfill.supportsGridLanes()) {
console.log('Native support available!');
} else {
GridLanesPolyfill.init();
}
```
```javascript
GridLanesPolyfill.init({ force: true });
```
| Property | Description | Example |
|----------|-------------|---------|
| `display: grid-lanes` | Enables Grid Lanes layout | `display: grid-lanes` |
| `grid-template-columns` | Defines column lanes (waterfall layout) | `repeat(auto-fill, minmax(200px, 1fr))` |
| `grid-template-rows` | Defines row lanes (brick layout) | `repeat(3, 100px)` |
| `gap` | Gap between lanes and items | `16px` |
| `column-gap` | Gap between columns | `20px` |
| `row-gap` | Gap between rows | `16px` |
| `--item-tolerance` | Placement sensitivity (CSS variable) | `1em` |
| Property | Description | Example |
|----------|-------------|---------|
| `grid-column` | Column span or placement | `span 2` or `1 / 3` or `-2 / -1` |
| `grid-row` | Row span or placement (brick layout) | `span 2` |
```css
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
gap: 12px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
}
.hero {
grid-column: span 3;
}
.featured {
grid-column: span 2;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.sidebar {
grid-column: -2 / -1; /* Last column */
}
```
```css
.container {
display: grid-lanes;
grid-template-rows: repeat(3, 100px);
gap: 12px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
--item-tolerance: 2em; /* Items within 2em are considered "tied" */
}
```
Returns `true` if the browser natively supports `display: grid-lanes`.
Initializes the polyfill for all grid-lanes containers in the document.
**Options:**
- `force` (boolean): Apply polyfill even if native support exists. Default: `false`
**Returns:** An object with:
- `supported` (boolean): Whether native support was detected
- `instances` (Map): Map of container elements to their layout instances
- `refresh()`: Re-layout all containers
- `destroy()`: Remove polyfill from all containers
Applies the polyfill to a specific element.
**Returns:** A `GridLanesLayout` instance with:
- `refresh()`: Re-layout the container
- `destroy()`: Remove polyfill from the container
The polyfill works in all modern browsers:
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
The polyfill uses:
- ResizeObserver (for responsive layouts)
- MutationObserver (for dynamic content)
- CSS.supports() (for feature detection)
1. **Batch DOM updates**: Add all items before initializing the polyfill
2. **Use appropriate tolerance**: Higher `item-tolerance` values can reduce layout thrashing
3. **Lazy load images**: Re-trigger layout after images load for accurate heights
4. **Limit re-layouts**: The polyfill automatically debounces resize events
The polyfill aims to match the native behavior as closely as possible, but there may be minor differences:
1. **CSS parsing**: Complex CSS expressions may not be fully supported
2. **Performance**: JavaScript layout is slower than native CSS
3. **Edge cases**: Some advanced grid features may not be polyfilled
Based on the CSS Grid Lanes specification and implementation by the WebKit team at Apple.
- [WebKit Blog: Introducing CSS Grid Lanes](https://webkit.org/blog/17660/introducing-css-grid-lanes/)
- [CSS Grid Level 3 Specification](https://www.w3.org/TR/css-grid-3/)
Compare JSON documents side-by-side to identify additions, removals, and modifications between two versions. The tool displays differences with color-coded highlighting and provides character-level detail for string changes, making it easy to spot exactly what has changed. Preloaded examples are available to explore common use cases like configuration updates, user profile changes, and API response comparisons.
Development history (2 commits)
> A tool for pasting two different JSON documents which then shows the difference between them visually as clearly as possible, include example links that populate the tool with interesting examples
https://claude.ai/share/53f044f3-042a-4e71-923f-fba43126fb67
* Fix JSON diff to show element-level array differences
- Replace whole-array comparison with element-by-element diffing
- New diffArrays function recursively compares array elements
- Now shows only changed items instead of entire array when a single element differs
- Add embedded test suite (20 tests) with details/summary display
- Remove stray markdown backticks from HTML
- Pretty print CSS with proper indentation
* Add character-level visual diff for string changes
- New diffStrings function using LCS algorithm to find character differences
- Highlights added chars (green), removed chars (red strikethrough), unchanged (gray)
- Only applies to string-to-string modifications, other types unchanged
- Added 5 new test cases for string diffing scenarios
---------
Co-authored-by: Claude <noreply@anthropic.com>
View Claude Code session .jsonl files as an interactive timeline with customizable filtering and search capabilities. This tool displays events chronologically, extracting conversation messages, tool calls, and file snapshots with formatted previews of text content, code blocks, and embedded images. Use the file picker, drag-and-drop, paste input, or URL fetch to load your session data and explore it with timezone switching, content-type filters, and easy JSON export.
Development history (7 commits)
https://tools.simonwillison.net/claude-code-timeline?url=https://gist.githubusercontent.com/simonw/3b2dc0fbea4ba8e677bf6195bc8d9952/raw/85d69ad9f1b874c2139a2f61c7b0f18ed30856c4/4e485649-3221-4d7b-bf1a-129dff975689.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1&sel=34
Or using terminal-to-html: https://gistpreview.github.io/?6a6c58e31f056e8fb8c802ef851489b0
> Read codex-timeline.html - your job is to create claude-code-timeline.html with identical functionality but it works against Claude Code .jsonl files instead. Take a look at /Users/simon/.claude/projects/-private-tmp-bonsai/5761cf91-7b32-4a97-9e3f-0881b35c1b80.jsonl for example data that includes images (which shoudl be rendered as thumbnails)
https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fstatic.simonwillison.net%2Fstatic%2Fcors-allow%2F2025%2Fe64ceb03-4ece-487d-b7c9-927a41f478cb.jsonl
https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2F46afe835d634e8145e54503438fce644%2Fraw%2F73a1c52ef28d1a36d76b11c1357db6da538d402b%2F43daf8c0-2ba6-4328-9f98-582b7b4b4cdd.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1
In claude-code-timeline the feature that gathers all user prompts should skip any prompts that have "isCompactSummary": true in their JSON object
Also skip "isMeta": true
https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2F0d25251f813aaded363c1a4319e844b0%2Fraw%2F932ffa97cd209b445167ffe253e38f1a699d5da1%2F8f5e8399-da56-4001-8c1e-c790821c87d4.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1
Adjust indentation levels in your text with this tool that offers multiple formatting options. Add or remove spaces from the beginning of each line, strip all leading whitespace, eliminate trailing spaces, and apply or remove quote markers (>) for formatted text. Copy the processed result directly to your clipboard with a single click.
View Mozilla Codex rollout timeline events by uploading or pasting a JSONL file to explore the sequence of messages, function calls, and system events with interactive filtering and search capabilities. Each event displays its timestamp in your local timezone or UTC, with detailed views showing formatted content, tool parameters, and reasoning blocks for supported event types. Use the timeline filters to narrow results by event type, payload kind, or message role, and export specific events or concatenate user prompts for external analysis.
Development history (6 commits)
https://tools.simonwillison.net/codex-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2Ff9ec7bf38eb4b8d1b697794039e78f0e%2Fraw%2F111b5e494159289706b3b06b65e734c3349f9480%2Flog.jsonl#tz=local&q=&type=all&payload=user_message&role=all&hide=1&truncate=1&sel=153
Prompts I used were:
----
Goal is to modify the codex timeline viewer to catch up with the claude code timeline app. They started with the same functionality but the claude code one has advanced. Start by reading the code of the two and analyzing what features claude has that codex does not.
Update the codex one with these features: formatted pretty view, including markdown-it with DOMPurify - also the "copy prompts" button, but make that button better in that it's a "show prompts" button which opens an HTML modal dialog with a textarea that fills much of the screen showing those prompts plus a copy button. You can find lots of examples of Codex JSONL files in the ~/.codex/sessions folder to help you implement the formatted pretty view
----
I decided not to share the full transcript as it ended up slurping the content of a bunch of those ~/.codex/sessions/ files in while investigating the file format." -a
Test the JustHTML Python HTML5 parser directly in your browser with this interactive playground. Parse, query, and manipulate HTML using CSS selectors, pretty-print documents, extract text content, and convert HTML to Markdown—all running client-side with Pyodide. The playground supports multiple analysis modes including tree structure visualization and streaming event inspection for comprehensive HTML document exploration.
Development history (3 commits)
* Add justhtml.html - Pyodide playground for HTML5 parsing
A mobile-friendly playground for the justhtml Python library that:
- Installs justhtml from PyPI using micropip
- Supports pasting HTML or fetching from CORS-enabled URLs
- Includes multiple playground modes:
- CSS Selector query with example selectors
- Pretty print HTML
- Tree structure visualization
- Stream events display
- No React dependencies, pure vanilla JS
* Fix contrast on inactive mode buttons
* Fix TypeError in tree structure when children/attrs are None
---------
Co-authored-by: Claude <noreply@anthropic.com>
* Initial plan
* Fix button contrast and consistency in justhtml.html
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
- Add two new playground modes: "Extract Text" and "To Markdown"
- Both modes support optional CSS selector to target specific elements
- Leave selector empty to convert the whole document
- Uses justhtml's built-in to_text() and to_markdown() methods
- Shows match count when using selectors, "Whole document" otherwise
Co-authored-by: Claude <noreply@anthropic.com>
> Add to_text() and to_markdown() features to justhtml.html - for the whole document or for CSS selectors against it
>
> Consult a fresh clone of the justhtml Python library (in /tmp) if you need to
Save and manage clipboard content across multiple formats including text, HTML, RTF, and images with this clipboard backup tool. Paste any content from your clipboard to automatically create a backup that can be restored later or downloaded in its original format. All backups are stored locally in your browser using IndexedDB, giving you persistent access to your clipboard history without any external uploads or server storage.
Development history (10 commits)
A tool that preserves clipboard content across all formats (plain text,
HTML, RTF, images) and allows restoring it later. Features:
- Paste to save clipboard content with all available formats
- IndexedDB persistence for storing multiple backups
- Preview tabs for viewing different formats
- Copy button to restore full multi-format clipboard
- Delete individual backups or clear all
The Clipboard API only supports writing image/png. Added a helper
function that converts any image format (JPEG, GIF, WebP, etc.) to
PNG via canvas before writing to clipboard.
- Updated paste zone hint text to mention PNG conversion
- Added tooltip on copy button for image backups
- Added note under non-PNG image previews: "Will be copied as PNG"
Prevents XSS attacks from malicious HTML content in clipboard backups.
Replaced the click-to-focus paste zone with a proper textarea that
works with mobile paste functionality. The textarea clears after
each successful paste.
The Clipboard API only supports text/plain, text/html, and image/png.
Previously, unsupported formats like text/rtf would cause the write
to fail. Now we filter to only supported types and have better
fallback logic (try image-only, then text-only).
- Added download buttons for all formats (text, HTML, RTF, images, etc.)
- Shows a subtle warning when formats like RTF can't be copied to clipboard
- Downloads use appropriate file extensions based on MIME type
Made the function bidirectional - it now both adds the empty state
when there are no items AND removes it when items exist.
Added text/uri-list to supported types since URLs are also captured
as text/plain and copy correctly.
Make Colors Transparent in PNG is an interactive tool that allows you to remove specific colors from images and export the result with transparent backgrounds. Upload or paste an image, click on any color to select it for transparency, and adjust the tolerance slider to control how many similar colors are removed. Download your processed image as a PNG file with the ability to preview the result against different background colors.
Development history (1 commit)
A tool that lets you:
- Open any image via file picker, drag & drop, or paste
- Click on colors in the image to make them transparent
- Adjust tolerance for color matching
- Preview results against checkerboard or custom background colors
- Download the resulting PNG with transparency
Co-authored-by: Claude <noreply@anthropic.com>
View PDF documents directly in your browser with this lightweight viewer that supports navigation, zooming, and automatic scaling. Load PDFs by entering a URL or passing one via the ?url= parameter, with support for CORS-enabled PDF sources. The viewer renders all pages with customizable zoom levels from 50% to 200%, and automatically tracks your position as you scroll through the document.
Development history (1 commit)
A PDF viewer tool that accepts a URL via ?url= parameter or input field,
uses PDF.js to render CORS-enabled PDFs with features including:
- Page navigation controls
- Zoom controls (auto, 50%-200%)
- Responsive mobile-friendly design
- URL synchronization (updates ?url= when loading)
- All pages rendered in a scrollable view
Co-authored-by: Claude <noreply@anthropic.com>
Claude code for web prompt:
> Build view-pdf.html - a tool that accepts a URL to a PDF file (and uses the one in ?url= if set , also updates that ?url= when one loads) which is served via CORS and loads PDF.js and uses it to display that PDF in a neat mobile-friendly way. Consult existing tools for examples of that library in case it's useful.
Convert GitHub issues and pull requests to markdown format by providing their URL and an optional personal access token for private repositories. The tool automatically fetches the issue details, all comments, and expands any inline code references with their actual content from the repository. Your GitHub token is securely stored in your browser's local storage for convenient access on subsequent visits.
Development history (6 commits)
- Convert github-issue.html to a redirect page pointing to github-issue-to-markdown
- Add GitHub Personal Access Token support to github-issue-to-markdown for
private repos and higher rate limits (stored in localStorage)
- Add better error messages for 401, 403, 404 responses
- Add loading indicator during fetch
- Improve mobile responsiveness with viewport meta tag and media queries
- Add state and timestamp to markdown output
- Keep pagination support for issues with many comments
- Use modern clipboard API instead of deprecated execCommand
Co-authored-by: Claude <noreply@anthropic.com>
When converting GitHub issues to markdown, detect blob URLs with line
numbers (e.g., #L10-L20) and automatically fetch the referenced code
from raw.githubusercontent.com. The code is inserted as a fenced code
block with appropriate language syntax highlighting based on the file
extension.
Co-authored-by: Claude <noreply@anthropic.com>
- Persist the issue URL in the ?issue= query parameter when typing
- Automatically fetch and convert issues when the page loads with ?issue= populated
- Enables sharing direct links to converted issues
Co-authored-by: Claude <noreply@anthropic.com>
Adds comprehensive test suite for github-issue-to-markdown tool that runs
automatically and displays results at the bottom of the page. Tests cover:
- parseGitHubUrl: URL parsing for issues/PRs
- formatDate: date formatting
- parseGitHubBlobUrl: blob URL parsing with line numbers
- getLanguageFromPath: file extension to language mapping
- URL detection regex: various edge cases including the problematic
sqlite-utils URL pattern
- convertToMarkdown: markdown generation
- expandCodeUrls: async URL expansion
The test report shows pass/fail status with detailed error messages
for failures.
Co-authored-by: Claude <noreply@anthropic.com>
View Mozilla Bugzilla bug reports with a streamlined interface that displays bug details, comments, and change history in an organized timeline format. Enter a bug ID, URL, or Bugzilla link to retrieve comprehensive information including status, dependencies, keywords, and all activity related to the bug. The viewer automatically fetches and displays details about related bugs referenced in dependencies and history changes, making it easy to navigate connections between issues.
Development history (1 commit)
https://gistpreview.github.io/?5220ac0590653c024468ca6d7b211993
I noticed Bugzilla has open CORS headers
Demo: https://tools.simonwillison.net/bugzilla-bug?bug=1860854
Track changes across PyPI package versions by entering a package name and viewing detailed diffs between releases. This tool downloads and compares wheel files from PyPI, displaying file-by-file changes with syntax highlighting and support for custom version ranges. Share comparisons easily by copying diffs to clipboard or sharing the generated URL with version parameters.
Development history (2 commits)
Remove word-break: break-all which caused text to display vertically
(one character per line) on mobile. Instead, allow horizontal scrolling
for the diff table with a minimum width to prevent squishing.
Co-authored-by: Claude <noreply@anthropic.com>
Convert SVG images to JPEG or PNG format with customizable dimensions, padding, and background colors. The tool allows you to paste SVG code directly, upload SVG files via drag-and-drop, or load SVG images from URLs, then instantly previews the converted result and provides download and base64 embedding options. URL hashes preserve your work for easy sharing and recovery.
Development history (10 commits)
Tweaked CSS
Selecting transparent now toggles to PNG
Copy to clipboard button no longer uses alert()
- Page now accepts ?url=<svg-url> query parameter to fetch and display
a remote SVG on page load
- "Load example image" link changed to use ?url= parameter, causing a
full page reload instead of a JS click handler
- URL parameter takes precedence over hash fragment if both are present
- When ?url= is present, hash is not updated with SVG content (URL
already references the source)
Co-authored-by: Claude <noreply@anthropic.com>
Search Bluesky posts using advanced filters and options to organize results by latest or top engagement. This tool requires authentication with your Bluesky account credentials and supports filtering by date range, author, mentions, language, domain, URL, and hashtags. Results can be exported as formatted markdown for easy sharing and documentation.
Development history (2 commits)
* Add Bluesky search tool with advanced filtering
Search posts on Bluesky with:
- Sort by Latest (default) or Top
- Date range filtering (since/until)
- Advanced filters: author, mentions, language, domain, URL, hashtags
- Copy to clipboard as formatted markdown with all post details
- Load more pagination support
- Shareable URLs with all search parameters preserved
* Add detailed error display with copy button
When API calls fail, now shows:
- The exact URL that was requested
- HTTP status code and status text
- Full response body from the server
- Copy Error Details button to copy all info to clipboard
* Handle API errors returned with 200 status code
Now checks for error field in JSON response even when HTTP status is 200.
Also improves error message extraction from JSON responses.
* Fix error display to always show copy button
- Wrap fetch() in try-catch to capture network-level errors (CORS, etc.)
- Always show error details panel and copy button, even for non-API errors
- Include error type, message, and stack trace for all errors
* Add Bluesky authentication for search API
The search API now requires authentication. Added:
- Login form with handle/email and app password fields
- Session creation via com.atproto.server.createSession
- JWT token management for authenticated requests
- Credentials stored in localStorage for convenience
- Auto-login on page load if credentials saved
- Logout functionality to clear stored credentials
- Link to create app passwords in Bluesky settings
---------
Co-authored-by: Claude <noreply@anthropic.com>
- Move Since/Until date filters into the Advanced Search Options section
- Hide search form until user has successfully logged in
- Show controls when login succeeds, hide on logout
- Include date params in URL restore logic for advanced filters
Co-authored-by: Claude <noreply@anthropic.com>
Browse and explore the contents of Python packages and archive files directly in your browser. Enter a PyPI package name or provide a direct URL to a .whl or .zip file, and the tool will download and display all files contained within the archive. Click on any file to view its contents in a formatted preview.
Development history (5 commits)
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.
Claude Code transcript for this and several previous commits:
https://gistpreview.github.io/?5e4cd1d48d0a8dd0a5d1c6148be3df5b
Explore how tail-recursive Python functions are transformed into optimized iterative code using the Tacopy library. Enter your recursive function in the input panel to see the automatically generated transformed version, which eliminates stack overflow risks and improves performance by converting tail calls into loops. Try the built-in examples to understand how different recursive patterns are optimized.
Development history (1 commit)
A browser-based playground for the tacopy library's tail-call optimization.
Uses Pyodide to run Python in the browser and shows real-time transformed
code as users type. Includes example functions and helpful error messages
for invalid (non-tail-recursive) code.
Co-authored-by: Claude <noreply@anthropic.com>
Convert web pages to structured content using the Jina Reader API, with support for multiple output formats including markdown, HTML, and text. The interface allows you to fetch and preview page content while optionally running AI-powered analysis through Claude to generate summaries, extract quotes, and identify key ideas from the retrieved material.
Development history (6 commits)
https://gist.github.com/simonw/f768916929eb5b7268354ddcb1021b94
- Stack form elements vertically on mobile with full-width inputs
- Use flexbox layout with 12px gap between elements
- Increase touch target size with larger padding (10px 12px)
- Add subtle border-radius (6px) to inputs, buttons, and iframe
- Add focus states with green accent color
- Switch to row layout on screens >= 540px
- Add subtle active state animation on buttons
Co-authored-by: Claude <noreply@anthropic.com>
Convert terminal output into HTML by pasting colored or plain text content into the input field. The tool automatically detects and preserves formatting from RTF (rich text format) terminal output, HTML, or plain text, then generates a complete HTML document with styling that matches the original appearance. Share your converted output as a GitHub Gist or copy the HTML code directly to your clipboard.
Development history (7 commits)
New tool that accepts terminal output via paste (RTF, HTML, or plain text) and converts it to HTML with proper formatting. Features include:
- RTF parsing for colored terminal output
- Direct HTML passthrough when available
- Plain text wrapping in <pre> tags
- Copy to clipboard functionality
- Save to GitHub Gist with GistPreview URL
- Terminal-themed UI (green on black with Courier font)
- Mobile-friendly responsive design
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
- Added a "Private Gist" checkbox that defaults to checked
- Checkbox appears alongside the "Save this to a Gist" button
- Updated createGist function to respect the checkbox value
- Private gists are now the default behavior
https://gistpreview.github.io/?486aaf0363d713643b8128d6554b43b1
Co-authored-by: Claude <noreply@anthropic.com>
- Redesigned github-ratelimit.html with clean table layout
- Removed green-on-black terminal styling
- Switched to modern GitHub-style design with professional colors
- Implemented ditto marks (″) for repeated "resets at" and "resets in" values
- Better mobile responsiveness
- Standardized GitHub token localStorage key to GITHUB_TOKEN across all tools:
- github-ratelimit.html (changed from github_token)
- github-issue.html (changed from githubToken)
- terminal-to-html.html (changed from github_token)
- openai-audio-output.html (changed from github_token)
All tools now use consistent GITHUB_TOKEN key for better maintainability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
Modified the terminal-to-html tool to wrap all generated HTML output
in a complete HTML document with a body tag that sets the background
color to black. This ensures consistent black backgrounds regardless
of whether the input is RTF, HTML, or plain text.
Co-authored-by: Claude <noreply@anthropic.com>
Spotted this was necessary here: https://github.com/ghostty-org/ghostty/discussions/9798#discussioncomment-15153089
e.g. on here: https://gistpreview.github.io/?573eba5d6998ebd7fce1ee89a0108e33
Convert Apple Notes content to Markdown and HTML formats while preserving hyperlinks and formatting. Paste your notes into the text area to automatically generate both Markdown and HTML outputs, with a live preview of the rendered content. The tool parses RTF data from Apple Notes and provides copy buttons for easy transfer of the converted content.
Development history (1 commit)
Explore the mathematical and sonic relationship between frequencies through interactive demonstrations and a playable piano keyboard. This educational tool visualizes how an octave represents a 2:1 frequency ratio, allowing you to hear the harmonic connection between notes that sound identical yet exist at different pitches. Experiment with various base frequencies using the slider to understand how this fundamental musical principle scales across the entire spectrum.
Development history (2 commits)
> Artifact, no react, with an interactive explainer of how octaves work - should include buttons to press to make sounds and frequency visualizations, make the design minimal, but have a lot of subtle puns
https://claude.ai/share/26916f0e-121d-4e77-9d5f-c900990c6106
The last A# black key was incorrectly positioned at offset 382 instead of 338,
breaking the visual pattern of groups of 2 and 3 black keys.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
> Fix the piano keyboard in the octave explainer, the black keys are wrong - it should have groups of two and then groups of three
https://gistpreview.github.io/?e7208b53ce6fa31c643e4b8db8587e4a
Generate FFmpeg crop commands by uploading a video file and interactively defining a crop area using a draggable overlay. The tool provides both standard and iPhone-compatible FFmpeg command formats that automatically update as you adjust the crop box dimensions and position. This eliminates the need to manually calculate crop parameters for video editing workflows.
Development history (3 commits)
https://chatgpt.com/share/687018f5-2360-8006-aa2c-50f6235a3101
o3 also changed to backtick strings in a few places.
- Add touch event handlers (touchstart, touchmove, touchend) for dragging
the crop box and resizing via corner handles
- Add touch-action: none CSS to prevent unwanted scrolling while dragging
- Enlarge resize handles on touch devices (pointer: coarse) for easier tapping
Co-authored-by: Claude <noreply@anthropic.com>
Retrieve the raw wikitext source code from Wikipedia articles by searching for a page title or pasting a direct article URL. The tool features autocomplete suggestions while typing search queries and allows you to easily copy the fetched wikitext to your clipboard for further editing or analysis. URL parameters are preserved, enabling you to share links that automatically load specific Wikipedia articles.
Development history (5 commits)
Prompt to my Claude Artifacts project was:
A tool where I can paste in a Wikipedia page URL and it makes an API call to this API `https://en.wikipedia.org/w/api.php?action=parse&page=Albert_Einstein&prop=wikitext&format=json&origin=*` which returns JSON like this:
{“parse”:{“title”:“Albert Einstein”,“pageid”:736,“wikitext”:{”*”:”{{Short description…
Then displays the wikitext.* value with a copy button
- Implement typeahead search using Wikipedia prefixsearch API with debouncing
- Show dropdown with article suggestions as user types
- Support keyboard navigation (arrow keys, Enter, Escape) in dropdown
- Auto-fetch wikitext when selecting a suggestion
- Fix mobile layout: button now stacks below input on narrow screens
- Update browser URL with ?page=X when wikitext loads successfully
- Auto-fetch page on load if ?page parameter is present in URL
Analyze written text to identify words and phrases that can be removed without changing meaning or grammatical correctness. This tool uses Claude to apply the editing principle "Omit needless words" from Strunk & White's classic style guide, marking removable content like filler words, redundant modifiers, and wordy phrases. Choose from multiple Claude models and customize the system prompt to refine the editing criteria for your specific needs.
Development history (3 commits)
Started in Claude Artifacts: https://claude.ai/share/6f5ea171-ebf9-4331-b375-ff2f51f4b5be
Finished it in Claude Code: https://gistpreview.github.io/?7cef84e58eee12bc4600f6d07a6b2388
Switch from claude-haiku-4-5-20251001 to claude-opus-4-5-20251101 for
improved text analysis quality.
Co-authored-by: Claude <noreply@anthropic.com>
* Add model selection and customizable system prompt to omit-needless-words
- Add model selector dropdown defaulting to Haiku 4.5, with options for
Sonnet 4.5 and Opus 4.5
- Add collapsible system prompt editor in a details/summary element
- Save custom prompts to localStorage with buttons to save and reset
- Show visible banner when using a custom prompt with toggle button
to switch back to default
* Increase system prompt textarea font to 14px to avoid mobile zoom
* Increase select and prompt textarea font to 16px to prevent iOS zoom
* Allow toggling back to saved custom prompt from default
* Fix mobile zoom issues and improve custom prompt toggle functionality
- Add viewport meta tag with maximum-scale=1.0 and user-scalable=no
- Remove webkit appearance from select and textarea to prevent zoom triggers
- Improve toggle banner logic for better state management
- Ensure proper toggling between custom and default prompts
🤖 Generated with Claude Code
Co-authored-by: Simon Willison <undefined@users.noreply.github.com>
* Improve custom prompt UI: dynamic button text and clear on default save
- Change save button text to "Update custom prompt" when one exists
- Saving the default prompt (unedited) clears the stored custom prompt
---------
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Simon Willison <undefined@users.noreply.github.com>
View Bluesky thread conversations with nested reply hierarchies and chronological sorting options. This viewer fetches posts from public Bluesky APIs and displays them with color-coded depth levels, embedded media support, and interactive features like quoted post previews and image galleries. Users can toggle between thread view (showing reply nesting) and chronological view (most recent first), with the ability to hide non-author replies in thread mode for easier navigation through long conversations.
Development history (15 commits)
https://chatgpt.com/share/6809bb7f-6eb4-8006-abf1-5bc6c4d845ad
- When form is submitted, update page URL to include ?url=... parameter
- On page load, check for ?url= query parameter and auto-populate/submit form
- Enables sharing direct links to specific Bluesky threads
Co-authored-by: Claude <noreply@anthropic.com>
Add tabs to toggle between Thread View and Most Recent First:
- Thread View shows posts nested by reply structure (original behavior)
- Most Recent First shows all posts sorted chronologically with newest at top
- Switching tabs reorders existing posts without making new API calls
- In chronological view, replies show "in reply to username" link
- Clicking reply link scrolls to parent post with highlight animation
Co-authored-by: Claude <noreply@anthropic.com>
The view mode (thread/recent) is now persisted in the URL as a `view`
parameter. This allows users to refresh the page and maintain their
selected view mode. Changes:
- Tab clicks update URL with current view
- Form submission preserves view mode in URL
- Page load reads view parameter to restore state
- Display images as thumbnails with click-to-open fullscreen modal (HTML5 dialog)
- Render quote tweets with styled card, quote icon, and View links
- Support nested embeds (quote tweets containing images or other quotes)
- Render external link previews with thumbnail, title, and description
- Rename "View" links to "View in Bluesky" for clarity
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Parse the facets array from post records to render links as clickable <a> tags.
Bluesky stores truncated link text in the post but includes the full URL in
facets with byte-indexed positions. This change properly decodes and renders
these links.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Claude Code transcript for this and previous change:
https://gistpreview.github.io/?0d10fda70cc39ac621456cf37b648af5
https://gistpreview.github.io/?622fbd945e3602f692f8f8aff0a52313
- Display video thumbnails with play button overlay for posts containing videos
- Click thumbnail to open video in modal with full playback controls
- Use HLS.js for cross-browser HLS video streaming support
- Support for video embeds both standalone and within recordWithMedia embeds
Co-authored-by: Claude <noreply@anthropic.com>
Search for quote posts on Bluesky by entering a post URL to discover all responses that quote the original post. The tool fetches and displays these quotes with options to sort by likes, recency, or oldest first, and provides direct links to view each quote on Bluesky or explore its thread context. A color-coded depth indicator helps visualize the conversation hierarchy.
Development history (2 commits)
New tool to find all quotes of a Bluesky post. Features:
- Paste a Bluesky post URL to find all quotes
- Three sorting options: Most Likes (default), Most Recent, Oldest First
- Shows original post with engagement stats
- Each quote links to both Bluesky and the thread viewer
- URL parameters for sharing: ?post=URL and ?sort=likes|recent|oldest
- Reuses styles from bluesky-thread.html for consistency
* Set document.title to reflect focused post in quote finder
After loading the post data, updates the page title to show
a truncated version of the post text and the author name,
making it easier to identify tabs when multiple are open.
* Use @username before truncated text in document title
---------
Co-authored-by: Claude <noreply@anthropic.com>
Convert text to The New Yorker's distinctive typographic style, automatically applying diacritical marks like diaereses (coöperate, naïve), converting straight quotes to curly quotes, replacing hyphens with em dashes, and transforming ellipses into proper typographic characters. Paste your text into the input field to instantly see the refined version, then copy the converted result with a single click.
Development history (2 commits)
> A tool for pasting in text and getting it back in New Yorker style (with a copy button) - specifically with ï and similar in words where that makes sense - typographically designed to have a bit of New Yorker flair to it
https://claude.ai/share/e296d865-6ffe-48f1-8492-079a2bbc8ad9
View liked posts from any Bluesky user by entering their profile URL, handle, or DID. This application fetches and displays a user's favorite posts with full post details including text, images, and engagement metrics, allowing you to browse and export the content in multiple formats. Simply enter a Bluesky profile identifier and the viewer will retrieve up to 200 of their most recent likes with the ability to load additional posts.
Development history (2 commits)
New tool to view posts liked/favorited by any Bluesky user.
Accepts profile URL, DID, or @username via ?user= query string.
Fetches up to 200 liked posts with pagination support.
The app.bsky.feed.getActorLikes endpoint requires authentication and
only allows fetching your own likes. This fix uses the public
com.atproto.repo.listRecords endpoint to fetch like records, then
app.bsky.feed.getPosts to get the actual post content.
Extract hyperlinks from pasted web content and export them in multiple formats including HTML, Markdown, and plain text. The tool automatically detects and removes duplicate links while displaying each link's title and URL for easy verification. Copy extracted links in your preferred format with a single click.
Development history (1 commit)
* Add link extractor tool for extracting links from pasted content
Similar to the alt text extractor, this tool allows users to paste rich
text content from web pages and extract all links. Features include:
- Renders extracted links on the page with title and URL
- Copy as HTML (unordered list with anchor tags)
- Copy as Markdown (bullet list with link syntax)
- Copy as plain text (title followed by newline and URL)
- Preview sections showing the output format before copying
- Deduplication of identical links
* Move copy buttons next to their relevant output sections
Each export format (HTML, Markdown, Plain Text) now has its own
copy button in the header row next to the format title, making
it clearer which button copies which format.
---------
Co-authored-by: Claude <noreply@anthropic.com>
Compare two blocks of text to identify character-level differences between them. This tool uses a dynamic programming algorithm to compute the longest common subsequence and highlights removed text in red and added text in green for easy visualization of changes. The results are displayed character-by-character in a dedicated output section that clearly indicates what was deleted from the original text and what was inserted in the modified version.
Development history (1 commit)
> A tool where I can paste in two pieces of long text and it shows a visual diff between them with individual differing characters highlighted in green for added and red for removed
https://claude.ai/share/288956ef-885b-4df8-ba44-6489a9f72f33
Analyze images using the Google Gemini API and visualize detected objects as bounding boxes or points overlaid on the original image with coordinate grid lines. The tool supports multiple Gemini model versions and can extract either bounding box coordinates in normalized format or point locations with labels, displaying the results alongside a detailed visualization canvas. Store your API key locally for convenient access across multiple sessions.
Development history (15 commits)
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.
https://simonwillison.net/2025/Feb/5/gemini-2/
Plus fixed cropped image display to have a max width 100
https://claude.ai/share/d1deed46-931c-4e24-8e44-b9b695ad245a
Co-authored-by: Claude <noreply@anthropic.com>
- Add extractPoints() function to parse JSON responses containing point data
- Add displayImageWithPoints() function to visualize points on canvas
- Points are rendered as colored circles with labels next to them
- Supports response format: [{"point": [y, x], "label": "name"}, ...]
- Falls back to bounding box rendering if no points are found
Check XML documents for well-formedness by pasting content into the input area and clicking the validate button. The tool parses the XML and displays any syntax errors with precise line and column information, highlighting the problematic line in the code view below.
Development history (1 commit)
Extract and identify all emojis from text by pasting or typing into the input field, and instantly view their names and Unicode codepoint values. The tool uses a comprehensive emoji detection regex pattern combined with a Unicode emoji dataset to recognize a wide variety of emoji characters, including skin tone variants and zero-width joiner sequences. Results are displayed in real-time, showing each unique emoji found along with its standardized name and corresponding Unicode representation.
Development history (1 commit)
Extract alternative text and image URLs from rich text content pasted into this tool. Simply paste content from web pages, and the tool automatically detects embedded images, displays them alongside their alt text descriptions, and provides copy buttons for convenient access to both the alt text and image URLs. This utility is particularly useful for accessibility audits, content analysis, and archiving image metadata.
Development history (2 commits)
* Initial plan
* Add image URL display with copy button to alt text extractor
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
Convert between special characters and their HTML entity representations with this bidirectional encoding tool. Select between Escape mode to convert characters like <, >, &, and quotes into their corresponding HTML entities, or Unescape mode to decode HTML entities back into readable characters. The tool supports named entities, decimal numeric references, and hexadecimal numeric references, with real-time conversion displayed in the output field.
Development history (2 commits)
* Add radio button to toggle between escape and unescape modes
- Added radio buttons to switch between Escape and Unescape modes
- Implemented unescapeHTML function to convert HTML entities back to characters
- Updated output label to dynamically reflect the current mode
- Enhanced documentation to explain both modes of operation
- Added CSS styling for the mode selector controls
* Add support for numeric HTML entities in unescape mode
- Added decoding of decimal numeric entities (e.g., ")
- Added decoding of hexadecimal numeric entities (e.g., ")
- Updated documentation to reflect numeric entity support
- Now handles all numeric character references, not just named entities
* Improve Unescape mode documentation for clarity
- Reorganized documentation into clearer format
- Grouped entity types with better visual separation
- Used arrow notation (→) for better readability
- Consolidated examples to reduce clutter
- Added clearer description of use cases
---------
Co-authored-by: Claude <noreply@anthropic.com>
Monitor your GitHub API usage with this rate limit checker tool. Authenticate with your GitHub account to view detailed information about your remaining API calls across different resource types, including visual progress indicators and reset times. The tool displays usage statistics and alerts you when your rate limits are running low.
Development history (4 commits)
This tool provides an easy way to check GitHub API rate limits by:
- Using the same GitHub authentication mechanism as other tools
- Displaying rate limits for all API resources (core, search, graphql, etc.)
- Showing remaining calls, used calls, and reset times
- Color-coding warnings when limits are running low
Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
- Redesigned github-ratelimit.html with clean table layout
- Removed green-on-black terminal styling
- Switched to modern GitHub-style design with professional colors
- Implemented ditto marks (″) for repeated "resets at" and "resets in" values
- Better mobile responsiveness
- Standardized GitHub token localStorage key to GITHUB_TOKEN across all tools:
- github-ratelimit.html (changed from github_token)
- github-issue.html (changed from githubToken)
- terminal-to-html.html (changed from github_token)
- openai-audio-output.html (changed from github_token)
All tools now use consistent GITHUB_TOKEN key for better maintainability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
- Replaced table layout with responsive card-based design
- Added visual progress bars to show usage for each rate limit
- Progress bars color-coded: green (normal), yellow (warning), red (critical)
- Each card displays resource name, remaining count, progress bar, and reset time
- Improved mobile responsiveness with stacked stats on small screens
Co-authored-by: Claude <noreply@anthropic.com>
When the GitHub API returns a 401 (unauthorized) or 403 (forbidden) status,
the tool now:
- Removes the invalid token from localStorage
- Shows the authenticate button again
- Displays an error message prompting the user to re-authenticate
This improves the user experience when tokens expire or become invalid.
Co-authored-by: Claude <noreply@anthropic.com>
Count tokens in your Claude API requests using this web-based token counter tool. Enter a system prompt and user message, optionally attach images or PDF documents, and receive detailed token usage information for billing and optimization purposes. The tool securely stores your API key locally and communicates directly with the Anthropic API to provide accurate token counts for your exact message content.
Development history (2 commits)
Initial: https://gist.github.com/simonw/d6797005adf1688427470f9fcb8d287f
Modifications: https://gist.github.com/simonw/ebc1e32b9f3ddc0875ce8d875d7100bd
* Fix Claude token counter to use claude-sonnet-4-5 model
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
Interact with a MicroPython device via the Web Serial API to execute Python commands in real-time through a browser-based REPL interface. This tool enables direct communication with compatible microcontroller boards, allowing users to run Python code, query system information, and manage files without requiring terminal software or drivers. The interface provides quick-access buttons for common operations like listing files, checking CPU frequency, and monitoring available memory.
Development history (2 commits)
Frustrating session! https://gistpreview.github.io/?d6249be5ddffbb8ce5ce15cf4fac1bf7
Create and edit 24×24 pixel icons with an intuitive browser-based editor featuring a live grid canvas, color picker, and emoji starter templates. Design your icons by clicking pixels directly on the canvas, customize colors using the preset palette or custom hex input, and optionally start with common emojis or custom characters that are automatically converted to pixelated artwork. Your work is automatically saved to the URL, allowing you to bookmark or share your designs without any backend storage requirements, and you can download your finished icon as a PNG file when complete.
Development history (1 commit)
Explore GitHub's GraphQL API using an interactive query interface that requires authentication via a personal access token. Enter your GitHub token to connect and start writing, executing, and testing GraphQL queries against GitHub's data in real-time. The explorer provides syntax highlighting, query validation, and response inspection capabilities within an embedded GraphiQL environment.
Development history (1 commit)
I just found out GitHub are getting rid of the official one on November 1st 2025: https://github.blog/changelog/2025-08-22-graphql-explorer-removal-from-api-documentation-on-november-1-2025/
https://claude.ai/share/46ff6073-64c5-4f38-adba-7a7b435e9ee2
Count lines of code in software projects by uploading files, pasting code snippets, or analyzing public GitHub repositories using the classic SLOCCount algorithm compiled to WebAssembly. The tool analyzes code in multiple programming languages and provides detailed breakdowns by language along with cost and effort estimates based on the COCOMO software engineering model. Customize the salary and overhead multipliers to adjust the estimates based on your specific context.
Development history (7 commits)
This commit adds a new mobile-friendly web tool for analyzing source code
line counts using the Perl sloccount tool via WebAssembly.
Features:
- Mobile-responsive UI with tab-based interface
- Support for pasted code with language detection based on file extension
- Support for GitHub repository analysis via GitHub API
- WebPerl integration for running Perl code in the browser
- Real-time line counting with filtering of comments and empty lines
- Language breakdown with visual table display
- Comprehensive Playwright test suite with 12 test cases
Also includes TOOLS_GUIDE.md documentation for repository patterns and
development guidelines.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
https://gistpreview.github.io/?0fc406a18e14a1f7d28bfff02a18eaaf#simonw/0fc406a18e14a1f7d28bfff02a18eaaf
Also uv-test now works, see https://til.simonwillison.net/python-uv-tests
https://gistpreview.github.io/?56ecae45cf2e1baca798a83deea50939
- Compile SLOCCount C programs to WebAssembly using Emscripten v4.0.17
- c_count.wasm: Main C/C++/JavaScript/Java counter
- php_count.wasm, ml_count.wasm, pig_count.wasm, lexcount1.wasm
- Implement hybrid Perl + WASM counter routing
- Perl scripts for Python, Ruby, Perl, SQL
- WASM binaries for JavaScript, C, C++, Java, PHP
- Uses original SLOCCount algorithms without modification
- Add enhanced COCOMO cost estimation features
- Year preset toggle: 2000 (original) vs 2025 (updated)
- All COCOMO parameters now editable (effort coefficient, salary, overhead)
- Prominent warning about estimate accuracy
- Footnote links from cost displays to detailed explanation
- Update documentation
- Add WASM compilation process to lib/README.md
- Include Emscripten build commands and configuration
- Add comprehensive tests
- Test COCOMO year preset switching
- Test footnote link navigation
- Test WASM JavaScript counter integration
- All 18 tests passing
This completes the integration of the original SLOCCount tool to run
entirely in the browser via WebAssembly, supporting both Perl and C
language counters.
Claude Code transcript: https://gistpreview.github.io/?79ca231e801fe1188268a54d30aa67ed
* Add support for popular programming languages released since 2001
Added Perl counter files for 10 modern programming languages:
- Kotlin (.kt, .kts) - 2011
- Swift (.swift) - 2014
- Dart (.dart) - 2011
- Scala (.scala) - 2004
- Groovy (.groovy) - 2007
- Elixir (.ex, .exs) - 2011
- Julia (.jl) - 2012
- F# (.fs, .fsx) - 2005
- Rust (.rs) - 2010
- Go (.go) - 2009
Each language has its own dedicated counter file in lib/sloc/ that
properly handles language-specific comment syntax. The HTML file has
been updated to:
- Load these counter scripts from lib/sloc/ directory
- Map file extensions to the appropriate counters
- Include these extensions in GitHub repo and ZIP file analyzers
All counters use Perl to properly handle single-line and multi-line
comments specific to each language's syntax.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Remove license comments from new Perl counter files
Only keeping functional comments that explain how the code works.
* Add self-test to Kotlin counter and remove license comments
- Added --test flag to kotlin_count with sample Kotlin code
- Self-test verifies correct line counting (4 lines after removing comments)
- Removed all GPL license boilerplate from new counter files
- Only keeping functional comments that explain how the code works
* Add self-tests to all language counters
Each Perl counter script now includes a --test flag that:
- Creates a test file with sample code in that language
- Runs the counter on it
- Verifies the line count is correct
- Shows which lines are counted (excluding comments)
Test coverage:
- Kotlin: 4 lines (C-style comments)
- Swift: 4 lines (C-style comments)
- Dart: 4 lines (C-style comments)
- Scala: 4 lines (C-style comments)
- Groovy: 4 lines (C-style comments)
- Elixir: 6 lines (# comments)
- Julia: 4 lines (# and #= =# comments)
- F#: 3 lines ((* *) and // comments)
- Rust: 4 lines (C-style comments)
- Go: 5 lines (C-style comments)
All tests pass successfully.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Add tests for modern programming languages
Tests verify that all 10 new languages are properly detected and counted:
- Kotlin (.kt)
- Elixir (.ex)
- Rust (.rs)
- Go (.go)
- Swift (.swift)
- Dart (.dart)
- Scala (.scala)
- Groovy (.groovy)
- Julia (.jl)
- F# (.fs)
Each test case pastes sample code, verifies the language is detected,
and confirms non-zero line count.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Add Python test to verify Perl counter self-tests
Added test_perl_counter_self_tests() which:
- Runs each of the 10 new language counter scripts with --test flag
- Verifies exit code is 0 (success)
- Checks that output contains 'PASS'
- Verifies language name appears in output
This ensures the embedded self-tests in the Perl scripts work correctly
and can catch regressions in the comment-filtering logic.
All 10 language counters tested:
- Kotlin, Swift, Dart, Scala, Groovy
- Elixir, Julia, F#, Rust, Go
Test run time: ~0.3 seconds
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
* Add warning for large repos exceeding 500 files in GitHub fetcher
When the GitHub repository fetcher encounters more than 500 files, it now:
- Fetches the default branch name from the GitHub API
- Displays a prominent warning message to the user
- Provides a direct zip download URL using the correct branch name
- Encourages users to download the zip and use the Upload ZIP tab
This helps users understand the limitation and provides a clear path to
analyze the complete repository.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Fix: Use GitHub API truncated property instead of hardcoded limit
Changed the warning logic to check the `truncated` property returned by
the GitHub API instead of using an arbitrary 500-file limit. The GitHub
Trees API can return many thousands of files and sets `truncated: true`
only when the repository is genuinely too large.
This fixes false warnings for repositories with >500 but <~100k files.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Fix undefined filesToFetch variable and use correct branch
Fixed bug where filesToFetch was referenced but not defined after
refactoring. Changed all references to use codeFiles instead.
Also fixed the raw file URL to use defaultBranch instead of hardcoded
HEAD to ensure files are fetched from the correct branch.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Stop processing when GitHub API truncates repository
When a repository is too large and GitHub returns truncated results,
now show a permanent error message directing users to download the ZIP
file instead of attempting to fetch incomplete data via the API.
This prevents wasted API calls and makes it clear that the ZIP upload
method is required for very large repositories.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Make ZIP download URL a clickable link in error message
Updated the truncated repository error message to render the ZIP
download URL as a clickable HTML link. Modified showStatus() to
accept an optional isHtml parameter for rendering HTML content.
The link opens in a new tab and uses a blue color (#004085) that
contrasts well with the error message's light pink background.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Removed some target="_blank"
---------
Co-authored-by: Claude <noreply@anthropic.com>
Claude Code transcript: https://gistpreview.github.io/?d29b8601735613879152bc8241cb689e
* Fix contrast on selected tab state in sloccount
Changed active tab text color from #007bff to #004085 to meet WCAG AA
accessibility standards. The new color provides 8.59:1 contrast ratio
against white background (previously 3.94:1, below the 4.5:1 requirement).
The blue bottom border indicator remains unchanged for visual consistency.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Use dark text for active tab instead of blue on blue
Changed active tab text from blue (#004085) to dark gray (#212529) to
avoid blue-on-blue visual confusion. The blue underline now serves as
the sole selection indicator, while the text maintains maximum
readability with 16.1:1 contrast ratio.
This provides better visual hierarchy:
- Inactive tabs: gray text
- Active tab: dark text + blue underline
- Selection clearly indicated without color conflict
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Use white text on blue background for active tab
Changed active tab styling to use white text (#ffffff) on blue
background (#007bff), creating a clear inverted button effect for
the selected state. This provides strong visual distinction between
active and inactive tabs while maintaining excellent contrast (4.64:1).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
* Fix active tab hover state to maintain white text
Prevent hover state from overriding active tab styling by:
- Limiting hover color change to non-active tabs only
- Explicitly maintaining white text color for active tab hover state
This ensures active tabs always show white on blue, whether hovered or not.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
---------
Co-authored-by: Claude <noreply@anthropic.com>
Interact with OpenAI's GPT-4o audio models to generate spoken responses to your prompts with customizable system instructions and voice selection. The application processes your input through the OpenAI API, retrieves the generated audio and transcript, and provides playback controls along with the full API response data. You can save responses as GitHub Gists and download the audio files for offline use.
Development history (8 commits)
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).
- Redesigned github-ratelimit.html with clean table layout
- Removed green-on-black terminal styling
- Switched to modern GitHub-style design with professional colors
- Implemented ditto marks (″) for repeated "resets at" and "resets in" values
- Better mobile responsiveness
- Standardized GitHub token localStorage key to GITHUB_TOKEN across all tools:
- github-ratelimit.html (changed from github_token)
- github-issue.html (changed from githubToken)
- terminal-to-html.html (changed from github_token)
- openai-audio-output.html (changed from github_token)
All tools now use consistent GITHUB_TOKEN key for better maintainability.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
Explore a product catalog with interactive item details displayed in a smooth side panel modal. Click any product card to view comprehensive information including category, price, and description, with the option to toggle between modal and non-modal dialog behavior. The interface includes a feedback form within the side panel, allowing users to submit comments about products with a seamless animated experience.
Development history (4 commits)
- Modified cancel event listener to trigger animateCloseDialog()
- Esc key now closes the panel with proper slide-out animation
- Maintains consistency with other close methods (X button, backdrop click)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
Remove query parameters and tracking data from URLs with this Query String Stripper tool. Paste any URL to instantly extract the base address by stripping away everything after the question mark, then copy the cleaned result to your clipboard with a single click. This utility is helpful for sharing clean URLs, removing analytics parameters, or simplifying web addresses for documentation purposes.
Development history (1 commit)
Creates a mobile-friendly interface for stripping query strings from URLs. As users paste or type a URL, it instantly displays the URL with everything from ? onwards removed, plus a copy to clipboard button.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude <noreply@anthropic.com>
Extract all strings from JSON data that exceed 20 characters in length or contain line breaks. This tool is useful for identifying longer text content within complex JSON structures for review, localization, or documentation purposes. Simply paste JSON into the textarea to automatically display matching strings along with their object paths, and use the copy button to quickly transfer any string to your clipboard.
Development history (4 commits)
I did this by hand. I decided it would usually just be confusing.
* Initial plan
* Add Gist loading feature to json-string-extractor
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
* Make Gist ID regex case-insensitive
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
* Update documentation for Gist loading feature
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
* Improve documentation readability
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
* Initial plan
* Refactor loadExampleJSON to use fragment ID link
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
* Add hashchange listener to load gist when fragment changes
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
---------
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: simonw <9599+simonw@users.noreply.github.com>
Analyze and visualize AI deep research transcripts with this interactive viewer that displays the complete research workflow including reasoning steps, web searches, visited pages, and code executions. Load transcripts from GitHub Gists, paste JSON directly, or view example data to explore how the AI model conducted research and arrived at its final conclusions. The viewer provides statistical summaries and a chronological timeline showing the model's thinking process, search queries, page visits, and computational steps in an easy-to-read format.
Development history (1 commit)
Convert Rich Text Format (RTF) documents to HTML with preserved formatting, colors, and styling. Paste RTF content from your clipboard to automatically extract the color table and convert text formatting including bold styling, text colors, and background colors into inline HTML styles. The converter displays the raw RTF data, generated HTML code, and a live preview of the formatted output all in one interface.
Development history (2 commits)
Much better.
https://claude.ai/share/5c12dd0e-713d-4f32-a6c1-d05dee353e4d
Explore OpenAI's prompt caching feature by testing different prompt structures and observing cache hit rates across multiple requests. This interactive playground lets you compose system instructions, document context, and user questions, then send them to the Chat Completions or Responses API to track how cached tokens reduce costs and improve performance. Load pre-built scenarios to compare caching behavior—such as sending identical instructions with different questions to see cache hits, or swapping documents while keeping instructions static to measure prefix reuse.
Development history (1 commit)
https://chatgpt.com/share/68f1258a-1a60-8006-876c-aa789992ef6b
Capture images from your device's camera and generate haiku poetry inspired by what you photograph using Claude's vision capabilities. Press the camera button to take a photo, and the AI will compose an original haiku based on the image content. The app stores your Anthropic API key locally for convenience and supports switching between front and rear-facing cameras on devices with multiple camera options.
Development history (6 commits)
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
Convert formatted text from rich text editors or web pages directly into clean Markdown syntax. This tool accepts pasted content with bold, italic, links, lists, and paragraph breaks, then automatically converts the underlying HTML to properly formatted Markdown that can be copied with a single click. It works offline in your browser without requiring any external dependencies or frameworks.
Development history (3 commits)
https://chatgpt.com/s/cd_68e9d0f6dfe08191a3ebc06e6f455118
Render DOT graph files into visual diagrams directly in your browser. Paste your DOT syntax into the textarea and the graph will automatically render as an SVG visualization, with live updates as you edit. Share your graphs by copying the URL, which encodes your DOT content in the fragment identifier.
Development history (1 commit)
Analyze Hacker News stories by searching for multiple terms across a custom time range and visualize the results as an interactive histogram. The tool fetches monthly hit counts from the Hacker News API for each search term, displaying data in a color-coded bar chart, sortable table, and exportable JSON format. Click any bar to view the actual stories matching that term within that month's date range.
Development history (2 commits)
https://chatgpt.com/share/686b0e7a-ee80-8006-b97b-afe1d5c8f548 then https://chatgpt.com/share/686b0e8a-dee4-8006-92ce-33dac8151997
https://claude.ai/share/342ff57b-6623-45db-bc63-08cf0cf4b42a
Monitor keyboard input in real-time with this interactive keyboard debugger that displays pressed keys and their corresponding key codes. Press any keys on your keyboard to see them appear with visual feedback, including support for simultaneous multi-key presses and special key representations. This tool is useful for testing keyboard functionality, debugging input handling, and understanding key event properties like key name, code, and keyCode values.
Development history (1 commit)
Run Python code directly in your browser using MicroPython compiled to WebAssembly. Enter Python code in the editor and click Run to execute it instantly, or use the Tests button to verify core functionality including arithmetic, state persistence, exception handling, and standard library features. The entire MicroPython runtime is loaded from a CDN, requiring no local installation or server-side processing.
Development history (1 commit)
Started here: https://chatgpt.com/share/68d562e4-2fe4-8006-bf25-5cf8658c1473
Continued in Codex CLI: https://gist.github.com/simonw/498d3ce396db6fc493f4db4d4bfdf990
Execute NumPy vector and matrix operations directly in your browser using an interactive lab powered by Pyodide. Work through five hands-on exercises covering elementwise operations, dot products, matrix multiplication, broadcasting, and indexing, then experiment freely in the playground sandbox with instant Python output.
Development history (1 commit)
https://chatgpt.com/share/68d4801b-3d38-8006-873c-d7d7b91a5b34
Inspired by https://simonwillison.net/2025/Sep/24/stanford/
Draw pixel art for e-ink badge displays with this web-based canvas editor supporting multiple brush sizes, undo/redo functionality, and real-time black-and-white preview. Export your designs as PNG files or transfer them directly to Badger2040 devices running MicroPython via Web Serial. The editor maintains device-native resolution while offering adjustable zoom levels and includes features like grid overlay, background image loading, and URL-based bookmarking for saving your work.
Development history (2 commits)
https://claude.ai/share/741a9c92-79bd-440a-81df-627199b81ddb
Look up GitHub user account information by entering a username to retrieve the numeric Account ID and account creation date through the public GitHub API. The tool displays the user's profile link, avatar, and formatted timestamps, along with request latency information. Unauthenticated requests are subject to GitHub's rate limits, which may block further lookups after a certain number of queries.
Development history (1 commit)
Execute Python code directly in your browser with Pyodide, a WebAssembly-based Python runtime. This demo loads pandas, numpy, and matplotlib in the client to generate a bar chart from sample data and display it as a rendered image—no server required. The first run may take a few seconds as the necessary libraries are downloaded from CDN, but subsequent executions run instantly from your browser's cache.
View AI adoption trends across different firm sizes by analyzing survey data on artificial intelligence usage in the workplace. This page runs a Python analysis using Pyodide to fetch employment survey data, calculate six-survey rolling averages, and generate an interactive visualization showing adoption rates by company size from November 2023 through August 2025. Download the resulting chart as PNG or SVG for further use or presentation.
Development history (1 commit)
https://chatgpt.com/share/68bf38ce-216c-8006-b1d9-52ff95cdace3
Recreation of https://www.apolloacademy.com/ai-adoption-rate-trending-down-for-large-companies/
Using data from https://www.census.gov/hfp/btos/data_downloads - Employment Size Class
Compare images at different sizes and quality levels by uploading a photo, defining a crop area, and generating multiple preview versions with varying dimensions and compression settings. The tool displays file sizes for each variant and allows interactive toggling between normal and full-width viewing modes, as well as direct downloads. Transparency detection automatically reveals a background color picker when needed for images with alpha channels.
Development history (5 commits)
Adapted from this Claude artifact https://claude.site/artifacts/45ecf75e-d8e2-4d2a-a3b9-d8c07c7bd757
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'
https://gist.github.com/simonw/04e9fd78af5f739d97deb69a75c9aa2a
Extract text from PDF documents and images using optical character recognition (OCR) directly in your browser. The tool leverages Tesseract.js for text recognition and PDF.js to handle multi-page PDF files, supporting multiple languages and file formats including JPEG, PNG, and GIF. All processing occurs locally in your browser with no files being transmitted to external servers.
Development history (15 commits)
Address https://codeanlabs.com/blog/research/cve-2024-4367-arbitrary-js-execution-in-pdf-js/
Navigate the treacherous single-track lanes of rural Devon in this interactive driving simulator, where you must manage your sanity while encountering cyclists, tractors, caravans, and other obstacles. Each encounter presents a unique challenge requiring a dice roll to succeed, with your choices affecting both your progress and mental state as you attempt to travel increasingly longer distances. The game combines humor, strategy, and unpredictable encounters to test whether you can survive the quirky chaos of England's countryside roads.
Development history (1 commit)
Retrieve and view recent comments from a Hacker News user by entering their username and fetching up to 1,000 of their most recent comments. The tool displays each comment with its date, associated story title, thread link, comment link, and full text in an easily readable format. You can copy all the retrieved comments to your clipboard with a single click.
Development history (1 commit)
Calculate and rescale percentage values in real time with this interactive tool. Enter up to four percentages and optionally mark any as ignored to exclude them from the recalculation, which automatically normalizes the remaining active percentages to sum to 100%. The interface displays both the original values and their recalculated equivalents, making it useful for adjusting weighted distributions or normalizing survey responses.
Development history (1 commit)
Test the Web Speech API's speech synthesis capabilities by entering text and configuring voice parameters such as rate, pitch, and volume. The application provides a selection of available system voices and displays real-time status updates as text is being spoken. Users can adjust synthesis settings and stop playback at any time using the intuitive control interface.
Development history (2 commits)
https://chatgpt.com/s/cd_687fc7bf63e881919051e0e74967192d
Learn the difference between bullish and bearish market sentiment through an interactive visual guide featuring animated bull and bear characters. The page uses intuitive animal metaphors—bulls thrust their horns upward to represent rising markets and optimism, while bears swipe downward to represent falling markets and pessimism. A built-in quiz feature helps reinforce these concepts with randomized questions about market terminology.
Browse the Open Sauce 2025 conference schedule with sessions organized by day, including speaker information, session duration, location, and detailed descriptions. Users can search for specific sessions across all three conference days (July 18-20, 2025) and download the entire schedule as an ICS calendar file for integration with their calendar applications. The interface displays current and upcoming sessions in Pacific Time to help attendees plan their conference experience.
Development history (8 commits)
https://chatgpt.com/s/cd_687ac73e11a48191876d3066dea6b25f
https://chatgpt.com/s/cd_687bd8b7cfcc81919d393eee03152c51
https://chatgpt.com/s/cd_687bd8d930c481918ca5d7fc25c738e8
Compress and optimize image files by uploading them to this web-based tool that applies adjustable JPEG quality settings to reduce file size. The interface allows users to compare the original and optimized versions side-by-side by toggling between views or pressing and holding the image, while providing real-time compression statistics and the ability to download the optimized file or copy its data URI for embedding in code.
Development history (2 commits)
I built this one using GPT-4 back in April 2023
https://gist.github.com/simonw/66918b6cde1f87bf4fc883c67735195d
Browse the latest Hacker News stories with customizable content filtering to exclude topics of your choice. Enter comma-separated terms to filter out posts matching those keywords across titles, URLs, and descriptions, and refresh the feed to load the newest stories. Your filter preferences are automatically saved in your browser for future visits.
Development history (5 commits)
Three more prompts to o3:
Turn the username into a link to https://news.ycombinator.com/user?id=xxx - include the comment count, which is in the num_comments key
The text "392 comments" should be the link, do not have a separate thread link
Add a tooltip to "1 day ago" that shows the full value from created_at
Research here: https://chatgpt.com/share/6876ad96-b96c-8006-be2a-1538c1c063de
Implementation here: https://claude.ai/share/94c583ee-584a-4983-bfc3-60c2090f97b7
Prompt to Claude was:
> Bring back the previous time since code with the tooltip
As part of previous conversation.
Interact with Chrome's built-in language model API through this web-based playground interface. The application allows users to check model availability, download the model if needed, and execute text prompts to generate responses directly in the browser. A persistent history feature maintains records of previous prompts and responses for easy reference.
Development history (3 commits)
Claude 3.5 Sonnet built most of this - transcript here: https://gist.github.com/simonw/e62440114960bc98f200eb3d92593896
Calculate the time between two dates with detailed breakdowns and visual representations. This tool displays the total number of days, weeks, business days, and weekend days spanning your selected date range, along with a visual timeline showing where the dates fall relative to today. Use the calculation method options to focus on specific day types such as business days or weekends only.
Development history (2 commits)
- Add universal box-sizing: border-box CSS rule
- Maintain rounded corners for timeline elements
- Keep flex-wrap for method options responsiveness
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Simon Willison <simonw@users.noreply.github.com>
Chat with Google's Gemini AI models directly in your browser using this interactive chat application. Simply enter your Gemini API key (stored locally for convenience) and select from multiple available models including Gemini 2.5 Flash, Pro, and various other versions to power your conversations. The app displays real-time streaming responses, tracks API usage metrics, and measures response duration to help you monitor your interactions.
Use the Gemini API to analyze images and generate segmentation masks with visual overlays. Upload an image and provide a prompt describing what you want to segment, then the application displays bounding boxes and mask visualizations directly on the image canvas. Token usage metrics are provided for each API call, and you can choose from various Gemini model versions including thinking and non-thinking variants.
Development history (3 commits)
Started in Claude: https://claude.ai/share/9e42d82b-56c7-46c1-ad0c-fc67c3cad91f and then https://claude.ai/share/f820f361-5aa7-48b5-a96d-f0f8b11d3869
Switched to O3 to fix final bugs and make more tweaks: https://chatgpt.com/share/6801c8ad-18c8-8006-bdd8-447500eae33e
o4-mini-high: https://chatgpt.com/share/68028f7b-11ac-8006-8150-00c4205a2507
> This code needs to be upgraded to the new recommended JavaScript library from Google. Figure out what that is and then look up enough documentation to port this code to it
Then more.
Convert JSON transcripts from audio into formatted Markdown with speaker names and timestamps. This tool automatically processes JSON data containing speaker names, text, and timestamp information, formatting them into readable Markdown output that can be easily copied and pasted elsewhere. The tool includes instructions for generating the required JSON format using the LLM command-line tool with audio files.
Development history (1 commit)
Calculate reading time estimates for any text by pasting or typing content into the input area. The tool displays real-time statistics including word count, character count, and estimated reading duration based on an average reading speed of 230 words per minute. The reading time adjusts dynamically, showing minutes for shorter texts and hours plus minutes for longer content.
Development history (1 commit)
Based on 230 words per minute estimate (which seems to be what other people use). https://www.baldurbjarnason.com/2024/on-reading-time/ talks about the many ways this is a poor estimation mechanism!
https://claude.ai/share/0e6699a8-eed2-4380-9bc6-6e72af4fe7c5
Send chat messages that synchronize instantly across multiple browser tabs using the Broadcast Channel API. Each tab displays messages sent from other tabs with a sync indicator, allowing real-time communication without requiring a backend server. Open multiple tabs of this page to see messages propagate automatically across all instances.
Development history (1 commit)
Calculate file transfer duration by entering the file size and transfer speed with their respective units. The calculator automatically converts between different measurement units (GB, MB, TB for file size; Mbps, MB/s, KB/s for speed) and displays the estimated transfer time in an easily readable format. Results include a detailed breakdown showing days, hours, minutes, and seconds alongside the calculation parameters.
Development history (1 commit)
Experiment with CSS Flexbox properties in real-time using this interactive playground. Adjust container properties like flex-direction, justify-content, and align-items while watching the layout change instantly, then select individual items to customize their flex-grow, flex-shrink, flex-basis, and alignment settings. The dynamically generated CSS code output shows the exact syntax needed to recreate your layout, making it an effective learning tool for mastering flexbox concepts.
Development history (1 commit)
Download and view the complete conference schedule for May 22, 2025, in iCalendar format. This page provides access to all 25 events from the San Francisco conference, including keynotes, technical sessions, workshops, and office hours, which can be imported directly into your calendar application. A live preview of the ICS file contents is displayed below the download button for reference.
Development history (1 commit)
I pasted screenshots of https://anthropic.swoogo.com/codewithclauderegister/agenda into Claude and told it to make an ICS file and a website to download it from:
https://claude.ai/share/a71594d1-fde4-453b-aed6-aafeec790beb
The custom instructions for that are:
You build ICS files for users to download to add things to their calendar in bulk.
Wait for the user to paste in some event information or screenshots of things.
Build an artifact (no react) with a link to download an ICS file containing the stuff. Preview the ICS file in that artifact.
Create annotated presentation slides with alt text and markdown notes. Upload your slide images, add accessibility descriptions and annotations with markdown support, then generate HTML output using customizable templates. The tool automatically saves your work and includes optional OCR functionality to extract text from slides.
Development history (3 commits)
https://gist.github.com/simonw/8010fca527eb588f006f70850d7c37a3
Adapted from: https://github.com/simonw/til/commits/main/templates/pages/tools/annotated-presentations.html
See also: https://simonwillison.net/2023/Aug/6/annotated-presentations/
https://gist.github.com/simonw/9efc6fcf31cc9cdddde9b39714daf800
Parse and visualize JSON responses from the Google Gemini image generation API, extracting and displaying generated images, text content, and usage metadata in a formatted layout. The tool supports direct JSON input through paste or by loading example datasets, making it useful for testing and inspecting Gemini API outputs including model version information and token usage statistics.
Write HTML code directly in the editor pane and see the rendered output update in real-time in the preview pane. The editor supports live preview with debounced updates to prevent excessive rendering, and includes a copy button to save your HTML code to the clipboard. On mobile devices, toggle between the editor and preview views using the dedicated button in the toolbar.
Visualize bounding boxes and PNG masks from JSON data with support for multiple coordinate system origins. This tool accepts JSON input containing box coordinates and base64-encoded mask images, then displays them overlaid on an interactive canvas with real-time coordinate transformation. The visualization includes detailed information about each item's original and transformed coordinates based on the selected origin point.
Development history (1 commit)
Mainly built by Claude: https://claude.ai/share/2dd2802a-c8b4-4893-8b61-0861d4fcb0f1
I added the "Load example" feature.
Decode base64-encoded gzip data to retrieve the original decompressed content. Paste your base64 string into the input field and click the Decode button to process the data. The decoder handles the conversion from base64 format and gzip decompression in sequence, displaying the result or providing detailed error messages if the input is invalid.
Development history (1 commit)
Export Hacker News discussion threads in a formatted, hierarchical structure by providing a post ID or direct link to the thread. The tool fetches all comments from the specified post and organizes them with numbered paths that show the conversation structure, making it easy to read and copy the entire discussion for archival or sharing purposes.
Explore an interactive footnote system that enhances document reading by displaying footnote content in contextual popups when you hover over or click footnote references. The implementation uses semantic HTML with proper ARIA roles for accessibility, combined with CSS styling and JavaScript to position popups dynamically based on viewport constraints. This approach maintains traditional navigation between footnotes and their references while providing a modern, user-friendly experience that works across both desktop and mobile devices.
Development history (1 commit)
Convert rich text content from clipboard into clean, filtered HTML containing only semantic elements like paragraphs, headings, lists, links, and text formatting. Paste formatted content into the editable area to automatically extract and sanitize the HTML, removing unsupported tags and attributes while preserving the document structure and links. The cleaned HTML is displayed in a code editor and rendered in a live preview, with options to copy the code or clear all content.
Development history (1 commit)
Explore American Community Survey demographic and social data through an interactive search and visualization tool. Select geographies such as cities, counties, or states alongside census topics like income, education, or housing to retrieve detailed population estimates with margin of error values. The application presents census data in both tabular and chart formats, making it easy to compare statistics across multiple locations and time periods using the Census Reporter API.
Development history (1 commit)
https://claude.site/artifacts/cc244180-7a36-41d8-9aa2-71638ff2dd81
Explore demographic and economic data from the US Census American Community Survey using the Census Reporter API. This tool allows you to search for specific geographic locations and data tables, then retrieve detailed census statistics including estimates and margins of error. Simply select a geography and one or more data tables to view comprehensive statistical breakdowns organized by column with their corresponding uncertainty measurements.
Development history (1 commit)
Experiment with passkey registration and authentication using the WebAuthn API in your browser. This demo allows you to create passkey credentials, authenticate with them, and inspect the underlying protocol responses and data. Stored credentials are maintained locally in your browser's storage, making this a fully client-side implementation for learning how modern passwordless authentication works.
Track time with Lightning Timer, a full-screen countdown application that displays elapsed seconds in large, easy-to-read format. Click the timer display to start, pause, or reset the countdown, and access the settings icon to configure the total duration and optional warning threshold that triggers a visual color change. The timer supports URL-based configuration for quick setup and displays the remaining time in both the page and browser title bar.
Development history (2 commits)
Rescued from https://web.archive.org/web/20090410022551id_/https://lightningtimer.net/
Via https://simonwillison.net/2008/Nov/12/lightning/
Lots of improvements: https://claude.ai/share/d58b4388-bf15-47e3-9c96-ad763a414666
Format and visualize incomplete or truncated JSON data with automatic live formatting as you type. This tool handles malformed JSON structures by applying consistent indentation and proper spacing, making it easier to read and understand partial JSON snippets. The formatted output can be copied to the clipboard with a single click, and example data is available to test the functionality.
Development history (2 commits)
Created with GPT-4.5 and Canvas
https://chatgpt.com/share/67dd9d55-7f70-8006-b55d-72730f60ddbe
Many improvements, including a Pelican themed example and fix to indentation: https://claude.ai/share/22dc4b58-e8c4-44a4-9650-a37d21513b8d
Inspect and analyze clipboard data by pasting content into this viewer to see all available formats and their corresponding values. The tool displays text, HTML, images, and file information in an organized format, with special handling for image previews and multi-file pastes. This is useful for debugging clipboard operations and understanding what data formats are available when copying and pasting content across applications.
Display and edit images with an interactive cropping interface for creating avatars or profile pictures. Users can select images by clicking, dragging and dropping files, or pasting from the clipboard, then crop them to a specified aspect ratio using resizable handles. The final cropped image is automatically exported as a JPEG data URL and can be synced to a designated form input field for seamless integration with web forms.
Development history (1 commit)
Check the storage size of Hugging Face machine learning models by entering a model URL or repository path. The tool queries the Hugging Face API to retrieve the total storage used by the specified model and displays the result in a human-readable format (MB or GB). Models can be looked up using either their full Hugging Face URL or their model identifier in the format username/model-name.
Development history (1 commit)
Display and manage multiple filter conditions using an interactive badge interface with keyboard navigation support. Each filter badge displays a column name, operator, and value that can be edited individually, with options to add or remove filters as needed. The component provides full accessibility through keyboard shortcuts, focus management, and ARIA labels for screen reader users.
Development history (2 commits)
https://claude.ai/share/98fc30dc-be94-4879-b856-06fa027bad15
Track the progress of the current U.S. presidential term with real-time statistics and a visual progress bar. The page displays elapsed and remaining days, percentage completion, and specific metrics related to the midterm election cycle scheduled for November 3, 2026. Information updates automatically to provide current data on the four-year term that began on January 20, 2025.
Development history (4 commits)
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
Prompt:
> Make it larger on my phone
Progress to midterms. https://claude.ai/share/dd9252c1-a24f-4c8d-9429-6195ce863960
Explore wildlife observations on an interactive map by searching for any species and viewing recent sightings from the iNaturalist community. The map displays geotagged observations within a customizable time range, with clustering for easy navigation across regions and detailed information for each sighting including photos, dates, and observer information. Share specific searches through URL bookmarks to quickly return to previous species and time period filters.
Extract a subset of Swagger/OpenAPI definitions by selecting specific API endpoints and their dependencies. This tool parses a Swagger JSON document, displays all available paths and methods in an interactive checklist, and generates a filtered JSON output containing only the selected endpoints along with any referenced schema definitions they require. The generated subset can be copied to the clipboard for use in other applications or documentation.
Development history (1 commit)
Calculate token usage across your Claude and other LLM API calls by pasting YAML output from the LLM tool's llm logs -su command. The calculator automatically groups token consumption by model and displays total input and output tokens for each. This helps you track and analyze API usage patterns across multiple conversations and model versions.
Development history (1 commit)
Learn how CSS text wrapping properties control how text flows within containers, including word-wrap, word-break, white-space, text-overflow, hyphens, line-break, and text-wrap. This guide provides interactive demonstrations of each property's behavior, detailed explanations of their values, and current browser compatibility information to help you choose the right approach for your text layout needs.
Development history (1 commit)
Track California's Daylight Saving Time changes with this tool designed for Pacific Time users. The page displays the most recent clock change, calculates the next scheduled adjustment, and provides helpful context about how the time shift affects daily routines and pet schedules. It automatically detects your timezone and updates information throughout the day to keep you informed about upcoming or recent DST transitions.
Development history (5 commits)
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).
I prompted Claude 3.7 Sonnet thinking with this file and:
> Check the DST display logic
It suggested this fix.
Extract HTML code from formatted text by pasting rich content into this tool, which automatically captures and displays the underlying HTML markup. The tool provides both the raw HTML code for editing and a live preview of how the formatted content renders. Use the copy button to quickly transfer the extracted HTML to your clipboard, or clear the interface to process new content.
Encrypt and decrypt messages using a passphrase with this web application that leverages modern browser cryptography APIs. The tool generates a secure shareable link containing an encrypted message that can only be decrypted with the correct passphrase, making it useful for sending sensitive information. All encryption and decryption operations occur entirely in the browser, ensuring your data never leaves your device.
Development history (1 commit)
Create JSON schemas interactively with this builder tool that allows you to define properties, set data types, and configure nested objects through an intuitive form interface. The generated schema is displayed in real-time and can be copied to your clipboard for use in your applications. Your schema is automatically saved in the URL, making it easy to share or revisit your work later.
Development history (1 commit)
Convert a compact schema definition language into JSON schema format in real-time. This tool accepts a concise DSL where you specify field names, types (str, int, float, bool), and optional descriptions, then automatically generates the corresponding JSON schema. The converter supports both object schemas and array item schemas through the "Array items schema" option.
Development history (1 commit)
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.
Parse Pipfile.lock files to extract Python package dependencies and convert them into multiple formats for easy management and sharing. The tool automatically extracts package names and versions from the lock file and displays them in both Pipfile and requirements.txt formats, with one-click copying functionality for each output format.
Development history (1 commit)
Built this today to help fix an old development environment.
https://gist.github.com/simonw/e13064e2e830db77887373ced5df1b5b
Track word and character counts across multiple writing sections with automatic saving to browser storage. Each section displays real-time statistics as you type, and content persists between sessions. Add or remove writing sections as needed to organize different pieces of text.
Development history (4 commits)
https://gist.github.com/simonw/889e4e8a66382528142c5adf73c29da2
I didn't even use an LLM to write this!
Analyze and explain SQLite queries using APSW by entering SQL code and executing it in an in-browser Python environment. The tool provides detailed query analysis including execution plans, expanded SQL, and query information to help understand how SQLite processes your queries. Optional setup SQL can be run before the main query to create tables or initialize data, and parameterized queries are supported through labeled input fields.
Development history (1 commit)
Format and beautify SQL queries with customizable styling options. This tool supports multiple SQL dialects including SQLite, PostgreSQL, and MySQL, allowing you to control indentation width, keyword capitalization, and indentation style. The formatted output can be easily copied to your clipboard with a single click.
Development history (1 commit)
Render Claude API responses with proper citation formatting by pasting JSON output into this tool. The tool parses the response structure and displays text content alongside blockquote-formatted citations, making it easy to review how Claude has sourced and attributed information. An embedded iframe renderer safely displays the formatted output with styling that highlights cited passages.
Convert serialized PHP data to JSON format for easy viewing and manipulation. Paste your PHP serialized string into the input field to automatically parse and display the equivalent JSON output. Use the copy button to quickly transfer the JSON to your clipboard.
Development history (1 commit)
Explore live region notifications with this interactive accessibility demo that allows you to test how screen readers announce dynamic content updates. The page provides instructions for testing with VoiceOver on macOS and iOS, plus interactive controls to trigger notifications with different aria-live settings (assertive or polite) to observe how screen readers prioritize and announce content changes.
View and resolve Bluesky handles to their corresponding Decentralized Identifiers (DIDs) using the AT Protocol API. Enter a Bluesky handle in the format username.bsky.social to retrieve the associated DID, which serves as a unique identifier for accounts on the Bluesky network. This tool provides a simple interface for looking up handle-to-DID mappings through Bluesky's public resolver endpoint.
Development history (2 commits)
Much higher rate limits: https://bsky.app/profile/futur.blue/post/3lf3q6hlqgk2o
Monitor real-time Bluesky feed data by connecting to the Bluesky Jetstream WebSocket service and viewing incoming posts and events. Send custom JSON messages to filter the feed by collection type, specific user DIDs, or other parameters, with all activity logged in the output panel for debugging and inspection. Use the provided keyboard shortcut (Ctrl/Cmd + Enter) to quickly send configuration updates to the WebSocket connection.
Development history (2 commits)
https://gist.github.com/simonw/9c4525e0364d60c1a8a7bd663ff0df35
Parse and visualize YAML files in an interactive tree format with collapsible sections for easy navigation of nested data structures. Enter YAML content directly or load from a URL, then explore the data by expanding and collapsing individual elements. The tool preserves your navigation state in the URL, allowing you to share links with specific sections already expanded.
Development history (1 commit)
https://gist.github.com/simonw/54b4e533481cc7a686b0172c3a9ac21e
Establish real-time audio conversations with OpenAI's GPT-4o model using WebRTC technology. This interface allows you to select from multiple voice options and monitors detailed token usage and costs for each interaction and across your entire session. All API tokens are stored locally in your browser for convenience.
Development history (4 commits)
https://gist.github.com/simonw/d7dcea0263fc9bee86d6bd738cae1d9d
https://gist.github.com/simonw/f2f261011fdd50e1d7dd8403d990e691
And some hand-editing.
Play audio responses generated by OpenAI's GPT-4 with audio preview model by providing a GitHub Gist URL containing the API response JSON. The player extracts base64-encoded WAV audio data from the Gist, converts it to playable format, and displays the associated transcript. You can listen to the audio directly in the browser or download it as a WAV file.
Convert JSON data into multiple YAML formats with a single paste. The tool generates three output variations—block style for readability, flow style for compactness, and quoted strings style for explicit formatting—allowing you to choose the best format for your needs. Each output can be copied to your clipboard with a single click.
Development history (1 commit)
Process HTML content to automatically generate unique IDs for all header elements and create a table of contents with anchor links. This tool is useful for adding navigation functionality to static HTML pages or preparing content for documentation systems that require header identification. Simply paste your HTML and provide the page URL, then the processor will output the modified HTML and a formatted list of clickable header links.
Analyze your writing for common style issues by pasting text into this tool, which detects weasel words (such as "very" and "quite"), passive voice constructions, and duplicate consecutive words. The analyzer provides contextual snippets for each issue found, helping you identify areas where your writing could be more direct and concise. This tool is adapted from shell scripts by Matt Might and updates results in real-time as you type.
Development history (4 commits)
https://gist.github.com/simonw/dc79f6adcdb189469890bc0a44331774
Based on comments here: #42416823">https://news.ycombinator.com/item?id=42407250#42416823
Plan meetings across multiple time zones by selecting two locations and viewing their local times side-by-side. The comparison table displays 48 consecutive hours of UTC times with corresponding local times for each timezone, making it easy to identify overlapping working hours. Your timezone selections are automatically saved in the URL for convenient sharing and bookmarking.
Development history (2 commits)
Not fully tested yet, built this with Claude 3.5 Sonnet
A better version, brand new.
https://gist.github.com/simonw/3cb034fa3d327f1114da18219f2192fd
Prompts.js is a lightweight JavaScript library that provides modal dialog functionality for creating alert, confirm, and prompt interactions in web applications. The library enables developers to display user-facing dialogs with async/await syntax, making it easy to handle user responses in a clean, readable manner. This demo page allows you to test the three core dialog types and view the results of user interactions.
Convert Unix timestamps to human-readable dates and times with this tool. Enter a Unix timestamp (in seconds or milliseconds) to instantly view the corresponding date and time in both UTC and your local timezone. The converter automatically handles both 10-digit and 13-digit timestamps, making it easy to work with timestamps from various sources and systems.
Development history (1 commit)
View Bluesky social media timelines by authenticating with your account credentials and retrieving live feed data. The application automatically refreshes your timeline at regular intervals while displaying posts with author information, timestamps, and full JSON response data for advanced inspection. Credentials are securely stored locally in your browser for convenient access during future sessions.
Development history (1 commit)
Explore API endpoints and view their responses in real-time using this interactive tool. The interface uses sandboxed iframes with postMessage communication to safely fetch and display JSON data from remote APIs. Enter any API URL and submit to see the formatted response displayed directly in the browser.
Development history (3 commits)
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
Draw bounding boxes on images using an interactive cropping tool powered by CropperJS. Load an image by pasting, dragging and dropping, or selecting a file, then click and drag to create a box around your region of interest. The tool automatically outputs normalized coordinates as percentages of the image dimensions in a format ready for command-line use.
Development history (1 commit)
View Mozilla's browser compatibility data to track when web APIs were first supported across different browsers. Search for any API by name to see a chronological timeline of support additions, including release dates and version numbers for each browser. The interface also displays relevant MDN documentation links, specification URLs, and status indicators to help developers understand the maturity and adoption timeline of web platform features.
Development history (6 commits)
I didn't save all the prompts for this one (I'm using a new tool).
https://gist.github.com/simonw/8c71a931921789e11f1d33f09d9ad9ae
Also some CSS tweaks and autocomplete search now does term1.*term2
I prompted Claude:
> `There's a bug where hitting back cannot get to the previous page`
Test and explore HTML, CSS, and JavaScript code in a sandboxed iframe environment with configurable security restrictions. The left panel provides a code editor for writing HTML content, while the right panel displays a live preview with customizable sandbox attributes that control what the iframe can access and execute. Use the checkboxes to enable or disable specific permissions like scripts, forms, popups, and same-origin access to understand how sandbox restrictions affect web content behavior.
Development history (1 commit)
Display an animated rainbow gradient border effect around a centered box with interactive controls. The page features a dark theme with a glowing, color-shifting border that can be toggled on and off using the provided button. The animation combines gradient shifting and pulsing effects to create a dynamic, eye-catching visual presentation.
Development history (1 commit)
View Mozilla Bugzilla bug reports directly from your terminal using this LLM plugin for Google's Gemini API. The plugin enables seamless integration between your command-line workflow and Bugzilla's bug tracking system, allowing you to query and retrieve bug information without leaving your terminal environment. This tool is particularly useful for developers who want to incorporate bug data into their LLM-powered workflows and automation scripts.
Development history (1 commit)
Embed SVG images directly into HTML using base64 data URIs, which eliminates the need for separate image files and reduces HTTP requests. This demo showcases three different SVG examples encoded in base64 format and displayed through standard image tags, with included JavaScript that safely decodes and displays the underlying SVG source code. When SVGs are embedded this way as images, any potentially unsafe JavaScript or interactive elements within them are automatically ignored by the browser, providing a secure method for inline image delivery.
Development history (2 commits)
Some help from https://gist.github.com/simonw/e07899a173ffe9f5723994e1405f909a
View SVG content being progressively rendered character by character over a specified duration. Paste an SVG file into the input field, set the animation duration in seconds, and click Render to watch the image draw itself incrementally while the live editor displays the growing SVG code. The tool automatically completes partial SVG markup to ensure valid rendering at each animation step.
Development history (1 commit)
Decode QR codes from image files by uploading, dragging and dropping, or pasting them directly into the application. The decoder processes the image data using the jsQR library to extract and display the encoded content, automatically converting URLs into clickable links for convenient access.
Explore how the CSS text-wrap: balance property affects navigation layout and text distribution across multiple lines. This interactive demonstration allows you to toggle the text-wrap balance feature on and off while adjusting the number of visible navigation items to see how the browser distributes text more evenly across lines. Use the slider and checkbox controls to observe the differences in how links wrap and align within the constrained navigation container.
Development history (3 commits)
https://urbanists.social/@georgelund/113342149599402190
Convert text to NATO phonetic alphabet equivalents for clear communication in radio, military, and aviation contexts. Enter any combination of letters and numbers, then click the convert button to display the phonetic representation with each character separated by spaces. Spaces in the original text are marked as "(SPACE)" in the output.
Development history (1 commit)
Record audio through your microphone and send it to OpenAI's GPT-4o audio model along with a text prompt to receive AI-generated responses. The tool converts your recorded audio to WAV format, calculates token usage and associated costs for both text and audio inputs, and displays the API response in both formatted and raw JSON views. Your API key is securely stored locally in your browser, and you can download the recorded audio file for later use.
Development history (6 commits)
https://gist.github.com/simonw/a04b844a5e8b01cecd28787ed375e738
Extract URLs from copied web page content by pasting HTML into the input area, which automatically identifies and displays all hyperlinks found in the pasted material. The tool filters for valid HTTP links and provides a consolidated list in the output textarea, making it easy to copy all extracted URLs to your clipboard with a single button click.
Development history (1 commit)
Query pelican sighting records from Half Moon Bay using SQL commands against an in-browser SQLite database. The tool loads sample data containing observations of various pelican species across local beaches with dates, locations, and counts. Enter any valid SQL query in the textarea and execute it to retrieve and view the results in a formatted table.
Development history (1 commit)
Explore an interactive CSS grid layout that demonstrates dynamic element expansion with smooth animations. Click the green cell labeled "1x2" to trigger a symmetric animation that expands the element to fill the entire grid container, then click again to animate it back to its original position. The layout combines CSS Grid positioning with JavaScript event handling to create a polished visual effect that smoothly transitions between states.
Development history (1 commit)
Plan events with timezone-aware scheduling and countdown tracking. This application allows you to input event details including title, description, location, date, and time across different US timezones, then automatically calculates the time remaining until the event and generates a shareable Google Calendar link. The tool displays all event information in a formatted summary and provides a convenient way to add the event directly to your Google Calendar account.
Development history (1 commit)
Convert raster images to scalable vector graphics using automated tracing technology. Upload a JPG or PNG image by dragging it onto the drop zone or clicking to browse, and the application will generate an SVG representation that can be viewed and copied. The conversion process uses imagetracerjs to intelligently trace image edges and create vector paths suitable for scaling to any size without quality loss.
Development history (1 commit)
Explore an interactive map of San Francisco rendered with MapLibre GL and OpenFreeMap tiles, displaying 1000 randomly distributed markers across the city. The demo showcases three different approaches for rendering large numbers of points—scaled markers, custom HTML elements, and GeoJSON circle layers—with the map automatically adjusted to fit all markers in view. Users can interact with the tilted 3D map to navigate and explore the marker distribution across the San Francisco area.
Development history (2 commits)
https://openfreemap.org/quick_start/
https://gist.github.com/simonw/da2b20711b96f745873ccb44a3347ce9
Display your browser's user agent string, which contains information about your web browser, operating system, and device. This identifier is sent with every HTTP request your browser makes and helps websites understand how to optimize their content for your specific platform and browser version.
Development history (1 commit)
Render Markdown text with integrated LaTeX mathematical equations in real-time as you type. This tool converts your input into formatted HTML output while simultaneously displaying a live preview with properly rendered math expressions using KaTeX. You can view the generated HTML code and copy it to your clipboard for use in other projects.
Upload files and images to GitHub repositories using the GitHub API. This tool accepts either text content or image files and commits them to a specified repository path with proper authentication via personal access tokens. The interface automatically adapts to show relevant input fields based on whether you're uploading text or an image file.
Development history (1 commit)
Calculate the token cost for images used in API requests by uploading or dragging an image file into the tool. The calculator analyzes the image dimensions and divides them into 224-pixel tiles, multiplying the total tile count by 1,000 to determine the token expense. This helps estimate costs when working with vision-based APIs that charge per image token.
Development history (1 commit)
https://gist.github.com/simonw/7f3d2ff63423078f04d1fb2fc2b3e2a5
View YouTube video thumbnails in multiple resolutions by entering a video URL or ID. This tool extracts and displays all available thumbnail formats from YouTube's image server, allowing you to preview different quality options and copy direct image links. Click on any thumbnail to expand it for a closer look, and use the copy button to save the image URL to your clipboard.
Development history (3 commits)
Started in ChatGPT:
https://chatgpt.com/share/66ecf1a3-928c-8006-81f3-8869faa57071
Finished in Claude:
https://gist.github.com/simonw/86f62917dd1d4300aebceaeb725d38ce
And I didn't even get an LLM to write this for me!
Track productivity sessions with this Pomodoro timer application that manages timed work intervals with customizable durations. Set a goal for each session, choose from preset time intervals ranging from 5 to 60 minutes, and pause or resume as needed while the timer counts down. All session data including start times, end times, and pause history is automatically saved and displayed in a detailed log table, with the ability to export the data as JSON for further analysis or record-keeping.
Read TIFF orientation metadata from JPEG images by uploading or dragging files into the drop zone. The tool parses the EXIF data embedded in the image file to extract the orientation tag, which indicates how the image should be displayed (normal, rotated 90° clockwise, rotated 180°, or rotated 270° clockwise). Debug information shows the file analysis process, including EXIF location, endianness detection, and TIFF header validation.
Development history (1 commit)
Debug tool for figuring out if a JPEG has TIFF orientation data in it.
Claude prompts: https://gist.github.com/simonw/9bf1bd4cce6d113c55db0e5a03769b52
Visualize real-time audio frequency data from your microphone as an animated spectrum display. This application uses the Web Audio API to capture microphone input, analyze frequencies using FFT (Fast Fourier Transform), and render dynamic bars that respond to sound levels across the frequency spectrum. Grant microphone permissions when prompted to begin the visualization.
Development history (1 commit)
By Claude 3.5 Sonnet: https://gist.github.com/simonw/48b2762d1c77e529d3c36e75ee6f478b
Extract and view EXIF metadata from image files, including GPS coordinates and other embedded image data. This tool allows you to upload an image and instantly retrieve detailed information such as geolocation data, camera settings, and timestamps stored within the file. The viewer displays GPS coordinates in decimal format when available and presents all extracted metadata in a structured, readable format.
Development history (1 commit)
Created with Claude 3.5 Somnet
Generate custom CSS box-shadow effects with interactive controls and real-time preview. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity using intuitive sliders and color picker to visualize shadow changes instantly. Copy the generated CSS code directly to your clipboard for immediate use in your stylesheets.
Development history (2 commits)
Mostly by Claude 3.5 Sonnet: https://twitter.com/simonw/status/1810335524017877240
Compare two PDF documents side-by-side to identify differences between them. Upload or drag and drop two PDF files to view their pages rendered as images, with a third panel highlighting any pixel-level differences in red. This tool is useful for detecting changes between document versions, comparing drafts, or verifying document modifications.
Development history (1 commit)
Compare Elo ratings across different language models and dates using this interactive animated bar chart. Load your own JSON data with model names, dates, and Elo scores, then watch the rankings evolve over time with customizable animation speed. The visualization displays the top 20 models at each time point, making it easy to track performance trends and competitive dynamics in the AI landscape.
Development history (1 commit)
View CSV data as markers on an interactive map using the ?csv=URL parameter to specify a CSV file containing latitude and longitude columns. The map supports additional customization through query parameters including center to set the initial location, zoom for zoom level, color to change marker color, and marker to add individual points. Map position and zoom level are automatically saved to the URL bar as you navigate, allowing you to share your current view with others.
# social-media-cropper code
Create perfectly sized social media cards by uploading an image, selecting your desired aspect ratio, and adjusting the crop with zoom controls. The tool automatically centers your image on a customizable background color and provides a preview before downloading your final card at optimal dimensions for Twitter, Facebook, Instagram, Substack, and other platforms.
Development history (6 commits)