The tools on tools.simonwillison.net were mostly built using AI-assisted programming.
This page lists the commit messages for each tool, many of which link to the LLM transcript used to produce the code.
The descriptions for each of the tools were generated using Claude 3.7 Sonnet.
The Filter Badge Component allows users to create and manage data filtering criteria through an interactive interface. Users can add filters by clicking the "Add filter" button, then select a column, operator, and value to define each filter. Each part of the filter is keyboard accessible, with support for tab navigation, Enter/Space key actions, and direct value editing through a popover interface.
This page tracks the progress of the current U.S. presidential term with a visual progress bar and statistical information. It displays days elapsed, days remaining, and the percentage of the term completed, while also tracking the time until midterm elections. The progress bar includes a marker showing when midterms occur during the presidential term, with additional statistics about the days until midterms and how far through the first half of the term we currently are.
This calculator helps you estimate the cost of using Large Language Models (LLMs) by entering the number of input and output tokens along with their respective costs. You can manually enter token counts and pricing information or select from a comprehensive list of preset models including options from Google, Anthropic, OpenAI, Amazon, and other providers. The calculator displays the total cost in both dollars and cents.
This page displays a product catalog with a side panel dialog system. When users click on a product, details appear in a side panel implemented using the HTML <dialog> element. The panel can operate in two modes: non-modal (allowing interaction with the main page) or modal (blocking interaction until closed). Users can also submit feedback about products through a form in the side panel.
The Species observation map allows you to search for wildlife sightings around the world using data from iNaturalist. Search for a species by name, specify how far back in time to look, and view observations plotted on an interactive map with clustered markers. Each marker provides detailed information about the observation including date, location, observer name, and photos when available.
This tool enables you to create a subset of your Swagger API documentation by selecting specific endpoints. Paste your Swagger JSON, choose the desired paths and methods, and generate a new Swagger document containing only those selected endpoints. The tool automatically includes all referenced schema definitions to ensure your subset documentation remains valid and complete.
The Token Usage Calculator analyzes token consumption across different LLM API calls. Paste YAML-formatted data from the llm logs -su command to view a breakdown of input and output tokens grouped by model name. The calculator automatically processes your data and displays total token usage statistics for each model detected in your logs.
This guide provides a comprehensive overview of CSS text wrapping properties, including word-wrap/overflow-wrap, word-break, white-space, text-overflow, hyphens, line-break, and text-wrap. Each property is explained with multiple visual examples demonstrating different values, and includes tables summarizing the available options with their effects on text display. The page also includes browser compatibility information for each property and useful notes about implementation requirements.
This web application provides information about clock changes due to Daylight Saving Time in California (Pacific Time zone). The page displays the most recent time change, the upcoming change, current time status (PST or PDT), and offers helpful information about how the change might affect daily routines, including pet schedules. The application automatically detects if users are in the Pacific timezone and shows relevant timing details for both past and future clock adjustments.
This tool allows you to extract HTML code from formatted text copied from websites. Paste content into the editable area to see the underlying HTML code displayed in a dedicated output field. The extracted HTML can be copied to your clipboard with a single click and a preview shows how the content will render when used in another webpage.
This tool enables secure message encryption with a passphrase. Enter your message and a passphrase to generate an encrypted link that you can share with others. Recipients can decrypt the message by visiting the link and entering the correct passphrase. All encryption and decryption occurs in the browser using the Web Crypto API for enhanced security.
The JSON Schema Builder allows you to create JSON schemas with a visual interface. Add properties by specifying their name, type, and whether they're required, then build nested objects and arrays. Your schema is displayed in real-time and can be copied to the clipboard with a single click. The tool also automatically saves your work in the URL, enabling you to share your schema with others.
This tool converts simple schema definitions written in a compact DSL format into JSON Schema. Enter field definitions with types and descriptions in the text area, and the converter generates the appropriate JSON Schema in real-time. Toggle the "Array items schema" checkbox to wrap your schema in an array structure, and use the "Load example" button to see how the syntax works.
This tool extracts and formats Python dependencies from a Pipfile.lock file. Paste your Pipfile.lock JSON content into the text area and click "Parse Dependencies" to convert it into both Pipfile format and requirements.txt format. You can copy either format to your clipboard using the designated buttons.
This text editor allows you to create and manage multiple writing sections with real-time word and character counts. Each section auto-saves your content to local storage after one second of inactivity, ensuring your work is preserved between sessions. You can add new sections or remove existing ones as needed, with all changes automatically backed up.
Jina Reader provides a web interface to view and process online content using the Jina Reader API. Enter a URL to fetch its content in various formats (Markdown, HTML, Text, or LLM Markdown), and the result will be displayed in both raw and rendered forms. You can also run Claude AI analysis on the fetched content using customizable prompts to generate summaries or other text transformations.
This tool analyzes SQLite queries using the APSW (Another Python SQLite Wrapper) library. Enter your SQL query in the main text area or set up initial database schema in the collapsible section. You can add parameter values if your query uses parameterized statements. After clicking "Execute query," the tool provides detailed information about query execution plans, expanded SQL statements, and other diagnostic data to help you understand and optimize your SQLite queries.
This tool visualizes bounding boxes on images using the Gemini API. Upload an image, enter a prompt, and the application will display the original image with overlaid bounding boxes according to coordinates returned by the model. The coordinates use a normalized format [ymin, xmin, ymax, xmax] on a 0-1000 scale, and cropped sections of each detected region are displayed separately below the main image.
This SQL Pretty Printer tool formats SQL queries according to your preferences. You can customize the dialect, tab width, keyword casing, and indentation style to match your project requirements. The tool displays a formatted version of your SQL in real-time as you type, and provides a copy button for easily transferring the formatted query to your clipboard.
This tool converts GitHub issues into markdown format for easy reference and sharing. Enter a GitHub issue URL, click "Convert to markdown," and the tool will fetch the issue content including all comments and format it as markdown. The converted markdown can be copied to your clipboard with a single click for use in documentation or other contexts.
This tool allows you to compare image quality and filesize at different compression levels. Upload an image by dragging, clicking, or pasting it into the interface. The tool will display versions of your image at original and half size with various quality settings (100%, 90%, 70%, 50%, and 30%), showing file size for each variation. For transparent images, a background color picker lets you choose the fill color.
This tool converts images to JPEG format with adjustable quality. Users can upload an image by clicking on the drop zone or dragging and dropping a file, then adjust the JPEG compression quality using the slider. The converted image is displayed with its data URI and approximate file size, allowing users to find the optimal balance between image quality and file size.
This tool renders JSON responses from Claude API that contain citations. Paste a JSON response into the text area and click "Render message" to display the message with proper formatting and citation blockquotes. The renderer uses a sandboxed iframe for security, ensuring the content is displayed safely while maintaining proper styling and organization of the text and cited passages.
This tool converts PHP serialized data to JSON format. Paste serialized PHP data in the input field and it will automatically be converted to formatted JSON, which you can then copy to your clipboard with a single click. If there are any errors in the deserialization process, the tool will display a helpful error message.
This demo page allows you to test how screen readers announce dynamic content changes through ARIA live regions. The interface lets you choose between "assertive" and "polite" announcement priorities, then test immediate or delayed notifications. The page includes detailed instructions for enabling and using VoiceOver on both macOS and iOS devices to experience how assistive technologies process these dynamic updates.
This tool resolves a Bluesky handle to its corresponding DID (Decentralized Identifier). Enter any Bluesky handle in the input field and click "Resolve" to retrieve the associated DID. The tool communicates with the Bluesky API and displays the result or an error message if the handle cannot be found.
The Bluesky WebSocket Feed Monitor connects to the Bluesky social network's WebSocket API and displays real-time feed data in a log. Users can establish a connection, send custom JSON messages to filter the feed by specific collections or user DIDs, and view incoming messages in the output area. The interface provides controls to connect, disconnect, send messages, and clear the log history.
YAML Explorer is a web-based tool that allows you to visualize and explore YAML data in an interactive tree view. You can paste YAML directly into the text area or load it from a URL, and the tool will convert it into a navigable structure with expandable sections. The explorer preserves your view state in the URL so you can share specific views with others.
This interface connects to OpenAI's real-time audio API using WebRTC technology. Users can start an audio session by providing their OpenAI API token and selecting a voice option, allowing for voice-based interactions with GPT-4o. The page displays detailed statistics about each interaction including token usage and estimated costs, while also maintaining a running log of all session events.
The Gist Audio Player allows you to play and download audio from GitHub Gists containing OpenAI GPT-4o audio responses. Enter a Gist URL containing base64-encoded WAV data from the GPT-4o-audio-preview model, and the player will extract the audio, display the transcript, and provide playback controls. You can also share specific audio by using the URL parameter format ?gist=GIST_ID.
This page allows you to generate human-like speech from text using OpenAI's GPT-4o audio models. Enter your prompts, select a model and voice, then generate audio output which can be played, downloaded, or shared via GitHub Gist. The interface displays both the audio player and a transcript of the spoken content, along with the complete API response for reference.
This converter transforms JSON to YAML in three different formats: block style (standard indentation), flow style (compact representation), and quoted strings (all string values enclosed in double quotes). Simply paste your JSON into the input field and the tool automatically generates the corresponding YAML formats, with copy buttons for each output style.
The Writing Style Analyzer helps improve your writing by identifying problems that weaken your prose. The tool automatically detects weasel words (vague terms that lack precision), passive voice constructions, and accidentally duplicated words. Paste your text into the input area to receive immediate feedback with highlighted issues and their surrounding context.
This web application allows you to interact with Google's Gemini AI models through a simple chat interface. Users can select different Gemini model versions, send messages, and receive responses in real-time with markdown rendering support. The app requires a Gemini API key on first use and displays usage metadata and response time for each interaction.
This Timezone Meeting Planner allows you to compare time differences between two timezones. Select locations from the dropdown menus to generate a 48-hour comparison table showing the corresponding times in both locations. The tool updates the URL with your selections so you can share specific timezone comparisons with others.
Prompts.js is a JavaScript library that provides modern alternatives to the browser's built-in alert, confirm, and prompt dialogs. The library offers an async/await syntax allowing for cleaner code when working with user interactions. Demonstrations on this page show how to trigger different types of dialogs, with the results displayed in a dedicated area below the buttons.
The Timestamp Converter tool transforms Unix timestamps into human-readable date and time formats. Enter a Unix timestamp (in seconds or milliseconds) in the input field to see the corresponding UTC and local time displayed below. The converter automatically initializes with the current timestamp and updates the displayed times as you type.
This web application allows you to view your Bluesky social media timeline by logging in with your username and app password. After authentication, it fetches your timeline and displays posts with avatars and content in a readable format. The timeline automatically refreshes every 10 seconds to show new content, and you can stop the auto-refresh at any time.
This tool allows you to explore the contents of package files directly in your browser. Enter a URL to a zip, tar.gz, or wheel file, and the browser will download and extract the contents, displaying a list of files that you can click to view. The tool supports Python wheel packages from PyPI and other package formats without requiring any installation.
The API Explorer provides a sandboxed interface for testing APIs through a secure iframe implementation. Users can enter an API URL and view the JSON response without security risks, as the parent page handles the actual fetch requests through a message-passing protocol. The interface demonstrates secure cross-frame communication using postMessage() while maintaining appropriate isolation between contexts.
This bounding box tool allows you to draw selection boxes on images to get coordinates. Upload an image by pasting, dragging, or selecting a file, then draw and adjust your bounding box. The tool generates coordinates as percentages of the image dimensions, making them useful for responsive applications or when working with images of different sizes.
This web application displays timeline views of browser support for web APIs based on MDN's browser compatibility data. Users can search for specific APIs by name, view when different browsers added support for those APIs, and access detailed information including MDN documentation links, specifications, and status indicators. The interface shows a chronological timeline of browser support with version numbers and release dates, along with information about browsers that don't support the selected API.
This page provides an interactive sandbox for testing HTML and JavaScript code with customizable iframe security controls. It features a code editor on the left where you can write HTML, and a preview pane on the right that renders your code within an iframe. The sandbox controls beneath the preview allow you to enable or disable specific security restrictions such as scripts, forms, popups, and same-origin policy, letting you experiment with different security contexts.
This page displays a container with a "Rainbow Border" label and a toggle button to control animation effects. When activated, the container shows an animated rainbow-colored glowing border that pulses and changes color gradients in a continuous flow. The animation uses CSS keyframes to create a smooth transition between colors and opacity levels, giving the border a vibrant, dynamic appearance that loops infinitely until deactivated.
The Claude Token Counter allows you to calculate token usage for messages sent to Claude 3.5 Sonnet. Enter an optional system prompt and required user message, then add image or PDF files by dragging and dropping them into the designated area. After providing your Anthropic API key (stored locally in your browser), click "Count Tokens" to receive a detailed breakdown of token consumption for your inputs.
This code implements a Gemini model class for the LLM library, enabling interactions with Google's Gemini AI models. It handles configuration settings like API keys, model selection, and temperature, while providing methods to generate text completions and embeddings through the Google Generative AI API. The implementation includes proper error handling and parameter validation.
This demonstration shows how to embed SVG graphics directly in HTML using Base64 encoding. The page displays three example SVGs encoded as data URIs within image tags, along with their decoded source code below. Base64 embedding allows SVG graphics to be included without external file dependencies, while the browser's security model prevents any embedded JavaScript from executing when SVGs are loaded as images.
This tool allows you to visualize the progressive rendering of SVG files. Paste your SVG code into the top text area, set a duration, and click "Render" to see the SVG build gradually character by character. You can also use the live editor to make real-time changes and see them reflected immediately in the preview area below.
This page allows you to fetch and convert GitHub issues to markdown format. Enter a GitHub issue URL in the input field and click "Fetch Issue" to retrieve the issue content including comments. You can provide a personal access token for accessing private repositories or to avoid rate limiting, which will be saved in your browser for future use.
This QR Code Decoder allows you to extract text and links from QR code images. Upload an image file, drag and drop it onto the designated area, or paste an image from your clipboard. The tool automatically processes the image and displays the decoded content, converting URLs into clickable links for easy access.
The Clipboard Format Viewer displays the different data formats captured when content is pasted. It presents each format (such as text/plain, text/html, or Files) in separate sections, showing the raw content data for each format type. Paste content either into the designated area or anywhere on the page to see all the clipboard formats that were captured during the copy operation.
This converter transforms regular text into the ARES Phonetic Alphabet, commonly used in emergency communications. Enter text in the input field and click "Convert" to translate each letter and number into its corresponding phonetic code word (Alpha for A, Bravo for B, etc.). Spaces are marked as "(SPACE)" in the output to maintain clarity in the converted message.
This HTML Entity Escaper converts special characters in text to their corresponding HTML entities. The tool transforms characters like ampersands, angle brackets, and quotes into their HTML entity equivalents, making them safe to display on web pages without being interpreted as actual HTML code. After pasting text into the input box, the escaped version appears automatically in the output box for easy copying.
This page provides an interface for recording audio, which can then be submitted to OpenAI's GPT-4o audio model along with a text prompt. The application allows users to record speech through their microphone, review the recording, and submit it to the API for processing. After submission, the page displays both the formatted response and detailed information about token usage and associated costs.
This tool extracts URLs from copied web page content. Paste HTML content into the editable area, and the tool automatically parses out all hyperlinks and displays them in a clean list format. The extracted URLs can be copied to your clipboard with a single click for use in other applications.
This interactive tool allows users to query a SQLite database of pelican sightings in Half Moon Bay. The application loads a WASM-based SQLite engine in the browser and initializes a sample database with pelican observation data. Users can modify and execute SQL queries directly in the browser to explore different pelican species, locations, and sighting counts.
This page displays an interactive CSS grid layout with a symmetrical animation effect. The grid contains four colored blocks of different sizes, with one block (colored green) that can be clicked to expand and cover the entire grid area. When expanded, clicking again triggers a smooth animation that returns the block to its original position and size.
The Event Planner tool allows users to create events by entering details such as title, description, location, date, time, and timezone. After submitting the form, the application displays the event information, calculates the time remaining until the event, and provides a Google Calendar link for easy addition to your personal calendar. The tool supports multiple US timezones and formats the event details in a clear, readable format.
This tool converts JPG or PNG images to SVG format using the imagetracerjs library. You can upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. After conversion, the SVG appears on screen and its code is displayed in a text field below, which can be copied to the clipboard with a single click.
This tool converts SVG images to JPEG or PNG formats. Upload an SVG file or paste SVG code, adjust settings including output format, background color, transparency, and dimensions, then convert to generate a downloadable image. The converted image can be previewed, downloaded, and its HTML image tag with base64 encoding can be copied for embedding in websites.
This demonstration showcases MapLibre GL integration with OpenFreeMap, displaying 1000 randomly generated points within San Francisco. The code provides three different marker implementation options: scaled markers using MapLibre's built-in functionality, custom HTML elements styled as circular markers, and a more performant circle layer using GeoJSON data. The map initializes with a tilted perspective and automatically adjusts its bounds to encompass all generated markers.
This page displays the User Agent string of your current browser. The User Agent contains information about your browser, operating system, and device, which websites can use to identify how to properly deliver content to you.
This interactive tool renders Markdown and LaTeX math formulas in real-time. As you type in the text area, the content is converted to formatted HTML in the preview pane, supporting both inline math expressions ($...$) and block math equations ($$...$$). The generated HTML can be copied to clipboard for use in other applications or websites.
This tool allows you to upload files or images directly to GitHub repositories using the GitHub API. Enter your GitHub token, repository details, and file path, then choose between text content or image upload. The application handles the base64 encoding required by GitHub's API and provides a link to view your file once successfully uploaded.
The Image Token Calculator allows you to estimate the token cost for processing images with AI models. Upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. After uploading, the calculator will display the image dimensions, number of tiles required to process the image, and the total token cost based on a calculation of 1000 tokens per tile.
This tool enables you to view and download YouTube video thumbnails in various resolutions. Enter a YouTube URL or video ID in the input field to see all available thumbnail versions with their dimensions. Click on any thumbnail to expand it, or use the clipboard icon to copy the direct image URL for use in your projects.
The Pomodoro Timer is a productivity tool that helps you manage work sessions using timed intervals. Enter your goal, select a duration (5-60 minutes), and track your progress with detailed session logs. The application records your session history including start/end times, durations, and any pauses, storing this data locally for future reference.
This page implements an automatic redirect to the "/gemini-bbox" location. When a user visits this page, their browser will immediately redirect them to the new location, with a fallback text link provided if the automatic redirection fails to work.
This tool analyzes JPEG images to determine their TIFF orientation metadata. Upload an image by dragging and dropping or clicking to select a file, and the application will extract and display the orientation information. The tool parses the EXIF header to find the orientation tag and shows both the orientation value and a human-readable description of how the image is oriented.
This Audio Spectrum Visualizer uses the Web Audio API to capture microphone input and display real-time frequency data. The application processes audio through an analyzer node and renders the spectrum as a series of colored bars on an HTML canvas, with the height and color of each bar representing different frequency amplitudes. Upon loading, the page requests microphone access and begins continuously updating the visualization.
This webpage enables you to generate haikus based on images captured from your device's camera. After granting camera access, capture an image using the center button, and Claude will analyze the image and generate a haiku inspired by what it sees. The interface allows switching between front and rear cameras if your device has multiple cameras available.
The EXIF Data Viewer allows you to extract and view metadata from your digital photos. Upload any image to display embedded EXIF information including GPS coordinates (latitude and longitude) if available. The tool presents both specific location data and a complete breakdown of all metadata tags contained within the image file.
This interactive tool allows you to create and customize CSS box shadows using simple slider controls. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity to generate the perfect shadow effect for your web elements. The tool provides a live preview of your shadow and displays the corresponding CSS code, which you can copy to your clipboard with a single click.
This playground allows you to run prompts against the Gemini Nano experimental model directly in Chrome Canary. Enter your prompt in the text area, click "Execute prompt" to see the generated response, and view your interaction history which is saved locally in your browser. The interface requires Chrome Canary with the "Prompt API for Gemini Nano" flag enabled.
This PDF comparison tool enables side-by-side visual comparison of two PDF documents. Upload two PDFs by dragging them into the drop zone or clicking to select files. The tool renders each page of both documents and generates a third visualization that highlights differences between corresponding pages in red, making it easy to identify discrepancies between versions.
This interactive visualization displays the evolution of Elo ratings for large language models in the LMSYS Chatbot Arena over time. The chart shows how different models compare against each other, with higher positions indicating stronger performance. You can control the animation speed using the slider, pause/play the animation with the button, or upload custom JSON data with model ratings. The timeline at the bottom shows the current date being displayed as the animation progresses.
This tool performs Optical Character Recognition (OCR) on PDF documents and images directly in your web browser. Upload a file by dragging and dropping or clicking the dropzone, and the text content will be extracted using Tesseract.js. For PDFs, each page is processed separately and compiled into a full document, with support for multiple languages.
This page creates an interactive map with markers based on CSV data. It accepts parameters in the URL to set the center, zoom level, search query, individual markers, and a CSV file URL for bulk marker placement. The markers are displayed on an OpenStreetMap base layer, and the map view automatically updates the URL when panned or zoomed.
This tool converts Markdown to HTML using the GitHub Markdown API. Enter Markdown text in the top textarea, click "Render", and view the HTML output in the bottom textarea with a live preview below. Options include stripping hidden HTML elements and using GitHub Flavored Markdown mode. The tool automatically generates a table of contents from headings and preserves your input in local storage.
This page serves as an automatic redirect to the OCR application. It uses the HTML meta refresh tag to immediately forward visitors to the /ocr URL, while also providing a fallback link for users whose browsers don't support automatic redirects or have disabled this feature.
The Social Media Card Cropper allows you to create customized social media cards with correct aspect ratios for different platforms. Upload images by dropping, selecting, or pasting from clipboard, then crop and adjust your image with the interactive controls. Choose from preset aspect ratios for Twitter/LinkedIn, Facebook, Instagram, or Substack, adjust the background color, and download your finished card in the optimal dimensions for your selected platform.