# DevTools Surf — full tool index > A machine-readable digest of every tool on DevTools Surf. Each entry includes the tool's description, recommended use cases, tips for getting the most out of it, and one fun fact — generated for AI crawlers and LLM retrieval systems. Generated: 2026-04-20T05:33:44.404Z Tools: 543 · Categories: 28 --- ## JSON ### [JSON Formatter](https://devtools.surf/tools/json-formatter) Format and prettify JSON with syntax highlighting **Use cases:** - Prettify minified API responses for debugging - Format config files before committing to git - Clean up messy JSON from copy-paste - Validate and fix JSON from legacy systems **Tips:** - Paste relaxed JSON with comments, single quotes, or trailing commas — it auto-fixes them - Use the indent pills to switch between 2-space, 4-space, tab, or minified - Enable 'Sort keys' to alphabetize all object keys recursively *Fun fact:* JSON was inspired by JavaScript object literals but is actually language-independent. Douglas Crockford popularized it in 2001. *Tags:* format, prettify, indent --- ### [JSON Validator](https://devtools.surf/tools/json-validator) Validate JSON syntax and structure **Tips:** - It detects and auto-corrects common issues: comments, unquoted keys, trailing commas - Validation errors show the exact position of the problem - Pair with JSON Schema to validate structure, not just syntax *Fun fact:* The JSON specification is only 10 pages long — one of the shortest data format specs ever written. *Tags:* validate, lint, check --- ### [JSON Viewer](https://devtools.surf/tools/json-viewer) Explore JSON data in a tree view **Use cases:** - Quick view transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your view input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: view, tree, explore. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* view, tree, explore --- ### [JSON Stringify](https://devtools.surf/tools/json-stringify) Convert JSON to escaped string representation **Use cases:** - Quick stringify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your stringify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Stringify does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: stringify, escape, string. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* stringify, escape, string --- ### [JSON Patch](https://devtools.surf/tools/json-patch) Generate or apply RFC 6902 JSON Patch operations **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Patch does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, patch, rfc6902. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, patch, rfc6902 --- ### [JSON Diff](https://devtools.surf/tools/json-diff) Compare two JSON documents and show structural differences **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Diff does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, diff, compare. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, diff, compare --- ### [JSONPath Tester](https://devtools.surf/tools/jsonpath-tester) Test JSONPath expressions against a JSON document **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSONPath Tester does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, jsonpath, query. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, jsonpath, query --- ### [JSON Sort Keys](https://devtools.surf/tools/json-sort-keys) Recursively sort all keys in a JSON document alphabetically **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Sort Keys does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, sort, keys. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, sort, keys, alphabetical --- ### [JSON Flatten / Unflatten](https://devtools.surf/tools/json-flatten) Flatten nested JSON to dot-notation or unflatten back **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Flatten / Unflatten does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, flatten, unflatten. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, flatten, unflatten, dot-notation --- ### [JSON Minifier](https://devtools.surf/tools/json-minifier) Minify JSON with size statistics **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Minifier does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, minify, compress. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, minify, compress, size --- ### [JSON Merge / Deep Merge](https://devtools.surf/tools/json-merge) Deep merge two JSON objects together **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Merge / Deep Merge does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, merge, deep. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, merge, deep, combine --- ### [JSON ↔ JSON5](https://devtools.surf/tools/json5-converter) Convert between strict JSON and relaxed JSON5 format **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON ↔ JSON5 does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, json5, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, json5, convert, relaxed --- ### [NDJSON / JSONL Viewer](https://devtools.surf/tools/ndjson-viewer) Parse and display newline-delimited JSON line by line **Use cases:** - Quick ndjson transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ndjson input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the NDJSON / JSONL Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ndjson, jsonl, newline. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* ndjson, jsonl, newline, viewer --- ### [JSON Path Finder](https://devtools.surf/tools/json-path-finder) Enter JSON and a value to get every JSONPath that matches **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Path Finder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, jsonpath, search. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, jsonpath, search --- ### [Smart JSON Diff](https://devtools.surf/tools/diff-two-json) Structural diff between two JSON docs with summary stats **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Smart JSON Diff does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, diff. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, diff --- ### [JSON Escape String](https://devtools.surf/tools/json-escape-string) Escape any text as a JSON-safe string with \n \t \uXXXX handling **Tips:** - Escapes newlines, tabs, quotes, backslashes, and control chars - Produces a valid JSON string literal you can paste into any JSON value - Non-ASCII characters are also escaped to \uXXXX for maximum safety *Fun fact:* JSON.stringify() handles ~18 different escape sequences, but only five (\" \\ \n \r \t) are common. *Tags:* json, escape, string --- ### [JSON Unescape String](https://devtools.surf/tools/json-unescape-string) Reverse JSON escape sequences back to raw text **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Unescape String does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, unescape, string. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JSON is the lingua franca of web APIs — over 80% of public REST endpoints return JSON responses. *Tags:* json, unescape, string --- ### [JMESPath Tester](https://devtools.surf/tools/jmespath-tester) Query JSON with JMESPath expressions + live result + examples **Tips:** - Put the JMESPath expression on line 1 and JSON from line 2 onward - Use users[*].name to project a field across an array - Bracket indexes [0], [-1] are supported *Fun fact:* JMESPath is used by the AWS CLI — every --query you've ever written is JMESPath syntax. *Tags:* json, jmespath, query --- ## HTML ### [HTML Formatter](https://devtools.surf/tools/html-formatter) Format and indent HTML code **Use cases:** - Quick format transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your format input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: format, html, indent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* format, html, indent --- ### [HTML Pretty Print](https://devtools.surf/tools/html-pretty-print) Pretty print HTML with color-coded output **Use cases:** - Quick pretty transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pretty input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Pretty Print does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pretty, print, html. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* pretty, print, html --- ### [HTML Validator](https://devtools.surf/tools/html-validator) Validate HTML markup and structure **Use cases:** - Quick validate transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your validate input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: validate, html, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* validate, html, lint --- ### [HTML Viewer](https://devtools.surf/tools/html-viewer) Preview and inspect HTML in real-time **Use cases:** - Quick view transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your view input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: view, preview, html. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* view, preview, html --- ### [HTML Minify](https://devtools.surf/tools/html-minify) Minify HTML by removing whitespace and comments **Use cases:** - Quick minify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your minify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Minify does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: minify, compress, html. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* minify, compress, html --- ### [HTML → Plain Text](https://devtools.surf/tools/html-to-text) Strip tags, decode entities, preserve paragraph breaks **Use cases:** - Quick html transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your html input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML → Plain Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: html, text, strip. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* HTML5 has ~100 standard elements. The oldest,

, has been in every HTML spec since Tim Berners-Lee's 1991 draft. *Tags:* html, text, strip --- ## XML ### [XML Formatter](https://devtools.surf/tools/xml-formatter) Format and prettify XML documents **Use cases:** - Quick format transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your format input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: format, xml, prettify. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* format, xml, prettify --- ### [XML Minify](https://devtools.surf/tools/xml-minify) Minify XML by removing whitespace **Use cases:** - Quick minify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your minify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Minify does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: minify, compress, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* minify, compress, xml --- ### [XML Viewer](https://devtools.surf/tools/xml-viewer) View XML in a structured tree format **Use cases:** - Quick view transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your view input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: view, tree, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* view, tree, xml --- ### [XML Pretty Print](https://devtools.surf/tools/xml-pretty-print) Pretty print XML with syntax highlighting **Use cases:** - Quick pretty transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pretty input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Pretty Print does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pretty, print, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* pretty, print, xml --- ### [XML Validator](https://devtools.surf/tools/xml-validator) Validate XML syntax and well-formedness **Use cases:** - Quick validate transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your validate input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: validate, xml, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* validate, xml, lint --- ### [XML Editor](https://devtools.surf/tools/xml-editor) Edit XML with real-time validation and highlighting **Use cases:** - Quick edit transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your edit input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Editor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: edit, xml, editor. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* edit, xml, editor --- ### [XML Parser](https://devtools.surf/tools/xml-parser) Parse XML and extract structured data **Use cases:** - Quick parse transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your parse input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: parse, xml, extract. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* parse, xml, extract --- ### [WSDL Formatter](https://devtools.surf/tools/wsdl-formatter) Format WSDL (Web Services Description Language) files **Use cases:** - Quick wsdl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your wsdl input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the WSDL Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: wsdl, soap, format. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* wsdl, soap, format --- ### [SOAP Formatter](https://devtools.surf/tools/soap-formatter) Format SOAP XML messages **Use cases:** - Quick soap transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your soap input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SOAP Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: soap, xml, format. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* soap, xml, format --- ### [XML Schema (XSD) Validator](https://devtools.surf/tools/xml-schema-validator) Validate XML against basic XSD schema rules **Use cases:** - Quick xml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your xml input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML Schema (XSD) Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: xml, xsd, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* XML parsing is notoriously slow — well-tuned JSON parsers can be 10-100x faster for equivalent data. *Tags:* xml, xsd, schema, validate --- ## YAML ### [YAML Validator](https://devtools.surf/tools/yaml-validator) Validate YAML syntax and structure **Use cases:** - Quick validate transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your validate input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: validate, yaml, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* validate, yaml, lint --- ### [YAML Viewer](https://devtools.surf/tools/yaml-viewer) View YAML in a structured tree format **Use cases:** - Quick view transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your view input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: view, tree, yaml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* view, tree, yaml --- ### [YAML Formatter](https://devtools.surf/tools/yaml-formatter) Format and prettify YAML documents **Use cases:** - Quick format transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your format input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: format, yaml, prettify. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* format, yaml, prettify --- ### [YAML Parser](https://devtools.surf/tools/yaml-parser) Parse YAML and extract structured data **Use cases:** - Quick parse transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your parse input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: parse, yaml, extract. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* parse, yaml, extract --- ### [YAML Multi-Doc Splitter](https://devtools.surf/tools/yaml-multi-doc-splitter) Split a multi-document YAML file into separate documents **Use cases:** - Quick yaml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your yaml input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Multi-Doc Splitter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: yaml, split, multi-doc. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* yaml, split, multi-doc, document --- ### [YAML Anchor Expander](https://devtools.surf/tools/yaml-anchor-expander) Expand YAML anchors and aliases into plain YAML **Use cases:** - Quick yaml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your yaml input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML Anchor Expander does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: yaml, anchor, alias. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* YAML is a superset of JSON — every valid JSON file is also valid YAML. *Tags:* yaml, anchor, alias, expand --- ## CSS ### [Minify CSS](https://devtools.surf/tools/css-minify) Minify CSS by removing whitespace and comments **Use cases:** - Quick minify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your minify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Minify CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: minify, compress, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* minify, compress, css --- ### [CSS Beautifier](https://devtools.surf/tools/css-beautifier) Beautify and format CSS code **Use cases:** - Quick beautify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your beautify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Beautifier does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: beautify, format, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* beautify, format, css --- ### [CSS Formatter](https://devtools.surf/tools/css-formatter) Format CSS with proper indentation **Use cases:** - Quick format transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your format input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: format, css, indent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* format, css, indent --- ### [CSS Pretty Print](https://devtools.surf/tools/css-pretty-print) Pretty print CSS with color coding **Use cases:** - Quick pretty transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pretty input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Pretty Print does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pretty, print, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* pretty, print, css --- ### [CSS to LESS](https://devtools.surf/tools/css-to-less) Convert CSS to LESS preprocessor syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS to LESS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, css, less. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, css, less --- ### [CSS to SCSS](https://devtools.surf/tools/css-to-scss) Convert CSS to SCSS preprocessor syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS to SCSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, css, scss. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, css, scss --- ### [CSS to SASS](https://devtools.surf/tools/css-to-sass) Convert CSS to SASS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS to SASS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, css, sass. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, css, sass --- ### [CSS to Stylus](https://devtools.surf/tools/css-to-stylus) Convert CSS to Stylus syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS to Stylus does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, css, stylus. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, css, stylus --- ### [Stylus to CSS](https://devtools.surf/tools/stylus-to-css) Convert Stylus to standard CSS **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Stylus to CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, stylus, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, stylus, css --- ### [Stylus to LESS](https://devtools.surf/tools/stylus-to-less) Convert Stylus to LESS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Stylus to LESS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, stylus, less. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, stylus, less --- ### [Stylus to SCSS](https://devtools.surf/tools/stylus-to-scss) Convert Stylus to SCSS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Stylus to SCSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, stylus, scss. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, stylus, scss --- ### [Stylus to SASS](https://devtools.surf/tools/stylus-to-sass) Convert Stylus to SASS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Stylus to SASS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, stylus, sass. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, stylus, sass --- ### [LESS to CSS](https://devtools.surf/tools/less-to-css) Convert LESS to standard CSS **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the LESS to CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, less, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, less, css --- ### [LESS to SCSS](https://devtools.surf/tools/less-to-scss) Convert LESS to SCSS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the LESS to SCSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, less, scss. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, less, scss --- ### [LESS to SASS](https://devtools.surf/tools/less-to-sass) Convert LESS to SASS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the LESS to SASS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, less, sass. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, less, sass --- ### [LESS to Stylus](https://devtools.surf/tools/less-to-stylus) Convert LESS to Stylus syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the LESS to Stylus does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, less, stylus. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, less, stylus --- ### [SCSS to CSS](https://devtools.surf/tools/scss-to-css) Convert SCSS to standard CSS **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SCSS to CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, scss, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, scss, css --- ### [SCSS to LESS](https://devtools.surf/tools/scss-to-less) Convert SCSS to LESS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SCSS to LESS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, scss, less. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, scss, less --- ### [SCSS to SASS](https://devtools.surf/tools/scss-to-sass) Convert SCSS to SASS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SCSS to SASS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, scss, sass. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, scss, sass --- ### [SCSS to Stylus](https://devtools.surf/tools/scss-to-stylus) Convert SCSS to Stylus syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SCSS to Stylus does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, scss, stylus. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, scss, stylus --- ### [SASS to CSS](https://devtools.surf/tools/sass-to-css) Convert SASS to standard CSS **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SASS to CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, sass, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, sass, css --- ### [SASS to LESS](https://devtools.surf/tools/sass-to-less) Convert SASS to LESS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SASS to LESS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, sass, less. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, sass, less --- ### [SASS to SCSS](https://devtools.surf/tools/sass-to-scss) Convert SASS to SCSS syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SASS to SCSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, sass, scss. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, sass, scss --- ### [SASS to Stylus](https://devtools.surf/tools/sass-to-stylus) Convert SASS to Stylus syntax **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SASS to Stylus does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, sass, stylus. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* convert, sass, stylus --- ### [CSS Grid Generator](https://devtools.surf/tools/css-grid-generator) Generate grid-template CSS with custom cols, rows, and gap **Tips:** - Use fr units for proportional columns: 1fr 2fr 1fr - Set both gap and row/col gaps independently - grid-template-rows: repeat(3, auto) for repeating row sizes *Fun fact:* CSS Grid landed in Chrome in March 2017 — the same month in all four major browsers, a rare coordinated release. *Tags:* css, grid, layout --- ### [CSS Border Builder](https://devtools.surf/tools/css-border-builder) Build border CSS — width, style, color, radius, per-side control **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Border Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, border, style. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, border, style --- ### [CSS Text Shadow](https://devtools.surf/tools/css-text-shadow) Build text-shadow with x, y, blur, color — includes neon/retro presets **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Text Shadow does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, text-shadow, typography. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, text-shadow, typography --- ### [CSS Filter Builder](https://devtools.surf/tools/css-filter-builder) Chain blur, brightness, contrast, hue-rotate, saturate, sepia **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Filter Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, filter, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, filter, image --- ### [CSS Transform Builder](https://devtools.surf/tools/css-transform-builder) Build transform() — translate, rotate, scale, skew, 3D rotations **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Transform Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, transform, animation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, transform, animation --- ### [CSS Glassmorphism](https://devtools.surf/tools/css-glassmorphism) Generate frosted-glass UI — backdrop-filter blur + transparent bg **Tips:** - backdrop-filter works best over a colorful background image - Add -webkit-backdrop-filter for Safari/iOS support - Keep opacity between 0.1 and 0.25 for the sweet spot *Fun fact:* Glassmorphism was popularized by Apple's macOS Big Sur in 2020 and Microsoft's Fluent Design System before it. *Tags:* css, glassmorphism, backdrop --- ### [CSS Neumorphism](https://devtools.surf/tools/css-neumorphism) Soft-UI box-shadow combinations — raised, inset, and flat modes **Tips:** - Needs a mid-tone background (not pure white or black) - Use light shadow + dark shadow of the same size on opposite sides - Inset mode creates the 'pressed' look *Fun fact:* The term 'neumorphism' was coined by Alexander Plyuto in a 2019 Dribbble post — it went viral overnight. *Tags:* css, neumorphism, soft-ui --- ### [CSS Button Styles](https://devtools.surf/tools/css-button-styles) Modern button CSS — lift hover, shadow, colors, radius, padding **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Button Styles does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, button, ui. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, button, ui --- ### [CSS Tooltip Builder](https://devtools.surf/tools/css-tooltip-builder) Pure-CSS tooltip from data-attr — top/bottom/left/right positions **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Tooltip Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, tooltip, hover. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, tooltip, hover --- ### [CSS Card Builder](https://devtools.surf/tools/css-card-builder) Elevated card with hover-lift + shadow — fully customizable **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Card Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, card, ui. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, card, ui --- ### [CSS Form Styler](https://devtools.surf/tools/css-form-styler) Style inputs, textareas, selects — focus ring, accent color, radius **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Form Styler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, form, input. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, form, input --- ### [CSS Accordion Builder](https://devtools.surf/tools/css-accordion-builder) Zero-JS accordion using

/ + CSS animation **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Accordion Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, accordion, details. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, accordion, details --- ### [CSS Tabs Builder](https://devtools.surf/tools/css-tabs-builder) Accessible tab bar with aria-selected styling + bottom accent **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Tabs Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, tabs, navigation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, tabs, navigation --- ### [CSS Modal Builder](https://devtools.surf/tools/css-modal-builder) Native modal with backdrop blur + entrance animation **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Modal Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, modal, dialog. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, modal, dialog --- ### [CSS Checkbox Styler](https://devtools.surf/tools/css-checkbox-styler) Custom checkbox with CSS-only checkmark — accent & size control **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Checkbox Styler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, checkbox, form. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, checkbox, form --- ### [CSS Switch / Toggle](https://devtools.surf/tools/css-switch-toggle) iOS-style toggle switch — slider moves on :checked **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Switch / Toggle does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, switch, toggle. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, switch, toggle --- ### [CSS Progress Bar](https://devtools.surf/tools/css-progress-bar) Gradient progress bar with animated shimmer — accessible **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Progress Bar does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, progress, bar. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, progress, bar --- ### [CSS Ribbon Builder](https://devtools.surf/tools/css-ribbon-builder) Corner ribbon label using clip-path — content via data-ribbon attr **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Ribbon Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, ribbon, badge. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, ribbon, badge --- ### [CSS Avatar Builder](https://devtools.surf/tools/css-avatar-builder) Circular/square avatar with initials, ring, image fallback **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Avatar Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, avatar, profile. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, avatar, profile --- ### [CSS Flip Card](https://devtools.surf/tools/css-flip-card) 3D hover-flip card using perspective + backface-visibility **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Flip Card does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, flip, 3d. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, flip, 3d --- ### [CSS Dropdown Builder](https://devtools.surf/tools/css-dropdown-builder) Hover + focus-within dropdown — zero JS, animated **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Dropdown Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, dropdown, menu. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, dropdown, menu --- ### [CSS Breadcrumb Builder](https://devtools.surf/tools/css-breadcrumb-builder) Navigation breadcrumb with custom separator — /, >, arrow **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Breadcrumb Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, breadcrumb, navigation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, breadcrumb, navigation --- ### [CSS Arrow Generator](https://devtools.surf/tools/css-arrow-generator) Pure-CSS arrow (up/down/left/right) using rotated borders **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Arrow Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, arrow, icon. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, arrow, icon --- ### [CSS Triangle Generator](https://devtools.surf/tools/css-triangle-generator) Zero-element triangle using transparent borders — any direction **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Triangle Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, triangle, shape. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, triangle, shape --- ### [CSS Divider Builder](https://devtools.surf/tools/css-divider-builder) Horizontal rule — solid/dashed/dotted or labeled (OR, AND, etc) **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Divider Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, divider, hr. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The CSS specification has grown to over 1000 pages across all modules — double what it was in 2015. *Tags:* css, divider, hr --- ## JavaScript ### [JS Beautifier](https://devtools.surf/tools/js-beautifier) Beautify and format JavaScript code **Use cases:** - Quick beautify transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your beautify input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JS Beautifier does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: beautify, format, js. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JavaScript was written by Brendan Eich in 10 days in May 1995. The syntax was intentionally made to look like Java. *Tags:* beautify, format, js --- ### [Javascript Pretty Print](https://devtools.surf/tools/js-pretty-print) Pretty print JavaScript with syntax highlighting **Use cases:** - Quick pretty transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pretty input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Javascript Pretty Print does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pretty, print, js. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* JavaScript was written by Brendan Eich in 10 days in May 1995. The syntax was intentionally made to look like Java. *Tags:* pretty, print, js --- ## Converters ### [JSON to XML](https://devtools.surf/tools/json-to-xml) Convert JSON data to XML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON to XML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, json, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, json, xml --- ### [JSON to CSV](https://devtools.surf/tools/json-to-csv) Convert JSON array to CSV format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON to CSV does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, json, csv. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, json, csv --- ### [JSON to YAML](https://devtools.surf/tools/json-to-yaml) Convert JSON to YAML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON to YAML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, json, yaml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, json, yaml --- ### [JSON to TSV](https://devtools.surf/tools/json-to-tsv) Convert JSON array to Tab-Separated Values **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON to TSV does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, json, tsv. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, json, tsv --- ### [JSON to String](https://devtools.surf/tools/json-to-string) Convert JSON to escaped string format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON to String does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, json, string. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, json, string --- ### [XML to JSON](https://devtools.surf/tools/xml-to-json) Convert XML to JSON format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML to JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, xml, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, xml, json --- ### [XML to CSV](https://devtools.surf/tools/xml-to-csv) Convert XML data to CSV format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML to CSV does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, xml, csv. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, xml, csv --- ### [XML to String](https://devtools.surf/tools/xml-to-string) Convert XML to escaped string **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML to String does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, xml, string. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, xml, string --- ### [XML to YAML](https://devtools.surf/tools/xml-to-yaml) Convert XML to YAML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the XML to YAML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, xml, yaml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, xml, yaml --- ### [RSS to JSON](https://devtools.surf/tools/rss-to-json) Convert RSS/Atom feed to JSON format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the RSS to JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, rss, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, rss, json --- ### [YAML to JSON](https://devtools.surf/tools/yaml-to-json) Convert YAML to JSON format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML to JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, yaml, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, yaml, json --- ### [YAML to XML](https://devtools.surf/tools/yaml-to-xml) Convert YAML to XML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML to XML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, yaml, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, yaml, xml --- ### [YAML to CSV](https://devtools.surf/tools/yaml-to-csv) Convert YAML array to CSV format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML to CSV does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, yaml, csv. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, yaml, csv --- ### [CSV to JSON](https://devtools.surf/tools/csv-to-json) Convert CSV data to JSON format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV to JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, csv, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, csv, json --- ### [CSV to XML](https://devtools.surf/tools/csv-to-xml) Convert CSV data to XML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV to XML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, csv, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, csv, xml --- ### [CSV to YAML](https://devtools.surf/tools/csv-to-yaml) Convert CSV data to YAML format **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV to YAML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, csv, yaml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, csv, yaml --- ### [CSV to HTML](https://devtools.surf/tools/csv-to-html) Convert CSV data to HTML table **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV to HTML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, csv, html. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, csv, html --- ### [String to JSON](https://devtools.surf/tools/string-to-json) Parse stringified JSON back to formatted JSON **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the String to JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, string, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, string, json --- ### [String to XML](https://devtools.surf/tools/string-to-xml) Parse stringified XML back to formatted XML **Use cases:** - Quick convert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your convert input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the String to XML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: convert, string, xml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* convert, string, xml --- ### [BSON ↔ JSON](https://devtools.surf/tools/bson-to-json) Convert between BSON hex and JSON **Use cases:** - Quick bson transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bson input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the BSON ↔ JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bson, json, mongodb. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* bson, json, mongodb --- ### [INI ↔ JSON](https://devtools.surf/tools/ini-to-json) Convert between INI config files and JSON **Use cases:** - Quick ini transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ini input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the INI ↔ JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ini, json, config. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* ini, json, config, convert --- ### [HCL (Terraform) ↔ JSON](https://devtools.surf/tools/hcl-to-json) Convert between HCL/Terraform config and JSON **Use cases:** - Quick hcl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your hcl input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HCL (Terraform) ↔ JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: hcl, terraform, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* hcl, terraform, json, convert --- ### [EDN ↔ JSON](https://devtools.surf/tools/edn-to-json) Convert between Clojure EDN and JSON formats **Use cases:** - Quick edn transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your edn input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the EDN ↔ JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: edn, clojure, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* edn, clojure, json, convert --- ### [JSON → Go Struct](https://devtools.surf/tools/json-to-go-struct) Convert JSON to Go struct definitions with json tags **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Go Struct does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, go, struct. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, go, struct, convert --- ### [YAML → .env](https://devtools.surf/tools/yaml-to-env) Flatten a YAML file to KEY=value lines **Use cases:** - Quick yaml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your yaml input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the YAML → .env does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: yaml, env, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* yaml, env, convert --- ### [.env → YAML](https://devtools.surf/tools/env-to-yaml) Group dotted KEY_NAME pairs back into a YAML tree **Use cases:** - Quick env transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your env input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .env → YAML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: env, yaml, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* env, yaml, convert --- ### [JSON → Zod Schema](https://devtools.surf/tools/json-to-zod) Derive a runtime-validatable Zod schema from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Zod Schema does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, zod, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, zod, schema --- ### [JSON → .env](https://devtools.surf/tools/json-to-env) Flatten a JSON object into UPPER_SNAKE KEY=value lines **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → .env does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, env, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, env, convert --- ### [.env → JSON](https://devtools.surf/tools/env-to-json) Parse KEY=value lines (with quotes + comments) into a JSON object **Use cases:** - Quick env transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your env input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .env → JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: env, json, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* env, json, convert --- ### [JSON → TypeScript Types](https://devtools.surf/tools/json-to-typescript-types) Infer TypeScript interfaces from JSON with deep nesting + optionals **Tips:** - The output is a single root interface; nested objects become inline types - Union types are inferred from arrays of mixed elements - null fields are marked optional with the ? modifier *Fun fact:* TypeScript 4.1 added template-literal types, which let you derive string types from other string types at compile time. *Tags:* json, typescript, types --- ### [JSON → Python Dict](https://devtools.surf/tools/json-to-python-dict) Convert JSON to a valid Python dict literal (True/False/None) **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Python Dict does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, python, dict. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, python, dict --- ### [JSON → PHP Array](https://devtools.surf/tools/json-to-php-array) Convert JSON to a PHP 5.4+ short-syntax associative array **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → PHP Array does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, php, array. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, php, array --- ### [JSON → Ruby Hash](https://devtools.surf/tools/json-to-ruby-hash) Convert JSON to a Ruby hash with symbol or string keys **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Ruby Hash does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, ruby, hash. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, ruby, hash --- ### [JSON → Java Class](https://devtools.surf/tools/json-to-java-class) Generate a POJO Java class with getters/setters from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Java Class does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, java, pojo. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, java, pojo --- ### [JSON → Swift Struct](https://devtools.surf/tools/json-to-swift-struct) Generate a Codable Swift struct from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Swift Struct does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, swift, codable. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, swift, codable --- ### [JSON → Kotlin Class](https://devtools.surf/tools/json-to-kotlin-class) Generate a Kotlin data class from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Kotlin Class does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, kotlin, data-class. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, kotlin, data-class --- ### [JSON → Rust Struct](https://devtools.surf/tools/json-to-rust-struct) Generate a serde-compatible Rust struct from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Rust Struct does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, rust, serde. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, rust, serde --- ### [JSON → C# Class](https://devtools.surf/tools/json-to-csharp-class) Generate a C# class with properties + nullables from JSON **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → C# Class does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, csharp, class. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, csharp, class --- ### [JSON → Dart Class](https://devtools.surf/tools/json-to-dart-class) Generate a Dart class with fromJson/toJson from a JSON sample **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Dart Class does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, dart, flutter. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, dart, flutter --- ### [JSON Schema → TypeScript](https://devtools.surf/tools/json-schema-to-typescript) Convert a JSON Schema draft-07 document into TypeScript types **Tips:** - Supports draft-07 'type', 'properties', 'required', 'enum', and nested object schemas - String enums become union types of string literals - Use the title field to control the generated interface name *Fun fact:* JSON Schema draft-2020-12 is the current version but draft-07 is still the most widely deployed across tooling. *Tags:* json-schema, typescript, types --- ### [JSON → MongoDB Query](https://devtools.surf/tools/json-to-mongodb-query) Convert flat key-value JSON into a MongoDB find() query object **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → MongoDB Query does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, mongodb, query. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, mongodb, query --- ### [JSON → Query String](https://devtools.surf/tools/json-to-query-string) Serialize a flat JSON object into a URL query string **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON → Query String does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, query, url. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has 60+ format converters — all running client-side so your data never leaves your device. *Tags:* json, query, url --- ## Images ### [Sample Images](https://devtools.surf/tools/sample-images) Download standard-size placeholder images or generate a custom size **Use cases:** - Quick image transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your image input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sample Images does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: image, placeholder, sample. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* image, placeholder, sample --- ### [Image Converter](https://devtools.surf/tools/image-converter) Convert images between PNG, JPEG, WebP and more **Use cases:** - Quick image transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your image input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: image, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* image, convert --- ### [Bulk Image Converter](https://devtools.surf/tools/bulk-image-converter) Convert multiple images at once to a chosen format **Use cases:** - Quick image transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your image input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bulk Image Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: image, convert, bulk. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* image, convert, bulk --- ### [Image Editor](https://devtools.surf/tools/image-editor) Crop, annotate, draw, and add text to images **Use cases:** - Quick image transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your image input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Editor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: image, crop, edit. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* image, crop, edit, paint --- ### [Aspect Ratio Calculator](https://devtools.surf/tools/aspect-ratio-calculator) Calculate aspect ratios and resize dimensions proportionally **Use cases:** - Quick aspect transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your aspect input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Aspect Ratio Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: aspect, ratio, resize. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* aspect, ratio, resize, dimensions --- ### [SVG Optimizer](https://devtools.surf/tools/svg-optimizer) Minify and clean SVG markup by removing metadata and comments **Use cases:** - Quick svg transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your svg input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SVG Optimizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: svg, optimize, minify. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* svg, optimize, minify, clean --- ### [Favicon Generator](https://devtools.surf/tools/favicon-generator) Generate a favicon pack from a single image or emoji **Use cases:** - Quick favicon transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your favicon input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Favicon Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: favicon, icon, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* favicon, icon, image --- ### [Lorem Picsum Picker](https://devtools.surf/tools/picsum-picker) Browse and download curated placeholder images **Use cases:** - Quick picsum transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your picsum input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Lorem Picsum Picker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: picsum, placeholder, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* picsum, placeholder, image --- ### [Avatar / Initials Generator](https://devtools.surf/tools/avatar-generator) Create initials-based SVG avatars from a name **Use cases:** - Quick avatar transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your avatar input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Avatar / Initials Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: avatar, initials, svg. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* avatar, initials, svg --- ### [Image Metadata Viewer](https://devtools.surf/tools/image-metadata-viewer) Show EXIF / IPTC / XMP metadata from JPEG, PNG, HEIF **Use cases:** - Quick exif transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your exif input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Metadata Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: exif, iptc, xmp. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* exif, iptc, xmp, metadata --- ### [Base64 ↔ Image](https://devtools.surf/tools/base64-image) Encode an image to a data URL, or decode a data URL back to an image **Use cases:** - Quick base64 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your base64 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Base64 ↔ Image does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: base64, data-url, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* base64, data-url, image --- ### [Image Palette Extractor](https://devtools.surf/tools/image-palette-extractor) Extract the dominant colors from an image **Use cases:** - Quick palette transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your palette input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Palette Extractor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: palette, dominant, color. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* palette, dominant, color, image --- ### [Image Resizer (Batch)](https://devtools.surf/tools/image-resizer-batch) Resize and crop multiple images in the browser **Use cases:** - Quick image transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your image input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Resizer (Batch) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: image, resize, crop. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* image, resize, crop, batch --- ### [WebP ↔ AVIF Converter](https://devtools.surf/tools/webp-avif-converter) Convert images between WebP, AVIF, PNG, and JPEG in-browser **Use cases:** - Quick webp transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your webp input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the WebP ↔ AVIF Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: webp, avif, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* webp, avif, convert --- ### [Video Thumbnail Extractor](https://devtools.surf/tools/video-thumbnail) Scrub a video and export a frame as a PNG or JPEG **Use cases:** - Quick video transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your video input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Video Thumbnail Extractor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: video, thumbnail, frame. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* video, thumbnail, frame --- ### [Image Compressor](https://devtools.surf/tools/image-compressor) Client-side JPEG compression with quality + scale sliders — no upload **Use cases:** - Quick compress transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your compress input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Compressor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: compress, jpeg, optimize. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* compress, jpeg, optimize --- ### [Image Grayscale](https://devtools.surf/tools/image-grayscale) Desaturate any image — 0–100% grayscale, preview + download **Use cases:** - Quick grayscale transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your grayscale input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Grayscale does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: grayscale, desaturate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* grayscale, desaturate --- ### [Image Rotator](https://devtools.surf/tools/image-rotator) Rotate an image by any angle — canvas re-fits to new bounds **Use cases:** - Quick rotate transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rotate input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Rotator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rotate, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* rotate, image --- ### [Image Cropper](https://devtools.surf/tools/image-cropper) Crop an image from left/top/right/bottom with % sliders **Use cases:** - Quick crop transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your crop input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Cropper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: crop, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* crop, image --- ### [Image Color Inverter](https://devtools.surf/tools/image-invert) Invert every pixel's RGB — negative / X-ray effect **Use cases:** - Quick invert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your invert input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Color Inverter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: invert, negative. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* invert, negative --- ### [Image Watermark](https://devtools.surf/tools/image-watermark) Tile a text watermark across any image — opacity + angle control **Use cases:** - Quick watermark transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your watermark input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Watermark does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: watermark, brand. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* watermark, brand --- ### [ASCII Art Generator](https://devtools.surf/tools/ascii-art-generator) Convert photos to ASCII art — dense / simple / block ramps **Use cases:** - Quick ascii transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ascii input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ASCII Art Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ascii, art. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* ascii, art --- ### [Image Blur](https://devtools.surf/tools/image-blur) Apply canvas blur (0–40px) — great for hero backgrounds **Use cases:** - Quick blur transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your blur input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Blur does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: blur, image. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* blur, image --- ### [Image Brightness / Contrast](https://devtools.surf/tools/image-brightness-contrast) Adjust brightness, contrast, and saturation in one pass **Use cases:** - Quick brightness transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your brightness input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Brightness / Contrast does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: brightness, contrast, saturate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* brightness, contrast, saturate --- ### [Image Flip / Mirror](https://devtools.surf/tools/image-flip-mirror) Horizontal or vertical mirror — or both — of any image **Use cases:** - Quick flip transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your flip input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Image Flip / Mirror does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: flip, mirror. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern image codecs like AVIF can be 50% smaller than JPEG at equivalent visual quality. *Tags:* flip, mirror --- ## Text / String ### [URL Encoder](https://devtools.surf/tools/url-encoder) Encode strings for safe URL usage **Use cases:** - Quick url transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your url input on the left and click Encode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the URL Encoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: url, encode, percent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* url, encode, percent --- ### [URL Decoder](https://devtools.surf/tools/url-decoder) Decode percent-encoded URL strings **Use cases:** - Quick url transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your url input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the URL Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: url, decode, percent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* url, decode, percent --- ### [HTML Entity Encode](https://devtools.surf/tools/html-entity-encode) Convert characters to HTML entities **Use cases:** - Quick html transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your html input on the left and click Encode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Entity Encode does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: html, entity, encode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* html, entity, encode, escape --- ### [HTML Entity Decode](https://devtools.surf/tools/html-entity-decode) Convert HTML entities back to characters **Use cases:** - Quick html transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your html input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML Entity Decode does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: html, entity, decode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* html, entity, decode, unescape --- ### [JWT Decoder](https://devtools.surf/tools/jwt-decoder) Decode and inspect JWT token header and payload **Tips:** - Paste the full JWT token — it automatically splits header, payload, and signature - Color-coded sections: red=header, purple=payload, blue=signature - Check the exp claim to see if the token has expired *Fun fact:* JWTs are not encrypted by default — anyone can decode the payload. The signature only verifies the token wasn't tampered with. *Tags:* jwt, token, decode, auth --- ### [Lorem Ipsum Generator](https://devtools.surf/tools/lorem-ipsum-generator) Generate placeholder text in words, sentences, or paragraphs **Use cases:** - Quick lorem transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your lorem input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Lorem Ipsum Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: lorem, ipsum, placeholder. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* lorem, ipsum, placeholder, dummy --- ### [Word Counter](https://devtools.surf/tools/word-counter) Count words, characters, sentences, paragraphs, and reading time **Use cases:** - Quick word transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your word input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Word Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: word, count, character. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* word, count, character, reading --- ### [Text Diff](https://devtools.surf/tools/text-diff) Compare two text blocks and highlight differences **Use cases:** - Quick diff transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your diff input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text Diff does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: diff, compare, merge. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* diff, compare, merge, text --- ### [Case Converter](https://devtools.surf/tools/case-converter) Convert between camelCase, snake_case, PascalCase, kebab-case, and more **Use cases:** - Quick case transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your case input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Case Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: case, camel, snake. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* case, camel, snake, pascal, kebab --- ### [Line Sorter](https://devtools.surf/tools/line-sorter) Sort lines alphabetically, numerically, reverse, shuffle, or dedupe **Use cases:** - Quick sort transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sort input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Line Sorter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sort, lines, dedupe. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* sort, lines, dedupe, shuffle --- ### [Regex Tester](https://devtools.surf/tools/regex-tester) Test regex patterns with match highlighting and group extraction **Tips:** - Flags like /g, /i, /m are supported - Named groups (?...) are highlighted separately - Match count and group extractions shown in results *Fun fact:* Regular expressions were invented by mathematician Stephen Kleene in the 1950s. The term 'regex' wasn't coined until decades later. *Tags:* regex, regexp, test, match --- ### [String Escape / Unescape](https://devtools.surf/tools/string-escape) Escape and unescape strings for JS, JSON, HTML, or SQL **Use cases:** - Quick escape transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your escape input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the String Escape / Unescape does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: escape, unescape, string. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* escape, unescape, string, sanitize --- ### [Markdown Preview](https://devtools.surf/tools/markdown-preview) Live preview rendered Markdown with syntax highlighting **Tips:** - Supports GitHub-flavored Markdown - Code blocks get syntax highlighting - Tables, blockquotes, and task lists are supported *Fun fact:* Markdown was created by John Gruber and Aaron Swartz in 2004. The original spec was intentionally minimal — less than 20 rules. *Tags:* markdown, preview, render, md --- ### [.env Validator](https://devtools.surf/tools/env-validator) Validate .env files and flag missing values or duplicate keys **Use cases:** - Quick env transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your env input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .env Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: env, dotenv, validate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* env, dotenv, validate, config --- ### [Byte Counter](https://devtools.surf/tools/byte-counter) Show byte size of text in UTF-8, UTF-16, and ASCII **Use cases:** - Quick byte transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your byte input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Byte Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: byte, size, utf8. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* byte, size, utf8, encoding --- ### [TOML Formatter](https://devtools.surf/tools/toml-formatter) Format and validate TOML configuration files **Use cases:** - Quick toml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your toml input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the TOML Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: toml, format, config. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* toml, format, config, validate --- ### [Markdown Table Editor](https://devtools.surf/tools/markdown-table-editor) Edit Markdown tables with a visual grid — add rows and align cells **Use cases:** - Quick markdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your markdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown Table Editor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: markdown, table, grid. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* markdown, table, grid --- ### [JWT to cURL](https://devtools.surf/tools/jwt-to-curl) Generate a curl command that uses a JWT as the Authorization header **Use cases:** - Quick jwt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your jwt input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JWT to cURL does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: jwt, curl, auth. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* jwt, curl, auth --- ### [Diff Viewer (Side-by-Side)](https://devtools.surf/tools/diff-viewer) View unified or side-by-side diffs with syntax highlighting **Use cases:** - Quick diff transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your diff input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Diff Viewer (Side-by-Side) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: diff, compare, side-by-side. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* diff, compare, side-by-side, unified --- ### [Environment Variable Diff](https://devtools.surf/tools/env-diff) Compare two .env files and show added, removed, and changed variables **Use cases:** - Quick env transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your env input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Environment Variable Diff does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: env, diff, compare. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* env, diff, compare, variables --- ### [Unicode Normalizer](https://devtools.surf/tools/unicode-normalizer) Normalize Unicode text between NFC, NFD, NFKC, and NFKD forms **Use cases:** - Quick unicode transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your unicode input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unicode Normalizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: unicode, normalize, nfc. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* unicode, normalize, nfc, nfd --- ### [Markdown Resume Builder](https://devtools.surf/tools/markdown-resume-builder) Write a resume in Markdown and export to styled HTML or PDF **Use cases:** - Quick resume transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your resume input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown Resume Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: resume, cv, markdown. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* resume, cv, markdown, pdf --- ### [Regex Cheatsheet](https://devtools.surf/tools/regex-cheatsheet) Searchable reference of regex syntax with live examples **Use cases:** - Quick regex transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your regex input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Regex Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: regex, cheatsheet, reference. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* regex, cheatsheet, reference --- ### [Unicode Escape](https://devtools.surf/tools/unicode-escape) Escape non-ASCII chars as \uXXXX or decode them back **Use cases:** - Quick unicode transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your unicode input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unicode Escape does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: unicode, escape, decode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* unicode, escape, decode --- ### [Pronouncing Counter](https://devtools.surf/tools/pronouncing-counter) Count syllables per word (useful for copy + slugs) **Use cases:** - Quick syllables transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your syllables input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Pronouncing Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: syllables, pronounce, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* syllables, pronounce, text --- ### [Readability Scorer](https://devtools.surf/tools/readability-scorer) Flesch + grade-level estimate for any prose block **Use cases:** - Quick readability transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your readability input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Readability Scorer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: readability, flesch, writing. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* readability, flesch, writing --- ### [Word Frequency Counter](https://devtools.surf/tools/word-frequency) Rank words by frequency, stop-words filtered **Use cases:** - Quick frequency transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your frequency input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Word Frequency Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: frequency, words, analysis. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* frequency, words, analysis --- ### [Clipboard Cleaner](https://devtools.surf/tools/clipboard-cleaner) Strip smart quotes, zero-widths, non-breaking spaces **Use cases:** - Quick clean transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your clean input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Clipboard Cleaner does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: clean, clipboard, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* clean, clipboard, text --- ### [Markdown TOC](https://devtools.surf/tools/markdown-toc) Generate a table of contents from markdown headings **Use cases:** - Quick markdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your markdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown TOC does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: markdown, toc. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* markdown, toc --- ### [Whitespace Visualizer](https://devtools.surf/tools/whitespace-visualizer) Render spaces, tabs, newlines, zero-widths as glyphs **Use cases:** - Quick whitespace transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your whitespace input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Whitespace Visualizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: whitespace, debug. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* whitespace, debug --- ### [Line Deduper](https://devtools.surf/tools/line-deduper) Remove duplicate lines, preserve order or sort **Use cases:** - Quick dedupe transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your dedupe input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Line Deduper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: dedupe, lines. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* dedupe, lines --- ### [Hard Wrap](https://devtools.surf/tools/text-wrap) Re-wrap prose to a fixed column width **Use cases:** - Quick wrap transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your wrap input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Hard Wrap does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: wrap, column, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* wrap, column, text --- ### [IETF Language Tag Validator](https://devtools.surf/tools/ietf-tag-validator) Validate BCP 47 tag (zh-Hant-TW) — canonical form + regions **Use cases:** - Quick bcp47 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bcp47 input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the IETF Language Tag Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bcp47, locale, i18n. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* bcp47, locale, i18n --- ### [Line Deduper](https://devtools.surf/tools/line-dedupe) Collapse duplicate lines, show occurrence counts **Use cases:** - Quick dedupe transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your dedupe input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Line Deduper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: dedupe, lines, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* dedupe, lines, text --- ### [Safe Filename Generator](https://devtools.surf/tools/safe-filename-generator) Strip accents + unsafe chars → filesystem-safe filename **Use cases:** - Quick filename transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your filename input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Safe Filename Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: filename, slug, sanitize. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* filename, slug, sanitize --- ### [ASCII Box Drawer](https://devtools.surf/tools/ascii-box-drawer) Wrap any text in a Unicode box (┌─┐) — great for READMEs **Use cases:** - Quick ascii transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ascii input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ASCII Box Drawer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ascii, box, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* ascii, box, text --- ### [Text Reverser](https://devtools.surf/tools/text-reverser) Reverse a string — emoji-safe (operates on grapheme clusters) **Use cases:** - Quick reverse transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your reverse input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text Reverser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: reverse, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* reverse, text --- ### [Email Extractor](https://devtools.surf/tools/email-extractor) Extract every unique email address from a blob of text **Use cases:** - Quick email transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your email input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Email Extractor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: email, extract, regex. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* email, extract, regex --- ### [URL Extractor](https://devtools.surf/tools/url-extractor) Extract every unique http/https URL from a blob of text **Use cases:** - Quick url transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your url input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the URL Extractor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: url, extract, regex. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* url, extract, regex --- ### [Text Repeater](https://devtools.surf/tools/text-repeater) Repeat text N times with a custom separator — newline, space, emoji **Use cases:** - Quick repeat transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your repeat input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text Repeater does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: repeat, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* repeat, text --- ### [Title Case Converter](https://devtools.surf/tools/title-case-converter) Capitalize words — AP-style, keep small words lowercase unless first/last **Tips:** - Follows AP style — keeps 'a, an, and, the, or' lowercase unless first or last - Works with any mix of punctuation and capitalisation - Great for converting headlines, sentence-case paragraphs, and blog titles *Fun fact:* There are at least 5 competing title-case styles: AP, Chicago, MLA, APA, and NYT. Each one capitalises a slightly different set of short words. *Tags:* case, title --- ### [Whitespace Normalizer](https://devtools.surf/tools/whitespace-normalizer) Collapse runs of spaces/tabs, trim lines, drop consecutive blanks **Use cases:** - Quick whitespace transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your whitespace input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Whitespace Normalizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: whitespace, normalize. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* whitespace, normalize --- ### [Tab ↔ Space Converter](https://devtools.surf/tools/tab-space-converter) Switch tabs to N spaces or N spaces back to tabs **Use cases:** - Quick tab transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tab input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tab ↔ Space Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tab, space, indent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* tab, space, indent --- ### [Line Break Converter](https://devtools.surf/tools/line-break-converter) Normalize CRLF / LF / CR line endings across an entire file **Use cases:** - Quick line-break transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your line-break input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Line Break Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: line-break, crlf, lf. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* line-break, crlf, lf --- ### [Line Shuffler](https://devtools.surf/tools/line-shuffler) Randomly shuffle every line in your input — Fisher-Yates, deterministic **Use cases:** - Quick shuffle transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your shuffle input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Line Shuffler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: shuffle, random, lines. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* shuffle, random, lines --- ### [Syllable Counter](https://devtools.surf/tools/syllable-counter) Count syllables per word — heuristic-based English estimator **Use cases:** - Quick syllable transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your syllable input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Syllable Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: syllable, text, count. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* syllable, text, count --- ### [Pig Latin Converter](https://devtools.surf/tools/pig-latin-converter) Translate English text to pig latin — keeps case, punctuation intact **Use cases:** - Quick pig-latin transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pig-latin input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Pig Latin Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pig-latin, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* pig-latin, fun --- ### [Bold Text Generator](https://devtools.surf/tools/bold-text-generator) Turn regular text into unicode 𝐛𝐨𝐥𝐝 — works in bios, Slack, Discord **Tips:** - Uses Unicode Mathematical Bold letters (U+1D400 block) - Works in Twitter bios, LinkedIn headlines, and Slack — no formatting needed - Screen readers may struggle — use real bold for accessibility *Fun fact:* Unicode has 7 complete mathematical font variants: Bold, Italic, Bold Italic, Script, Fraktur, Double-Struck, and Sans-Serif. *Tags:* bold, unicode, fancy --- ### [Italic Text Generator](https://devtools.surf/tools/italic-text-generator) Turn regular text into unicode 𝑖𝑡𝑎𝑙𝑖𝑐 — copy/paste anywhere **Use cases:** - Quick italic transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your italic input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Italic Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: italic, unicode, fancy. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* italic, unicode, fancy --- ### [Strikethrough Text Generator](https://devtools.surf/tools/strikethrough-text-generator) Add combining-mark s̶t̶r̶i̶k̶e̶ to any text — no markdown needed **Use cases:** - Quick strikethrough transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your strikethrough input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Strikethrough Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: strikethrough, unicode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* strikethrough, unicode --- ### [Fancy Text Generator](https://devtools.surf/tools/fancy-text-generator) 8 unicode style variants — bold, italic, script, fraktur, monospace and more **Tips:** - 8 unicode font variants in one pass - Copy any line — it's already styled, no CSS needed - Perfect for social bios, gaming tags, or design mockups *Fun fact:* The Unicode 'Blackletter' (Fraktur) block was added so mathematicians could keep writing Gothic style letters even in plain text. *Tags:* fancy, unicode, fonts --- ### [Upside-Down Text](https://devtools.surf/tools/upside-down-text) Flip text upside-down using unicode substitutions — ǝpɐɯ ʞlıɯ **Use cases:** - Quick upside-down transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your upside-down input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Upside-Down Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: upside-down, unicode, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* upside-down, unicode, fun --- ### [Small Caps Converter](https://devtools.surf/tools/small-caps-converter) Convert normal text to sᴍᴀʟʟ ᴄᴀᴘs — pure unicode, no CSS **Use cases:** - Quick small-caps transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your small-caps input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Small Caps Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: small-caps, unicode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* small-caps, unicode --- ### [Circled Text Generator](https://devtools.surf/tools/circled-text-generator) Render letters + digits as ⒸⒾⓇⒸⓁⒺⒹ unicode glyphs **Use cases:** - Quick circled transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your circled input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Circled Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: circled, unicode, fancy. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* circled, unicode, fancy --- ### [Square Text Generator](https://devtools.surf/tools/square-text-generator) Render letters as 🅂🅀🅄🄰🅁🄴🄳 unicode glyphs for banners and bios **Use cases:** - Quick square transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your square input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Square Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: square, unicode, fancy. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* square, unicode, fancy --- ### [Superscript & Subscript](https://devtools.surf/tools/superscript-subscript) Convert letters/digits to ˢᵘᵖᵉʳ or ₛᵤᵦ script — CO₂, H₂O, x² **Use cases:** - Quick superscript transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your superscript input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Superscript & Subscript does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: superscript, subscript, unicode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* superscript, subscript, unicode --- ### [Emoji Letter Mapper](https://devtools.surf/tools/emoji-letter-mapper) Replace letters with regional-indicator and symbol emoji **Use cases:** - Quick emoji transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your emoji input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Emoji Letter Mapper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: emoji, letters, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* emoji, letters, fun --- ### [Vaporwave Text](https://devtools.surf/tools/vaporwave-text) Convert ASCII to ｆｕｌｌｗｉｄｔｈ aesthetic letters — vaporwave vibes **Use cases:** - Quick vaporwave transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your vaporwave input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Vaporwave Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: vaporwave, fullwidth, aesthetic. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* vaporwave, fullwidth, aesthetic --- ### [Cursed Text Generator](https://devtools.surf/tools/cursed-text-generator) Stack combining marks above/below letters for a glitchy, cursed look **Use cases:** - Quick cursed transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cursed input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Cursed Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cursed, glitch, unicode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* cursed, glitch, unicode --- ### [Wide Text Generator](https://devtools.surf/tools/wide-text-generator) Add spaces between every character for a stretched / wide look **Use cases:** - Quick wide transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your wide input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Wide Text Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: wide, spaced, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unicode has over 150,000 characters across 150+ scripts. The DevToolsSurf text tools all operate on grapheme clusters for emoji-safe manipulation. *Tags:* wide, spaced, text --- ## Encoding ### [Base64 Encode](https://devtools.surf/tools/base64-encode) Encode text or files to Base64 **Use cases:** - Embed images inline in HTML/CSS - Send binary through JSON APIs - Obfuscate-but-not-encrypt debug payloads **Tips:** - Paste any text including multi-line content - Works for encoding API keys, config values, or binary data as text - Use URL-safe base64 when embedding in query strings *Fun fact:* Base64 encoding increases data size by ~33%. It uses 64 characters (A-Z, a-z, 0-9, +, /) to represent binary data. *Tags:* base64, encode, binary --- ### [Base64 Decode](https://devtools.surf/tools/base64-decode) Decode Base64 back to text or file **Use cases:** - Quick base64 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your base64 input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Base64 Decode does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: base64, decode, binary. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* base64, decode, binary --- ### [Hash Generator](https://devtools.surf/tools/hash-generator) Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text **Tips:** - Toggle which algorithms to compute - Paste a hash in the verify box to check if it matches - Upload a file to hash its contents *Fun fact:* SHA-256 produces a 256-bit hash. There are more possible SHA-256 hashes (2^256) than atoms in the observable universe (~10^80). *Tags:* hash, md5, sha, checksum --- ### [Number Base Converter](https://devtools.surf/tools/number-base-converter) Convert between decimal, hex, octal, and binary **Use cases:** - Quick number transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your number input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Number Base Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: number, hex, octal. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* number, hex, octal, binary, decimal --- ### [Timestamp Converter](https://devtools.surf/tools/timestamp-converter) Convert between Unix epoch, ISO 8601, and human-readable dates **Tips:** - Click 'Now' to set the current time instantly - All fields sync bidirectionally — edit any one and the rest update - Toggle between seconds and milliseconds mode *Fun fact:* Unix time started on January 1, 1970 (the 'epoch'). The Year 2038 problem will occur when 32-bit timestamps overflow. *Tags:* timestamp, epoch, unix, iso, date --- ### [Base58/Base32/Base85](https://devtools.surf/tools/base58-encoder) Encode and decode text in Base58, Base32, or Base85 **Use cases:** - Quick base58 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your base58 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Base58/Base32/Base85 does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: base58, base32, base85. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* base58, base32, base85, encode, decode --- ### [Base64URL Encoder](https://devtools.surf/tools/base64url-encoder) URL-safe base64 — + → - , / → _ , no padding **Use cases:** - Quick base64 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your base64 input on the left and click Encode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Base64URL Encoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: base64, base64url, encode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* base64, base64url, encode --- ### [Base64URL Decoder](https://devtools.surf/tools/base64url-decoder) Decode URL-safe base64 back to UTF-8 text **Use cases:** - Quick base64 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your base64 input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Base64URL Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: base64, base64url, decode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* base64, base64url, decode --- ### [Text ↔ Binary](https://devtools.surf/tools/text-to-binary) Convert UTF-8 text to 0/1 binary — or decode back **Use cases:** - Quick binary transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your binary input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text ↔ Binary does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: binary, ascii. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* binary, ascii --- ### [Text ↔ Hex](https://devtools.surf/tools/text-to-hex) UTF-8 text to hexadecimal bytes — or decode hex back to text **Use cases:** - Quick hex transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your hex input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text ↔ Hex does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: hex, ascii. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* hex, ascii --- ### [Text ↔ Octal](https://devtools.surf/tools/text-to-octal) UTF-8 text to octal digit sequences — or decode octal back **Use cases:** - Quick octal transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your octal input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text ↔ Octal does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: octal, ascii. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* octal, ascii --- ### [ASCII85 Encoder](https://devtools.surf/tools/ascii85-encoder) Adobe ASCII85 (base85) for compact binary in PDF/PostScript payloads **Use cases:** - Quick ascii85 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ascii85 input on the left and click Encode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ASCII85 Encoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ascii85, base85. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Base64 adds ~33% overhead. For binary in modern APIs, prefer multipart/form-data or raw bytes where possible. *Tags:* ascii85, base85 --- ## Generators ### [UUID Generator](https://devtools.surf/tools/uuid-generator) Generate v4 UUIDs — single or bulk **Tips:** - Generate up to 100 UUIDs at once - Toggle uppercase or remove dashes for different formats - Each UUID has a copy button on hover *Fun fact:* UUID v4 uses 122 random bits, giving 5.3 x 10^36 possible values. You'd need to generate 1 billion UUIDs per second for 85 years to have a 50% chance of collision. *Tags:* uuid, guid, generate, random --- ### [ULID Generator](https://devtools.surf/tools/ulid-generator) Generate sortable ULIDs (Universally Unique Lexicographically Sortable IDs) **Use cases:** - Quick ulid transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ulid input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ULID Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ulid, generate, sortable. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* ulid, generate, sortable, id --- ### [Password Generator](https://devtools.surf/tools/password-generator) Generate secure random passwords with custom rules **Use cases:** - New account signups - API key roots - Database credential rotation **Tips:** - Use 16+ characters for strong passwords - Enable 'Exclude ambiguous' to avoid confusing characters like 0/O and 1/l - Generate multiple passwords and pick the one you like *Fun fact:* A 20-character password with mixed case, digits, and symbols would take ~7 octillion years to brute-force at 100 billion guesses per second. *Tags:* password, generate, random, secure --- ### [cURL to Code](https://devtools.surf/tools/curl-to-code) Convert cURL commands to fetch, axios, Python requests, and more **Use cases:** - Quick curl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your curl input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the cURL to Code does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: curl, fetch, axios. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* curl, fetch, axios, convert, http --- ### [Cron Expression Parser](https://devtools.surf/tools/cron-expression-parser) Describe cron expressions in plain English with next run times **Tips:** - Click any preset to fill common patterns - Edit individual fields (minute, hour, etc.) separately - See the next 10 scheduled runs in your local timezone *Fun fact:* Cron was written by Ken Thompson for Unix in the 1970s. The name comes from Chronos, the Greek personification of time. *Tags:* cron, schedule, parse, explain --- ### [SQL Formatter](https://devtools.surf/tools/sql-formatter) Format and prettify SQL queries **Use cases:** - Quick sql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sql input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SQL Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sql, format, prettify. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* sql, format, prettify, query --- ### [GraphQL Formatter](https://devtools.surf/tools/graphql-formatter) Format and prettify GraphQL queries and schemas **Use cases:** - Quick graphql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your graphql input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GraphQL Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: graphql, format, prettify. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* graphql, format, prettify, query --- ### [JSON Schema Generator](https://devtools.surf/tools/json-schema-generator) Generate JSON Schema from a sample JSON object **Use cases:** - Quick json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your json input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JSON Schema Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: json, schema, generate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* json, schema, generate, validate --- ### [TypeScript Interface Generator](https://devtools.surf/tools/ts-interface-generator) Generate TypeScript interfaces from JSON data **Use cases:** - Quick typescript transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your typescript input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the TypeScript Interface Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: typescript, interface, generate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* typescript, interface, generate, json --- ### [Mock Data Generator](https://devtools.surf/tools/mock-data-generator) Generate fake names, emails, addresses, and more in JSON or CSV **Tips:** - Build your schema by clicking field type chips - Rename columns by editing the field names - Export as JSON, CSV, or SQL INSERT statements *Fun fact:* The 'faker' libraries used to generate test data contain dictionaries of ~4,500 first names, ~2,000 last names, and ~500 company names. *Tags:* mock, fake, data, generate, faker --- ### [QR Code Generator](https://devtools.surf/tools/qr-code-generator) Generate QR codes from text or URLs **Tips:** - Works with URLs, text, WiFi credentials, or vCards - Customize foreground and background colors - Adjust size up to 800px for print quality *Fun fact:* QR codes were invented in 1994 by Denso Wave for tracking car parts in manufacturing. They can store up to 7,089 numeric characters. *Tags:* qr, code, generate, barcode --- ### [Chmod Calculator](https://devtools.surf/tools/chmod-calculator) Convert between symbolic and numeric Unix file permissions **Use cases:** - Quick chmod transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your chmod input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Chmod Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: chmod, permissions, unix. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* chmod, permissions, unix, linux --- ### [.gitignore Builder](https://devtools.surf/tools/gitignore-builder) Build a .gitignore from curated language/framework templates **Use cases:** - Quick gitignore transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gitignore input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .gitignore Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gitignore, git, template. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* gitignore, git, template --- ### [Unix Cron Visualizer](https://devtools.surf/tools/unix-cron-visualizer) Visualize cron schedules as a timeline of next executions **Use cases:** - Quick cron transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cron input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unix Cron Visualizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cron, visualize, timeline. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* cron, visualize, timeline, schedule --- ### [Chmod → English](https://devtools.surf/tools/chmod-to-english) Convert numeric chmod values to human-readable permission descriptions **Use cases:** - Quick chmod transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your chmod input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Chmod → English does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: chmod, permissions, english. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* chmod, permissions, english, readable --- ### [Privacy Policy Generator](https://devtools.surf/tools/privacy-policy-generator) Generate a privacy policy from your app name, URL, and data practices **Use cases:** - Quick privacy transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your privacy input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Privacy Policy Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: privacy, policy, legal. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* privacy, policy, legal, gdpr --- ### [Crontab Generator](https://devtools.surf/tools/crontab-generator) Build cron schedules visually with dropdowns for each field **Use cases:** - Quick crontab transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your crontab input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Crontab Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: crontab, cron, schedule. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* crontab, cron, schedule, visual --- ### [Random String Generator](https://devtools.surf/tools/random-string-generator) Secure random strings — hex, base64, base58, symbols, custom length **Tips:** - Set charset=alnum|hex|HEX|base58|base64|numeric|alpha|symbols - Up to 500 strings per run, up to 512 chars each - base58 strips 0, O, I, l to avoid visual ambiguity *Fun fact:* base58 was invented for Bitcoin addresses — it's base64 minus the characters that look alike (0/O, 1/I/l) and the non-alphanumeric +/ symbols. *Tags:* random, string, generate --- ### [Fake Name Generator](https://devtools.surf/tools/fake-name-generator) Bulk fake first+last names for test fixtures — famous tech names pool **Use cases:** - Quick fake transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fake input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Fake Name Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fake, name, test. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* fake, name, test --- ### [Fake Address Generator](https://devtools.surf/tools/fake-address-generator) Bulk US-style fake addresses for seeding dev databases **Use cases:** - Quick fake transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fake input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Fake Address Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fake, address, seed. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* fake, address, seed --- ### [Fake Phone Generator](https://devtools.surf/tools/fake-phone-generator) Bulk fake phone numbers in US / UK / E.164 formats **Use cases:** - Quick fake transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fake input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Fake Phone Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fake, phone. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* fake, phone --- ### [Test Credit Card Generator](https://devtools.surf/tools/test-credit-card-generator) Luhn-valid dev cards for Visa/MC/Amex/Discover/JCB/Diners **Tips:** - Brand prefix determines the IIN range — Visa starts with 4, Mastercard 5, Amex 34/37 - All numbers pass Luhn check but are NOT backed by real accounts - Never use these against production payment processors — you'll get blocklisted *Fun fact:* The Luhn algorithm was patented in 1960 by Hans Peter Luhn of IBM. The patent expired in 1977 which is why every payment system uses it now. *Tags:* credit-card, luhn, test --- ### [Test IBAN Generator](https://devtools.surf/tools/iban-test-generator) Synthesize IBANs with valid ISO 13616 checksums per country **Use cases:** - Quick iban transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your iban input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Test IBAN Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: iban, test, banking. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* iban, test, banking --- ### [Test VIN Generator](https://devtools.surf/tools/vin-generator) Random 17-char VINs with valid position-9 check digit **Use cases:** - Quick vin transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your vin input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Test VIN Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: vin, vehicle, test. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* vin, vehicle, test --- ### [Barcode Generator](https://devtools.surf/tools/barcode-generator) Generate CODE-128 barcode PNGs from any text — client-side canvas **Use cases:** - Quick barcode transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your barcode input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Barcode Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: barcode, code128. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* barcode, code128 --- ### [Data URI Generator](https://devtools.surf/tools/data-uri-generator) Wrap any text (or file contents) into a base64 data: URI **Use cases:** - Quick data-uri transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your data-uri input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Data URI Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: data-uri, base64. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* data-uri, base64 --- ### [API Key Generator](https://devtools.surf/tools/api-key-generator) Secure random API keys with prefix (sk_, pk_, whsec_) — base62 or hex **Use cases:** - Quick api-key transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your api-key input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the API Key Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: api-key, secret. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* api-key, secret --- ### [Bcrypt Demo Hash](https://devtools.surf/tools/bcrypt-generator) Generate a bcrypt-style hash preview — configurable cost rounds (4-14) **Use cases:** - Quick bcrypt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bcrypt input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bcrypt Demo Hash does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bcrypt, hash, password. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* bcrypt, hash, password --- ### [Argon2 Demo Hash](https://devtools.surf/tools/argon2-generator) Generate an argon2id PHC-formatted hash preview for docs / fixtures **Use cases:** - Quick argon2 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your argon2 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Argon2 Demo Hash does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: argon2, hash. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* argon2, hash --- ### [Shield Badge Generator](https://devtools.surf/tools/shield-badge-generator) Build Shields.io README badges — label, message, color, logo, style **Use cases:** - Quick badge transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your badge input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Shield Badge Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: badge, shield, readme. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* badge, shield, readme --- ### [README.md Generator](https://devtools.surf/tools/readme-md-generator) Starter README template with title, description, install, usage, license **Use cases:** - Quick readme transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your readme input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the README.md Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: readme, markdown, docs. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* readme, markdown, docs --- ### [.editorconfig Generator](https://devtools.surf/tools/editorconfig-generator) Tab/space indent, EOL, charset rules — one config for every editor **Use cases:** - Quick editorconfig transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your editorconfig input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .editorconfig Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: editorconfig, indent. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* editorconfig, indent --- ### [.prettierrc Generator](https://devtools.surf/tools/prettier-config) Build a Prettier config — semi, quote style, trailing comma, width **Use cases:** - Quick prettier transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your prettier input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .prettierrc Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: prettier, format. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* prettier, format --- ### [.eslintrc Generator](https://devtools.surf/tools/eslint-config) ESLint config for Node / TypeScript / React — commonjs output **Use cases:** - Quick eslint transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your eslint input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .eslintrc Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: eslint, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* eslint, lint --- ### [CHANGELOG.md Generator](https://devtools.surf/tools/changelog-md-generator) Keep a Changelog starter with [Unreleased] + first version section **Use cases:** - Quick changelog transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your changelog input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CHANGELOG.md Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: changelog, semver. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* changelog, semver --- ### [LICENSE File Generator](https://devtools.surf/tools/license-file-generator) MIT, Apache 2.0, BSD 3-Clause, GPL 3.0, Unlicense — year + holder **Tips:** - MIT is the most permissive — recommended for open-source libraries - Apache 2.0 adds an explicit patent grant — good for corporate contributors - GPL 3.0 requires derivative works to also be GPL (copyleft) *Fun fact:* The MIT license has ~30% of all GitHub repos — by far the most popular open-source license. *Tags:* license, mit, apache --- ### [Dockerfile Generator](https://devtools.surf/tools/dockerfile-generator) Multi-stage Dockerfile for Node / Python / Go — production-ready **Tips:** - Multi-stage builds dramatically shrink final image size - The Node template uses npm ci for reproducible builds - The Go template uses distroless for minimal attack surface *Fun fact:* Docker images are stored as tar archives of layer diffs — pulling an image downloads only the layers you don't already have locally. *Tags:* docker, dockerfile --- ### [docker-compose.yml Generator](https://devtools.surf/tools/docker-compose-generator) Wire up api + postgres + redis + mongo into a single compose file **Use cases:** - Quick docker-compose transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your docker-compose input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the docker-compose.yml Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: docker-compose, services. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* docker-compose, services --- ### [Makefile Generator](https://devtools.surf/tools/makefile-generator) Language-aware Makefile for Node / Python / Go — install/dev/test/build **Use cases:** - Quick makefile transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your makefile input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Makefile Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: makefile, build. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* makefile, build --- ### [.gitignore Templates](https://devtools.surf/tools/gitignore-templates) Combine templates — node, python, go, rust, java, macos, windows, vscode **Use cases:** - Quick gitignore transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gitignore input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the .gitignore Templates does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gitignore, templates. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf generators never call home — output is cryptographically random and generated entirely in your browser. *Tags:* gitignore, templates --- ### [Passphrase Generator (EFF)](https://devtools.surf/tools/passphrase-generator) Memorable multi-word passphrases from a 300-word EFF-style list **Tips:** - Uses a 300-word EFF-style long list for memorability - 4 words ≈ 32 bits of entropy — good enough for most threat models - Add a digit and capitals for ~40 bits *Fun fact:* xkcd #936 'correct horse battery staple' popularized passphrases. The EFF later published the modern 7776-word Diceware list used by everyone today. *Tags:* passphrase, password, eff --- ## Color ### [Color Converter](https://devtools.surf/tools/color-converter) Convert between HEX, RGB, HSL, OKLCH, and Tailwind colors **Tips:** - Click the color picker or type a hex value - Shows HEX, RGB, RGBA, HSL, and CSS variable formats - Each format has its own copy button *Fun fact:* The human eye can distinguish approximately 10 million different colors, but most monitors can only display about 16.7 million (24-bit color). *Tags:* color, hex, rgb, hsl, convert --- ### [Color Palette Generator](https://devtools.surf/tools/color-palette-generator) Generate complementary, analogous, and triadic color palettes **Use cases:** - Quick color transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your color input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Palette Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: color, palette, generate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* color, palette, generate, scheme --- ### [Contrast Checker](https://devtools.surf/tools/contrast-checker) Check WCAG AA/AAA contrast ratio between two colors **Use cases:** - Quick contrast transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your contrast input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Contrast Checker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: contrast, wcag, accessibility. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* contrast, wcag, accessibility, a11y --- ### [Gradient Generator](https://devtools.surf/tools/gradient-generator) Design CSS/SVG gradients and export as CSS, SVG, or Figma tokens **Use cases:** - Quick gradient transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gradient input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Gradient Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gradient, css, svg. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* gradient, css, svg, figma --- ### [Color Contrast Matrix](https://devtools.surf/tools/color-contrast-matrix) Test WCAG contrast ratios for every color pair in a palette **Use cases:** - Quick contrast transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your contrast input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Contrast Matrix does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: contrast, wcag, matrix. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* contrast, wcag, matrix, accessibility --- ### [Hex → Tailwind](https://devtools.surf/tools/colors-to-tailwind) Map a hex/rgb color to the nearest Tailwind class **Use cases:** - Quick color transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your color input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Hex → Tailwind does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: color, tailwind, nearest. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* color, tailwind, nearest --- ### [Gradient → Code](https://devtools.surf/tools/gradient-to-code) Translate a CSS gradient into SwiftUI, Android, and Flutter code **Use cases:** - Quick gradient transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gradient input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Gradient → Code does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gradient, swiftui, flutter. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* gradient, swiftui, flutter --- ### [Color Name Finder](https://devtools.surf/tools/color-name-finder) Closest CSS named color to any hex (Euclidean in RGB) **Use cases:** - Quick color transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your color input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Name Finder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: color, css, name. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* color, css, name --- ### [Color Scheme Generator](https://devtools.surf/tools/color-scheme-generator) Complementary, analogous, triadic, tetradic & split-comp schemes from a base color **Tips:** - Accepts #hex, rgb(), and hsl() inputs - Shows 10 schemes: complementary, analogous ±30, triadic, tetradic, split-complement - Hue rotation keeps saturation and lightness constant *Fun fact:* Color theory from Isaac Newton's 1704 'Opticks' gave us the first color wheel. The 12-segment wheel we use today was refined by Johann Wolfgang von Goethe in 1810. *Tags:* color, scheme, palette --- ### [Tailwind Color Palette](https://devtools.surf/tools/tailwind-color-palette) Full Tailwind CSS v3 color palette — 18 families × 11 shades, searchable **Tips:** - 18 color families × 11 shades (50–950) - Filter by family name: blue, emerald, slate, etc. - Each shade maps directly to bg-blue-500 / text-blue-500 utilities *Fun fact:* Tailwind CSS v4 keeps the same 18 families but added a new OKLCH-based color engine for perceptually uniform shades. *Tags:* tailwind, palette, colors --- ### [Material Color Palette](https://devtools.surf/tools/material-color-palette) Google Material 2014 palette — families with 50–900 + A100–A700 shades **Use cases:** - Quick material transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your material input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Material Color Palette does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: material, palette, google. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* material, palette, google --- ### [CSS Named Colors](https://devtools.surf/tools/css-named-colors) All 147 CSS named colors with hex values — instantly searchable **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Named Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, named, colors. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* css, named, colors --- ### [Color Shades & Tints](https://devtools.surf/tools/color-shades-tints) Generate 9 darker shades + 9 lighter tints from any base color **Use cases:** - Quick shade transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your shade input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Shades & Tints does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: shade, tint, palette. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* shade, tint, palette --- ### [Complementary Colors](https://devtools.surf/tools/complementary-colors) Find the opposite color on the wheel — 180° hue rotation **Use cases:** - Quick complementary transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your complementary input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Complementary Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: complementary, color, wheel. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* complementary, color, wheel --- ### [Analogous Colors](https://devtools.surf/tools/analogous-colors) Colors adjacent on the wheel (±30°) — gentle, harmonious palettes **Use cases:** - Quick analogous transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your analogous input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Analogous Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: analogous, color, palette. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* analogous, color, palette --- ### [Triadic Colors](https://devtools.surf/tools/triadic-colors) Three colors equally spaced on the wheel (120°) — vivid & balanced **Use cases:** - Quick triadic transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your triadic input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Triadic Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: triadic, color, palette. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* triadic, color, palette --- ### [Tetradic Colors](https://devtools.surf/tools/tetradic-colors) Four colors at 90° — two complementary pairs for rich palettes **Use cases:** - Quick tetradic transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tetradic input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tetradic Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tetradic, square, color. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* tetradic, square, color --- ### [Monochromatic Colors](https://devtools.surf/tools/monochromatic-colors) Single-hue palette — nine lightness steps at the same saturation **Use cases:** - Quick monochromatic transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your monochromatic input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Monochromatic Colors does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: monochromatic, palette. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* monochromatic, palette --- ### [Random Color Generator](https://devtools.surf/tools/random-color-generator) Bulk random colors (hex/rgb/hsl) — great for placeholders & mocks **Tips:** - Pass a count 1–200 - Each color is shown in hex + rgb + hsl - Great for placeholder palettes in design mockups *Fun fact:* True random RGB generation produces muddy greens and browns most of the time. Designers use 'golden ratio' hue spacing for visually pleasing random palettes. *Tags:* random, color, generator --- ### [Color Mixer](https://devtools.surf/tools/color-mixer) Blend 2+ colors using perceptual square-mean RGB (not linear RGB mud) **Use cases:** - Quick mix transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your mix input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Mixer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: mix, blend, color. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* mix, blend, color --- ### [Color Lighten / Darken](https://devtools.surf/tools/color-lighten-darken) Shift a color's lightness by +/- N%, preserving hue & saturation **Use cases:** - Quick lighten transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your lighten input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Lighten / Darken does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: lighten, darken, color. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* lighten, darken, color --- ### [Color Temperature (Kelvin)](https://devtools.surf/tools/color-kelvin-converter) Convert 1000–40000K to an RGB approximation (Tanner Helland formula) **Use cases:** - Quick kelvin transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your kelvin input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Temperature (Kelvin) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: kelvin, temperature, color. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* sRGB is the default color space for the web. P3 (Display P3) gives ~25% more colors and is now supported in all modern browsers via color(display-p3 …). *Tags:* kelvin, temperature, color --- ### [Pantone Reference](https://devtools.surf/tools/pantone-reference) Search common Pantone PMS spot colors with sRGB approximations **Tips:** - Search by PMS number (e.g. 485 C) or color name - sRGB values are approximate — for press use the official swatch book - Includes commonly-requested spot colors for brand identity work *Fun fact:* Pantone sells their color library as annual subscription services — a single year costs ~$15/month per seat for the full digital library. *Tags:* pantone, pms, spot --- ## Networking ### [IP Address Lookup](https://devtools.surf/tools/ip-address-lookup) Parse and validate IPv4/IPv6 addresses and CIDR ranges **Use cases:** - Quick ip transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ip input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the IP Address Lookup does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ip, address, cidr. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* ip, address, cidr, validate --- ### [HTTP Status Reference](https://devtools.surf/tools/http-status-reference) Quick lookup of HTTP status codes and their meanings **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Status Reference does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, status, code. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* http, status, code, reference --- ### [DNS Record Explainer](https://devtools.surf/tools/dns-record-explainer) Explain A, AAAA, CNAME, MX, TXT, SRV and other DNS records **Use cases:** - Quick dns transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your dns input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the DNS Record Explainer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: dns, record, explain. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* dns, record, explain --- ### [WebSocket Frame Decoder](https://devtools.surf/tools/websocket-frame-decoder) Decode WebSocket frame headers and payloads from hex **Use cases:** - Quick websocket transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your websocket input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the WebSocket Frame Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: websocket, ws, frame. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* websocket, ws, frame, decode --- ### [Port Reference Lookup](https://devtools.surf/tools/port-reference-lookup) Look up common services for any TCP/UDP port number **Use cases:** - Quick port transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your port input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Port Reference Lookup does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: port, tcp, udp. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* port, tcp, udp, reference --- ### [MIME Type Lookup](https://devtools.surf/tools/mime-type-lookup) Convert between file extensions and MIME types **Use cases:** - Quick mime transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your mime input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the MIME Type Lookup does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: mime, extension, content-type. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* mime, extension, content-type --- ### [Certificate Decoder](https://devtools.surf/tools/cert-decoder) Decode X.509 PEM certificates into readable fields **Use cases:** - Quick cert transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cert input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Certificate Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cert, x509, pem. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* cert, x509, pem, ssl, tls --- ### [HPKP Generator](https://devtools.surf/tools/hpkp-generator) Generate HTTP Public Key Pinning headers from a certificate **Use cases:** - Quick hpkp transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your hpkp input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HPKP Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: hpkp, pin, security. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* hpkp, pin, security, header --- ### [User-Agent Parser](https://devtools.surf/tools/user-agent-parser) Parse browser, OS, device from a User-Agent string **Use cases:** - Quick user-agent transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your user-agent input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the User-Agent Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: user-agent, browser, os. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* user-agent, browser, os, parse --- ### [CORS Header Tester](https://devtools.surf/tools/cors-header-tester) Analyze CORS response headers for misconfigurations and security issues **Use cases:** - Quick cors transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cors input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CORS Header Tester does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cors, headers, security. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* cors, headers, security, cross-origin --- ### [CIDR Calculator](https://devtools.surf/tools/cidr-calculator) Calculate network address, broadcast, host range from CIDR notation **Use cases:** - Quick cidr transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cidr input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CIDR Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cidr, subnet, network. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* cidr, subnet, network, ip --- ### [HTTP Header Analyzer](https://devtools.surf/tools/http-header-analyzer) Analyze HTTP headers for security, caching, and best practices **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Header Analyzer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, header, security. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* http, header, security, analyze --- ### [MAC Address Lookup (OUI)](https://devtools.surf/tools/mac-address-lookup) Identify the manufacturer from a MAC address OUI prefix **Use cases:** - Quick mac transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your mac input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the MAC Address Lookup (OUI) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: mac, address, oui. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* mac, address, oui, manufacturer --- ### [HTTP Method Reference](https://devtools.surf/tools/http-method-reference) Quick reference for all HTTP methods with use cases and safety info **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Method Reference does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, method, get. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* http, method, get, post, reference --- ### [Query String Builder](https://devtools.surf/tools/query-string-builder) Build ?k=v&k=v strings from key=value lines — repeating keys OK **Use cases:** - Quick query transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your query input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Query String Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: query, url, params. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* query, url, params --- ### [Basic Auth Generator](https://devtools.surf/tools/basic-auth-generator) Base64-encode user:pass into an HTTP Basic Authorization header **Use cases:** - Quick auth transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your auth input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Basic Auth Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: auth, basic, http. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* auth, basic, http --- ### [Bearer Token Builder](https://devtools.surf/tools/bearer-token-builder) Wrap a raw token in HTTP Authorization + curl + fetch snippets **Use cases:** - Quick auth transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your auth input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bearer Token Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: auth, bearer, jwt. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* auth, bearer, jwt --- ### [HTTP Header Builder](https://devtools.surf/tools/http-header-builder) Compose request headers — output as curl flags and fetch options **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Header Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, headers. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* http, headers --- ### [Subnet Calculator (v2)](https://devtools.surf/tools/subnet-calculator-v2) CIDR → subnet mask, network, broadcast, first/last host, host count **Tips:** - Input format: 192.168.1.0/24 - /31 and /32 are supported for point-to-point links - The wildcard mask is useful for ACL entries in Cisco IOS *Fun fact:* The famous 10.0.0.0/8 'private' range reserves 16.7 million addresses per network — more than the entire public IPv4 internet had in 1985. *Tags:* subnet, cidr, network --- ### [IPv6 Expander](https://devtools.surf/tools/ipv6-expander) Expand ::abbreviated IPv6 and also emit the canonical compressed form **Use cases:** - Quick ipv6 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ipv6 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the IPv6 Expander does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ipv6, expand. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* ipv6, expand --- ### [IPv4 → IPv6 Mapper](https://devtools.surf/tools/ipv4-ipv6-converter) IPv4-mapped IPv6 address (::ffff:a.b.c.d) — RFC 4291 representation **Use cases:** - Quick ipv4 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ipv4 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the IPv4 → IPv6 Mapper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ipv4, ipv6, mapped. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* IPv6 addresses are 128 bits wide — 2^128 ≈ 3.4×10^38 possible addresses, or about 10^28 for every person on Earth. *Tags:* ipv4, ipv6, mapped --- ### [RFC Lookup](https://devtools.surf/tools/rfc-lookup) Search 25+ foundational RFCs by number, title, or topic **Tips:** - Search by number (e.g. 9110) or topic (e.g. http) - All RFCs link directly to rfc-editor.org - Includes only the core RFCs still in force *Fun fact:* The first RFC, RFC 1 'Host Software' was published on April 7, 1969 by Steve Crocker — before ARPANET even had two nodes connected. *Tags:* rfc, ietf, reference --- ### [Well-Known Ports](https://devtools.surf/tools/well-known-ports) 40+ standard TCP/UDP ports — search by number, service, or keyword **Tips:** - Range 0-1023 is 'well-known' per IANA; requires root to bind on Unix - Search by port number, service name, or any keyword in the notes - Many common dev ports are listed (3000, 5173, 11434) *Fun fact:* Port 22 (SSH) was registered by Tatu Ylönen in 1995 — he emailed IANA saying 'we'd like port 22' and they just... gave it to him. *Tags:* ports, iana, tcp --- ## PDF ### [Sample PDFs](https://devtools.surf/tools/sample-pdfs) Download ready-made sample PDFs of various sizes and page counts **Use cases:** - Quick pdf transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pdf input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sample PDFs does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pdf, sample, download. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* pdf, sample, download, placeholder --- ### [PDF Merger](https://devtools.surf/tools/pdf-merger) Merge multiple PDFs into a single document **Use cases:** - Quick pdf transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pdf input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the PDF Merger does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pdf, merge, combine. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* pdf, merge, combine --- ### [PDF Splitter](https://devtools.surf/tools/pdf-splitter) Split a PDF by page ranges **Use cases:** - Quick pdf transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pdf input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the PDF Splitter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pdf, split, pages. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* pdf, split, pages --- ### [PDF Compressor](https://devtools.surf/tools/pdf-compressor) Reduce PDF file size in the browser **Use cases:** - Quick pdf transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your pdf input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the PDF Compressor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: pdf, compress, size. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* pdf, compress, size --- ### [Markdown → PDF](https://devtools.surf/tools/markdown-to-pdf) Write or paste Markdown and export it as a downloadable PDF **Use cases:** - Quick markdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your markdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown → PDF does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: markdown, pdf, export. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* markdown, pdf, export, convert --- ### [Invoice Generator](https://devtools.surf/tools/invoice-generator) Create professional invoices from line items and export as PDF **Use cases:** - Quick invoice transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your invoice input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Invoice Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: invoice, pdf, billing. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* PDF became an ISO standard (ISO 32000) in 2008. Adobe still maintains the spec but no longer owns it. *Tags:* invoice, pdf, billing, receipt --- ## API / Config ### [REST Handler](https://devtools.surf/tools/rest-handler) Lightweight REST client — collections, env vars, history, format converter (cURL / Collection JSON / REST Handler YAML) **Use cases:** - Quick rest transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rest input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the REST Handler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rest, api, http. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* rest, api, http, curl, collection, client, request, response --- ### [OpenAPI Viewer](https://devtools.surf/tools/openapi-viewer) Browse endpoints, schemas, and operations from an OpenAPI 3 spec **Use cases:** - Quick openapi transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your openapi input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the OpenAPI Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: openapi, swagger, api. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* openapi, swagger, api --- ### [Swagger to Collection JSON](https://devtools.surf/tools/swagger-to-collection) Convert an OpenAPI / Swagger spec into a Collection JSON v2.1 payload **Use cases:** - Quick swagger transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your swagger input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Swagger to Collection JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: swagger, openapi, collection. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* swagger, openapi, collection --- ### [package.json Analyzer](https://devtools.surf/tools/package-json-analyzer) Detect duplicate dependencies and common issues **Use cases:** - Quick package.json transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your package.json input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the package.json Analyzer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: package.json, npm, analyze. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* package.json, npm, analyze --- ### [Dockerfile Linter](https://devtools.surf/tools/dockerfile-linter) Check Dockerfiles against common best practices **Use cases:** - Quick docker transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your docker input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Dockerfile Linter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: docker, dockerfile, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* docker, dockerfile, lint --- ### [Kubernetes Manifest Validator](https://devtools.surf/tools/k8s-manifest-validator) Validate required fields in Kubernetes YAML manifests **Use cases:** - Quick kubernetes transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your kubernetes input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Kubernetes Manifest Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: kubernetes, k8s, manifest. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* kubernetes, k8s, manifest, validate --- ### [Mock Server Config Generator](https://devtools.surf/tools/mock-server-config) Generate stub responses from a JSON Schema **Use cases:** - Quick mock transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your mock input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Mock Server Config Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: mock, server, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* OpenAPI 3.1 is fully JSON Schema-compatible — you can now reuse schemas between your validator and your API doc. *Tags:* mock, server, schema, stub --- ## Date / Time ### [Timezone Converter](https://devtools.surf/tools/timezone-converter) Convert a date-time between multiple timezones **Use cases:** - Quick timezone transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your timezone input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Timezone Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: timezone, convert, utc. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* timezone, convert, utc, time --- ### [Duration Calculator](https://devtools.surf/tools/duration-calculator) Calculate the duration between two dates or times **Use cases:** - Quick duration transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your duration input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Duration Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: duration, time, difference. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* duration, time, difference, between --- ### [Age Calculator](https://devtools.surf/tools/age-calculator) Calculate exact age in years, months, and days from a birthdate **Use cases:** - Quick age transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your age input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Age Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: age, birthday, years. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* age, birthday, years, date --- ### [Working Day Calculator](https://devtools.surf/tools/working-day-calculator) Count business days between two dates (excluding weekends) **Use cases:** - Quick business transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your business input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Working Day Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: business, working, days. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* business, working, days, weekday --- ### [Week Number Lookup](https://devtools.surf/tools/week-number-lookup) Find the ISO week number for any date **Use cases:** - Quick week transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your week input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Week Number Lookup does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: week, number, iso. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* week, number, iso, calendar --- ### [Date Offset Calculator](https://devtools.surf/tools/date-offset) Add/subtract days, weeks, months, years with weekday result **Use cases:** - Quick date transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your date input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Date Offset Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: date, offset. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* date, offset --- ### [Cron Humanizer](https://devtools.surf/tools/cron-humanizer) Explain a cron expression in English + show the next 5 run times **Use cases:** - Quick cron transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cron input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Cron Humanizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cron, schedule, datetime. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* cron, schedule, datetime --- ### [Date Format Converter](https://devtools.surf/tools/date-format-converter) Show the same instant in ISO, RFC-2822, epoch, DD/MM/YYYY and more **Tips:** - Accepts ISO 8601, RFC 2822, epoch seconds, epoch millis - All output formats shown at once — no need to switch modes - UTC times are displayed — check your timezone for local equivalents *Fun fact:* ISO 8601 dates sort alphabetically into chronological order, which is why they're the de-facto standard for filenames and logs. *Tags:* date, format, convert --- ### [Countdown Timer Builder](https://devtools.surf/tools/countdown-timer-builder) Build a live
-and-JS countdown to any ISO target timestamp **Use cases:** - Quick countdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your countdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Countdown Timer Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: countdown, timer. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* countdown, timer --- ### [Pomodoro Timer Planner](https://devtools.surf/tools/pomodoro-timer) Plan a 25/5 Pomodoro session with long break — outputs a timeline **Tips:** - Francesco Cirillo's original Pomodoro technique uses 25/5/15 intervals - Four work blocks + three short breaks = one 'pomodoro set' - Take the long break after completing a full set of four *Fun fact:* Cirillo invented the Pomodoro Technique as a university student in the late 1980s, using a tomato-shaped kitchen timer (pomodoro = 'tomato' in Italian). *Tags:* pomodoro, timer, focus --- ### [ICS Calendar Event Generator](https://devtools.surf/tools/ics-event-generator) Build a standards-compliant .ics event file — import to any calendar **Use cases:** - Quick ics transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ics input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ICS Calendar Event Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ics, calendar. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* ics, calendar --- ### [ISO 8601 Duration Parser](https://devtools.surf/tools/iso-duration-parser) Parse P3Y6M4DT12H30M5S into years, months, weeks, days, time **Use cases:** - Quick iso8601 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your iso8601 input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ISO 8601 Duration Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: iso8601, duration. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* iso8601, duration --- ### [Date Range Generator](https://devtools.surf/tools/date-range-generator) List every date between start and end — step N days/weeks/months **Use cases:** - Quick date transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your date input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Date Range Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: date, range, iterator. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* date, range, iterator --- ### [Weekday Calendar](https://devtools.surf/tools/weekday-calendar) Render a month-at-a-glance calendar grid — YYYY-MM input **Use cases:** - Quick calendar transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your calendar input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Weekday Calendar does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: calendar, month. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* ISO 8601 lets you write dates that sort alphabetically AND chronologically. Always prefer 2026-04-19 over 04/19/2026. *Tags:* calendar, month --- ## Security / Crypto ### [JWT Encoder](https://devtools.surf/tools/jwt-encoder) Encode a JWT token from header, payload, and secret **Use cases:** - Quick jwt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your jwt input on the left and click Encode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JWT Encoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: jwt, encode, token. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* jwt, encode, token, auth --- ### [Bcrypt Hash Tester](https://devtools.surf/tools/bcrypt-hash-tester) Generate bcrypt hashes and verify passwords against hashes **Use cases:** - Quick bcrypt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bcrypt input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bcrypt Hash Tester does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bcrypt, hash, password. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* bcrypt, hash, password, verify --- ### [HMAC Generator](https://devtools.surf/tools/hmac-generator) Generate HMAC signatures using SHA-256, SHA-512, and more **Use cases:** - Quick hmac transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your hmac input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HMAC Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: hmac, signature, sha. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* hmac, signature, sha, hash --- ### [Password Strength Analyzer](https://devtools.surf/tools/password-strength-analyzer) Analyze password strength with entropy and crack-time estimates **Use cases:** - Quick password transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your password input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Password Strength Analyzer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: password, strength, entropy. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* password, strength, entropy, zxcvbn --- ### [TOTP / 2FA Generator](https://devtools.surf/tools/totp-generator) Generate time-based one-time passwords from a secret key **Tips:** - The code auto-refreshes when the 30-second period expires - The circular timer shows remaining validity time - Use this to verify your TOTP secret is configured correctly *Fun fact:* TOTP codes change every 30 seconds by default. The algorithm (RFC 6238) uses HMAC-SHA1 with the current time divided by the period as the counter. *Tags:* totp, 2fa, otp, authenticator --- ### [SAML Response Decoder](https://devtools.surf/tools/saml-decoder) Decode Base64-encoded SAML responses into readable XML **Use cases:** - Quick saml transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your saml input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SAML Response Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: saml, decode, sso. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* saml, decode, sso, xml --- ### [OAuth PKCE Generator](https://devtools.surf/tools/oauth-pkce-generator) Generate code_verifier, code_challenge, and state for OAuth PKCE flows **Use cases:** - Quick oauth transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your oauth input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the OAuth PKCE Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: oauth, pkce, state. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* oauth, pkce, state, authorization --- ### [SSH Key Fingerprint](https://devtools.surf/tools/ssh-key-fingerprint) Calculate the fingerprint of an SSH public key **Use cases:** - Quick ssh transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ssh input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SSH Key Fingerprint does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ssh, key, fingerprint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* ssh, key, fingerprint, public --- ### [CSR Decoder](https://devtools.surf/tools/csr-decoder) Decode PEM-encoded Certificate Signing Requests **Use cases:** - Quick csr transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csr input on the left and click Decode — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSR Decoder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csr, certificate, pem. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* csr, certificate, pem, decode --- ### [Secrets Scanner](https://devtools.surf/tools/secrets-scanner) Scan text/code for leaked API keys, tokens, and credentials **Tips:** - Paste entire files — it scans line by line - Detects AWS keys, GitHub tokens, Stripe keys, JWTs, and more - Results show severity and line numbers *Fun fact:* GitHub scans over 200 million commits per year for leaked secrets. In 2023, they detected over 100 million leaked credentials in public repositories. *Tags:* secrets, scan, api-key, leak --- ### [RSA Keypair Generator](https://devtools.surf/tools/rsa-keypair-generator) Generate RSA public/private keypairs in PEM format **Use cases:** - Quick rsa transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rsa input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the RSA Keypair Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rsa, keypair, generate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* rsa, keypair, generate, pem --- ### [JWT Timeline](https://devtools.surf/tools/jwt-timeline) Decode JWT + show iat / nbf / exp as ISO + delta from now **Use cases:** - Quick jwt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your jwt input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JWT Timeline does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: jwt, auth, token. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* jwt, auth, token --- ### [AES Encrypt / Decrypt](https://devtools.surf/tools/aes-encrypt-decrypt) AES-256-GCM encryption with authenticated ciphertext (iv:tag:body) **Tips:** - Uses AES-256-GCM — authenticated encryption - Output format: iv:tag:ciphertext (all base64) - Any key length is accepted; it's SHA-256'd to 32 bytes internally *Fun fact:* AES (Rijndael) was selected by NIST in 2001 after a 5-year public competition. It's approved for TOP SECRET data in US government systems. *Tags:* aes, encrypt, gcm --- ### [ROT13 Cipher](https://devtools.surf/tools/rot13-cipher) Classic Caesar-13 substitution — encrypt and decrypt are the same op **Use cases:** - Quick rot13 transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rot13 input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ROT13 Cipher does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rot13, cipher, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* rot13, cipher, fun --- ### [Caesar Cipher](https://devtools.surf/tools/caesar-cipher) Shift letters by any N positions (±26) — enc/dec with custom shift **Tips:** - shift=3 is the 'classic' Caesar shift Julius Caesar used - shift=13 gives ROT13 — decryption is the same operation - Only touches letters; numbers and punctuation pass through unchanged *Fun fact:* Caesar is recorded using shift=3 in Suetonius's 'Life of Julius Caesar' (AD 121). It was considered unbreakable for ~1500 years until al-Kindi invented frequency analysis. *Tags:* caesar, shift, cipher --- ### [Vigenère Cipher](https://devtools.surf/tools/vigenere-cipher) Polyalphabetic cipher using a keyword — stronger than Caesar **Tips:** - Provide a key=WORD parameter - Same key encrypts and decrypts with op=dec - Non-letter characters are preserved (punctuation, numbers, spaces) *Fun fact:* The Vigenère cipher was considered unbreakable for 300 years — it earned the nickname 'le chiffre indéchiffrable' in 19th-century France. *Tags:* vigenere, cipher, key --- ### [Atbash Cipher](https://devtools.surf/tools/atbash-cipher) Hebrew alphabet substitution — A↔Z, B↔Y — self-inverse **Use cases:** - Quick atbash transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your atbash input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Atbash Cipher does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: atbash, cipher. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* atbash, cipher --- ### [Rail Fence Cipher](https://devtools.surf/tools/rail-fence-cipher) Transposition cipher in a zig-zag pattern across N rails — enc/dec **Use cases:** - Quick rail-fence transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rail-fence input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Rail Fence Cipher does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rail-fence, transposition. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Modern cryptographic primitives like AES-256 and SHA-256 are considered safe against classical computers for the foreseeable future. *Tags:* rail-fence, transposition --- ## Web / Frontend ### [Meta Tags / OG Previewer](https://devtools.surf/tools/meta-tag-previewer) Preview how meta tags and OpenGraph data appear on social platforms **Use cases:** - Quick meta transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your meta input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Meta Tags / OG Previewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: meta, opengraph, twitter. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* meta, opengraph, twitter, seo, preview --- ### [Tailwind → CSS](https://devtools.surf/tools/tailwind-to-css) Convert Tailwind CSS classes to vanilla CSS properties **Use cases:** - Quick tailwind transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tailwind input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tailwind → CSS does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tailwind, css, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* tailwind, css, convert, utility --- ### [HTML → React JSX](https://devtools.surf/tools/html-to-jsx) Convert HTML to valid React JSX syntax **Use cases:** - Quick html transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your html input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML → React JSX does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: html, jsx, react. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* html, jsx, react, convert --- ### [HTML → Markdown](https://devtools.surf/tools/html-to-markdown) Convert HTML content to Markdown format **Use cases:** - Quick html transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your html input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTML → Markdown does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: html, markdown, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* html, markdown, convert --- ### [SVG → React Component](https://devtools.surf/tools/svg-to-react) Convert SVG markup into a React component **Use cases:** - Quick svg transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your svg input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SVG → React Component does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: svg, react, component. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* svg, react, component, convert --- ### [CSS Unit Converter](https://devtools.surf/tools/css-unit-converter) Convert between px, rem, em, vw, vh, and other CSS units **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Unit Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, unit, px. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* css, unit, px, rem, convert --- ### [robots.txt Validator](https://devtools.surf/tools/robots-txt-validator) Validate robots.txt syntax and check for common issues **Use cases:** - Quick robots transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your robots input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the robots.txt Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: robots, seo, validate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* robots, seo, validate, crawl --- ### [Sitemap XML Validator](https://devtools.surf/tools/sitemap-validator) Validate sitemap.xml structure and check for common issues **Use cases:** - Quick sitemap transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sitemap input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sitemap XML Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sitemap, xml, seo. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* sitemap, xml, seo, validate --- ### [RSS/Atom Feed Validator](https://devtools.surf/tools/rss-feed-validator) Validate RSS 2.0 and Atom feed XML structure **Use cases:** - Quick rss transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rss input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the RSS/Atom Feed Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rss, atom, feed. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* rss, atom, feed, validate --- ### [CSS Box Shadow Builder](https://devtools.surf/tools/css-box-shadow-builder) Generate CSS box-shadow values from parameters **Tips:** - Add multiple shadow layers for depth - Toggle inset for inner shadows - Adjust opacity independently from color *Fun fact:* Box shadows are one of the most expensive CSS properties to render. Using will-change: transform can help browsers optimize shadow animations. *Tags:* css, box-shadow, builder, visual --- ### [CSS Clip-Path Builder](https://devtools.surf/tools/css-clip-path-builder) Generate CSS clip-path polygon values **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Clip-Path Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, clip-path, polygon. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* css, clip-path, polygon, builder --- ### [Flexbox Playground](https://devtools.surf/tools/flexbox-playground) Generate CSS flexbox layouts from property combinations **Tips:** - Click property pills to change layout instantly - Add or remove items to test wrapping behavior - The CSS output updates in real-time *Fun fact:* Flexbox (CSS Flexible Box Layout) became a W3C Candidate Recommendation in 2012 but wasn't widely supported until 2015-2016. *Tags:* flexbox, css, layout, playground --- ### [Cubic Bezier Editor](https://devtools.surf/tools/cubic-bezier-editor) Generate CSS cubic-bezier timing functions from control points **Use cases:** - Quick cubic-bezier transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cubic-bezier input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Cubic Bezier Editor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cubic-bezier, easing, animation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* cubic-bezier, easing, animation, timing --- ### [Accessibility Auditor](https://devtools.surf/tools/a11y-auditor) Check HTML for common accessibility issues (ARIA, alt text, headings) **Use cases:** - Quick accessibility transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your accessibility input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Accessibility Auditor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: accessibility, a11y, aria. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* accessibility, a11y, aria, audit --- ### [Structured Data Tester](https://devtools.surf/tools/structured-data-tester) Validate JSON-LD schema.org structured data **Use cases:** - Quick schema.org transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your schema.org input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Structured Data Tester does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: schema.org, json-ld, structured. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* schema.org, json-ld, structured, seo --- ### [OpenGraph Image Debugger](https://devtools.surf/tools/og-image-debugger) Validate OpenGraph meta tags and preview how URLs appear when shared **Use cases:** - Quick opengraph transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your opengraph input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the OpenGraph Image Debugger does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: opengraph, og, social. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* opengraph, og, social, preview, debug --- ### [Sitemap Generator](https://devtools.surf/tools/sitemap-generator) Generate sitemap.xml from a list of URLs with priority and frequency **Use cases:** - Quick sitemap transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sitemap input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sitemap Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sitemap, xml, seo. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* sitemap, xml, seo, generate --- ### [Favicon Checker](https://devtools.surf/tools/favicon-checker) Validate favicon HTML tags and preview all icon sizes **Use cases:** - Quick favicon transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your favicon input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Favicon Checker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: favicon, icon, check. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* favicon, icon, check, preview --- ### [px ↔ rem Table](https://devtools.surf/tools/px-rem-table) Generate a pixel-to-rem scale table for a chosen base size **Use cases:** - Quick px transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your px input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the px ↔ rem Table does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: px, rem, scale. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* px, rem, scale --- ### [URL Parser](https://devtools.surf/tools/url-parser) Break a URL into scheme, host, path, query, fragment **Use cases:** - Quick url transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your url input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the URL Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: url, parse. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* url, parse --- ### [Query String → JSON](https://devtools.surf/tools/query-string-to-json) Turn ?a=1&b=foo into a flat JSON object **Use cases:** - Quick querystring transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your querystring input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Query String → JSON does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: querystring, json. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* querystring, json --- ### [Cookie Parser](https://devtools.surf/tools/cookie-parser) Parse Cookie / Set-Cookie header into name=value + attribute list **Use cases:** - Quick cookie transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cookie input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Cookie Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cookie, http, parser. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* cookie, http, parser --- ### [HTTP Header Inspector](https://devtools.surf/tools/http-header-inspector) Pretty-print raw HTTP headers with inline meanings **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Header Inspector does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, headers, inspect. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Lighthouse's SEO audit uses ~14 signals. The biggest wins are a good title, a meta description, and valid structured data — all of which DevToolsSurf pages include. *Tags:* http, headers, inspect --- ## Data / SQL ### [CSV Viewer](https://devtools.surf/tools/csv-viewer) View CSV data in a sortable, filterable table **Use cases:** - Quick csv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csv input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csv, view, table. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* csv, view, table, sort, filter --- ### [CSV → SQL INSERT](https://devtools.surf/tools/csv-to-sql-insert) Generate SQL INSERT statements from CSV data **Use cases:** - Quick csv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csv input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV → SQL INSERT does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csv, sql, insert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* csv, sql, insert, generate --- ### [SQL → CSV Fixture](https://devtools.surf/tools/sql-to-csv) Convert SQL INSERT statements to CSV format **Use cases:** - Quick sql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SQL → CSV Fixture does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sql, csv, fixture. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* sql, csv, fixture, convert --- ### [TSV ↔ CSV](https://devtools.surf/tools/tsv-csv-converter) Convert between tab-separated and comma-separated values **Use cases:** - Quick tsv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tsv input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the TSV ↔ CSV does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tsv, csv, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* tsv, csv, convert, tab --- ### [CSV Schema Validator](https://devtools.surf/tools/csv-schema-validator) Validate CSV data against a column schema definition **Use cases:** - Quick csv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csv input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV Schema Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csv, schema, validate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* csv, schema, validate, columns --- ### [SQL → Prisma Schema](https://devtools.surf/tools/sql-to-prisma) Convert SQL CREATE TABLE statements to Prisma schema **Use cases:** - Quick sql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SQL → Prisma Schema does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sql, prisma, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* sql, prisma, schema, convert --- ### [CSV Column Remapper](https://devtools.surf/tools/csv-column-remapper) Rename, reorder, or drop columns in CSV data **Use cases:** - Quick csv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csv input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV Column Remapper does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csv, column, rename. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* csv, column, rename, reorder --- ### [CSV Validator with Schema](https://devtools.surf/tools/csv-validator-schema) Validate CSV data against column type definitions **Use cases:** - Quick csv transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your csv input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSV Validator with Schema does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: csv, validate, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* csv, validate, schema, types --- ### [SQL Identifier Caser](https://devtools.surf/tools/sql-case-mapper) Convert SQL identifiers between snake, camel, and Pascal case **Use cases:** - Quick sql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SQL Identifier Caser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sql, case, identifier. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* sql, case, identifier --- ### [Column Extract](https://devtools.surf/tools/column-extract) Pull the Nth whitespace-delimited column from each line **Use cases:** - Quick awk transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your awk input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Column Extract does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: awk, column, data. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSV has no formal standard — over 20 'subtly different' variants exist. RFC 4180 is the closest thing to a reference. *Tags:* awk, column, data --- ## AI / Modern Dev ### [Token Counter](https://devtools.surf/tools/token-counter) Estimate token count for OpenAI and Anthropic models **Use cases:** - Quick token transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your token input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Token Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: token, count, openai. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The average modern LLM input is 500-2000 tokens. Staying under 4096 keeps you in the cheapest pricing tier for most providers. *Tags:* token, count, openai, anthropic, gpt --- ### [Prompt Template Renderer](https://devtools.surf/tools/prompt-template-renderer) Render prompt templates with variable substitution **Use cases:** - Quick prompt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your prompt input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Prompt Template Renderer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: prompt, template, render. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The average modern LLM input is 500-2000 tokens. Staying under 4096 keeps you in the cheapest pricing tier for most providers. *Tags:* prompt, template, render, variables --- ### [Markdown → Slack/Discord](https://devtools.surf/tools/markdown-to-slack) Convert Markdown to Slack mrkdwn or Discord formatting **Use cases:** - Quick markdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your markdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown → Slack/Discord does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: markdown, slack, discord. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The average modern LLM input is 500-2000 tokens. Staying under 4096 keeps you in the cheapest pricing tier for most providers. *Tags:* markdown, slack, discord, convert --- ### [Embedding Distance Calculator](https://devtools.surf/tools/embedding-distance) Calculate cosine similarity between two text embedding vectors **Use cases:** - Quick embedding transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your embedding input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Embedding Distance Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: embedding, cosine, similarity. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The average modern LLM input is 500-2000 tokens. Staying under 4096 keeps you in the cheapest pricing tier for most providers. *Tags:* embedding, cosine, similarity, vector --- ### [Markdown → Slack mrkdwn](https://devtools.surf/tools/slack-mrkdwn) Convert GitHub-flavor markdown to Slack's mrkdwn **Use cases:** - Quick slack transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your slack input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown → Slack mrkdwn does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: slack, markdown, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The average modern LLM input is 500-2000 tokens. Staying under 4096 keeps you in the cheapest pricing tier for most providers. *Tags:* slack, markdown, convert --- ## Fun / Niche ### [Emoji / Unicode Lookup](https://devtools.surf/tools/emoji-unicode-lookup) Search emoji by name and show Unicode codepoints **Tips:** - Search by keyword: 'heart', 'fire', 'rocket' - Paste an emoji to see its Unicode codepoints - Results show all matching keywords *Fun fact:* There are over 3,600 emoji in Unicode 15.0. The most-used emoji worldwide is the 'Face with Tears of Joy' (though 'Red Heart' is catching up). *Tags:* emoji, unicode, search, codepoint --- ### [NATO Phonetic Alphabet](https://devtools.surf/tools/nato-phonetic) Convert text to NATO phonetic alphabet spelling **Use cases:** - Quick nato transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your nato input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the NATO Phonetic Alphabet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: nato, phonetic, alphabet. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* nato, phonetic, alphabet, spelling --- ### [Morse Code ↔ Text](https://devtools.surf/tools/morse-code) Convert text to Morse code and back **Use cases:** - Quick morse transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your morse input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Morse Code ↔ Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: morse, code, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* morse, code, convert, text --- ### [Roman Numeral Converter](https://devtools.surf/tools/roman-numeral-converter) Convert between Roman numerals and decimal numbers **Use cases:** - Quick roman transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your roman input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Roman Numeral Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: roman, numeral, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* roman, numeral, convert, number --- ### [Number → Words](https://devtools.surf/tools/number-to-words) Convert numbers to written English words **Use cases:** - Quick number transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your number input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Number → Words does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: number, words, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* number, words, text, convert --- ### [Leet Speak ↔ Plain](https://devtools.surf/tools/leet-speak) Convert text to/from 1337 speak **Use cases:** - Quick leet transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your leet input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Leet Speak ↔ Plain does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: leet, 1337, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* leet, 1337, text, convert --- ### [Slug Generator](https://devtools.surf/tools/slug-generator) Generate URL-friendly slugs from text **Use cases:** - Quick slug transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your slug input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Slug Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: slug, url, seo. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* slug, url, seo, permalink --- ### [Zero-Width Character Detector](https://devtools.surf/tools/zero-width-detector) Find and highlight invisible zero-width characters in text **Use cases:** - Quick zero-width transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your zero-width input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Zero-Width Character Detector does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: zero-width, invisible, unicode. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* zero-width, invisible, unicode, detect --- ### [Smart Quotes Fixer](https://devtools.surf/tools/smart-quotes-fixer) Replace curly/smart quotes with straight quotes and vice versa **Use cases:** - Quick quotes transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your quotes input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Smart Quotes Fixer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: quotes, smart, curly. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* quotes, smart, curly, straight --- ### [Text Similarity Scorer](https://devtools.surf/tools/text-similarity-scorer) Calculate similarity between two text strings (Levenshtein, Jaccard) **Use cases:** - Quick similarity transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your similarity input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text Similarity Scorer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: similarity, levenshtein, compare. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* similarity, levenshtein, compare, text --- ### [ISBN/IBAN/Luhn Validator](https://devtools.surf/tools/isbn-iban-validator) Validate ISBN, IBAN, and credit card numbers (Luhn check) **Use cases:** - Quick isbn transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your isbn input on the left and click Validate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ISBN/IBAN/Luhn Validator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: isbn, iban, luhn. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* isbn, iban, luhn, credit-card, validate --- ### [ASCII Table Reference](https://devtools.surf/tools/ascii-table-reference) Browse the full ASCII table with decimal, hex, and character values **Use cases:** - Quick ascii transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ascii input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the ASCII Table Reference does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ascii, table, reference. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* ascii, table, reference, hex --- ### [Bionic Reading Converter](https://devtools.surf/tools/bionic-reading) Bold the first half of each word for faster reading **Use cases:** - Quick bionic transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bionic input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bionic Reading Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bionic, reading, bold. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* bionic, reading, bold, speed --- ### [Anagram Finder](https://devtools.surf/tools/anagram-finder) Check if two strings are anagrams and show letter frequency **Use cases:** - Quick anagram transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your anagram input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Anagram Finder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: anagram, letters, word. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* anagram, letters, word, puzzle --- ### [Braille ↔ Text](https://devtools.surf/tools/braille-converter) Convert text to Braille Unicode characters and back **Use cases:** - Quick braille transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your braille input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Braille ↔ Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: braille, text, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* braille, text, convert, accessibility --- ### [Color Blindness Simulator](https://devtools.surf/tools/color-blindness-simulator) Simulate how hex colors appear under different color blindness types **Use cases:** - Quick color transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your color input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Color Blindness Simulator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: color, blindness, simulate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* color, blindness, simulate, accessibility --- ### [User Input Fuzzer](https://devtools.surf/tools/user-input-fuzzer) Generate edge-case test inputs for form validation testing **Use cases:** - Quick fuzz transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fuzz input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the User Input Fuzzer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fuzz, test, input. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* fuzz, test, input, edge-case --- ### [Palindrome Checker](https://devtools.surf/tools/palindrome-checker) Test if text reads the same forward & backward **Use cases:** - Quick palindrome transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your palindrome input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Palindrome Checker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: palindrome, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* palindrome, text --- ### [Haiku Counter](https://devtools.surf/tools/haiku-counter) Check a poem fits the 5-7-5 syllable pattern **Use cases:** - Quick haiku transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your haiku input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Haiku Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: haiku, poetry, syllables. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* haiku, poetry, syllables --- ### [Emoji Counter](https://devtools.surf/tools/emoji-counter) Count and group emoji present in any text **Use cases:** - Quick emoji transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your emoji input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Emoji Counter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: emoji, count. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* emoji, count --- ### [Zalgo Text](https://devtools.surf/tools/zalgo-generator) Corrupt normal text with diacritical fury for fun **Use cases:** - Quick zalgo transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your zalgo input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Zalgo Text does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: zalgo, fun, text. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* zalgo, fun, text --- ### [SpongeBob Case](https://devtools.surf/tools/spongebob-case) aLtErNaTiNg cAsE gEnErAtOr — memes only **Use cases:** - Quick case transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your case input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SpongeBob Case does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: case, meme, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* case, meme, fun --- ### [Dice Roller](https://devtools.surf/tools/dice-notation-roller) Roll standard RPG dice notation — 3d6+2, 2d20-1, mixed **Use cases:** - Quick dice transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your dice input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Dice Roller does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: dice, rpg, random. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* dice, rpg, random --- ### [Age on Other Planets](https://devtools.surf/tools/age-in-planets) Convert your Earth age to Mercury, Venus, Mars, Jupiter … even Pluto **Use cases:** - Quick age transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your age input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Age on Other Planets does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: age, planet, fun. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* age, planet, fun --- ### [Coin Flip Simulator](https://devtools.surf/tools/coin-flip-simulator) Flip a fair coin N times — tallies + raw sequence. Optional seed. **Tips:** - Deterministic when you pass a seed — reproducible for demos - Tallies include the raw H/T sequence so you can verify fairness - Use count=10000 to check the law of large numbers in action *Fun fact:* A 2007 Stanford study found real coin flips aren't actually 50/50 — they're biased ~51% toward the starting face because of the flip's rotation. *Tags:* coin, random --- ### [Random List Picker](https://devtools.surf/tools/random-list-picker) Pick a winner from a list — shows the full shuffled order too **Use cases:** - Quick random transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your random input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Random List Picker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: random, picker, raffle. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* random, picker, raffle --- ### [Decision Wheel](https://devtools.surf/tools/decision-wheel) Spin a wheel of N options and get the top 5 picks in random order **Use cases:** - Quick decision transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your decision input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Decision Wheel does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: decision, random. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* decision, random --- ### [Fantasy Name Generator](https://devtools.surf/tools/fantasy-name-generator) Generate fantasy/elvish-style names for characters, towns, NPCs **Use cases:** - Quick fantasy transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fantasy input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Fantasy Name Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fantasy, name, rpg. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* fantasy, name, rpg --- ### [Compound Word Finder](https://devtools.surf/tools/compound-word-finder) Split compound words (rainbow → rain+bow, moonlight → moon+light) **Use cases:** - Quick compound transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your compound input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Compound Word Finder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: compound, word, english. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* compound, word, english --- ### [Word Scrambler](https://devtools.surf/tools/word-scrambler) Typoglycemia-style scramble: keep first+last letter, shuffle middle **Use cases:** - Quick scramble transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your scramble input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Word Scrambler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: scramble, puzzle. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf has ~40 fun tools — coin flips, dice, name generators, ciphers — all cryptographically fair random. *Tags:* scramble, puzzle --- ## Developer Utilities ### [Collection JSON → cURL](https://devtools.surf/tools/collection-to-curl) Convert Collection JSON v2.1 requests into cURL one-liners **Use cases:** - Quick collection transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your collection input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Collection JSON → cURL does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: collection, curl, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* collection, curl, convert, http --- ### [Git Diff → HTML](https://devtools.surf/tools/git-diff-to-html) Convert unified git diff output to syntax-highlighted HTML **Use cases:** - Quick git transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your git input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Git Diff → HTML does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: git, diff, html. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* git, diff, html, highlight --- ### [Regex Visualizer](https://devtools.surf/tools/regex-visualizer) Visualize regex patterns as a readable railroad diagram (text) **Use cases:** - Quick regex transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your regex input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Regex Visualizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: regex, visualize, railroad. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* regex, visualize, railroad, diagram --- ### [Makefile Explainer](https://devtools.surf/tools/makefile-explainer) Parse a Makefile and explain each target and its dependencies **Use cases:** - Quick makefile transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your makefile input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Makefile Explainer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: makefile, explain, target. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* makefile, explain, target, build --- ### [Shell Script Linter](https://devtools.surf/tools/shell-script-linter) Check shell scripts for common issues and bad practices **Use cases:** - Quick shell transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your shell input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Shell Script Linter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: shell, bash, lint. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* shell, bash, lint, script --- ### [GitHub Actions Visualizer](https://devtools.surf/tools/github-actions-visualizer) Parse a GitHub Actions workflow and show job/step dependencies **Use cases:** - Quick github transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your github input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GitHub Actions Visualizer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: github, actions, workflow. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* github, actions, workflow, ci --- ### [HAR File Viewer](https://devtools.surf/tools/har-file-viewer) Parse and summarize HTTP Archive (HAR) files **Use cases:** - Quick har transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your har input on the left and click View — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HAR File Viewer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: har, http, archive. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* har, http, archive, network --- ### [API Response Mocker](https://devtools.surf/tools/api-response-mocker) Generate mock API JSON responses from a URL + method description **Use cases:** - Quick api transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your api input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the API Response Mocker does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: api, mock, response. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* api, mock, response, json --- ### [GraphQL Query Builder](https://devtools.surf/tools/graphql-query-builder) Generate GraphQL queries from a schema definition **Use cases:** - Quick graphql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your graphql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GraphQL Query Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: graphql, query, schema. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* graphql, query, schema, build --- ### [OpenAPI → TypeScript](https://devtools.surf/tools/openapi-to-typescript) Generate TypeScript interfaces from an OpenAPI schema **Use cases:** - Quick openapi transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your openapi input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the OpenAPI → TypeScript does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: openapi, typescript, generate. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* openapi, typescript, generate, interface --- ### [Diff Patch Applier](https://devtools.surf/tools/diff-patch-applier) Apply a unified diff patch to source text **Use cases:** - Quick diff transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your diff input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Diff Patch Applier does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: diff, patch, apply. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* diff, patch, apply, unified --- ### [GraphQL Introspection → SDL](https://devtools.surf/tools/graphql-introspection-to-sdl) Convert GraphQL introspection JSON to SDL schema **Use cases:** - Quick graphql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your graphql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GraphQL Introspection → SDL does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: graphql, introspection, sdl. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* graphql, introspection, sdl, schema --- ### [HTTP Request Replayer](https://devtools.surf/tools/http-request-replayer) Generate fetch/axios/curl code from raw HTTP request text **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Request Replayer does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, request, replay. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* http, request, replay, fetch --- ### [cURL → fetch()](https://devtools.surf/tools/curl-to-fetch) Convert a curl command into a JS fetch() call **Use cases:** - Quick curl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your curl input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the cURL → fetch() does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: curl, fetch, convert. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* curl, fetch, convert --- ### [Git Log Parser](https://devtools.surf/tools/git-log-parser) Parse git log output into structured JSON **Use cases:** - Quick git transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your git input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Git Log Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: git, log, parse. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* git, log, parse --- ### [HTTP → cURL Builder](https://devtools.surf/tools/http-curl-builder) Build a curl command from method, URL, headers & body fields **Use cases:** - Quick curl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your curl input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP → cURL Builder does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: curl, http. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* curl, http --- ### [SemVer Bump](https://devtools.surf/tools/semver-bump) Compute next major / minor / patch / prerelease **Use cases:** - Quick semver transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your semver input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SemVer Bump does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: semver, version. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* semver, version --- ### [Apache/Nginx Log Parser](https://devtools.surf/tools/apache-log-parser) Parse combined log format lines into JSON (host, status, UA…) **Use cases:** - Quick log transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your log input on the left and click Parse — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Apache/Nginx Log Parser does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: log, apache, nginx. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The most-used Unix command by developers is 'ls' — followed by 'cd', 'grep', and 'git'. *Tags:* log, apache, nginx --- ## Game Dev ### [Unity C# Class Generator](https://devtools.surf/tools/unity-class-generator) Generate Unity MonoBehaviour, ScriptableObject, or Editor scripts from a template **Use cases:** - Quick unity transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your unity input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unity C# Class Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: unity, csharp, class. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* unity, csharp, class, monobehaviour --- ### [Unity Prefab Inspector](https://devtools.surf/tools/unity-prefab-inspector) Parse and display Unity .prefab YAML structure in a readable format **Use cases:** - Quick unity transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your unity input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unity Prefab Inspector does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: unity, prefab, yaml. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* unity, prefab, yaml, inspect --- ### [Sprite Sheet Calculator](https://devtools.surf/tools/sprite-sheet-calculator) Calculate frame dimensions, UV coords, and animation timing from sprite sheet parameters **Use cases:** - Quick sprite transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sprite input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sprite Sheet Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sprite, sheet, animation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* sprite, sheet, animation, frames --- ### [Game Math Calculator](https://devtools.surf/tools/game-math-calculator) Calculate vectors, distances, dot products, lerp, and common game math operations **Use cases:** - Quick vector transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your vector input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Game Math Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: vector, math, distance. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* vector, math, distance, lerp --- ### [Game Color Palette Generator](https://devtools.surf/tools/color-palette-game) Generate game-ready color palettes with hex, RGB, and normalized float values **Use cases:** - Quick color transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your color input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Game Color Palette Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: color, palette, game. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* color, palette, game, shader --- ### [Tilemap Data Generator](https://devtools.surf/tools/tilemap-generator) Generate 2D tilemap arrays for grid-based games from a visual text grid **Use cases:** - Quick tilemap transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tilemap input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tilemap Data Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tilemap, grid, 2d. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* tilemap, grid, 2d, level --- ### [Damage Formula Calculator](https://devtools.surf/tools/damage-formula-calculator) Calculate RPG damage with attack, defense, crit, elemental modifiers **Use cases:** - Quick damage transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your damage input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Damage Formula Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: damage, rpg, formula. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* damage, rpg, formula, combat --- ### [Loot Table Generator](https://devtools.surf/tools/loot-table-generator) Generate weighted loot drop tables with probability calculations **Use cases:** - Quick loot transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your loot input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Loot Table Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: loot, drop, probability. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* loot, drop, probability, rpg --- ### [Shader Uniform Generator](https://devtools.surf/tools/shader-uniform-generator) Generate GLSL/HLSL uniform declarations from parameter descriptions **Use cases:** - Quick shader transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your shader input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Shader Uniform Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: shader, glsl, hlsl. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* shader, glsl, hlsl, uniform --- ### [Game Resolution Scaler](https://devtools.surf/tools/game-resolution-scaler) Calculate render resolutions, aspect ratios, and DPI for different platforms **Use cases:** - Quick resolution transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your resolution input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Game Resolution Scaler does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: resolution, aspect, dpi. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* resolution, aspect, dpi, platform --- ### [FPS ↔ Frame Time Converter](https://devtools.surf/tools/fps-ms-converter) Convert between FPS and milliseconds per frame with performance budgets **Use cases:** - Quick fps transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your fps input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the FPS ↔ Frame Time Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: fps, frametime, performance. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* fps, frametime, performance, budget --- ### [Easing Function Generator](https://devtools.surf/tools/easing-function-generator) Generate easing functions in C#, GLSL, JS with visual curve preview **Use cases:** - Quick easing transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your easing input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Easing Function Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: easing, tween, animation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* easing, tween, animation, curve --- ### [Game Event System Generator](https://devtools.surf/tools/game-event-system-generator) Generate event bus / observer pattern boilerplate for Unity, Godot, or JS **Use cases:** - Quick event transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your event input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Game Event System Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: event, observer, pattern. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* event, observer, pattern, system --- ### [State Machine Generator](https://devtools.surf/tools/state-machine-generator) Generate finite state machine code from state/transition definitions **Use cases:** - Quick state transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your state input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the State Machine Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: state, machine, fsm. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* state, machine, fsm, ai --- ### [Platformer Physics Calculator](https://devtools.surf/tools/platformer-physics-calculator) Calculate jump height, gravity, velocity for platformer feel **Use cases:** - Quick platformer transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your platformer input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Platformer Physics Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: platformer, physics, jump. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* platformer, physics, jump, gravity --- ### [Asset Bundle Size Estimator](https://devtools.surf/tools/asset-bundle-size-estimator) Estimate build sizes for textures, audio, meshes across platforms **Use cases:** - Quick bundle transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bundle input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Asset Bundle Size Estimator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bundle, size, texture. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Unity dominates indie game dev — over 70% of all mobile games shipped in 2023 used Unity. *Tags:* bundle, size, texture, audio, asset --- ## Animation / CSS ### [CSS Keyframe Generator](https://devtools.surf/tools/css-keyframe-generator) Generate @keyframes animations from step definitions **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Keyframe Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, keyframes, animation. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* css, keyframes, animation, generate --- ### [Loading Spinner Generator](https://devtools.surf/tools/loading-spinner-generator) Generate CSS-only loading spinners and progress indicators **Use cases:** - Quick spinner transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your spinner input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Loading Spinner Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: spinner, loading, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* spinner, loading, css, animation --- ### [Skeleton Screen Generator](https://devtools.surf/tools/skeleton-screen-generator) Generate shimmer skeleton placeholder CSS for loading states **Use cases:** - Quick skeleton transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your skeleton input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Skeleton Screen Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: skeleton, shimmer, loading. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* skeleton, shimmer, loading, placeholder --- ### [Hover Effect Generator](https://devtools.surf/tools/hover-effect-generator) Generate CSS hover effects for buttons, cards, and links **Use cases:** - Quick hover transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your hover input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Hover Effect Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: hover, effect, css. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* hover, effect, css, transition --- ### [CSS Transition Playground](https://devtools.surf/tools/css-transition-playground) Build and preview CSS transitions with property, duration, and easing controls **Use cases:** - Quick transition transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your transition input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Transition Playground does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: transition, css, easing. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* transition, css, easing, playground --- ### [Text Animation Generator](https://devtools.surf/tools/text-animation-generator) Generate typewriter, fade-in, bounce, and other text animations **Use cases:** - Quick text transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your text input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Text Animation Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: text, animation, typewriter. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* text, animation, typewriter, fade --- ### [Scroll Animation Generator](https://devtools.surf/tools/scroll-animation-generator) Generate CSS scroll-triggered animation code with IntersectionObserver **Use cases:** - Quick scroll transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your scroll input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Scroll Animation Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: scroll, animation, intersection. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* scroll, animation, intersection, reveal --- ### [Particle Effect Generator](https://devtools.surf/tools/particle-effect-generator) Generate CSS-only particle animations (confetti, snow, stars) **Use cases:** - Quick particle transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your particle input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Particle Effect Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: particle, confetti, snow. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* particle, confetti, snow, css --- ### [Gradient Animation Generator](https://devtools.surf/tools/gradient-animation-generator) Generate animated gradient backgrounds with CSS **Use cases:** - Quick gradient transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gradient input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Gradient Animation Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gradient, animation, background. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* gradient, animation, background, css --- ### [Button Animation Generator](https://devtools.surf/tools/button-animation-generator) Generate animated button styles with ripple, glow, and morphing effects **Use cases:** - Quick button transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your button input on the left and click Generate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Button Animation Generator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: button, animation, ripple. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* CSS animations are GPU-accelerated when they only touch transform and opacity — that's why those two properties feel so much smoother. *Tags:* button, animation, ripple, glow --- ## Calculators ### [Basic Calculator](https://devtools.surf/tools/basic-calculator) Evaluate math expressions with +, -, *, /, parentheses, and functions **Use cases:** - Quick calculator transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your calculator input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Basic Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: calculator, math, expression. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* calculator, math, expression, evaluate --- ### [Percentage Calculator](https://devtools.surf/tools/percentage-calculator) Calculate percentages, discounts, tips, and markup **Use cases:** - Quick percentage transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your percentage input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Percentage Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: percentage, discount, tip. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* percentage, discount, tip, markup --- ### [Unit Converter](https://devtools.surf/tools/unit-converter-calc) Convert length, weight, temperature, speed, and data units **Use cases:** - Quick unit transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your unit input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Unit Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: unit, convert, length. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* unit, convert, length, weight, temperature --- ### [Loan / EMI Calculator](https://devtools.surf/tools/loan-calculator) Calculate monthly payments, total interest, and amortization **Use cases:** - Quick loan transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your loan input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Loan / EMI Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: loan, emi, mortgage. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* loan, emi, mortgage, interest, payment --- ### [Number Formatter](https://devtools.surf/tools/number-formatter) Any number → grouped, compact, scientific, hex, binary, percent **Use cases:** - Quick number transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your number input on the left and click Format — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Number Formatter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: number, format, locale. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* number, format, locale --- ### [Tip Calculator](https://devtools.surf/tools/tip-calculator) Quick tip + per-person split — US-style 15/18/20/22% presets **Use cases:** - Quick tip transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tip input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tip Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tip, restaurant. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* tip, restaurant --- ### [BMI Calculator](https://devtools.surf/tools/bmi-calculator) Body mass index with WHO categories — metric or imperial **Tips:** - BMI = weight (kg) / height² (m²) — or use unit=imperial for inches/pounds - The WHO cutoffs aren't perfect — athletes often classify as 'overweight' - Consider waist-to-height ratio as a complementary measure *Fun fact:* BMI was invented by Belgian mathematician Adolphe Quetelet in the 1830s — it was never meant to be a medical metric, just a population statistic. *Tags:* bmi, health --- ### [Mortgage Calculator](https://devtools.surf/tools/mortgage-calculator) Monthly payment + total interest for any loan amount, rate, term **Tips:** - Rate is entered as APR (e.g. 6.5 for 6.5%) - Term is in years; most US mortgages are 30 or 15 - Total interest can exceed the principal on 30-year loans *Fun fact:* The modern 30-year fixed mortgage was invented by the US federal government via the HOLC in 1933 — before then, most mortgages were 5-year balloon loans. *Tags:* mortgage, loan --- ### [Compound Interest Calculator](https://devtools.surf/tools/compound-interest-calculator) Future value with configurable compounding + monthly contributions **Tips:** - n is the number of compounding periods per year (12 = monthly, 365 = daily) - Monthly contributions are added at the start of each month - The earnings line separates principal + contributions from pure growth *Fun fact:* The 'Rule of 72' is a shortcut: divide 72 by your annual rate to get doubling time. At 8% a year, money doubles every 9 years. *Tags:* compound, interest, savings --- ### [Discount Calculator](https://devtools.surf/tools/discount-calculator) Final price after % off — plus total savings — for quick shopping math **Use cases:** - Quick discount transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your discount input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Discount Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: discount, shopping. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* discount, shopping --- ### [Sales Tax Calculator](https://devtools.surf/tools/sales-tax-calculator) Add any % sales tax to a subtotal — breakdown + grand total **Use cases:** - Quick sales-tax transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sales-tax input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sales Tax Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sales-tax, shopping. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* sales-tax, shopping --- ### [Gas Mileage Calculator](https://devtools.surf/tools/gas-mileage-calculator) MPG + L/100km + km/L — US or metric units in one calculator **Use cases:** - Quick mpg transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your mpg input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Gas Mileage Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: mpg, mileage, fuel. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* mpg, mileage, fuel --- ### [Bill Splitter](https://devtools.surf/tools/bill-splitter) Split a bill evenly with tip + optional per-person rounding kitty **Use cases:** - Quick split transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your split input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bill Splitter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: split, bill. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* split, bill --- ### [GPA Calculator](https://devtools.surf/tools/gpa-calculator) Compute unweighted 4.0 GPA from course | grade | credits lines **Use cases:** - Quick gpa transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your gpa input on the left and click Calculate — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GPA Calculator does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: gpa, school. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* gpa, school --- ### [Temperature Converter](https://devtools.surf/tools/temperature-converter) Convert C / F / K / Rankine all at once — paste any of them **Use cases:** - Quick temperature transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your temperature input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Temperature Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: temperature, celsius, fahrenheit. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* The first software spreadsheet, VisiCalc (1979), is credited with making the Apple II the first business computer. *Tags:* temperature, celsius, fahrenheit --- ## Audio ### [Sample Audio Files](https://devtools.surf/tools/sample-audio) Download forest-ambience clips in WAV, MP3, Opus, FLAC, AAC, WebM **Use cases:** - Quick audio transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your audio input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Sample Audio Files does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: audio, samples, download. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Opus is the best-in-class open-source audio codec — it matches AAC quality at lower bitrates and is royalty-free. *Tags:* audio, samples, download --- ### [Audio Converter](https://devtools.surf/tools/audio-converter) Convert between WAV, MP3, Opus, AAC and more — 100% in-browser **Use cases:** - Quick audio transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your audio input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Audio Converter does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: audio, convert, mp3. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Opus is the best-in-class open-source audio codec — it matches AAC quality at lower bitrates and is royalty-free. *Tags:* audio, convert, mp3, wav --- ### [Audio Merger](https://devtools.surf/tools/audio-merger) Join multiple clips back-to-back into one track **Use cases:** - Quick audio transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your audio input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Audio Merger does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: audio, merge, join. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Opus is the best-in-class open-source audio codec — it matches AAC quality at lower bitrates and is royalty-free. *Tags:* audio, merge, join, concat --- ### [Audio Editor](https://devtools.surf/tools/audio-editor) Trim, fade, amplify, change speed — all client-side **Use cases:** - Quick audio transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your audio input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Audio Editor does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: audio, trim, fade. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Opus is the best-in-class open-source audio codec — it matches AAC quality at lower bitrates and is royalty-free. *Tags:* audio, trim, fade, edit --- ## Cheatsheets ### [Git Cheatsheet](https://devtools.surf/tools/cheatsheet-git) Everyday Git commands — setup, commit, branch, remote, undo **Use cases:** - Quick git transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your git input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Git Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: git, version-control, reference. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* git, version-control, reference --- ### [Docker Cheatsheet](https://devtools.surf/tools/cheatsheet-docker) Docker + Compose commands for images, containers, volumes, Dockerfile **Use cases:** - Quick docker transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your docker input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Docker Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: docker, containers, devops. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* docker, containers, devops --- ### [Regex Cheatsheet](https://devtools.surf/tools/cheatsheet-regex) Character classes, quantifiers, anchors, groups, flags **Use cases:** - Quick regex transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your regex input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Regex Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: regex, regular-expression, pattern. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* regex, regular-expression, pattern --- ### [Markdown Cheatsheet](https://devtools.surf/tools/cheatsheet-markdown) CommonMark + GitHub-flavored Markdown syntax at a glance **Use cases:** - Quick markdown transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your markdown input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Markdown Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: markdown, md, docs. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* markdown, md, docs --- ### [Vim Cheatsheet](https://devtools.surf/tools/cheatsheet-vim) Modal editing essentials — modes, motions, edits, files **Use cases:** - Quick vim transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your vim input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Vim Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: vim, neovim, editor. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* vim, neovim, editor --- ### [Bash / Shell Cheatsheet](https://devtools.surf/tools/cheatsheet-bash) Navigation, text processing, pipes, processes, scripting basics **Use cases:** - Quick bash transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your bash input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Bash / Shell Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: bash, shell, linux. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* bash, shell, linux --- ### [SQL Cheatsheet](https://devtools.surf/tools/cheatsheet-sql) SELECT, JOIN, aggregates, window functions, upsert **Use cases:** - Quick sql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your sql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SQL Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: sql, postgres, mysql. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* sql, postgres, mysql --- ### [kubectl Cheatsheet](https://devtools.surf/tools/cheatsheet-kubectl) Inspect, logs, apply, scale, context switching for Kubernetes **Use cases:** - Quick kubernetes transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your kubernetes input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the kubectl Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: kubernetes, k8s, devops. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* kubernetes, k8s, devops --- ### [npm / yarn / pnpm Cheatsheet](https://devtools.surf/tools/cheatsheet-npm) Install, run, audit across all three package managers **Use cases:** - Quick npm transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your npm input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the npm / yarn / pnpm Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: npm, yarn, pnpm. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* npm, yarn, pnpm --- ### [TypeScript Cheatsheet](https://devtools.surf/tools/cheatsheet-typescript) Types, generics, utility types, narrowing, tsconfig essentials **Use cases:** - Quick typescript transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your typescript input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the TypeScript Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: typescript, ts, types. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* typescript, ts, types --- ### [CSS Flexbox Cheatsheet](https://devtools.surf/tools/cheatsheet-flexbox) Container + item props, common patterns (centered, sidebar, sticky footer) **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Flexbox Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, flexbox, layout. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* css, flexbox, layout --- ### [CSS Grid Cheatsheet](https://devtools.surf/tools/cheatsheet-grid) Template, placement, auto-fit, named areas, holy grail **Use cases:** - Quick css transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your css input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CSS Grid Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: css, grid, layout. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* css, grid, layout --- ### [Tailwind CSS Cheatsheet](https://devtools.surf/tools/cheatsheet-tailwind) Layout, spacing, colors, variants, and pro tricks **Use cases:** - Quick tailwind transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tailwind input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Tailwind CSS Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tailwind, css, utility. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* tailwind, css, utility --- ### [Python Cheatsheet](https://devtools.surf/tools/cheatsheet-python) Collections, comprehensions, dataclasses, useful stdlib modules **Use cases:** - Quick python transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your python input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Python Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: python, py, reference. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* python, py, reference --- ### [JavaScript (ES2020+) Cheatsheet](https://devtools.surf/tools/cheatsheet-javascript) Destructuring, nullish, async, modern array methods, gotchas **Use cases:** - Quick javascript transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your javascript input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JavaScript (ES2020+) Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: javascript, js, es2020. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* javascript, js, es2020 --- ### [React Hooks Cheatsheet](https://devtools.surf/tools/cheatsheet-react-hooks) State, memo, effects, context, custom hooks, newer APIs **Use cases:** - Quick react transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your react input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the React Hooks Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: react, hooks, frontend. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* react, hooks, frontend --- ### [Nginx Cheatsheet](https://devtools.surf/tools/cheatsheet-nginx) Reverse proxy, static + SPA fallback, HTTPS, ops commands **Use cases:** - Quick nginx transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your nginx input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Nginx Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: nginx, reverse-proxy, web-server. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* nginx, reverse-proxy, web-server --- ### [SSH Cheatsheet](https://devtools.surf/tools/cheatsheet-ssh) Keys, connect, port forwarding, ~/.ssh/config, file transfer **Use cases:** - Quick ssh transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your ssh input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SSH Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: ssh, remote, security. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* ssh, remote, security --- ### [tmux Cheatsheet](https://devtools.surf/tools/cheatsheet-tmux) Sessions, windows, panes, copy mode for persistent terminals **Use cases:** - Quick tmux transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tmux input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the tmux Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tmux, terminal, multiplexer. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* tmux, terminal, multiplexer --- ### [cURL Cheatsheet](https://devtools.surf/tools/cheatsheet-curl) HTTP from the CLI — methods, headers, auth, timing, retries **Use cases:** - Quick curl transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your curl input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the cURL Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: curl, http, cli. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* curl, http, cli --- ### [Makefile Cheatsheet](https://devtools.surf/tools/cheatsheet-makefile) Rule basics, variables, pattern rules, and make invocations **Use cases:** - Quick make transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your make input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Makefile Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: make, makefile, build. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* make, makefile, build --- ### [HTTP Headers Cheatsheet](https://devtools.surf/tools/cheatsheet-http-headers) Request + response headers and a caching decision tree **Use cases:** - Quick http transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your http input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the HTTP Headers Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: http, headers, cache. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* http, headers, cache --- ### [LLM Prompting Cheatsheet](https://devtools.surf/tools/cheatsheet-llm-prompting) Techniques that actually help LLM output; anti-patterns to skip **Use cases:** - Quick llm transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your llm input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the LLM Prompting Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: llm, ai, prompt. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* llm, ai, prompt --- ### [JWT Cheatsheet](https://devtools.surf/tools/cheatsheet-jwt) Structure, standard claims, algorithms, do/don't **Use cases:** - Quick jwt transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your jwt input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the JWT Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: jwt, auth, token. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* jwt, auth, token --- ### [PostgreSQL Cheatsheet](https://devtools.surf/tools/cheatsheet-postgres) psql meta-commands, JSONB, indexing, EXPLAIN **Use cases:** - Quick postgres transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your postgres input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the PostgreSQL Cheatsheet does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: postgres, postgresql, psql. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* DevToolsSurf ships 20+ one-page cheatsheets — built for skimming, keyboard navigation, and search-engine indexing. *Tags:* postgres, postgresql, psql --- ## Info / Guides ### [Docker Basics](https://devtools.surf/tools/info-docker-basics) What containers are, why they're useful, first run, common pitfalls **Use cases:** - Quick docker transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your docker input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Docker Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: docker, containers, beginner. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* docker, containers, beginner --- ### [SEO Basics for Developers](https://devtools.surf/tools/info-seo-basics) Technical SEO, on-page signals, structured data, what to skip **Use cases:** - Quick seo transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your seo input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SEO Basics for Developers does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: seo, search, ranking. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* seo, search, ranking --- ### [REST API Basics](https://devtools.surf/tools/info-rest-api-basics) HTTP verbs, status codes, resource naming, common gotchas **Use cases:** - Quick rest transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your rest input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the REST API Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: rest, api, http. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* rest, api, http --- ### [Next.js App Router Basics](https://devtools.surf/tools/info-nextjs-app-router-basics) File conventions, server vs client, data fetching, snags **Use cases:** - Quick nextjs transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your nextjs input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Next.js App Router Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: nextjs, react, app-router. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* nextjs, react, app-router --- ### [Connect Your Site to Google](https://devtools.surf/tools/info-google-setup) Search Console, GA4, Tag Manager, Ads — end-to-end setup order **Use cases:** - Quick google transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your google input on the left and click Convert — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Connect Your Site to Google does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: google, analytics, search-console. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* google, analytics, search-console --- ### [Git Basics (First Hour)](https://devtools.surf/tools/info-git-basics) Mental model, first workflow, daily loop, undo cookbook **Use cases:** - Quick git transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your git input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Git Basics (First Hour) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: git, version-control, beginner. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* git, version-control, beginner --- ### [Kubernetes Basics](https://devtools.surf/tools/info-kubernetes-basics) Pods, deployments, services, YAML, when to reach for k8s **Use cases:** - Quick kubernetes transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your kubernetes input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Kubernetes Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: kubernetes, k8s, beginner. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* kubernetes, k8s, beginner --- ### [GraphQL vs REST](https://devtools.surf/tools/info-graphql-vs-rest) When each wins, and the hidden costs of GraphQL at scale **Use cases:** - Quick graphql transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your graphql input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the GraphQL vs REST does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: graphql, rest, api. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* graphql, rest, api --- ### [WebSockets Basics](https://devtools.surf/tools/info-websockets-basics) Lifecycle, browser API, when to use, production gotchas **Use cases:** - Quick websocket transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your websocket input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the WebSockets Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: websocket, realtime, api. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* websocket, realtime, api --- ### [OAuth 2.0 Flows Explained](https://devtools.surf/tools/info-oauth2-flows) Auth code + PKCE, client credentials, device, token types, scopes **Use cases:** - Quick oauth transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your oauth input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the OAuth 2.0 Flows Explained does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: oauth, auth, security. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* oauth, auth, security --- ### [TLS / HTTPS Basics](https://devtools.surf/tools/info-tls-https-basics) Handshake, certs, Let's Encrypt, hardening to A+ **Use cases:** - Quick tls transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your tls input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the TLS / HTTPS Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: tls, https, ssl. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* tls, https, ssl --- ### [Core Web Vitals](https://devtools.surf/tools/info-core-web-vitals) LCP, INP, CLS — what they are, how to fix, how to measure **Use cases:** - Quick performance transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your performance input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Core Web Vitals does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: performance, seo, web-vitals. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* performance, seo, web-vitals --- ### [CORS Explained](https://devtools.surf/tools/info-cors-explained) Same-origin rule, simple vs preflight, server headers, gotchas **Use cases:** - Quick cors transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cors input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CORS Explained does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cors, browser, http. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* cors, browser, http --- ### [Cookies vs localStorage vs sessionStorage](https://devtools.surf/tools/info-cookies-storage) Lifetime, security, cross-tab, cookie attributes, anti-patterns **Use cases:** - Quick cookies transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cookies input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Cookies vs localStorage vs sessionStorage does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cookies, storage, browser. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* cookies, storage, browser --- ### [Monorepos (Turbo / Nx / pnpm)](https://devtools.surf/tools/info-monorepos) When to monorepo, tool choice, pitfalls **Use cases:** - Quick monorepo transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your monorepo input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Monorepos (Turbo / Nx / pnpm) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: monorepo, turbo, nx. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* monorepo, turbo, nx --- ### [Redis Basics](https://devtools.surf/tools/info-redis-basics) Data types, caching pattern, operational commands, pitfalls **Use cases:** - Quick redis transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your redis input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Redis Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: redis, cache, key-value. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* redis, cache, key-value --- ### [PostgreSQL Basics](https://devtools.surf/tools/info-postgres-basics) Why Postgres, first queries, unique features, beginner mistakes **Use cases:** - Quick postgres transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your postgres input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the PostgreSQL Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: postgres, database, beginner. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* postgres, database, beginner --- ### [CI/CD with GitHub Actions (Basics)](https://devtools.surf/tools/info-github-actions) Anatomy, minimal workflow, triggers, secrets, deploy gotchas **Use cases:** - Quick github-actions transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your github-actions input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the CI/CD with GitHub Actions (Basics) does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: github-actions, ci, cd. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* github-actions, ci, cd --- ### [Serverless vs Containers vs VMs](https://devtools.surf/tools/info-serverless-vs-containers) Where each wins; when serverless bites **Use cases:** - Quick serverless transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your serverless input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Serverless vs Containers vs VMs does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: serverless, containers, infra. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* serverless, containers, infra --- ### [Microservices vs Monolith](https://devtools.surf/tools/info-microservices-vs-monolith) Default to monolith; when to split; the modular-monolith middle path **Use cases:** - Quick architecture transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your architecture input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Microservices vs Monolith does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: architecture, microservices, monolith. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* architecture, microservices, monolith --- ### [DNS Basics](https://devtools.surf/tools/info-dns-basics) Record types, resolution, debugging, common snags **Use cases:** - Quick dns transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your dns input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the DNS Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: dns, networking. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* dns, networking --- ### [Load Balancing Basics](https://devtools.surf/tools/info-load-balancing) L4 vs L7, algorithms, health checks, failure modes **Use cases:** - Quick load-balancer transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your load-balancer input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Load Balancing Basics does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: load-balancer, networking, scaling. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* load-balancer, networking, scaling --- ### [Caching Strategies](https://devtools.surf/tools/info-caching-strategies) Where to cache, patterns, invalidation, common bugs **Use cases:** - Quick cache transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your cache input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Caching Strategies does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: cache, performance. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* cache, performance --- ### [Observability: Logs, Metrics, Traces](https://devtools.surf/tools/info-observability) Three pillars, RED/USE metrics, OpenTelemetry, tooling **Use cases:** - Quick observability transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your observability input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the Observability: Logs, Metrics, Traces does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: observability, monitoring, sre. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* observability, monitoring, sre --- ### [SemVer & Dependency Hygiene](https://devtools.surf/tools/info-semver-dependencies) Version ranges, lockfile, update strategy, supply-chain hygiene **Use cases:** - Quick semver transformations during development - Debugging production payloads without leaving the browser - Generating sample data for tests, demos, and documentation - Sharing reproducible tool output with teammates **Tips:** - Paste your semver input on the left and click Run — results appear instantly on the right. - Click "Try Sample" to load an example that demonstrates what the SemVer & Dependency Hygiene does. - Copy the output with the button above the panel, or download it as a file with the icon next to it. - Related keywords: semver, dependencies, npm. If you're looking for a specific variant, check the Related tools strip below. *Fun fact:* Every explainer article on DevToolsSurf is under 2000 words — designed to fit on a single screen's worth of scrolling on a laptop. *Tags:* semver, dependencies, npm ---