[ "calculators", "css-ui", "developer-formatters", "domain-tools", "image", "image-tools", "local-seo", "math-network", "security-crypto", "string-text", "calculators/aspect-ratio-calculator.mdx", "calculators/pixel-rem-converter.mdx", "calculators/social-media-size-guide.mdx", "css-ui/border-radius-generator.mdx", "css-ui/box-shadow-generator.mdx", "css-ui/clip-path-generator.mdx", "css-ui/color-converter.mdx", "css-ui/css-gradient-generator.mdx", "css-ui/glassmorphism-generator.mdx", "developer-formatters/css-minifier.mdx", "developer-formatters/csv-to-json.mdx", "developer-formatters/curl-to-code.mdx", "developer-formatters/html-minifier.mdx", "developer-formatters/js-minifier.mdx", "developer-formatters/json-formatter.mdx", "developer-formatters/json-to-csv.mdx", "developer-formatters/jwt-debugger.mdx", "developer-formatters/regex-tester.mdx", "developer-formatters/sql-formatter.mdx", "developer-formatters/xml-formatter.mdx", "developer-formatters/yaml-formatter.mdx", "domain-tools/domain-recon-scanner.mdx", "image/base64-image-decoder.mdx", "image/svg-to-png-converter.mdx", "image-tools/color-picker.mdx", "image-tools/image-compressor.mdx", "image-tools/image-converter.mdx", "image-tools/image-cropper.mdx", "local-seo/review-link-generator.mdx", "math-network/discount-calculator.mdx", "math-network/epoch-converter.mdx", "math-network/ip-address-lookup.mdx", "math-network/ip-converter.mdx", "math-network/scientific-calculator.mdx", "math-network/subnet-calculator.mdx", "math-network/unit-converter.mdx", "security-crypto/base64-encoder.mdx", "security-crypto/hash-generator-md5.mdx", "security-crypto/hash-generator-sha256.mdx", "security-crypto/html-entity-encoder.mdx", "security-crypto/password-generator.mdx", "security-crypto/url-encoder.mdx", "security-crypto/uuid-generator.mdx", "string-text/ascii-art-generator.mdx", "string-text/case-converter.mdx", "string-text/lorem-ipsum-generator.mdx", "string-text/markdown-to-html.mdx", "string-text/remove-duplicate-lines.mdx", "string-text/slug-generator.mdx", "string-text/string-reverser.mdx", "string-text/text-diff-checker.mdx", "string-text/text-replacement-tool.mdx", "string-text/unicode-detector.mdx", "string-text/word-counter.mdx" ]
Count: 54
[
{
"id": "calculators/aspect-ratio-calculator.mdx",
"data": {
"name": "Aspect Ratio Calculator",
"description": "Calculate dimensions for images and video based on standard aspect ratios (16:9, 4:3) or find the ratio of any object.",
"shortDescription": "Calculate Aspect Ratio",
"categoryId": "calculators",
"tier": 1,
"icon": "Maximize",
"keywords": [
"aspect ratio",
"screen resolution",
"image resize",
"16:9 calculator",
"video dimensions"
],
"featured": true,
"instructions": [
"Choose a mode: 'Calculate Dimensions' or 'Find Ratio'.",
"Select a preset (e.g., 16:9 for modern video) or enter custom values.",
"Enter one dimension (Width or Height).",
"The tool automatically fills in the matching dimension to maintain the ratio."
]
},
"body": "import AspectRatioCalculator from '../../../components/tools/calculators/AspectRatioCalculator';\r\n\r\n<AspectRatioCalculator client:load />\r\n\r\n## Understanding Aspect Ratios\r\nAn aspect ratio describes the proportional relationship between an image's width and its height. It is commonly expressed as two numbers separated by a colon, like **16:9**.\r\n\r\n### Common Standards\r\n- **16:9 (Widescreen)**: The standard for HDTV, YouTube videos, and most modern screens.\r\n- **4:3 (Standard)**: Old CRT monitors, iPad screens, and standard photography.\r\n- **1:1 (Square)**: Classic Instagram posts and profile pictures.\r\n- **9:16 (Vertical)**: Instagram Stories, TikTok, and mobile video.\r\n- **21:9 (Ultrawide)**: Cinematic movie format.\r\n\r\n### Why it Matters\r\nMaintaining the correct aspect ratio is crucial to prevent images from looking stretched or squashed. When resizing content for the web, getting the math right ensures your layout looks professional on all devices.",
"filePath": "src/content/tools/calculators/aspect-ratio-calculator.mdx",
"digest": "a8f4a32a0d987672",
"deferredRender": true,
"collection": "tools",
"slug": "calculators/aspect-ratio-calculator"
},
{
"id": "calculators/pixel-rem-converter.mdx",
"data": {
"name": "Pixel to REM Converter",
"description": "Instantly convert pixels (px) to REM units for responsive and accessible web design. Includes a quick reference table.",
"shortDescription": "PX to REM Converter",
"categoryId": "calculators",
"tier": 1,
"icon": "ArrowRightLeft",
"keywords": [
"px to rem",
"rem calculator",
"css units",
"responsive design",
"accessibility"
],
"featured": true,
"instructions": [
"Set your project's Base Font Size (default is usually 16px).",
"Type your value in the Pixels (px) input.",
"The Tool automatically calculates the REM equivalent.",
"Alternatively, type in REM to convert back to pixels."
]
},
"body": "import PixelRemConverter from '../../../components/tools/calculators/PixelRemConverter';\r\n\r\n<PixelRemConverter client:load />\r\n\r\n## Pixels vs. REM: Which should you use?\r\n\r\nIn modern web development, **REM (Root EM)** is generally preferred over pixels for font sizes, spacing, and layout elements.\r\n\r\n### The Accessibility Argument\r\nWhen you define sizes in pixels (e.g., `font-size: 16px`), you are hard-coding that value. If a user with visual impairments sets their browser's base font size to 24px, your website will ignore their preference and force 16px, making text hard to read.\r\n\r\nUsing REM (e.g., `font-size: 1rem`), your layout scales relatively. `1rem` equals \"100% of the root font size\". If the user wants bigger text, your entire site scales up proportionally.\r\n\r\n### The Math\r\nThe formula is simple:\r\n```math\r\nREM = Pixels / Base Size\r\nPixels = REM * Base Size\r\n```\r\nMost browsers have a default base size of 16px.\r\n- 16px = 1rem\r\n- 24px = 1.5rem\r\n- 32px = 2rem",
"filePath": "src/content/tools/calculators/pixel-rem-converter.mdx",
"digest": "876daf4662d27c7c",
"deferredRender": true,
"collection": "tools",
"slug": "calculators/pixel-rem-converter"
},
{
"id": "css-ui/border-radius-generator.mdx",
"data": {
"name": "Border Radius Generator",
"description": "Create standard rounded corners or organic, fluid blob shapes using CSS border-radius.",
"shortDescription": "Generate Rounded Corners & Blobs",
"categoryId": "css-ui",
"tier": 1,
"icon": "Square",
"keywords": [
"border radius",
"css blobs",
"rounded corners",
"organic shapes",
"css3"
],
"featured": true,
"instructions": [
"Adjust the simple slider for standard rounded corners.",
"Check 'Advanced (Blobs)' to unlock full 8-point control.",
"Create unique organic shapes by tweaking horizontal and vertical radii independently.",
"Click 'Random Blob' for instant inspiration.",
"Copy the CSS code."
]
},
"body": "import BorderRadiusGenerator from '../../../components/tools/css-ui/BorderRadiusGenerator';\r\n\r\n<BorderRadiusGenerator client:load />\r\n\r\n## Beyond Simple Circles\r\nCSS `border-radius` is more powerful than just rounding corners. By specifying different values for horizontal and vertical radii on each corner (using the `/` separator), you can create complex, organic shapes known as **Blobs**.\r\n\r\n### Syntax Deconstructed\r\n```css\r\n/* Simple */\r\nborder-radius: 10px; \r\n\r\n/* Complex */\r\nborder-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\r\n```\r\nThe complex values represent: top-left, top-right, bottom-right, bottom-left (horizontal) / top-left, top-right, bottom-right, bottom-left (vertical).\r\n\r\n### Use Cases\r\n- **Avatars**: Soft, organic profile picture frames.\r\n- **Backgrounds**: Abstract, floating shapes behind your content.\r\n- **Buttons**: Fully pill-shaped or slightly softened interactive elements.",
"filePath": "src/content/tools/css-ui/border-radius-generator.mdx",
"digest": "9de52567dfb1cd7b",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/border-radius-generator"
},
{
"id": "calculators/social-media-size-guide.mdx",
"data": {
"name": "Social Media Size Guide",
"description": "The ultimate cheat sheet for social media image sizes in 2026. Covers Instagram, LinkedIn, Twitter, Facebook, and YouTube.",
"shortDescription": "Social Media Dimensions",
"categoryId": "calculators",
"tier": 1,
"icon": "Smartphone",
"keywords": [
"social media sizes",
"image dimensions",
"instagram post size",
"linkedin banner",
"youtube thumbnail"
],
"featured": true,
"instructions": [
"Click the tab for the platform you are designing for (e.g., Instagram).",
"Scroll to find the specific placement (Feed, Story, Profile Pic).",
"Note the Width (px) and Height (px).",
"Check the 'Safe Area' tips to ensure your content isn't cut off."
]
},
"body": "import SocialMediaSizes from '../../../components/tools/calculators/SocialMediaSizes';\r\n\r\n<SocialMediaSizes client:load />\r\n\r\n## Why Dimensions Matter\r\nUploading the wrong image size causes social platforms to auto-crop or stretch your visual, often making it look blurry or unprofessional.\r\n\r\n### Cheat Sheet 2026\r\nWe keep this guide updated with the latest changes from each major platform.\r\n\r\n- **Instagram**: Focus on **4:5 Vertical** posts (1080x1350) instead of square, as they take up more screen real estate on mobile, increasing engagement.\r\n- **YouTube**: Your **Thumbnail** (1280x720) is your first impression. High contrast and readable text are key.\r\n- **LinkedIn**: Professionalism is ensuring your **Cover Photo** isn't pixelated on desktop monitors.\r\n\r\n### Safe Zones\r\nFor platforms like YouTube Banners or responsive Twitter Headers, remember that the \"safe zone\" (centered area) is what is visible on all devices, especially mobile. Keep logos and text there.",
"filePath": "src/content/tools/calculators/social-media-size-guide.mdx",
"digest": "c360e4f21efadf55",
"deferredRender": true,
"collection": "tools",
"slug": "calculators/social-media-size-guide"
},
{
"id": "css-ui/box-shadow-generator.mdx",
"data": {
"name": "Box Shadow Generator",
"description": "Visually design CSS box shadows. Adjust blur, spread, and opacity to create depth and elevation in your UI.",
"shortDescription": "Generate CSS Box Shadows",
"categoryId": "css-ui",
"tier": 1,
"icon": "Layers",
"keywords": [
"box shadow",
"css shadow",
"material design shadow",
"elevation",
"drop shadow"
],
"featured": true,
"instructions": [
"Use the sliders to control the shadow's position (Offsets), size (Spread) and softness (Blur).",
"Adjust the shadow color and transparency (Alpha) using the picker.",
"Toggle 'Inset' for inner shadows.",
"Preview the result against different background colors.",
"Copy the property to your clipboard."
]
},
"body": "import BoxShadowGenerator from '../../../components/tools/css-ui/BoxShadowGenerator';\r\n\r\n<BoxShadowGenerator client:load />\r\n\r\n## Mastering Shadows\r\nShadows are a critical element in modern web design, adding depth, hierarchy, and affordance to your interface.\r\n\r\n### The Properties\r\n- **Horizontal/Vertical Offset**: Moves the shadow relative to the element. Positive values move right/down, negative moves left/up.\r\n- **Blur Radius**: Controls how sharp or soft the shadow edge is. Higher = softer.\r\n- **Spread Radius**: Expands or shrinks the shadow size relative to the element size.\r\n- **Color/Alpha**: The key to realistic shadows is transparency. Avoid pure black; use a dark shade of your background or brand color with low opacity (e.g., 10-20%).\r\n\r\n### Design Trends\r\n- **Soft Shadows**: Large blur + low opacity creates a modern, floating effect common in SaaS dashboards.\r\n- **Neumorphism**: Uses two shadows (one light, one dark) to make elements appear extruded from the background.",
"filePath": "src/content/tools/css-ui/box-shadow-generator.mdx",
"digest": "66c9627b0ebd3d04",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/box-shadow-generator"
},
{
"id": "css-ui/css-gradient-generator.mdx",
"data": {
"name": "CSS Gradient Generator",
"description": "Design stunning linear and radial CSS gradients visually. Export cross-browser CSS code instantly.",
"shortDescription": "Generate CSS Gradients",
"categoryId": "css-ui",
"tier": 1,
"icon": "Palette",
"keywords": [
"css gradient",
"gradient generator",
"background generator",
"css3 gradient",
"web design"
],
"featured": true,
"instructions": [
"Use the slider to add, remove, and position color stops.",
"Click any stop to change its color using the picker.",
"Switch between Linear and Radial types.",
"Adjust the angle (for linear) to direct the flow.",
"Copy the generated CSS to your stylesheet."
]
},
"body": "import GradientGenerator from '../../../components/tools/css-ui/GradientGenerator';\r\n\r\n<GradientGenerator client:load />\r\n\r\n## Create Beautiful Gradients\r\nGradients add depth and dimension to your web designs. Our generator makes it easy to experiment with complex color transitions without writing a single line of code manually.\r\n\r\n### Tips for Better Gradients\r\n- **Subtlety is Key**: The best gradients often use two colors that are close to each other on the color wheel.\r\n- **Direction**: Use a slight angle (e.g., 135deg) rather than straight up/down for a more modern look.\r\n- **Accessibility**: Verify that your white text is readable over the darkest part of your gradient.\r\n\r\n### CSS Syntax Explained\r\nThe tool generates standard CSS3 syntax:\r\n```css\r\nbackground: linear-gradient(90deg, #ff00cc 0%, #333399 100%);\r\n```\r\n- **Angle**: The direction of the gradient line.\r\n- **Stops**: The specific colors and their percentage positions along the line.",
"filePath": "src/content/tools/css-ui/css-gradient-generator.mdx",
"digest": "0204521f191100d5",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/css-gradient-generator"
},
{
"id": "css-ui/clip-path-generator.mdx",
"data": {
"name": "Clip Path Generator",
"description": "Create complex shapes and masks using the CSS clip-path property. Choose from presets like triangles, hexagons, and more.",
"shortDescription": "Generate CSS Clip Paths",
"categoryId": "css-ui",
"tier": 1,
"icon": "Scissors",
"keywords": [
"clip path",
"css shapes",
"polygon generator",
"masking",
"css clip"
],
"featured": true,
"instructions": [
"Select a shape from the preset library (e.g., Triangle, Hexagon).",
"Preview how the shape masks the element.",
"Edit the CSS value manually if you need specific coordinates.",
"Copy the 'clip-path' rule to your project."
]
},
"body": "import ClipPathGenerator from '../../../components/tools/css-ui/ClipPathGenerator';\r\n\r\n<ClipPathGenerator client:load />\r\n\r\n## Shaping the Web\r\nWeb design doesn't have to be just boxes and rectangles. The `clip-path` property allows you to mask elements into custom shapes such as circles, ellipses, and polygons.\r\n\r\n### How it Works\r\nThe `clip-path` property defines a specific region of an element that should remain visible. Everything outside this region is \"clipped\" or hidden.\r\n\r\n### Common Uses\r\n1. **Creative Headers**: Angled or curved dividers between screen sections.\r\n2. **Avatars**: Hexagonal or star-shaped profile pictures.\r\n3. **Interactive Galleries**: Revealing images on hover with animated clip-paths.",
"filePath": "src/content/tools/css-ui/clip-path-generator.mdx",
"digest": "ca0108fc2d9e092b",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/clip-path-generator"
},
{
"id": "css-ui/color-converter.mdx",
"data": {
"name": "Color Converter",
"description": "Convert colors between HEX, RGB, and HSL formats instantly. View live previews.",
"shortDescription": "HEX / RGB / HSL",
"categoryId": "css-ui",
"tier": 1,
"icon": "Palette",
"keywords": [
"color converter",
"hex to rgb",
"rgb to hex",
"hsl converter",
"color code"
],
"featured": false,
"instructions": [
"Enter a HEX code (e.g., #FF5733).",
"Instantly see the RGB and HSL equivalents.",
"Copy the format you need for your CSS."
]
},
"body": "import ColorConverter from '../../../components/tools/css-ui/ColorConverter';\r\n\r\n<ColorConverter client:load />\r\n\r\n## Supported Formats\r\n- **HEX**: Standard 6-digit hexadecimal codes (e.g., #FFFFFF).\r\n- **RGB**: Red, Green, Blue integer values (0-255).\r\n- **HSL**: Hue, Saturation, Lightness format for easier color manipulation.",
"filePath": "src/content/tools/css-ui/color-converter.mdx",
"digest": "626848b3664ebe4c",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/color-converter"
},
{
"id": "developer-formatters/css-minifier.mdx",
"data": {
"name": "CSS Minifier",
"description": "Compress CSS code to reduce file size and improve page load speed.",
"shortDescription": "Minify CSS",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileCode",
"keywords": [
"css minifier",
"compress css",
"minify styles"
],
"featured": false,
"instructions": [
"Paste your CSS code.",
"Click Minify.",
"Copy the compressed CSS."
]
},
"body": "import CSSMinifier from '../../../components/tools/formatters/CSSMinifier';\r\n\r\n<CSSMinifier client:load />\r\n\r\n## Improve CSS Performance\r\nRemoving whitespace and changing syntax like colors to shorter formats (e.g., #FFFFFF to #FFF) saves bandwidth. Use this tool before deploying your stylesheets.",
"filePath": "src/content/tools/developer-formatters/css-minifier.mdx",
"digest": "f43364877b796fb0",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/css-minifier"
},
{
"id": "css-ui/glassmorphism-generator.mdx",
"data": {
"name": "Glassmorphism Generator",
"description": "Generate the trendy 'frosted glass' effect using CSS backdrop-filter. Perfect for modern UI cards and overlays.",
"shortDescription": "Generate Frosted Glass CSS",
"categoryId": "css-ui",
"tier": 1,
"icon": "Droplet",
"keywords": [
"glassmorphism",
"backdrop filter",
"css glass",
"frosted glass",
"ui trend"
],
"featured": true,
"instructions": [
"Adjust the 'Blur' to controls how frosted the glass looks.",
"Tweak the 'Opacity' to control transparency.",
"Use 'Saturation' to make background colors pop through vividly.",
"Pick a base color (usually white or black).",
"Copy the standardized CSS code."
]
},
"body": "import GlassmorphismGenerator from '../../../components/tools/css-ui/GlassmorphismGenerator';\r\n\r\n<GlassmorphismGenerator client:load />\r\n\r\n## The Frosted Glass Effect\r\nGlassmorphism is a popular UI trend that creates a sense of hierarchy by mimicking translucent materials. It relies heavily on the `backdrop-filter` CSS property.\r\n\r\n### Key Characteristics\r\n1. **Translucency**: Using background blur (`backdrop-filter: blur()`) to allow background elements to be visible but distinct.\r\n2. **Vivid Colors**: Often paired with colorful, floating shapes in the background to emphasize the transparency.\r\n3. **Light Borders**: A subtle semi-transparent white border mimics a glass edge.\r\n\r\n### Browser Support\r\nThis effect works in all modern browsers. We include the `-webkit-` prefix in the generated code to ensure maximum compatibility with Safari and iOS devices.",
"filePath": "src/content/tools/css-ui/glassmorphism-generator.mdx",
"digest": "373be8dc4343e9b4",
"deferredRender": true,
"collection": "tools",
"slug": "css-ui/glassmorphism-generator"
},
{
"id": "developer-formatters/csv-to-json.mdx",
"data": {
"name": "CSV to JSON",
"description": "Convert CSV data to JSON format. Supports custom delimiters.",
"shortDescription": "CSV -> JSON",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileText",
"keywords": [
"csv to json",
"csv converter",
"convert data"
],
"featured": false,
"instructions": [
"Paste CSV data.",
"Click Convert.",
"Copy the JSON output."
]
},
"body": "import CSVToJSON from '../../../components/tools/formatters/CSVToJSON';\r\n\r\n<CSVToJSON client:load />\r\n\r\n## Data Conversion\r\nEasily convert comma-separated values into JSON objects for your applications.",
"filePath": "src/content/tools/developer-formatters/csv-to-json.mdx",
"digest": "420a2a485eb8a649",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/csv-to-json"
},
{
"id": "developer-formatters/curl-to-code.mdx",
"data": {
"name": "cURL to Code",
"description": "Convert cURL commands into code snippets for Python, JS, PHP, and more.",
"shortDescription": "cURL -> Code",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Terminal",
"keywords": [
"curl convert",
"curl to python",
"curl to node",
"api request"
],
"featured": false,
"instructions": [
"Paste a cURL command.",
"Select target language.",
"Copy the generated code."
]
},
"body": "import CurlToCode from '../../../components/tools/formatters/CurlToCode';\r\n\r\n<CurlToCode client:load />\r\n\r\n## API Snippet Generator\r\nQuickly turn terminal curl commands into copy-pasteable code for your backend or frontend application.",
"filePath": "src/content/tools/developer-formatters/curl-to-code.mdx",
"digest": "4f51c88e044382d5",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/curl-to-code"
},
{
"id": "developer-formatters/html-minifier.mdx",
"data": {
"name": "HTML Minifier",
"description": "Minify your HTML code by removing unnecessary whitespace, comments, and attributes.",
"shortDescription": "Minify HTML",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileCode",
"keywords": [
"html minifier",
"compress html",
"minify code",
"web optimization"
],
"featured": false,
"instructions": [
"Paste your HTML code.",
"Click Minify.",
"Copy the optimized code."
]
},
"body": "import HTMLMinifier from '../../../components/tools/formatters/HTMLMinifier';\r\n\r\n<HTMLMinifier client:load />\r\n\r\n## Optimize Your Web Pages\r\nMinifying HTML is a standard practice to reduce page load time. This tool safely strips out comments, newlines, and spaces that browsers don't need, making your files smaller.",
"filePath": "src/content/tools/developer-formatters/html-minifier.mdx",
"digest": "e75f3ac5b850680b",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/html-minifier"
},
{
"id": "developer-formatters/js-minifier.mdx",
"data": {
"name": "JavaScript Minifier",
"description": "Minify JavaScript code/files to optimize performance and reduce bandwidth.",
"shortDescription": "Minify JS",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileCode",
"keywords": [
"js minifier",
"javascript compressor",
"minify js"
],
"featured": false,
"instructions": [
"Paste your JS code.",
"Click Minify.",
"Copy the minified script."
]
},
"body": "import JSMinifier from '../../../components/tools/formatters/JSMinifier';\r\n\r\n<JSMinifier client:load />\r\n\r\n## Compressing JavaScript\r\nThis tool uses standard compression techniques to shrink your JS files. Note: This assumes valid ES syntax.",
"filePath": "src/content/tools/developer-formatters/js-minifier.mdx",
"digest": "6f98b23bd1b09278",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/js-minifier"
},
{
"id": "developer-formatters/json-formatter.mdx",
"data": {
"name": "JSON Formatter & Validator",
"description": "Format, beautify, and validate JSON data. Minify JSON for production use and fix syntax errors.",
"shortDescription": "Format & Validate JSON",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Braces",
"keywords": [
"json formatter",
"json lint",
"beautify json",
"json validator",
"minify json"
],
"featured": true,
"instructions": [
"Paste your JSON data into the 'Input JSON' box.",
"Click the 'Format' button (Maximize icon) to beautify.",
"Click 'Minify' to compress the JSON to a single line.",
"If there are errors, they will be displayed in the output area."
]
},
"body": "import JSONFormatter from '../../../components/tools/formatters/JSONFormatter';\r\n\r\n<JSONFormatter client:load />\r\n\r\n## What is JSON Formatting?\r\nJSON (JavaScript Object Notation) is standard for data exchange, but raw JSON from APIs is often minified (all one line) to save bandwidth. This tools helps you:\r\n- **Beautify**: Add indentation and newlines to make it readable.\r\n- **Minify**: Remove whitespace to reduce file size for production.\r\n- **Validate**: Check for syntax errors like missing quotes or trailing commas.\r\n\r\n### Common JSON Errors\r\n- **Trailing Commas**: `{\"a\": 1,}` is invalid in standard JSON.\r\n- **Single Quotes**: JSON strings must use double quotes `\"key\": \"value\"`, not `'key': 'value'`.\r\n- **Undefined/Functions**: JSON cannot store JS functions or `undefined`.",
"filePath": "src/content/tools/developer-formatters/json-formatter.mdx",
"digest": "44497b045a0fa2ed",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/json-formatter"
},
{
"id": "developer-formatters/json-to-csv.mdx",
"data": {
"name": "JSON to CSV",
"description": "Convert JSON array data into CSV format for spreadsheets.",
"shortDescription": "JSON -> CSV",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileText",
"keywords": [
"json to csv",
"json converter",
"export csv"
],
"featured": false,
"instructions": [
"Paste JSON data.",
"Click Convert.",
"Copy the CSV output."
]
},
"body": "import JSONToCSV from '../../../components/tools/formatters/JSONToCSV';\r\n\r\n<JSONToCSV client:load />\r\n\r\n## Export Data\r\nFlatten your JSON arrays into CSV rows perfect for Excel or Google Sheets.",
"filePath": "src/content/tools/developer-formatters/json-to-csv.mdx",
"digest": "a55da10ae93af19a",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/json-to-csv"
},
{
"id": "developer-formatters/jwt-debugger.mdx",
"data": {
"name": "JWT Debugger",
"description": "Decode and inspect JSON Web Tokens (JWT) to view headers and payloads.",
"shortDescription": "Decode JWT",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Lock",
"keywords": [
"jwt debugger",
"decode jwt",
"token inspector",
"jwt decoder"
],
"featured": false,
"instructions": [
"Paste your JWT string.",
"See the decoded Header and Payload.",
"Verify token structure."
]
},
"body": "import JWTDebugger from '../../../components/tools/formatters/JWTDebugger';\r\n\r\n<JWTDebugger client:load />\r\n\r\n## Inspect Your Tokens\r\nPaste a JWT (JSON Web Token) here to see its decoded contents. Note: We only decode the token parts (base64 decode), we do not verify the signature secret client-side for security reasons.",
"filePath": "src/content/tools/developer-formatters/jwt-debugger.mdx",
"digest": "4b19d9fb5246711f",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/jwt-debugger"
},
{
"id": "developer-formatters/regex-tester.mdx",
"data": {
"name": "Regex Tester",
"description": "Test and debug Regular Expressions with real-time matching and highlighting.",
"shortDescription": "Test Regex",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Search",
"keywords": [
"regex tester",
"regular expression",
"debug regex",
"regex match"
],
"featured": false,
"instructions": [
"Enter your Regular Expression.",
"Enter the test string.",
"View matches instantly."
]
},
"body": "import RegexTester from '../../../components/tools/formatters/RegexTester';\r\n\r\n<RegexTester client:load />\r\n\r\n## Debug Patterns Easily\r\nRegular expressions can be tricky. Use this tester to visualize matches in real-time. Supports JavaScript RegExp flavor.",
"filePath": "src/content/tools/developer-formatters/regex-tester.mdx",
"digest": "2c3412a7bf6cd5d3",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/regex-tester"
},
{
"id": "developer-formatters/sql-formatter.mdx",
"data": {
"name": "SQL Formatter",
"description": "Format complex SQL queries for better readability. Supports Standard SQL, PostgreSQL, MySQL, and T-SQL. Highlights syntax.",
"shortDescription": "Format SQL Queries",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Database",
"keywords": [
"sql formatter",
"sql beautifier",
"pretty print sql",
"sql syntax",
"query formatter"
],
"featured": false,
"instructions": [
"Select your SQL dialect (default is Standard SQL).",
"Paste your raw query into the input box.",
"Click 'Format' to uppercase keywords and indent clauses.",
"Copy the clean query for your database client."
]
},
"body": "import SQLFormatter from '../../../components/tools/formatters/SQLFormatter';\r\n\r\n<SQLFormatter client:load />\r\n\r\n## Why Format SQL?\r\nReading a 10-line SQL query that is squashed into a single line is a nightmare. Consistent formatting improves debugging and collaboration.\r\n\r\n### Features\r\n- **Keyword Capitalization**: Automatically converts `select` to `SELECT`.\r\n- **Indentation**: Visualizes the structure of `JOIN`s and `WHERE` clauses.\r\n- **Dialect Support**: Handles specific syntax for PostgreSQL, MySQL, and SQL Server.\r\n\r\n### Example\r\n**Before:**\r\n`select * from users where id=1`\r\n\r\n**After:**\r\n```sql\r\nSELECT\r\n *\r\nFROM\r\n users\r\nWHERE\r\n id = 1\r\n```",
"filePath": "src/content/tools/developer-formatters/sql-formatter.mdx",
"digest": "82cb6f937d9a2a9b",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/sql-formatter"
},
{
"id": "developer-formatters/xml-formatter.mdx",
"data": {
"name": "XML Formatter",
"description": "Format and beautify XML code. Visualizes XML hierarchy with indentation logic. Supports minification.",
"shortDescription": "Format XML Data",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "Code",
"keywords": [
"xml formatter",
"xml beautifier",
"format xml",
"xml minifier",
"pretty print xml"
],
"featured": false,
"instructions": [
"Paste your raw XML code into the input area.",
"Click 'Format' to indent and organize the tags.",
"Click 'Minify' to remove unnecessary whitespace.",
"Copy the result for your sitemap or config file."
]
},
"body": "import XMLFormatter from '../../../components/tools/formatters/XMLFormatter';\r\n\r\n<XMLFormatter client:load />\r\n\r\n## Why use an XML Formatter?\r\nXML files can become large and unwieldy, making it difficult to spot errors or understand the data structure. A formatter adds:\r\n\r\n- **Indentation**: Visually separates parent and child elements.\r\n- **Line Breaks**: Put each tag on its own line for readability.\r\n- **Error Detection**: Quickly tells you if your XML is malformed (e.g., missing closing tags).\r\n\r\nThis tool is perfect for working with **Sitemaps**, **RSS Feeds**, **SOAP APIs**, and configuration files like `pom.xml` or `web.config`.",
"filePath": "src/content/tools/developer-formatters/xml-formatter.mdx",
"digest": "456d484055d69b68",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/xml-formatter"
},
{
"id": "developer-formatters/yaml-formatter.mdx",
"data": {
"name": "YAML Validator & Formatter",
"description": "Validate YAML syntax and convert between YAML and JSON formats instantly.",
"shortDescription": "Format & Convert YAML",
"categoryId": "developer-formatters",
"tier": 1,
"icon": "FileJson",
"keywords": [
"yaml formatter",
"yaml to json",
"json to yaml",
"yaml validator",
"config converter"
],
"featured": false,
"instructions": [
"Select the mode: 'YAML -> JSON' or 'JSON -> YAML'.",
"Paste your code into the input box.",
"Click 'Convert' to process the data.",
"Copy the result for your configuration files."
]
},
"body": "import YAMLFormatter from '../../../components/tools/formatters/YAMLFormatter';\r\n\r\n<YAMLFormatter client:load />\r\n\r\n## YAML vs JSON\r\n**YAML** is designed to be human-readable and is widely used for configuration files (Docker, Kubernetes, Home Assistant).\r\n**JSON** is stricter and better for machine-to-machine data exchange (APIs, Database storage).\r\n\r\n### Key Differences\r\n- **Comments**: YAML supports comments (`#`), JSON does not.\r\n- **Syntax**: YAML uses indentation (whitespace), JSON uses braces `{}`.\r\n- **Strictness**: YAML is more lenient with quotes, while JSON requires double quotes for all keys.",
"filePath": "src/content/tools/developer-formatters/yaml-formatter.mdx",
"digest": "c412d903b6401a24",
"deferredRender": true,
"collection": "tools",
"slug": "developer-formatters/yaml-formatter"
},
{
"id": "image/base64-image-decoder.mdx",
"data": {
"name": "Base64 Image Decoder",
"description": "Decode Base64 strings back into images. Preview and download the original file instantly.",
"shortDescription": "Base64 to Image",
"categoryId": "image-tools",
"tier": 1,
"icon": "Image",
"keywords": [
"base64 to image",
"decode image",
"base64 converter",
"view base64",
"image decoder"
],
"featured": false,
"instructions": [
"Paste the Base64 string into the text box.",
"The tool will automatically attempt to render the image.",
"Check the preview and image dimensions.",
"Click 'Save Image' to download."
]
},
"body": "import Base64ImageDecoder from '../../../components/tools/image/Base64ImageDecoder';\r\n\r\n<Base64ImageDecoder client:load />\r\n\r\n## Use Cases\r\n- **Debugging APIs**: Visualize image data returned from JSON APIs.\r\n- **Extracting Embedded Images**: Save images found in CSS files or data URIs.\r\n- **broken image repair**: Verify if a base64 string is valid.\r\n\r\n## Supported Formats\r\nWorks with any standard image MIME type including PNG, JPG, GIF, WebP, and SVG.",
"filePath": "src/content/tools/image/base64-image-decoder.mdx",
"digest": "b7283d03f83fbc28",
"deferredRender": true,
"collection": "tools",
"slug": "image/base64-image-decoder"
},
{
"id": "image/svg-to-png-converter.mdx",
"data": {
"name": "SVG to PNG Converter",
"description": "Convert Scalable Vector Graphics (SVG) code or files into high-resolution PNG images. Transparent background preserved.",
"shortDescription": "SVG to PNG",
"categoryId": "image-tools",
"tier": 1,
"icon": "Image",
"keywords": [
"svg to png",
"convert svg",
"rasterize svg",
"svg converter",
"vector to png"
],
"featured": false,
"instructions": [
"Paste your SVG code or upload an .svg file.",
"Check the live preview to ensure it renders correctly.",
"Set the desired output width (height is auto-calculated).",
"Click 'Download PNG' to save the image."
]
},
"body": "import SvgToPngConverter from '../../../components/tools/image/SvgToPngConverter';\r\n\r\n<SvgToPngConverter client:load />\r\n\r\n## Why convert SVG to PNG?\r\nWhile SVGs are perfect for the web due to infinite scalability, sometimes you need a raster format like PNG for:\r\n- **Social Media**: Uploading to platforms that don't support SVG.\r\n- **Favicons**: Legacy browser support.\r\n- **Email Signatures**: Ensuring consistent rendering across email clients.\r\n\r\nThis tool runs entirely in your browser. Your images are never uploaded to a server being 100% private.",
"filePath": "src/content/tools/image/svg-to-png-converter.mdx",
"digest": "ef61a66fef68008a",
"deferredRender": true,
"collection": "tools",
"slug": "image/svg-to-png-converter"
},
{
"id": "domain-tools/domain-recon-scanner.mdx",
"data": {
"name": "Visual Domain Intelligence Scanner",
"description": "Map domain infrastructure, discover subdomains, detect vulnerabilities, and visualize network topology with our free interactive OSINT dashboard.",
"shortDescription": "Visual domain recon with network graph",
"categoryId": "domain-tools",
"tier": 1,
"icon": "Network",
"keywords": [
"domain map",
"network topology",
"subdomain scanner",
"dns visualization",
"cybersecurity tool",
"OSINT",
"reconnaissance",
"whois lookup",
"wayback machine",
"sitemap visualizer"
],
"featured": false
},
"body": "import { Brain, Globe, Shield, Search, History, Lock, Server, Zap, Share2, Activity, Database, Eye } from 'lucide-react';\r\n\r\n<div className=\"space-y-12\">\r\n\r\n {/* Hero Section */}\r\n <div className=\"relative bg-[var(--bg-card)] border border-[var(--border-subtle)] rounded-3xl p-8 md:p-12 overflow-hidden group\">\r\n <div className=\"absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity text-[var(--accent-red)]\">\r\n <Brain className=\"w-64 h-64\" />\r\n </div>\r\n <div className=\"relative z-10\">\r\n <h2 className=\"text-4xl md:text-5xl font-black italic uppercase tracking-tighter text-[var(--text-primary)] mb-6 flex flex-col gap-2\">\r\n <span className=\"flex items-center gap-3 text-[var(--accent-red)]\">\r\n <Zap className=\"w-8 h-8 md:w-10 md:h-10\" />\r\n Unleash\r\n </span>\r\n Visual Intelligence\r\n </h2>\r\n <p className=\"text-xl font-medium text-[var(--text-secondary)] leading-relaxed max-w-3xl\">\r\n The **Visual Domain Intelligence Scanner** by **VDESIGNU** is a cutting-edge OSINT tool designed for cybersecurity professionals. It transforms raw domain data into a **living network map**, revealing hidden structures that spreadsheets miss.\r\n </p>\r\n </div>\r\n </div>\r\n\r\n {/* Key Features Grid */}\r\n <div>\r\n <h3 className=\"text-3xl font-black italic uppercase tracking-tighter text-[var(--text-primary)] mb-8 flex items-center gap-3\">\r\n <Activity className=\"w-8 h-8 text-[var(--accent-red)]\" />\r\n Core Capabilities\r\n </h3>\r\n <div className=\"grid md:grid-cols-2 gap-6\">\r\n \r\n <div className=\"bg-[var(--bg-card)] p-6 rounded-2xl border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group\">\r\n <div className=\"w-12 h-12 bg-[var(--accent-red)]/10 text-[var(--accent-red)] rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n <Share2 className=\"w-6 h-6\" />\r\n </div>\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)] mb-2\">Interactive Topology</h4>\r\n <p className=\"text-base text-[var(--text-secondary)] font-medium\">\r\n Visualize infrastructure with our Structured Tree Graph. Zoom, pan, and dragging nodes to explore relationships between domains and IPs.\r\n </p>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-6 rounded-2xl border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group\">\r\n <div className=\"w-12 h-12 bg-[var(--accent-red)]/10 text-[var(--accent-red)] rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n <Globe className=\"w-6 h-6\" />\r\n </div>\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)] mb-2\">Global Server Map</h4>\r\n <p className=\"text-base text-[var(--text-secondary)] font-medium\">\r\n Pinpoint physical server locations with our 3D interactive world map. Identify hosting providers and geographical distribution instantly.\r\n </p>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-6 rounded-2xl border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group\">\r\n <div className=\"w-12 h-12 bg-[var(--accent-red)]/10 text-[var(--accent-red)] rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n <Search className=\"w-6 h-6\" />\r\n </div>\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)] mb-2\">Deep Enumeration</h4>\r\n <p className=\"text-base text-[var(--text-secondary)] font-medium\">\r\n Multi-layered scanning using CRT.sh logs, DNS brute-forcing, and archival data to uncover hidden and forgotten subdomains.\r\n </p>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-6 rounded-2xl border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group\">\r\n <div className=\"w-12 h-12 bg-[var(--accent-red)]/10 text-[var(--accent-red)] rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n <History className=\"w-6 h-6\" />\r\n </div>\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)] mb-2\">Time Travel</h4>\r\n <p className=\"text-base text-[var(--text-secondary)] font-medium\">\r\n Native **Wayback Machine** integration allows you to view historical snapshots and detect ghost files from the past.\r\n </p>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-6 rounded-2xl border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group md:col-span-2\">\r\n <div className=\"w-12 h-12 bg-[var(--accent-red)]/10 text-[var(--accent-red)] rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform\">\r\n <Shield className=\"w-6 h-6\" />\r\n </div>\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)] mb-2\">Proactive Security Scan</h4>\r\n <p className=\"text-base text-[var(--text-secondary)] font-medium\">\r\n Automatic detection of vulnerable JS libraries, exposed `.git` directories, missing SPF/DMARC records, and open directory listings.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Data Sources Table */}\r\n <div className=\"overflow-hidden rounded-2xl border border-[var(--border-subtle)]\">\r\n <div className=\"bg-[var(--bg-primary)] p-4 border-b border-[var(--border-subtle)] flex items-center gap-2\">\r\n <Database className=\"w-5 h-5 text-[var(--accent-red)]\" />\r\n <span className=\"font-bold text-[var(--text-primary)] uppercase tracking-wider text-sm\">Valid Intelligence Sources</span>\r\n </div>\r\n <div className=\"divide-y divide-[var(--border-subtle)] bg-[var(--bg-card)]\">\r\n {[\r\n { name: 'DNS Records', source: 'Google Public DNS', icon: Activity },\r\n { name: 'Subdomains', source: 'Certificate Transparency (CRT.sh)', icon: Search },\r\n { name: 'Archives', source: 'Internet Archive (Wayback Machine)', icon: History },\r\n { name: 'Geolocation', source: 'IPAPI Intelligence', icon: Globe },\r\n { name: 'Security', source: 'OWASP / CVE Databases', icon: Lock },\r\n ].map((item) => (\r\n <div className=\"p-4 flex items-center justify-between hover:bg-[var(--bg-secondary)] transition-colors\">\r\n <div className=\"flex items-center gap-3\">\r\n <item.icon className=\"w-4 h-4 text-[var(--text-muted)]\" />\r\n <span className=\"font-bold text-[var(--text-primary)] text-sm\">{item.name}</span>\r\n </div>\r\n <span className=\"text-xs font-mono text-[var(--text-secondary)] bg-[var(--bg-primary)] px-2 py-1 rounded\">\r\n {item.source}\r\n </span>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n\r\n {/* FAQ Section */}\r\n <div className=\"pt-12 border-t border-[var(--border-subtle)]\">\r\n <h3 className=\"text-4xl font-black italic uppercase tracking-tighter text-[var(--text-primary)] mb-12 text-center\">\r\n Common Questions\r\n </h3>\r\n \r\n <div className=\"grid md:grid-cols-2 gap-6\">\r\n <div className=\"bg-[var(--bg-card)] p-8 rounded-[2rem] border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group relative overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-[var(--accent-red)]/5 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-150\"></div>\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <Shield className=\"w-6 h-6 text-[var(--accent-red)]\" />\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)]\">Is this tool legal?</h4>\r\n </div>\r\n <p className=\"text-lg text-[var(--text-secondary)] leading-relaxed\">\r\n **Yes.** VDESIGNU tools perform passive reconnaissance using only public data (DNS, Archives, CT Logs). We do not perform active exploitation or hacking.\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-8 rounded-[2rem] border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group relative overflow-hidden\">\r\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-[var(--accent-red)]/5 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-150\"></div>\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <Activity className=\"w-6 h-6 text-[var(--accent-red)]\" />\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)]\">Why are IPs \"Pending\"?</h4>\r\n </div>\r\n <p className=\"text-lg text-[var(--text-secondary)] leading-relaxed\">\r\n Resolving hundreds of subdomains takes time. We batch-process DNS requests to avoid browser lag and API rate limits. Give it a moment to populate.\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <div className=\"bg-[var(--bg-card)] p-8 rounded-[2rem] border border-[var(--border-subtle)] hover:border-[var(--accent-red)] transition-all group relative overflow-hidden md:col-span-2\">\r\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-[var(--accent-red)]/5 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-150\"></div>\r\n <div className=\"relative z-10\">\r\n <div className=\"flex items-center gap-3 mb-4\">\r\n <Database className=\"w-6 h-6 text-[var(--accent-red)]\" />\r\n <h4 className=\"text-xl font-black italic uppercase tracking-tight text-[var(--text-primary)]\">Can I export reports?</h4>\r\n </div>\r\n <p className=\"text-lg text-[var(--text-secondary)] leading-relaxed\">\r\n **Absolutely.** Professional reporting is built-in. Use the export controls in the dashboard to generate JSON or CSV reports for your compliance needs.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Disclaimer */}\r\n <div className=\"bg-red-500/5 border border-red-500/20 rounded-xl p-6 flex gap-4\">\r\n <Shield className=\"w-6 h-6 text-red-500 flex-shrink-0\" />\r\n <p className=\"text-xs text-red-500/80 leading-relaxed font-mono\">\r\n <strong>DISCLAIMER:</strong> This tool is provided by VDESIGNU for educational and defensive diagnostic purposes only. We are not responsible for misuse. Always obtain permission before scanning infrastructure you do not own.\r\n </p>\r\n </div>\r\n\r\n</div>",
"filePath": "src/content/tools/domain-tools/domain-recon-scanner.mdx",
"digest": "482821d53b5264d3",
"deferredRender": true,
"collection": "tools",
"slug": "domain-tools/domain-recon-scanner"
},
{
"id": "image-tools/color-picker.mdx",
"data": {
"name": "Color Picker & Palette",
"description": "Identify colors from images or generate the perfect palette. Get HEX, RGB, and HSL codes instantly.",
"shortDescription": "Color Picker & Extractor",
"categoryId": "image-tools",
"tier": 1,
"icon": "Palette",
"keywords": [
"color picker",
"hex code",
"image color picker",
"color palette",
"css color"
],
"featured": true,
"instructions": [
"Use the color wheel to select a color manually.",
"OR Upload an image to extract colors from it.",
"Click anywhere on the uploaded image to sample the pixel color.",
"Copy the HEX code for your design project."
]
},
"body": "import ColorPicker from '../../../components/tools/image/ColorPicker';\r\n\r\n<ColorPicker client:load />\r\n\r\n## Master Your Colors\r\nWhether you are a web designer, artist, or developer, finding the exact color code is essential.\r\n\r\n### Features\r\n- **Image Color Extraction**: Upload any photo and click to find the exact color of a pixel. Perfect for matching brand colors from logos.\r\n- **Universal Formats**: Get the color code in **HEX** (Web), **RGB** (Screen), and HSL formats.\r\n- **Visual Palette**: See your color in a large preview to ensure it matches your vision.\r\n\r\n### Web Design Tips\r\n- **Contrast**: Ensure your text color has enough contrast against the background for accessibility (WCAG AA standard).\r\n- **Consistency**: Use a primary color and 2-3 accent colors to keep your design clean and professional.",
"filePath": "src/content/tools/image-tools/color-picker.mdx",
"digest": "750c430736b1375a",
"deferredRender": true,
"collection": "tools",
"slug": "image-tools/color-picker"
},
{
"id": "image-tools/image-compressor.mdx",
"data": {
"name": "Image Compressor",
"description": "Compress and optimize your JPG, PNG, and WebP images. Reduce file size by up to 80% without visible quality loss.",
"shortDescription": "Compress Images Online",
"categoryId": "image-tools",
"tier": 1,
"icon": "ImageDown",
"keywords": [
"image compressor",
"compress png",
"compress jpg",
"optimize images",
"reduce image size",
"tiny png alternative"
],
"featured": true,
"instructions": [
"Drag and drop your images into the upload zone.",
"Use the slider to adjust the compression quality (lower = smaller file).",
"Click 'Compress All' to start the optimization.",
"Download your optimized images individually."
]
},
"body": "import ImageCompressor from '../../../components/tools/image/ImageCompressor';\r\n\r\n<ImageCompressor client:load />\r\n\r\n## Why Compress Images?\r\nLarge images are the #1 reason for slow websites. Compressing your images is the easiest way to improve your PageSpeed score, SEO rankings, and user experience.\r\n\r\n### How It Works\r\nOur tool uses advanced browser-based compression algorithms to remove unnecessary metadata and optimize color profiles. \r\n- **No Server Uploads**: Your images never leave your device. Privacy is guaranteed.\r\n- **Smart Compression**: We balance quality and file size to ensure your images look sharp while loading fast.\r\n- **Bulk Processing**: Compress multiple files at once to save time.\r\n\r\n### Supported Formats\r\n- **JPG/JPEG**: Best for photographs and complex images.\r\n- **PNG**: Best for transparent images and screenshots.\r\n- **WebP**: The modern standard for web images, offering superior compression.",
"filePath": "src/content/tools/image-tools/image-compressor.mdx",
"digest": "766d4ea3f5d0abec",
"deferredRender": true,
"collection": "tools",
"slug": "image-tools/image-compressor"
},
{
"id": "image-tools/image-converter.mdx",
"data": {
"name": "Image Converter",
"description": "Convert your images to various formats (JPG, PNG, WebP) instantly. Free, secure, and client-side.",
"shortDescription": "Convert Types (JPG/PNG/WebP)",
"categoryId": "image-tools",
"tier": 1,
"icon": "FileOutput",
"keywords": [
"image converter",
"webp to jpg",
"png to jpg",
"jpg to png",
"convert image format"
],
"featured": true,
"instructions": [
"Upload the images you want to convert.",
"Select your desired output format (e.g., WebP).",
"Click 'Convert All' to process the batch.",
"Download the converted files to your device."
]
},
"body": "import ImageConverter from '../../../components/tools/image/ImageConverter';\r\n\r\n<ImageConverter client:load />\r\n\r\n## Intelligent Image Conversion\r\nNeed to change an image format? Our tool handles the most common conversions completely in your browser.\r\n\r\n### Use Cases\r\n- **Convert to WebP**: Reduce file size significantly for your website without quality loss.\r\n- **Convert to JPG**: The most compatible format for emails, documents, and printing.\r\n- **Convert to PNG**: Preserve transparency (alpha channel) for logos and graphics.\r\n\r\n### Privacy First\r\nUnlike other converters, we **never** upload your files to a server. The conversion happens locally on your device using your browser's processing power. This means your sensitive photos remain 100% private.",
"filePath": "src/content/tools/image-tools/image-converter.mdx",
"digest": "77738bdaedd8a274",
"deferredRender": true,
"collection": "tools",
"slug": "image-tools/image-converter"
},
{
"id": "image-tools/image-cropper.mdx",
"data": {
"name": "Image Cropper & Resizer",
"description": "Crop and resize your images to perfect dimensions for social media (Instagram, Twitter, LinkedIn) or web projects.",
"shortDescription": "Crop & Resize to Size",
"categoryId": "image-tools",
"tier": 1,
"icon": "Crop",
"keywords": [
"image cropper",
"resize image",
"crop photo",
"aspect ratio",
"instagram size"
],
"featured": true,
"instructions": [
"Upload your image to the editor.",
"Select a preset aspect ratio (Square, 16:9) or drag freely.",
"Position the crop box over the desired area.",
"Click 'Download Crop' to save the new image."
]
},
"body": "import ImageCropper from '../../../components/tools/image/ImageCropper';\r\n\r\n<ImageCropper client:load />\r\n\r\n## Perfect Crops Every Time\r\nDon't let bad framing ruin a great photo. Our Image Cropper helps you focus on the most important part of your image.\r\n\r\n### Preset Ratios\r\nWe include popular aspect ratios to make your life easier:\r\n- **Square (1:1)**: Perfect for Instagram posts and profile pictures.\r\n- **16:9**: The standard for YouTube thumbnails and video covers.\r\n- **4:3**: Classic photography ratio.\r\n- **Free**: Crop exactly how you want with no restrictions.\r\n\r\n### Why Use a Cropper?\r\n- **Composition**: Improve the visual balance of your photos utilizing the rule of thirds.\r\n- **Focus**: Remove distracting background elements.\r\n- **Standardization**: Ensure all images on your website or profile are uniform in size.",
"filePath": "src/content/tools/image-tools/image-cropper.mdx",
"digest": "5e060357056f6305",
"deferredRender": true,
"collection": "tools",
"slug": "image-tools/image-cropper"
},
{
"id": "local-seo/review-link-generator.mdx",
"data": {
"name": "Google Review Link Generator",
"description": "Create direct review links and QR codes for your Google Business Profile to encourage more customer feedback.",
"shortDescription": "Generate Google review links & QR codes",
"categoryId": "local-seo",
"tier": 1,
"icon": "Star",
"keywords": [
"google reviews",
"review link",
"qr code",
"customer reviews",
"gbp"
],
"featured": true,
"instructions": [
"Use the 'Find Your Place ID' helper to locate your business ID.",
"Copy the ID starting with 'ChIJ' or 'GhIJ'.",
"Paste it into the generator field below.",
"Click 'Generate' to create your official review link.",
"Download the QR code for your printed marketing materials."
]
},
"body": "import ReviewLinkGenerator from '../../../components/tools/local-seo/ReviewLinkGenerator';\r\n\r\n<ReviewLinkGenerator client:load />",
"filePath": "src/content/tools/local-seo/review-link-generator.mdx",
"digest": "23959027c075d406",
"deferredRender": true,
"collection": "tools",
"slug": "local-seo/review-link-generator"
},
{
"id": "math-network/discount-calculator.mdx",
"data": {
"name": "Discount Calculator",
"description": "Calculate final price after discount and tax. See exact savings instantly.",
"shortDescription": "Calculate Discount & Tax",
"categoryId": "math-network",
"tier": 1,
"icon": "Percent",
"keywords": [
"discount calculator",
"sale calculator",
"percentage off",
"tax calculator",
"price calculator"
],
"featured": false,
"instructions": [
"Enter the original price.",
"Set the discount percentage.",
"Optionally add a sales tax rate.",
"See the final price and total savings."
]
},
"body": "import DiscountCalculator from '../../../components/tools/math-network/DiscountCalculator';\r\n\r\n<DiscountCalculator client:load />\r\n\r\n## How to use\r\nPerfect for shopping sales or calculating saving. Simply input the tag price, select the discount (e.g. 20% off), and add your local tax rate if applicable to see exactly what you'll pay at the register.",
"filePath": "src/content/tools/math-network/discount-calculator.mdx",
"digest": "eaedb7c787daffb7",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/discount-calculator"
},
{
"id": "math-network/epoch-converter.mdx",
"data": {
"name": "Epoch Timestamp Converter",
"description": "Convert Unix Epoch timestamps to human-readable dates and vice versa. Supports local and UTC time.",
"shortDescription": "Unix Epoch Converter",
"categoryId": "math-network",
"tier": 1,
"icon": "Clock",
"keywords": [
"epoch converter",
"unix timestamp",
"date to epoch",
"epoch to date",
"time converter"
],
"featured": false,
"instructions": [
"Enter a timestamp to see the human-readable date.",
"Or select a date to get the epoch timestamp.",
"Copy the result instantly."
]
},
"body": "import EpochConverter from '../../../components/tools/math-network/EpochConverter';\r\n\r\n<EpochConverter client:load />\r\n\r\n## What is a Unix Timestamp?\r\nIt is the number of seconds that have elapsed since **January 1, 1970 (UTC)**. It is widely used in computing to track time regardless of timezones.",
"filePath": "src/content/tools/math-network/epoch-converter.mdx",
"digest": "463d824ca0536919",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/epoch-converter"
},
{
"id": "math-network/ip-address-lookup.mdx",
"data": {
"name": "IP Address Lookup",
"description": "Find the geolocation, ISP, and organization details of any public IP address.",
"shortDescription": "IP Geo Lookup",
"categoryId": "math-network",
"tier": 1,
"icon": "Globe",
"keywords": [
"ip lookup",
"ip geolocation",
"find my ip",
"whois ip",
"ip address details"
],
"featured": false,
"instructions": [
"Leave blank to search your own IP.",
"Enter an IPv4 or IPv6 address to lookup.",
"View location, map coordinates, and ISP info."
]
},
"body": "import IpAddressLookup from '../../../components/tools/math-network/IpAddressLookup';\r\n\r\n<IpAddressLookup client:load />\r\n\r\n## Data Source\r\nThis tool uses public APIs to resolve IP addresses to their physical location (approximate) and network owner (ASN).",
"filePath": "src/content/tools/math-network/ip-address-lookup.mdx",
"digest": "eb581b83c41ab917",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/ip-address-lookup"
},
{
"id": "math-network/ip-converter.mdx",
"data": {
"name": "IP to Binary Converter",
"description": "Convert IPv4 addresses to their binary representation and vice versa.",
"shortDescription": "IP <-> Binary",
"categoryId": "math-network",
"tier": 1,
"icon": "Binary",
"keywords": [
"ip to binary",
"binary to ip",
"ipv4 converter",
"network mask",
"binary notation"
],
"featured": false,
"instructions": [
"Type an IP address (e.g., 192.168.1.1) to see binary.",
"Or type binary (dots optional) to see the IP.",
"Copy the result."
]
},
"body": "import IpConverter from '../../../components/tools/math-network/IpConverter';\r\n\r\n<IpConverter client:load />\r\n\r\n## Understanding IP Binary\r\nEach IPv4 address consists of 4 octets, where each octet is a number from 0-255 represented by 8 bits. This tool helps network engineers visualize the bitwise structure of IP addresses for subnetting and masking tasks.",
"filePath": "src/content/tools/math-network/ip-converter.mdx",
"digest": "4aa8b3018f45c084",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/ip-converter"
},
{
"id": "math-network/subnet-calculator.mdx",
"data": {
"name": "Subnet Calculator",
"description": "Calculate network range, netmask, and broadcast address from an IP and CIDR.",
"shortDescription": "CIDR Calculator",
"categoryId": "math-network",
"tier": 1,
"icon": "Network",
"keywords": [
"subnet calculator",
"cidr calc",
"network mask",
"ip calculator",
"broadcast address"
],
"featured": false,
"instructions": [
"Enter an IP Address.",
"Adjust the slider to set the Subnet Mask (CIDR).",
"Instantly view the Network, Broadcast, and Host range."
]
},
"body": "import SubnetCalculator from '../../../components/tools/math-network/SubnetCalculator';\r\n\r\n<SubnetCalculator client:load />",
"filePath": "src/content/tools/math-network/subnet-calculator.mdx",
"digest": "af21c7096d64fd91",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/subnet-calculator"
},
{
"id": "math-network/unit-converter.mdx",
"data": {
"name": "Unit Converter",
"description": "Convert between various units of Length, Weight, and Temperature instantly.",
"shortDescription": "Convert Units",
"categoryId": "math-network",
"tier": 1,
"icon": "Scale",
"keywords": [
"unit converter",
"metric imperial",
"length converter",
"weight converter",
"temp converter"
],
"featured": false,
"instructions": [
"Select a category (Length, Weight, Temp).",
"Enter the value.",
"Choose 'From' and 'To' units.",
"See the result instantly."
]
},
"body": "import UnitConverter from '../../../components/tools/math-network/UnitConverter';\r\n\r\n<UnitConverter client:load />",
"filePath": "src/content/tools/math-network/unit-converter.mdx",
"digest": "dc25db5ea7ecae61",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/unit-converter"
},
{
"id": "math-network/scientific-calculator.mdx",
"data": {
"name": "Scientific Calculator",
"description": "Advanced scientific calculator with trigonometric, logarithmic, and exponential functions.",
"shortDescription": "Advanced Calculator",
"categoryId": "math-network",
"tier": 1,
"icon": "Calculator",
"keywords": [
"scientific calculator",
"math calculator",
"trigonometry",
"logarithm",
"online calculator"
],
"featured": false,
"instructions": [
"Enter your mathematical expression or use the keypad.",
"Use advanced functions like sin, cos, tan, log.",
"View history of past calculations.",
"Press '=' to solve."
]
},
"body": "import ScientificCalculator from '../../../components/tools/math-network/ScientificCalculator';\r\n\r\n<ScientificCalculator client:load />\r\n\r\n## Features\r\n- **Trigonometry**: Sine, Cosine, Tangent.\r\n- **Logarithms**: Log base 10 and Natural Log (ln).\r\n- **Constants**: Pi (π) and Euler's number (e).\r\n- **History**: Keeps track of your last 5 calculations.",
"filePath": "src/content/tools/math-network/scientific-calculator.mdx",
"digest": "569e28e45795e9c7",
"deferredRender": true,
"collection": "tools",
"slug": "math-network/scientific-calculator"
},
{
"id": "security-crypto/base64-encoder.mdx",
"data": {
"name": "Base64 Encoder/Decoder",
"description": "Securely encode text to Base64 format or decode Base64 strings back to plain text entirely in your browser.",
"shortDescription": "Base64 Encode/Decode",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Lock",
"keywords": [
"base64 encode",
"base64 decode",
"base64 converter",
"string to base64"
],
"featured": false,
"instructions": [
"Choose 'Encode' to convert text to Base64, or 'Decode' for the reverse.",
"Enter your text in the input box.",
"Click the button to process.",
"Copy the result."
]
},
"body": "import Base64Encoder from '../../../components/tools/security/Base64Encoder';\r\n\r\n<Base64Encoder client:load />\r\n\r\n## What is Base64?\r\nBase64 represents binary data in an ASCII string format by translating it into a radix-64 representation.\r\n\r\n### Common Uses\r\n- **Data URIs**: Embedding small images directly into CSS or HTML to reduce HTTP requests.\r\n- **Email Attachments**: MIME uses Base64 to transmit non-text attachments.\r\n- **APIs**: Sending binary data (like files) over JSON APIs.\r\n\r\n### Security Warning\r\nBase64 is **encoding**, not encryption. Someone with a decoder can easily read the original message. Do not use it to hide passwords or sensitive keys.",
"filePath": "src/content/tools/security-crypto/base64-encoder.mdx",
"digest": "b0d63a673f05a72c",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/base64-encoder"
},
{
"id": "security-crypto/hash-generator-sha256.mdx",
"data": {
"name": "SHA-256 Hash Generator",
"description": "Generate secure SHA-256 hashes. The industry standard for data security and blockchain technologies.",
"shortDescription": "Generate SHA-256",
"categoryId": "security-crypto",
"tier": 1,
"icon": "ShieldCheck",
"keywords": [
"sha256 generator",
"secure hash",
"crypto hash",
"bitcoin hash"
],
"featured": false,
"instructions": [
"Type your sensitive data or text.",
"Get the unique 64-character SHA-256 signature.",
"This is a one-way function; it cannot be reversed.",
"Copy the hash for your records."
]
},
"body": "import HashGenerator from '../../../components/tools/security/HashGenerator';\r\n\r\n<HashGenerator client:load defaultAlgo=\"SHA256\" />\r\n\r\n## About SHA-256\r\n**SHA-256** (Secure Hash Algorithm 256-bit) is a member of the SHA-2 family designed by the NSA. It is widely considered **secure**.\r\n\r\n### Use Cases\r\n- **Password Storage**: Often used with a \"salt\" to store user passwords.\r\n- **Digital Signatures**: Verifying authenticity of documents.\r\n- **Blockchain**: Bitcoin uses SHA-256 for proof-of-work.",
"filePath": "src/content/tools/security-crypto/hash-generator-sha256.mdx",
"digest": "3218677679705a9a",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/hash-generator-sha256"
},
{
"id": "security-crypto/html-entity-encoder.mdx",
"data": {
"name": "HTML Entity Encoder",
"description": "Convert special characters to their corresponding HTML entities to prevent XSS and ensure proper display.",
"shortDescription": "HTML Entities",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Code2",
"keywords": [
"html entities",
"escape html",
"xss prevention",
"character codes"
],
"featured": false,
"instructions": [
"Select the 'HTML Entities' tab.",
"Type text with special chars (<, >, &, \").",
"Click 'Encode' to generate safe HTML entities.",
"Click 'Decode' to revert entities back to text."
]
},
"body": "import UrlEntityEncoder from '../../../components/tools/security/UrlEntityEncoder';\r\n\r\n<UrlEntityEncoder client:load />\r\n\r\n## Why Escape HTML?\r\nIf you display user input directly on a webpage without encoding, you risk **Cross-Site Scripting (XSS)** attacks. Browsers might interpret `<script>` tags as actual code.\r\n\r\nEncoding converts:\r\n- `<` to `<`\r\n- `>` to `>`\r\n- `&` to `&`\r\n- `\"` to `"`\r\n\r\nThis ensures the browser treats the data as text, not code.",
"filePath": "src/content/tools/security-crypto/html-entity-encoder.mdx",
"digest": "d8c44942986fd73b",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/html-entity-encoder"
},
{
"id": "security-crypto/hash-generator-md5.mdx",
"data": {
"name": "MD5 Hash Generator",
"description": "Generate MD5 hash fingerprints for your text. Useful for checksums and data integrity verification.",
"shortDescription": "Generate MD5",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Hash",
"keywords": [
"md5 generator",
"md5 hash",
"checksum",
"hash calculator"
],
"featured": false,
"instructions": [
"Enter the text you want to hash.",
"The 32-character hexadecimal MD5 hash generates instantly.",
"Check the algorithm switcher if you need other formats.",
"Copy the result."
]
},
"body": "import HashGenerator from '../../../components/tools/security/HashGenerator';\r\n\r\n<HashGenerator client:load defaultAlgo=\"MD5\" />\r\n\r\n## About MD5\r\nThe **MD5 (Message-Digest Algorithm 5)** produces a 128-bit hash value.\r\n\r\n### Is it Secure?\r\n**No.** MD5 is cryptographically broken and vulnerable to collision attacks (where two different inputs produce the same hash).\r\n\r\n### When to use it?\r\n- **Checksums**: Verifying that a file hasn't been corrupted during download.\r\n- **Non-critical IDs**: Generating unique identifiers where security isn't paramount.\r\n- **Legacy Systems**: Interacting with older databases.",
"filePath": "src/content/tools/security-crypto/hash-generator-md5.mdx",
"digest": "259034c3335de877",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/hash-generator-md5"
},
{
"id": "security-crypto/password-generator.mdx",
"data": {
"name": "Strong Password Generator",
"description": "Generate cryptographically secure, random passwords. Customizable length and character sets for maximum security.",
"shortDescription": "Generate Passwords",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Unlock",
"keywords": [
"password generator",
"secure password",
"random password",
"password creator",
"strong password"
],
"featured": false,
"instructions": [
"Use the slider to set your desired password length (we recommend 16+).",
"Toggle Uppercase, Numbers, and Symbols on or off.",
"Click 'Regenerate' to create a new password.",
"Click 'Copy' to save it securely."
]
},
"body": "import PasswordGenerator from '../../../components/tools/security/PasswordGenerator';\r\n\r\n<PasswordGenerator client:load />\r\n\r\n## Security Tips\r\n- **Length Matters**: A 12-character password takes exponentially longer to crack than an 8-character one. Aim for at least 16 characters for critical accounts.\r\n- **Mix it Up**: Always use a mix of uppercase, lowercase, numbers, and symbols.\r\n- **Client-Side**: Our generator runs locally in your browser. No data is ever sent to our servers.",
"filePath": "src/content/tools/security-crypto/password-generator.mdx",
"digest": "eb13fc1f4f2772e1",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/password-generator"
},
{
"id": "security-crypto/url-encoder.mdx",
"data": {
"name": "URL Encoder / Decoder",
"description": "Encode special characters in URLs to valid percent-encoded format, or decode them back to readable text.",
"shortDescription": "URL Encode/Decode",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Globe",
"keywords": [
"url encoder",
"percent encoding",
"decode url",
"uri component"
],
"featured": false,
"instructions": [
"Select the 'URL Encoder' tab.",
"Enter a URL with special characters.",
"Click 'Encode' to convert spaces to %20, etc.",
"Click 'Decode' to revert to the original string."
]
},
"body": "import UrlEntityEncoder from '../../../components/tools/security/UrlEntityEncoder';\r\n\r\n<UrlEntityEncoder client:load />\r\n\r\n## URL Encoding Explained\r\nURLs can only contain a limited set of characters (ASCII alphanumeric). Special characters like spaces, question marks, and ampersands must be **encoded** so they don't break the URL structure.\r\n\r\n- **Space** -> `%20`\r\n- **/** -> `%2F`\r\n- **?** -> `%3F`\r\n\r\nThis tool uses the JavaScript `encodeURIComponent` function for reliable standard compliance.",
"filePath": "src/content/tools/security-crypto/url-encoder.mdx",
"digest": "d94031c54c818218",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/url-encoder"
},
{
"id": "security-crypto/uuid-generator.mdx",
"data": {
"name": "UUID / GUID Generator",
"description": "Generate Version 4 UUIDs (Universally Unique Identifiers) instantly. Bulk generation supported.",
"shortDescription": "Generate UUIDs",
"categoryId": "security-crypto",
"tier": 1,
"icon": "Fingerprint",
"keywords": [
"uuid generator",
"guid generator",
"v4 uuid",
"unique id",
"bulk uuid"
],
"featured": false,
"instructions": [
"Set the quantity of UUIDs you need.",
"Click 'Generate' to create the IDs.",
"Click 'Copy All' to paste them into your database or code.",
"Refresh to generate a new batch."
]
},
"body": "import UUIDGenerator from '../../../components/tools/security/UUIDGenerator';\r\n\r\n<UUIDGenerator client:load />\r\n\r\n## UUID vs GUID\r\nThey are essentially the same thing. **UUID** stands for Universally Unique Identifier, while **GUID** stands for Globally Unique Identifier (microsoft's terminology).\r\n\r\n### Version 4\r\nThis tool generates **Version 4** UUIDs, which are purely random.\r\nFormat: `xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`\r\n- The `4` indicates version 4.\r\n- The `y` is one of `8`, `9`, `A`, or `B`.",
"filePath": "src/content/tools/security-crypto/uuid-generator.mdx",
"digest": "62f2a2ac42fa5f98",
"deferredRender": true,
"collection": "tools",
"slug": "security-crypto/uuid-generator"
},
{
"id": "string-text/ascii-art-generator.mdx",
"data": {
"name": "ASCII Art Generator",
"description": "Convert text to large ASCII text banners using FIGlet library.",
"shortDescription": "Text to ASCII",
"categoryId": "string-text",
"tier": 1,
"icon": "Image",
"keywords": [
"ascii art",
"text banner",
"figlet",
"ascii text"
],
"featured": false,
"instructions": [
"Enter your text.",
"Select a font style (Standard, Ghost, etc.).",
"Copy the art block."
]
},
"body": "import ASCIIArtGenerator from '../../../components/tools/string/ASCIIArtGenerator';\r\n\r\n<ASCIIArtGenerator client:load />",
"filePath": "src/content/tools/string-text/ascii-art-generator.mdx",
"digest": "817447870e70d98e",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/ascii-art-generator"
},
{
"id": "string-text/case-converter.mdx",
"data": {
"name": "Case Converter",
"description": "Instantly convert text between Uppercase, Lowercase, Title Case, CamelCase, Snake_Case, and more. Perfect for coding and formatting.",
"shortDescription": "Convert text case styles",
"categoryId": "string-text",
"tier": 1,
"icon": "Baseline",
"keywords": [
"case converter",
"uppercase",
"lowercase",
"capitalization tool",
"camelcase generator"
],
"featured": false,
"instructions": [
"Enter the text you want to convert.",
"Select the desired format (e.g., UPPER CASE, Title Case).",
"The text will transform instantly.",
"Copy the result to your clipboard."
]
},
"body": "import CaseConverter from '../../../components/tools/string/CaseConverter';\r\n\r\n<CaseConverter client:load />\r\n\r\n## Available Transformations\r\nThis tool supports a wide variety of text cases used in programming, writing, and data entry.\r\n\r\n### Standard Formats\r\n- **UPPER CASE**: Converts all letters to capitals. Useful for headers or emphasis.\r\n- **lower case**: Converts all letters to small caps.\r\n- **Title Case**: Capitalizes the first letter of major words. Standard for headlines.\r\n- **Sentence case**: Capitalizes only the very first letter of the input.\r\n\r\n### Developer Formats\r\n- **camelCase**: Removes spaces and capitalizes each new word (except the first). Standard for JavaScript/Java variables.\r\n- **snake_case**: Replaces spaces with underscores. Common in Python and database field names.\r\n- **kebab-case**: Replaces spaces with dashes. Essential for URL slugs and CSS classes.",
"filePath": "src/content/tools/string-text/case-converter.mdx",
"digest": "c90b4180b4f5c3dd",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/case-converter"
},
{
"id": "string-text/lorem-ipsum-generator.mdx",
"data": {
"name": "Lorem Ipsum Generator",
"description": "Generate flexible Lorem Ipsum placeholder text for your UI designs, mockups, and layouts. Choose between paragraphs, sentences, or words.",
"shortDescription": "Generate placeholder text",
"categoryId": "string-text",
"tier": 1,
"icon": "FileText",
"keywords": [
"lorem ipsum",
"dummy text",
"placeholder text",
"latin generator",
"design filler"
],
"featured": false,
"instructions": [
"Choose the type of text: Paragraphs, Sentences, or Words.",
"Enter the quantity you need (e.g., 3 paragraphs).",
"Click 'Generate' to produce the text.",
"Copy the output for your project."
]
},
"body": "import LoremIpsumGenerator from '../../../components/tools/string/LoremIpsumGenerator';\r\n\r\n<LoremIpsumGenerator client:load />\r\n\r\n## What is Lorem Ipsum?\r\nLorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\r\n\r\n### Why do we use it?\r\nIt is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.\r\n\r\n### Modern Web Design\r\nIn modern web development, \"Lorem Ipsum\" is essential for:\r\n1. **Wireframing**: Filling layout containers to test responsiveness.\r\n2. **Typography**: Checking font weights, line-heights, and paragraph spacing.\r\n3. **Prototypes**: presenting visual concepts to clients without distraction.",
"filePath": "src/content/tools/string-text/lorem-ipsum-generator.mdx",
"digest": "1c686bd5580b5c18",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/lorem-ipsum-generator"
},
{
"id": "string-text/markdown-to-html.mdx",
"data": {
"name": "Markdown to HTML",
"description": "Convert valid Markdown syntax into raw HTML code securely.",
"shortDescription": "MD to HTML",
"categoryId": "string-text",
"tier": 1,
"icon": "FileCode",
"keywords": [
"markdown converter",
"md to html",
"parse markdown",
"github flavored markdown"
],
"featured": false,
"instructions": [
"Type Markdown on the left.",
"See the HTML preview and source code on the right."
]
},
"body": "import MarkdownToHTML from '../../../components/tools/string/MarkdownToHTML';\r\n\r\n<MarkdownToHTML client:load />",
"filePath": "src/content/tools/string-text/markdown-to-html.mdx",
"digest": "0eba9e2d3a462019",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/markdown-to-html"
},
{
"id": "string-text/remove-duplicate-lines.mdx",
"data": {
"name": "Remove Duplicate Lines",
"description": "Cleanup lists, emails, or data by removing duplicate lines instantly.",
"shortDescription": "Deduplicate Lines",
"categoryId": "string-text",
"tier": 1,
"icon": "ListX",
"keywords": [
"remove duplicates",
"unique lines",
"deduper",
"list cleaner"
],
"featured": false,
"instructions": [
"Paste your list into the input box.",
"Click 'Remove Duplicates'.",
"Copy the unique list."
]
},
"body": "import RemoveDuplicateLines from '../../../components/tools/string/RemoveDuplicateLines';\r\n\r\n<RemoveDuplicateLines client:load />\r\n\r\n## How it works\r\nThis tool scans your text line by line and keeps only the first occurrence of each unique line. It is case-sensitive (e.g., \"Apple\" and \"apple\" are considered different).",
"filePath": "src/content/tools/string-text/remove-duplicate-lines.mdx",
"digest": "63e077abdbb6648c",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/remove-duplicate-lines"
},
{
"id": "string-text/slug-generator.mdx",
"data": {
"name": "Slug Generator",
"description": "Turn titles into SEO-friendly URL slugs. Removes special characters and creates hyphens.",
"shortDescription": "URL Slug Creator",
"categoryId": "string-text",
"tier": 1,
"icon": "Link",
"keywords": [
"slug generator",
"url slug",
"clean url",
"hyphenate title"
],
"featured": false,
"instructions": [
"Type your post title or string.",
"The tool converts it to lowercase, removes specials, and adds hyphens.",
"Copy the valid URL slug."
]
},
"body": "import SlugGenerator from '../../../components/tools/string/SlugGenerator';\r\n\r\n<SlugGenerator client:load />\r\n\r\n## What is a Slug?\r\nA slug is the part of a URL that identifies a particular page on a website in a form readable by users.\r\nExample: `My Blog Post!` -> `my-blog-post`",
"filePath": "src/content/tools/string-text/slug-generator.mdx",
"digest": "a09436acaee0355e",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/slug-generator"
},
{
"id": "string-text/string-reverser.mdx",
"data": {
"name": "String Reverser",
"description": "Reverse text, words, or letters. Flip your string backwards.",
"shortDescription": "Reverse Text",
"categoryId": "string-text",
"tier": 1,
"icon": "Rewind",
"keywords": [
"reverse text",
"backwards text",
"mirror text",
"flip string"
],
"featured": false,
"instructions": [
"Enter text to reverse.",
"Select 'Reverse Characters' or 'Reverse Words'.",
"The result updates instantly."
]
},
"body": "import StringReverser from '../../../components/tools/string/StringReverser';\r\n\r\n<StringReverser client:load />",
"filePath": "src/content/tools/string-text/string-reverser.mdx",
"digest": "9ac31f93c072cb25",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/string-reverser"
},
{
"id": "string-text/text-diff-checker.mdx",
"data": {
"name": "Text Diff Checker",
"description": "Compare two text blocks to find the differences. Highlights additions and removals.",
"shortDescription": "Diff Checker",
"categoryId": "string-text",
"tier": 1,
"icon": "Diff",
"keywords": [
"diff checker",
"text compare",
"difference finder",
"text changes"
],
"featured": false,
"instructions": [
"Paste Original Text on the left.",
"Paste Modified Text on the right.",
"Click Compare.",
"See added (Green) and removed (Red) text."
]
},
"body": "import TextDiff from '../../../components/tools/string/TextDiff';\r\n\r\n<TextDiff client:load />\r\n\r\n## Use Cases\r\n- **Code Review**: Quickly compare two snippets of code.\r\n- **Content Editing**: See what changes an editor made to your draft.\r\n- **Config Comparison**: Check differences between two configuration files.",
"filePath": "src/content/tools/string-text/text-diff-checker.mdx",
"digest": "e3d5cb7c02be387b",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/text-diff-checker"
},
{
"id": "string-text/text-replacement-tool.mdx",
"data": {
"name": "Text Replacement Tool",
"description": "Find and replace text/strings. Supports Regular Expressions (Regex) for advanced patterns.",
"shortDescription": "Find & Replace",
"categoryId": "string-text",
"tier": 1,
"icon": "Replace",
"keywords": [
"find and replace",
"regex replace",
"text substitution",
"string replace"
],
"featured": false,
"instructions": [
"Enter the main text.",
"Enter the 'Find' term and 'Replace' term.",
"Toggle 'Use Regex' for advanced matching.",
"Click Replace."
]
},
"body": "import TextReplacement from '../../../components/tools/string/TextReplacement';\r\n\r\n<TextReplacement client:load />",
"filePath": "src/content/tools/string-text/text-replacement-tool.mdx",
"digest": "172ea1fa15eb34eb",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/text-replacement-tool"
},
{
"id": "string-text/unicode-detector.mdx",
"data": {
"name": "Unicode Character Detector",
"description": "Inspect text to reveal Unicode code points, hex values, and invisible characters.",
"shortDescription": "Unicode Inspector",
"categoryId": "string-text",
"tier": 1,
"icon": "Info",
"keywords": [
"unicode inspector",
"character code",
"ascii value",
"emoji breakdown"
],
"featured": false,
"instructions": [
"Paste text to inspect.",
"The tool breaks it down character by character.",
"See the implementation code (U+XXXX) for each symbol."
]
},
"body": "import UnicodeDetector from '../../../components/tools/string/UnicodeDetector';\r\n\r\n<UnicodeDetector client:load />",
"filePath": "src/content/tools/string-text/unicode-detector.mdx",
"digest": "16236f1ed2088650",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/unicode-detector"
},
{
"id": "string-text/word-counter.mdx",
"data": {
"name": "Word & Character Counter",
"description": "A real-time word counting tool that also tracks characters, sentences, paragraphs, and reading time. Essential for writers and SEOs.",
"shortDescription": "Count words, characters & reading time",
"categoryId": "string-text",
"tier": 1,
"icon": "Type",
"keywords": [
"word counter",
"character count",
"sentence counter",
"reading time calculator",
"text statistics"
],
"featured": true,
"instructions": [
"Type or paste your text into the input area.",
"Watch the statistics update instantly in the dashboard.",
"Check 'No Spaces' count for specific platform requirements.",
"Use the 'Copy Stats' button to save the report."
]
},
"body": "import WordCounter from '../../../components/tools/string/WordCounter';\r\n\r\n<WordCounter client:load />\r\n\r\n## Why Use a Word Counter?\r\nWriting for the web requires precision. Whether you are crafting a tweet (280 characters), a meta description (160 characters), or a blog post (1500+ words), knowing your exact text length is crucial.\r\n\r\n### Key Features\r\n- **Real-time Analysis**: No need to click a button; stats update as you type.\r\n- **Reading Time**: Estimates how long it takes an average reader to consume your content.\r\n- **Detailed Metrics**: Tracks paragraphs and sentences to help distinct between dense and readable copy.\r\n- **Privacy Focused**: Your text is processed entirely in your browser. No data is sent to our servers.\r\n\r\n### SEO Best Practices\r\nFor optimal SEO, we recommend blog posts be at least **300 words**, with **1,500-2,500 words** being the sweet spot for ranking on competitive keywords.",
"filePath": "src/content/tools/string-text/word-counter.mdx",
"digest": "7c0e2a0fd0917658",
"deferredRender": true,
"collection": "tools",
"slug": "string-text/word-counter"
}
]