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.
This tool allows you to extract HTML code from rich text content. Paste formatted text from any webpage into the editable area using Ctrl+V (Windows) or ⌘+V (Mac). The tool automatically captures the underlying HTML structure and displays it in the code box below. You can copy the extracted HTML code to your clipboard with a single click, making it easy to reuse elsewhere. The preview section shows how the HTML renders visually. Use the Clear all button to reset the tool and start over. This utility is helpful for developers and content creators who need to analyze or repurpose formatted content while preserving its structure.
This tool provides secure message encryption and decryption using AES-GCM encryption. Users can encrypt messages with a passphrase, generating a URL that contains the encrypted message which can be shared with recipients. The encryption process uses PBKDF2 with 100,000 iterations to derive a secure key from the passphrase, along with a random salt and initialization vector for added security. Recipients can decrypt messages by visiting the shared URL and entering the correct passphrase. All encryption and decryption occurs locally in the browser using the Web Crypto API, ensuring your messages remain private and are never sent to a server. The interface includes tabs for encrypting new messages or decrypting received messages, with copy-to-clipboard functionality for easy sharing.
The JSON Schema Builder allows you to create and customize JSON schemas visually. Define your schema by adding properties with different data types including strings, numbers, integers, booleans, objects, and arrays. Each property can include descriptions and be marked as required. For objects and arrays containing objects, you can add nested properties to create complex hierarchical structures. The builder provides a real-time preview of your schema in JSON format which can be copied to the clipboard. Your work is automatically saved in the URL, making it easy to share or revisit your schema later. The interface is responsive and works across different screen sizes.
This tool converts a simplified schema definition language into a standard JSON schema. Enter your schema in the text area using the concise DSL format - each field is defined with a name, type (str, int, bool, float), and optional description. The conversion happens in real-time as you type. Toggle the "Array items schema" checkbox to wrap your schema in an array definition. The converter runs Python code in your browser using Pyodide, with multiple CDN fallbacks to ensure reliability. Click the "Load example" button to see a demonstration of the proper syntax. The resulting JSON schema includes proper type mapping, required fields, and descriptions for each property.
This tool converts Pipfile.lock files into both Pipfile and requirements.txt formats. Paste your Pipfile.lock JSON content into the text area and click "Parse Dependencies" to extract all dependency names with their specific versions. The tool processes both default and development dependencies, displaying them in two separate formats below. Use the "Copy Pipfile Format" button to copy dependencies in the format needed for a Pipfile ("package-name" = "==1.2.3"
), or use "Copy Requirements.txt" to copy them in the standard requirements.txt format (package-name==1.2.3
). The parser extracts version information while properly handling the syntax differences between the formats. You can clear all content using the "Clear All" button.
The LLM Pricing Calculator helps you estimate costs when using various large language models. Enter the number of input tokens (your prompts) and output tokens (AI responses), along with their respective pricing per million tokens, to calculate the total cost in both dollars and cents. The calculator includes a comprehensive list of preset pricing for popular models like GPT-4o, Claude 3, Gemini, and more. Each preset displays the cost per million tokens for both input and output, which automatically populates the calculator fields when selected. The calculator updates in real-time as you modify values, making it easy to compare costs across different models or estimate expenses for specific usage scenarios.
This text editor provides a multi-section word and character counter for your writing. Enter text in the text areas to see an automatic count of words and characters update in real-time. Each writing section is independently tracked, and you can add multiple sections using the "Add new section" button or remove unwanted sections with the "Remove" button. Your writing is automatically saved to your browser's local storage after you stop typing, with "Saving..." and "Saved" indicators showing the save status. The editor maintains your work between browser sessions, so your content remains available when you return to the page.
This page displays a progress tracker for the current U.S. presidential term (2025-2029). It features a visual progress bar showing how much of the term has elapsed, along with key statistics including the number of days that have passed, days remaining until the end of the term, and the percentage of the term completed. The tracker automatically calculates these values based on the current date relative to the fixed start date (January 20, 2025) and end date (January 20, 2029). The information updates automatically every hour to maintain accuracy without requiring a page refresh.
Jina Reader is a web interface for the Jina Reader API that extracts content from web pages in various formats. Enter a URL and select your preferred output format (Markdown, HTML, Text, or LLM Markdown). After retrieving the content, you can view the raw text and a rendered preview in an iframe. The tool also features Claude AI integration—provide your Anthropic API key to analyze the extracted content using custom prompts. The default prompt generates a comprehensive summary with illustrative quotes and unusual ideas from the text. Both the extracted content and AI-generated analysis can be copied to your clipboard with a single click.
This tool allows you to analyze and understand SQLite queries through the APSW (Another Python SQLite Wrapper) extension. Enter your SQL query in the main text area, and optionally add setup SQL statements in the collapsible section to create tables or other database objects. You can provide query parameters in the input fields below the query box, adding more parameters as needed with the "+" button. When you click "Execute query," the tool runs your SQL through APSW's query analysis functions and displays comprehensive information about how SQLite will execute it, including the query plan, expanded SQL, and execution details. The results are presented in a structured JSON format that shows exactly how SQLite interprets and processes your query, which is useful for understanding query performance and behavior.
This tool helps visualize image bounding box coordinates from Google's Gemini AI models. Upload an image and enter a prompt that requests the model to identify object locations. The tool processes your image through the selected Gemini model and displays the results with colored bounding boxes drawn over the original image. The visualization includes a coordinate grid (0-1000) for precise reference. Each detected region is also extracted and displayed individually below the main image. The interface allows you to switch between different Gemini models, clear images, and visualize how the AI interprets spatial information in your images. The tool requires a Gemini API key that will be saved in your browser's local storage for convenience.
This tool formats SQL queries for better readability. Enter your SQL code in the input field, and the formatter will display the cleaned-up version below. You can customize the formatting by selecting the SQL dialect (SQLite, Standard SQL, PostgreSQL, or MySQL), adjusting the tab width, choosing keyword case formatting (preserve, uppercase, or lowercase), and selecting an indent style (Standard, Tabular left, or Tabular right). The formatted SQL can be copied to your clipboard with a single click of the "Copy to clipboard" button. The tool processes your SQL in real-time as you type or change formatting options.
This tool converts GitHub issues into formatted markdown content for documentation or sharing. Enter a GitHub issue URL in the format https://github.com/owner/repo/issues/123
, and click "Convert to markdown" to retrieve the issue's title, author, description, and all comments through the GitHub API. The resulting markdown includes the original issue body followed by all comments with proper attribution. The content appears in the textarea below, where you can review it and copy it to your clipboard with the "Copy to clipboard" button. If the URL is invalid or the issue cannot be found, an error message will display.
This tool allows you to analyze and compare image compression results with different quality settings and resolutions. Upload an image by dragging and dropping, clicking to select, or pasting from your clipboard. The application processes your image at original size and half size, each with five different quality levels (100%, 90%, 70%, 50%, and 30%). For images with transparency, a background color picker appears so you can choose what fills transparent areas when converting to JPEG. Each processed variation displays its width, quality setting, and file size in kilobytes. Click any image to toggle between normal and full-width view. Download links are provided for each variation, allowing you to save the compressed versions for your projects.
This tool allows you to convert images to JPEG format with adjustable quality settings. You can load an image by either clicking on the drop zone or dragging and dropping an image file onto it. Once loaded, use the quality slider to adjust the JPEG compression level from 0 (highest compression, lowest quality) to 100 (lowest compression, highest quality). The tool displays a preview of the converted image, its approximate file size in bytes, and generates an HTML image tag containing the data URI, which you can copy and use in your projects. The data URI format embeds the image data directly in the HTML, eliminating the need for an external image file.
This tool enables you to render JSON responses from Claude with citation formatting. Paste JSON containing Claude's response into the text area and click "Render message" to display a formatted version with citations properly highlighted as blockquotes. The tool parses the JSON structure, extracts the text content and any citations, then renders them in a sandboxed iframe for security. The renderer supports Claude's standard citation format where cited text appears as indented blockquotes beneath the corresponding paragraphs. The page comes pre-loaded with a sample JSON response demonstrating various citation patterns from an AI trends analysis. This utility helps when working with Claude's API responses or when you need to visualize cited content in a more readable format.
This tool converts PHP serialized data to JSON format. Enter serialized PHP data in the text area to see the equivalent JSON structure. The converter processes your input in real-time and displays the resulting JSON in a formatted output field. If there are any errors in the serialized data, the tool will display an error message explaining the issue. You can copy the converted JSON to your clipboard using the "Copy JSON to clipboard" button. The tool uses the php-serialize library to ensure accurate deserialization of complex PHP data structures.
This page demonstrates how screen readers announce dynamic content changes using ARIA live regions. The demo allows users to select between "assertive" and "polite" live region types and test notifications with two buttons - one that triggers an immediate notification and another that schedules a notification after a 10-second delay. The page includes detailed instructions for testing with VoiceOver on both macOS and iOS, including keyboard shortcuts, gestures, and navigation techniques. When notifications appear, they display the current time and are announced by screen readers according to the selected live region priority. This demonstration helps developers understand how to implement accessible dynamic content updates for users who rely on assistive technologies.
This tool converts Bluesky handles to their corresponding Decentralized Identifier (DID). Enter a Bluesky handle (such as "jay.bsky.social") in the input field and click "Resolve" to retrieve the associated DID. The tool makes a request to the Bluesky API endpoint and displays the resulting DID in the box below the form. If the handle cannot be found or another error occurs, an error message will be displayed instead. DIDs are important identifiers in the AT Protocol that Bluesky uses, providing a persistent identifier for accounts regardless of handle changes.
The Bluesky WebSocket Feed Monitor allows you to connect to Bluesky's WebSocket API and monitor the firehose of posts in real-time. After connecting, you can send custom JSON messages to filter the feed based on specific criteria such as user DIDs or content types. The interface displays a log of all incoming messages with timestamps. You can control the connection using the connect/disconnect buttons, send filter commands using the message input area, and clear the log as needed. The tool includes an example filter message for monitoring posts from specific users, with a link to resolve Bluesky handles to DIDs. Messages can be sent using the send button or the Ctrl/Cmd+Enter keyboard shortcut.
YAML Explorer is a browser-based tool for visualizing and exploring YAML data structures. Users can input YAML content directly by pasting into the textarea or load a YAML file from a URL. The explorer converts YAML to a collapsible tree view with syntax highlighting for different data types (strings, numbers, booleans, etc.). Users can expand and collapse nested objects and arrays, with an "expand all" option for viewing the complete structure. The tool preserves the state of your exploration through the URL, allowing you to share specific views of the YAML data. If there are parsing errors, they will be displayed with helpful error messages.
This page allows you to create a WebRTC audio session with OpenAI's real-time voice models. Enter your OpenAI API token, select a voice (Ash, Ballad, Coral, Sage, or Verse), and click "Start Session" to begin a conversation. The interface displays detailed token usage statistics for both the current interaction and the entire session, including audio input tokens, text tokens, cached tokens, and their associated costs. A visual audio indicator shows when your microphone is active. The session events section at the bottom logs all events received during the conversation, providing technical details about the interaction. The page securely stores your API token in your browser's local storage for convenience.
The Gist Audio Player is a web application that plays audio content from GitHub Gists containing OpenAI GPT-4 audio model responses. To use the player, enter a GitHub Gist URL in the input field and click "Fetch". The application extracts the base64-encoded WAV audio data from the Gist's JSON content, converts it to a playable format, and displays both the audio player and transcript. The player supports sharing via URL parameters, automatic retry for network errors, and downloading the audio file. If the Gist content is truncated, the application automatically fetches the complete raw content. The player requires Gists specifically containing JSON responses from the gpt-4o-audio-preview
model that include an audio response with base64-encoded data.
This tool interfaces with OpenAI's GPT-4o audio API to generate text-to-speech responses. Users can enter both a system prompt and a user prompt, select a model version (GPT-4o mini audio preview or GPT-4o audio preview), and choose from various voice options. After clicking "Generate Speech," the application sends a request to the OpenAI API and displays the resulting audio with playback controls, a download button, and a transcript of the spoken content. The complete API response is shown in JSON format with copy functionality. Users can also save responses as GitHub Gists by authenticating with their GitHub account, providing shareable links to both the raw data and an audio player. The tool requires an OpenAI API key, which is stored in local browser storage.
This tool converts JSON data to YAML in three different formats. Paste your JSON in the input field to see it automatically transformed into block style YAML (standard indentation), flow style YAML (compact representation with inline arrays and objects), and quoted strings YAML (all string values are double-quoted). Each output format has a copy button for easily transferring the converted YAML to your clipboard. The converter validates JSON input and displays error messages for invalid syntax. The tool uses the js-yaml library and presents the output in separate panels for easy comparison between YAML styles.
The Writing Style Analyzer helps improve your writing by identifying three common issues in text: weasel words, passive voice constructions, and duplicate words. To use the tool, paste your writing into the text area and receive immediate feedback. The analyzer highlights instances of vague "weasel words" (like "various" or "extremely"), passive voice constructions that may weaken your prose, and accidentally repeated words. Each issue is displayed with surrounding context to help you understand where and how to revise. The analyzer processes text in real-time as you type, allowing for continuous refinement of your writing. This tool is adapted from Matt Might's shell scripts for writing improvement.
This web application provides an interface to interact with Google's Gemini AI models. Users can select from different Gemini model versions including 2.0-flash-exp, 1.5-pro, 1.5-flash, and 1.5-flash-8b. The app requires a Gemini API key, which it stores in local storage for convenience. Messages are displayed in a scrollable chat area with markdown support, allowing for formatted responses. When sending a message, the application streams the model's response in real time and displays usage metadata and API call duration. The chat history is maintained within the session but can be reset using the Clear button. The interface includes a text input area and controls for sending messages, changing models, and clearing the conversation history.
The Timezone Meeting Planner helps you coordinate times across different regions by comparing two timezones. Select locations from the dropdown menus to generate a comprehensive 48-hour time comparison table. The table displays each hour in UTC format alongside the corresponding local times for both selected locations. The comparison includes day-of-week information to help you identify optimal meeting times across international time differences. Your timezone selections are stored in the URL, making it easy to share specific timezone comparisons with others. The tool uses the browser's built-in timezone database to ensure accuracy.
Prompts.js is a lightweight JavaScript library designed for creating modal dialogs with alert, confirm, and prompt functionalities. The library offers asynchronous methods that return promises, allowing for cleaner, more readable code compared to traditional browser dialogs. Users can call Prompts.alert()
to display simple messages, Prompts.confirm()
to ask yes/no questions that return boolean values, and Prompts.prompt()
to collect user input as text. The example code demonstrates how to implement each dialog type and handle user responses, including displaying results in a designated area of the page after the dialog interaction is complete.
The Timestamp Converter tool allows you to convert Unix timestamps into human-readable UTC and local time formats. Enter a Unix timestamp in the input field to see the corresponding date and time displayed below. The converter automatically handles both Unix time in seconds (10 digits) and milliseconds (13 digits). The UTC time shows the exact time in Coordinated Universal Time, while the local time displays the converted time in your current time zone. The tool initializes with the current Unix timestamp in seconds, making it easy to verify the current time in different formats.
The Bluesky Timeline Viewer is a web application that displays posts from your Bluesky social network timeline. After logging in with your Bluesky username/email and an app password, the application fetches and displays your timeline content. The viewer shows posts in a user-friendly format with author avatars, display names, handles, timestamps, and post text. It automatically refreshes your timeline every 10 seconds to display new content, with a countdown indicating when the next refresh will occur. You can stop the auto-refresh functionality at any time. The application saves your login credentials locally for convenience on future visits. Below the rendered timeline, the raw JSON data is also displayed for advanced users who need access to the complete API response.
This tool allows you to browse the contents of Python package files directly in your browser. Enter a URL to a .zip, .tar.gz, or .whl file in the input field and click "Unpack File" to download and extract its contents. Once processed, a list of files contained in the package will appear. Click on any filename to view its contents in the panel below. The tool includes a sample URL to a Python wheel file that you can try with one click. The file browser supports text-based files and displays them with proper formatting for easier code review.
This page provides an API Explorer interface that allows users to make API requests to external endpoints from within a sandboxed environment. The explorer uses iframe sandboxing with the allow-scripts
and allow-forms
permissions to create a secure execution context. Users can enter a URL in the input field (pre-populated with a sample endpoint) and submit it to retrieve data. The application handles communication between the sandboxed iframe and the parent page using postMessage()
, which enables the iframe to request API calls while the parent executes the actual fetch requests. The response data is displayed in a formatted JSON viewer. The iframe dynamically adjusts its height based on content through messaging to the parent window. This approach demonstrates a pattern for safely allowing API exploration while maintaining security boundaries between contexts.
This tool allows you to create bounding boxes on images to generate coordinates. You can load an image by pasting (Ctrl+V/Cmd+V), dragging and dropping a file, or clicking to select an image file. Once loaded, draw a bounding box by clicking and dragging on the image. Resize the box by dragging its corners or edges, or move it by dragging inside the box. The tool displays coordinates in percentages relative to the image dimensions in the format x1,y1,x2,y2
, representing the top-left and bottom-right corners of the box. The generated coordinates string can be copied for use with other applications that require bounding box inputs.
The MDN Browser Support Timelines tool allows you to search and explore when specific web APIs became available across different browsers. Enter an API name in the search box to see a chronological timeline of browser implementations. The tool displays release dates for each browser version that first supported the feature, along with additional information such as specification links, MDN documentation references, and API status indicators (experimental, deprecated, or standard). For each API, you can view both the main feature and any sub-features with their own compatibility data. Browsers that don't support a particular API are listed separately at the bottom of each timeline.
This tool allows you to experiment with the iframe sandbox attribute by providing a code editor and a live preview. Enter HTML code in the left editor panel and see it rendered in the right preview panel. The sandbox controls below the preview let you toggle different iframe security restrictions, such as whether scripts can run, forms can be submitted, or popups can open. Each checkbox corresponds to a specific sandbox permission that can be enabled or disabled. When you modify your code or change security settings, click the "Update Preview" button to apply the changes and see how they affect the behavior of the content within the iframe.
This page demonstrates an interactive animated rainbow border effect. The main element is a dark-colored box with text that can display a colorful animated border when activated. The animation consists of a gradient rainbow effect that flows around the border while pulsing with varying brightness and blur. Users can toggle the animation on or off using the button below the box. When activated, the button text changes to "Stop Animation" and when deactivated, it returns to "Start Animation." The animation uses CSS transitions, keyframes for the gradient movement and pulsing effect, and JavaScript to handle the toggle functionality. The design features a dark background with contrasting elements for visual appeal.
This page displays information about Daylight Saving Time changes for California (Pacific Time zone only). It shows when clocks last changed and when they will change next, indicating whether you'll gain or lose an hour of sleep. For the week following a time change, it includes a note about how pets might be confused by the schedule shift, showing both the current time and what your pet's "internal clock" might perceive. The page automatically detects if you're in the Pacific Time zone and shows a warning if you're not. It updates in real-time and highlights when a clock change is happening tonight. The current time status (whether you're in PST or PDT) is also displayed at the bottom of the page.
The Claude Token Counter tool allows you to calculate token usage for messages sent to Claude 3.5 Sonnet. Enter an optional system prompt and your user message in the respective text areas. You can also upload images and PDF files by dragging them into the designated area or clicking to select files. The tool requires an Anthropic API key (stored in your browser's local storage) and makes a request to Anthropic's token counting API. After clicking "Count Tokens," the tool displays detailed token count information, including total tokens and breakdowns by component. This helps you understand token consumption for multimodal messages before sending them to Claude, enabling better management of context limitations.
This code defines the Gemini
model class for use with the LLM tool. It configures the Gemini AI model to be used through the Google Vertex API. The class handles constructing messages to be sent to the model based on the prompt, system prompt, and any previous conversation history. The model supports response streaming by yielding tokens as they're received from the API. Authentication is managed through the Google Cloud authentication system, and the code includes parameters for controlling model behavior like temperature and maximum output tokens. Errors from the API are caught and converted into human-readable error messages. The implementation supports both standard prompts and structured chat interfaces.
This page demonstrates how to embed SVG images in HTML using base64 data URIs. The demonstration includes three examples: a simple sun SVG, a stylized pelican shape, and an SVG with JavaScript (which is intentionally inactive). The page features a responsive grid layout that displays each SVG with a title and description. Below the examples, a footer note explains that SVGs embedded via img
tags with base64 data URIs have their JavaScript and interactive elements safely ignored by the browser. The page also includes functionality that decodes and displays the raw SVG code for each example, helping users understand how the base64 encoding works.
This tool allows you to progressively render and animate SVG (Scalable Vector Graphics) content. You can either paste SVG code into the top textarea or load the example tiger image. Set the animation duration in seconds, then click "Render" to see the SVG gradually build up in the output area. As the animation runs, you can see both the visual result and the corresponding code updating in the live editor below. The tool also features a progress bar indicating the animation's completion status. For incomplete SVG fragments, the system automatically completes the necessary tags to ensure valid rendering. You can also edit SVG code directly in the live editor to see immediate updates in the preview area.
The GitHub Issue Viewer allows you to extract the content of GitHub issues in markdown format. Enter a GitHub issue URL in the input field and click "Fetch Issue" to retrieve the issue title, status, creator, creation date, description, and all comments. You can optionally provide a GitHub Personal Access Token to access private repositories or avoid rate limiting. The token is securely stored in your browser's local storage for future use. After fetching an issue, the content is displayed in markdown format, which you can copy to your clipboard with a single click. This tool helps you document issues or share their content outside of GitHub.
This browser-based QR code decoder allows you to extract information from QR code images. You can upload an image file by clicking on the drop area, drag and drop an image onto the designated area, or paste an image from your clipboard. The tool processes the image using the jsQR library and displays the decoded content below the upload area. If the decoded content is a valid URL, it will be displayed as a clickable link. The decoder works entirely in your browser with no server-side processing, ensuring your QR code data remains private.
The Clipboard Format Viewer allows you to examine all available formats of content when you paste data from your clipboard. Paste content either directly into the textarea or anywhere on the page to see a detailed breakdown of the clipboard data. For each format (such as plain text, HTML, or files), the tool displays the format type and its content in a scrollable container. The viewer handles special formats like HTML and files appropriately, showing HTML structure or file details. This tool is particularly useful for developers working with clipboard interactions or anyone who needs to inspect the underlying data structure of copied content.
This converter transforms regular text into its phonetic alphabet representation using the ARES standard. Type your text in the input field and click "Convert" to see each letter and number replaced with its corresponding phonetic word (Alpha for A, Bravo for B, etc.). The converter handles both letters and numbers, and indicates spaces with "(SPACE)". Any characters not in the phonetic alphabet (like punctuation) remain unchanged. This tool is useful for radio communications, spelling out words clearly over the phone, or in situations where precise letter identification is necessary.
The HTML Entity Escaper converts special characters in your text to their corresponding HTML entities, preventing browsers from interpreting them as HTML code. This tool handles five key characters: ampersands (&) become &, less-than signs (<) become <, greater-than signs (>) become >, double quotes (") become ", and single quotes (') become '. This conversion is essential when displaying code snippets or HTML syntax examples on web pages. To use the tool, paste your text into the input field, and the escaped version appears automatically in the output field. You can then copy the result to your clipboard with the provided button for use in your HTML documents.
This page provides an interface to record audio, transcribe it, and process it using OpenAI's GPT-4o audio model. Users can record audio using their microphone by clicking the "Start Recording" button, and the page displays a timer during recording. After stopping, the audio is available for playback and download. Users can add a text prompt in the text area to provide context or instructions for the AI. When submitting to the API, the page processes both the audio and text prompt through OpenAI's API and displays the response in a formatted view. The interface shows token usage details and approximate cost for the API call. The page requires an OpenAI API key, which is stored in the browser's local storage for convenience. All audio processing happens client-side before being sent to the API as a base64-encoded WAV file.
This tool extracts URLs from web page content. Paste HTML content into the editable area to automatically extract all hyperlinks. The tool parses the pasted HTML, identifies anchor tags, and extracts URLs that begin with "http". The extracted links appear in a separate text area, one URL per line, for easy copying. A "Copy to clipboard" button allows you to quickly copy all extracted URLs. This functionality is particularly useful when you need to collect multiple links from a webpage for documentation, research, or sharing purposes.
This tool allows you to query a database of pelican sightings in Half Moon Bay using SQL commands. The interface includes a text area where you can enter SQL queries and an execute button to run them. The database contains sample data with pelican sightings records including date, location, species, and count information. Results are displayed in a formatted table below the query box. The tool uses the SQLite WASM library to process queries directly in your browser without requiring a server connection. You can modify the default query "SELECT * FROM pelican_sightings;" to filter, sort, or analyze the sighting data in different ways using standard SQL syntax.
This page demonstrates an interactive CSS grid layout featuring a 4x2 grid with four distinct colored cells. One cell (labeled "1x2") can be clicked to trigger a smooth expansion animation that grows to fill the entire grid container. When expanded, the overlay displays "Expanded! Click to shrink" and can be clicked again to animate back to its original position and size. The animation uses CSS transitions with a 0.5-second ease effect for smooth motion in both directions. The grid showcases different-sized cells including a 2x2 cell (red), a 1x2 expandable cell (green), and two 1x1 cells (blue and yellow), all with consistent styling including rounded corners and centered text.
The Event Planner tool allows users to create and schedule events with detailed information. Users can input an event title, description, optional location, date, time, and select from multiple US timezones. After submitting the form, the tool displays comprehensive event details including the formatted date and time, a countdown showing days/hours/minutes until the event, and provides integration with Google Calendar. The Google Calendar link automatically transfers all event information, and users can either click the direct link or copy the provided URL. The form validates required fields and uses moment.js for accurate timezone handling and time calculations.
This tool converts JPG or PNG images to SVG (Scalable Vector Graphics) format using the imagetracerjs library. You can upload an image by either dragging and dropping it onto the designated area or clicking to browse your files. Once processed, the tool displays the resulting SVG image and provides the corresponding SVG code in a text area below. The code can be copied to your clipboard with a single click using the "Copy to clipboard" button. The conversion happens entirely in your browser, making it a convenient way to vectorize raster images without requiring server uploads or additional software.
This tool converts SVG images to JPEG or PNG format. You can input SVG code by pasting it directly into the text area, uploading an SVG file, or dragging and dropping an SVG file. The converter provides options to select output format (JPEG or PNG), specify background color or transparency, and adjust the output width. After conversion, the tool displays the resulting image, provides a download link, shows the file size, and generates a base64-encoded image tag you can copy. The converted image can be toggled between its default size and full size by clicking on it. For quick testing, you can load an example SVG tiger image using the provided link.
This demonstration showcases the integration of MapLibre GL with OpenFreeMap tiles to render a map of San Francisco with 1,000 randomly generated markers. The code provides three different approaches for rendering multiple markers efficiently: scaling built-in markers, creating custom HTML markers, and using a circle layer. The demo currently implements the circle layer approach, which offers better performance for large numbers of markers by rendering them directly as a map layer rather than as DOM elements. The map is centered on San Francisco, tilted at a 50-degree pitch angle, and automatically fits its bounds to contain all markers with padding. The random markers are confined within a bounding box approximating San Francisco's geographic boundaries.
This page displays the user agent string from your browser. When loaded, it shows a heading "Your User Agent:" followed by the complete user agent string of your current browser. The user agent string contains information about your browser, operating system, and device, which websites can use to identify what software you're using to access them. The page uses JavaScript to retrieve this information through the navigator.userAgent
property and display it in a paragraph element.
This tool provides a live rendering environment for Markdown and LaTeX mathematical expressions. Users can type or paste content in the input area, which automatically renders in the preview section below. The renderer supports Markdown formatting such as headings, bold text, italics, lists, and tables, along with mathematical expressions in both inline ($...$) and block ($$...$$) formats using KaTeX. The generated HTML output appears in a separate text area, which can be copied to the clipboard with a single button click. The interface displays both the rendered content and its corresponding HTML code simultaneously, making it useful for content creation and educational purposes.
This tool facilitates uploading files and images directly to GitHub repositories using the GitHub API. Enter your GitHub personal access token, repository owner, repository name, and the target file path. Choose between uploading text content or an image file - for text, enter your content in the provided textarea; for images, select a file from your device. The application converts your content to the appropriate format and sends it to GitHub using a PUT request. After successful upload, you'll receive a confirmation message with a link to view your file in the repository. This tool helps streamline the process of adding or updating files in GitHub repositories without needing to use git commands or the GitHub web interface.
The Image Token Calculator provides a way to estimate the token cost of processing images with AI models. Upload an image by dragging and dropping it into the designated area or by clicking to browse your files. After uploading, the calculator analyzes the image dimensions and divides it into 224×224 pixel tiles, which is the standard processing unit for many AI vision models. The results display the image's dimensions, number of horizontal and vertical tiles needed, total tile count, and the estimated token cost (calculated at 1000 tokens per tile). This tool helps users anticipate resource usage when working with image-based AI applications.
This tool extracts and displays YouTube video thumbnails from a supplied URL or video ID. Enter a YouTube link or the 11-character video ID to view nine different thumbnail formats (default, hqdefault, mqdefault, sddefault, maxresdefault, and numbered formats 0-3). Each thumbnail displays with its actual width and a copyable URL. Click any thumbnail to expand it for better viewing, and click the URL area with the clipboard icon to copy the image address to your clipboard. The tool updates the browser URL with your input, allowing you to bookmark or share specific thumbnail results.
This Pomodoro Timer application helps users manage work sessions using the Pomodoro technique. Users can enter a goal for each session, select a timer duration (from 5 minutes to 60 minutes), and track their progress. The timer displays minutes and seconds remaining in the current session. When a session ends, it's logged in the Session Log table below, which records the goal, start time, end time, duration, and any pauses taken during the session. The app stores session data in the browser's localStorage, allowing history to persist between visits. Users can delete individual sessions from the log as needed. The bottom section displays session data in JSON format for export or reference. The timer can be controlled with on-screen buttons or by pressing the spacebar to start/pause sessions.
This page is a redirect mechanism that automatically sends users to the "/gemini-bbox" page. When a user arrives at this URL, the browser will immediately redirect them to the destination page due to the meta refresh tag set with a 0-second delay. If automatic redirection fails for any reason (such as if the user has disabled automatic redirects in their browser settings), a fallback text message is displayed with a manual link that allows users to navigate to the intended destination by clicking on it.
This tool analyzes JPEG images to extract the TIFF orientation metadata. Upload an image by dragging and dropping it onto the designated area or by clicking to browse your files. The application parses the EXIF data embedded in the JPEG file, specifically looking for the orientation tag (0x0112) in the TIFF header. After processing, it displays the orientation value and provides a human-readable description (such as "Normal" or "Rotated 90° CW"). The debug information shows technical details about the parsing process, including file size, EXIF location, endianness, and IFD (Image File Directory) entries. This tool works entirely in your browser with no server uploads required.
This Audio Spectrum Visualizer captures live audio input from your microphone and displays a real-time frequency spectrum analysis. The visualization shows audio frequencies as colored bars on a canvas, with the height of each bar representing the amplitude of a specific frequency range. Louder sounds produce taller bars, while the color intensity changes based on the amplitude. The analyzer uses the Web Audio API to process the audio stream and extract frequency data through an FFT (Fast Fourier Transform) with 2048 sample points. To use the visualizer, you'll need to grant microphone access permission when prompted by your browser.
This web application uses your device's camera to generate haikus based on images. Capture a photo by pressing the center button, and Claude will create a haiku inspired by what it sees. For devices with multiple cameras, use the switch camera button to toggle between front and rear cameras. The application requires an Anthropic API key, which you'll be prompted to enter on first use. Generated haikus appear in the top left corner of the screen, with each new haiku added below previous ones. The application works on mobile devices and desktop browsers with camera access.
The EXIF Data Viewer is a web application that extracts and displays metadata from uploaded images. After selecting an image file, the tool processes it to reveal embedded EXIF information, with special attention to GPS coordinates. If location data is present, the viewer displays the precise latitude and longitude in decimal degree format. The application also provides a complete breakdown of all available EXIF tags in JSON format, allowing users to examine camera settings, device information, and other metadata contained within their images. The tool requires no server-side processing as it operates entirely in the browser using the exif-js library.
This interactive tool allows you to create and customize CSS box shadows through a visual interface. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and opacity using the sliders. As you modify these parameters, the preview box updates in real-time to display your changes. The corresponding CSS code is automatically generated below the controls, and you can copy it directly to your clipboard with the provided button. The tool supports a wide range of values for each property, making it easy to create subtle shadows, dramatic effects, or anything in between for your web projects.
The Chrome Prompt Playground allows users to interact with the Gemini Nano experimental model directly in Chrome Canary. Enter your prompt in the text area and click "Execute prompt" to generate a response. The interface displays the model's output in real-time as it streams in. All your interactions are automatically saved to a history section below, where you can review past prompts and responses or delete entries you no longer need. This tool requires Chrome Canary with the "Prompt API for Gemini Nano" flag enabled in chrome://flags, and the model may take several hours to download before becoming available.
This PDF comparison tool allows you to analyze differences between two PDF documents visually. Upload two PDF files either by dragging and dropping them onto the designated area or by clicking to select files from your device. The tool processes both documents and displays each page side by side, with a third visualization that highlights differences between corresponding pages in red. The comparison works across all pages in both documents, even if they have different page counts. For optimal results, ensure you upload valid PDF files. The tool uses PDF.js to render the documents directly in your browser without sending data to any external servers.
This visualization displays the evolution of Elo ratings for top large language models based on LMSYS Chatbot Arena data. The animated chart shows how different models rank against each other over time, with higher Elo scores indicating better performance in human preference evaluations.
You can control the animation using the buttons and speed slider at the bottom. The "Reset" button restarts the animation from the beginning, while "Play/Pause" controls animation flow. The speed slider adjusts how quickly the visualization progresses through different dates.
The chart displays up to 20 models at once, sorted by their Elo scores, with colored bars representing each model. To use your own data, paste JSON in the provided text area and click "Parse JSON and Start Animation." Each data point requires a date, model name, and Elo rating.
This tool uses your browser to perform Optical Character Recognition (OCR) on PDF documents and images without uploading files to any server. It leverages Tesseract.js for text extraction and PDF.js to convert PDFs into images for processing. You can drag and drop files, click to select them, or paste images from your clipboard. For PDFs with multiple pages, each page is processed individually and displayed with its extracted text. The tool supports over 100 languages which can be selected from the dropdown menu. The language selection persists in the URL for easy sharing. When processing multiple pages, a "Full document" section appears with all extracted text combined for convenient copying.
This interactive map displays markers based on data from a CSV file. Load data by adding ?csv=URL
to the page URL, where the CSV must include latitude
and longitude
columns. You can customize the map with several URL parameters: center
(coordinates in format lat,lng
), zoom
(zoom level), q
(location to search for), marker
(add individual markers at coordinates), and color
(change the default marker color). The map automatically updates the URL as you navigate, preserving your current view. Markers from CSV files appear as small colored circles on the map, while markers specified directly in the URL use the default Leaflet marker style.
This tool renders Markdown text using GitHub's Markdown API. Enter your Markdown content in the top textarea, then click "Render" to convert it to HTML. The rendered output appears in both the lower textarea (as HTML code) and in the preview area below. You can toggle options to strip hidden HTML elements and clean up the rendered output, or enable GitHub Flavored Markdown (GFM) mode for additional syntax features. The tool automatically generates a table of contents from headings and preserves your content between sessions using browser storage. The HTML output can be copied for use in other applications.
This page functions as an automatic redirect to the OCR service. When a user lands on this page, they will be instantly redirected to the "/ocr" location. The page includes a fallback message with a clickable link in case the automatic redirect fails to work. The redirect happens through the meta refresh tag with a zero-second delay, ensuring immediate redirection for most browsers and devices.
social-media-cropper.html #
The Social Media Card Cropper allows you to create customized images perfectly sized for various social media platforms. Upload images by dragging and dropping them onto the designated area, clicking to select from your files, or pasting directly from your clipboard. Choose from preset aspect ratios optimized for different platforms (Twitter/LinkedIn, Facebook, Substack, or Instagram), and customize the background color to complement your image. The tool provides intuitive zoom controls to adjust your image placement within the frame. Once you're satisfied with your composition, preview the final result and download it as a JPEG file ready for immediate use on your chosen social media platform. The cropper automatically centers your image and maintains the correct proportions, ensuring your content looks professional across all platforms.