User Guide
Dashboard
JSON Formatter
SQL Formatter
UUID Generator
ULID Generator
Password Generator
API Key Generator
URL Encoder
UNIX Timestamp Converter
IP/CIDR Calculator
Text Diff
SVG Viewer
Color Palette
Privacy Policy

Help

User Guide

This page provides an overview, usage guide, and specifications for all tools offered by devTools.

SQL Formatter

Overview

The SQL formatter is an online tool that formats and beautifies hard-to-read SQL queries. It aligns keywords such as JOIN, WHERE, and GROUP BY with proper indentation, streamlining code reviews and documentation.

How to Use

  1. Paste your SQL query into the text area.
  2. Select the number of spaces in the Indentation field.
  3. Select the formatting method in Mode: Standard Format / Right-aligned/Tabular / Minify.
  4. Select Uppercase / Lowercase / Preserve in Keywords and Identifiers.
  5. Click the Format button to see the formatted result.

Specifications & Glossary

  • Mode: Formatting method selection
    • Standard Format: Adds line breaks and indentation for readability.
    • Right-aligned/Tabular: Aligns keywords right-justified in tabular form, stacking SQL keywords vertically.
    • Minify: Removes line breaks and extra spaces, compressing to a single line.
  • Keywords: SQL keyword upper/lower conversion
    • Uppercase: Converts all SQL keywords such as SELECT and FROM to uppercase.
    • Lowercase: Converts all SQL keywords to lowercase.
    • Preserve: Preserves the original casing of the input.
  • Identifiers: Converts the case of table names and column names. You can select from Uppercase / Lowercase / Preserve.
  • Indentation: Sets the number of spaces used for indentation in the output SQL (e.g., 2 spaces, 4 spaces).

Use Cases

  • Organizing SQL before code reviews to improve readability.
  • Debugging and analyzing queries auto-generated by ORMs.
  • Creating formatted SQL snippets for documentation.

JSON Formatter

Overview

The JSON formatter is an online tool that automatically formats and beautifies hard-to-read JSON strings. It supports indentation adjustment and minification (compression), streamlining debugging and inspection of API responses and configuration files.

How to Use

  1. Paste the JSON text into the text area.
  2. Select the formatting method in Mode: Format / Minify.
  3. Select the number of spaces in Indentation.
  4. Click the Format button to see the result.
  5. Use the clipboard copy button to copy the formatted JSON.

Specifications & Glossary

  • JSON (JavaScript Object Notation): A lightweight data exchange format. Human-readable and machine-readable, it is widely used for REST API requests/responses and configuration files. Standardized by RFC 8259 / ECMA-404.
  • Format mode: Adds indentation and line breaks to make JSON easy to read. Nested objects and arrays are displayed in a hierarchical structure.
  • Minify mode: Removes all line breaks and spaces to compress JSON into a single line. Useful for reducing network transfer size or when using JSON as an HTTP request body.
  • Indentation: Sets the number of spaces to use in format mode (e.g., 2 spaces, 4 spaces). Select according to your team's coding style.
  • Validation: An error message is displayed when the input JSON is invalid (syntax error). Keys must be enclosed in double quotes, and trailing commas are not allowed.

Use the "Copy" button to copy the formatted JSON to the clipboard.

  • Use Cases
  • Formatting and debugging API responses for readability.
  • Reviewing and editing configuration files such as package.json and tsconfig.json.

API Key Generator

Overview

The API key generator is an online tool for generating secure API keys. It supports three formats — Base62, hexadecimal, and UUID v4 — and can generate API keys with optional prefixes in bulk.

How to Use

  1. Select the format in Format: Base62 / Hex / UUID v4.
  2. Specify the key length in Length (for Base62 and Hex formats).
  3. Set the prefix string in Prefix (optional).
  4. Specify the generation count in Count.
  5. Click the "Generate" button.

Specifications & Glossary

  • Base62 Format: Uses 62 characters [0-9A-Za-z]. URL-safe and achieves high entropy; adopted by many services such as Stripe.
  • Hex Format: Uses 16 hexadecimal characters [0-9a-f]. Highly compatible with cryptographic libraries and easy to combine with hash functions such as SHA-256.
  • UUID v4 Format: Generates in RFC 4122-compliant UUID v4 format (xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx). Standard format with high compatibility with existing systems.
  • Prefix: Adding prefixes such as sk_, pk_, or api_ makes it easy to identify the purpose and permissions of a key (e.g., OpenAI's sk-... format).
  • Entropy & Security: A 32-character Base62 key has approximately 190 bits of entropy, providing extremely high resistance against brute-force attacks.

Use Cases

  • Generating authentication tokens and API keys for REST APIs.
  • Generating webhook secrets.
  • Issuing customer API keys for multi-tenant SaaS applications.

Password Generator

Overview

The password generator is an online tool for generating secure random passwords in bulk. You can customize the character set, length, and count, making it useful for everything from system setup by engineers to setting initial passwords for end users.

How to Use

  1. Select the character type in Characters: Alphanumeric + Symbols / Alphanumeric / Lowercase + Digits / Digits Only.
  2. Specify the password length in Length.
  3. Specify the number of passwords to generate in Count.
  4. Enable the Exclude Similar Characters toggle if needed.
  5. Click the "Generate" button.

Specifications & Glossary

  • Alphanumeric + Symbols: The most secure character set including uppercase, lowercase, digits, and symbols.
  • Alphanumeric: Uppercase, lowercase, and digits only (for systems that do not allow symbols).
  • Lowercase + Digits: Lowercase letters and digits only (for readability-focused or URL-safe use cases).
  • Digits Only: Digits only (PIN codes, numeric OTPs, etc.).
  • Exclude Similar Characters: Excludes visually similar characters such as 0 and O, 1 and l, and I and |. Helps prevent misreading in printed materials or verbal communication.
  • Password strength (entropy): Strength is evaluated in bits of entropy. The more character types and the longer the length, the exponentially higher the computational cost to crack. 80 bits or more is generally recommended.

Use Cases

  • Generating initial passwords for new users in bulk.
  • Generating API secrets and encryption keys.
  • Creating dummy passwords for testing.

Color Palette

Overview

The color palette tool automatically generates Material Design-like color shade palettes from input HEX color codes. It supports two modes: a comparison mode and a shade generation mode.

How to Use

  1. Select Compare or Shades mode.
  2. Enter one or more HEX color codes (e.g., #3490DC).
  3. Click the "Generate" button.
  4. Click on a color code to copy it.

Specifications & Glossary

  • Compare mode: Displays multiple colors side by side for comparison. Shows shades (50–900) horizontally for each color, allowing you to see the tone differences between colors.
  • Shades mode: Displays a detailed shade palette for a single color. Lets you view all shades of the selected color at a glance.
  • Shade steps: 10 levels — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 — based on Material Design conventions. Lower numbers are lighter; higher numbers are darker.
  • Shade generation algorithm: The input color is treated as the 500 step. Lighter colors (50–400) are generated by linear interpolation with white; darker colors (600–900) by linear interpolation with black. For example, step 50 mixes 90% white, and step 900 mixes 60% black.
  • WCAG contrast ratio: The text color (black or white) for each shade is automatically selected based on the relative luminance formula L = 0.2126R + 0.7152G + 0.0722B, following WCAG accessibility guidelines.
  • HEX color codes: Both 3-digit (#RGB) and 6-digit (#RRGGBB) formats are supported, with or without the # prefix.

Use Cases

  • Designing color systems for Material Design or Tailwind CSS.
  • Automatically generating shade palettes from brand colors.
  • Selecting and verifying colors for accessibility (WCAG) compliance.

UUID Generator

Overview

The UUID generator is an online tool for generating Universally Unique Identifiers (UUIDs) compliant with RFC 4122 (RFC 9562). It supports three versions — v1, v4, and v7 — and can generate up to 100 UUIDs at once.

How to Use

  1. Select the UUID version (v1 / v4 / v7).
  2. Specify the count in Number of UUIDs (up to 1,000).
  3. Click the "Generate" button.
  4. Copy and use the generated UUID list.

Specifications & Glossary

  • Format: A UUID is a 128-bit identifier in the format xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx (M = version number, N = variant bits).
  • UUID v1: Generated from a 60-bit timestamp combined with a MAC address or random value. Easy to sort chronologically, but may contain machine information.
  • UUID v4: Generated with 122 fully random bits. Most widely used, highly privacy-safe, with an astronomically low collision probability (2 to the power of 122 combinations).
  • UUID v7: Composed of a 48-bit Unix timestamp (millisecond precision) plus random bits. The latest specification defined in RFC 9562, it supports chronological sorting while offering the same randomness as v4. Advantageous for improving DB index efficiency.
  • Collision probability: For UUID v4, even after generating 10 trillion UUIDs, the collision probability is below 0.00000001%. Duplicates are negligible in practice.

Use Cases

  • Generating primary keys and record IDs for databases.
  • Generating session IDs and request trace IDs for distributed systems.
  • Uniquifying filenames and using as correlation IDs between microservices.

ULID Generator

Overview

The ULID generator is an online tool for generating Universally Unique Lexicographically Sortable Identifiers (ULIDs). As an alternative to UUID, it generates unique identifiers that are sortable by time in bulk.

How to Use

  1. Specify the number of ULIDs to generate.
  2. Set the base time in Base datetime - Timestamp (default is the current time).
  3. Enable Increase monotonically if you want values to increase within the same millisecond.
  4. Click the "Generate" button.

Specifications & Glossary

  • ULID specification: 128 bits = 48-bit timestamp (millisecond precision) + 80-bit random value. Encoded as a 26-character string using Crockford's Base32 (e.g., 01ARZ3NDEKTSV4RRFFQ69G5FAV).
  • Lexicographic sorting: The first 10 characters of a ULID represent the time, so lexicographic (string comparison) sorting is equivalent to chronological sorting. This improves index locality in databases.
  • Increase monotonically feature: When generating multiple ULIDs within the same millisecond, the random portion is incremented to guarantee monotonically increasing values. Use when strict ordering of events is required.
  • Comparison with UUID: UUID v4 has no chronological meaning in lexicographic order, but ULID's lexicographic order equals chronological order. Especially effective for clustered indexes in RDBMSes.
  • Crockford's Base32: Uses a 32-character set excluding I, L, O, and U, eliminating visually confusing characters for a more human-readable format.

Use Cases

  • Generating chronologically ordered log IDs and event IDs.
  • Using as primary keys in RDBMSes to improve index efficiency.
  • Using as unique identifiers for filenames and temporary tokens.

UNIX Timestamp Converter

Overview

The UNIX timestamp converter is an online tool for converting between UNIX timestamps (epoch time) and human-readable date/time representations. It supports second and millisecond timestamps and can display times in multiple formats (ISO 8601, RFC 2822, etc.) and timezones.

How to Use

  1. Select To Date/Time or To UNIX Timestamp from the Conversion Mode field.
  2. For Timestamp → DateTime: Enter a UNIX timestamp (in seconds or milliseconds).
  3. For DateTime → Timestamp: Enter a date and time.
  4. Select a timezone in IANA format (e.g., Asia/Tokyo).
  5. Click the "Convert" button.

Specifications & Glossary

  • UNIX timestamp: The number of seconds elapsed since January 1, 1970 00:00:00 UTC (the Unix epoch). With a 32-bit integer, the "Year 2038 Problem" occurs when the value overflows on January 19, 2038 at 03:14:07 UTC.
  • Timestamp (seconds): A 10-digit number obtained with Math.floor(Date.now() / 1000).
  • Timestamp (milliseconds): A 13-digit number obtained with Date.now(). Widely used in JavaScript and Java.
  • ISO 8601: An international standard date/time notation in the format 2024-01-15T12:30:00+09:00, which explicitly includes the timezone offset.
  • RFC 2822: A date notation used in email Date: headers in the format Mon, 15 Jan 2024 12:30:00 +0900.
  • IANA timezone: Standard timezone identifiers such as Asia/Tokyo and America/New_York. Daylight saving time (DST) is automatically accounted for.

Use Cases

  • Converting UNIX timestamps in API responses to human-readable date/time.
  • Analyzing timestamps in log files.
  • Converting and comparing times across different timezones.

URL Encode / Decode Tool

Overview

The URL encode/decode tool is an online tool for converting characters that cannot be used in URLs to %XX format (encoding), or performing the reverse conversion (decoding). It supports two JavaScript methods: encodeURI and encodeURIComponent.

How to Use

  1. Enter the string you want to convert in String to convert.
  2. Select Encode or Decode from the Mode field.
  3. When Convert all URL symbols (e.g. / and ?) as well is on, the behavior is equivalent to encodeURIComponent (all symbols encoded); when off, it is equivalent to encodeURI (URL structural characters preserved).
  4. Click the "Convert" button.

Specifications & Glossary

  • encodeURI: Does not encode characters that are valid in a URL (scheme http://, path separator /, query characters ?, =, &, etc.). Use when passing the entire URL.
  • encodeURIComponent: Encodes all characters except A-Z a-z 0-9 - _ . ! ~ * ' ( ). Use when passing a part of a URL, such as a query parameter value.
  • Percent encoding: Each character is encoded in UTF-8, and each byte is represented as %XX (where XX is a hexadecimal number), for example: "あ" → %E3%81%82.
  • Decoding: Supports decodeURI and decodeURIComponent to restore encoded strings back to their original text.
  • Difference between encodeURI and encodeURIComponent: encodeURI does not encode URL structural characters such as :, /, ?, and #, while encodeURIComponent encodes all of them.

Use Cases

  • Including Japanese or special characters in API request query parameters.
  • Converting form data to a URL-safe format.
  • Decoding the content of encoded URLs displayed in the browser address bar.

Text Diff Tool

Overview

The text diff tool is an online tool that visualizes differences between two texts side by side. It highlights additions, deletions, and changes line by line, making it easy to review differences in code and documents.

How to Use

  1. Enter the original text (before changes) in the Original Text area.
  2. Enter the modified text in the Modified Text area.
  3. Click the "Compare" button to highlight the differences.
  4. To reset the input, use the clear button.

Specifications & Glossary

  • Diff algorithm (LCS): Uses an LCS (Longest Common Subsequence)-based diff algorithm. It finds the longest common subsequence between two sequences to identify additions and deletions.
  • Line-by-line diff: Compares text on a line-by-line basis and identifies changed lines. Displays each line's changes alongside the original.
  • Highlight color meanings: Green indicates lines added in the modified text; red indicates lines deleted from the original.
  • Side-by-side display: Displays original and modified text in parallel so changes in corresponding lines are immediately visible. Unlike unified diff (---/+++ format), you can see both before and after simultaneously.
  • Diff result structure: For each line, the original text, modified text, and highlight information are generated. Four states are identified: unchanged, added, deleted, and modified.

Use Cases

  • Reviewing changes before a code review.
  • Comparing configuration file versions.
  • Proofreading documents and tracking revisions.

SVG Viewer

Overview

The SVG viewer is an online tool for real-time previewing of SVG code and converting it to PNG images. You can adjust canvas size, background color, scale, and offset while previewing, then download as PNG.

How to Use

  1. Paste the SVG code into the SVG Code area or select a sample.
  2. Set the canvas Width and Height (in pixels) under Canvas Settings.
  3. Specify a Background Color, or enable Transparent Background.
  4. Adjust Scale and X Offset / Y Offset (drawing position offsets) under SVG Settings.
  5. Preview the result and click Download as PNG to save the image.

Specifications & Glossary

  • SVG (Scalable Vector Graphics): An XML-based vector image format (W3C standard). Because shapes are defined mathematically, images remain sharp at any size, independent of resolution.
  • PNG conversion mechanism: Uses the browser's Canvas API to rasterize SVG. Renders the SVG to a Canvas with drawImage(), then converts it to PNG data with toDataURL('image/png').
  • Scale: The zoom factor for rendering SVG. The default is 100%, and you can output at 200% for Retina displays.
  • X Offset / Y Offset: The number of pixels to shift the SVG drawing position in the X and Y directions. Used to adjust the placement within the canvas.
  • Transparent background: Since PNG supports an alpha channel (transparency), icons and logos can be output with a transparent background.
  • Canvas size: Determines the pixel dimensions of the output PNG. Default is 256×256 pixels.

Use Cases

  • Converting SVG icons created in design tools to PNG.
  • Creating and verifying assets such as OGP images and favicons.
  • Previewing and debugging SVG paths and animations.

IP/CIDR Calculator

Overview

The IP/CIDR calculator is an online tool that calculates network information from an IP address and CIDR notation. It supports both IPv4 and IPv6, and computes subnet mask, network address, usable host count, binary representation, and more.

How to Use

  1. Select the protocol (IPv4 / IPv6).
  2. Enter an IP address (e.g., 192.168.1.100).
  3. Specify the prefix length in CIDR (e.g., 24).
  4. Click the Generate button.

Specifications & Glossary

  • CIDR (Classless Inter-Domain Routing): A notation that combines an IP address with a subnet prefix length using a slash (e.g., 192.168.1.0/24). It replaces classful addressing (Class A/B/C) and enables flexible IP range allocation.
  • Subnet mask: A bitmask that separates the network portion from the host portion. /24 corresponds to 255.255.255.0.
  • Network address: The first address in the subnet (all host bits set to 0). Used as the routing destination.
  • Broadcast address: The last address in the subnet (all host bits set to 1). Does not exist in IPv6.
  • Usable host count: Calculated as 2^(host bits) - 2 (excluding network address and broadcast).
  • IPv4 vs IPv6: IPv4 uses 32 bits (4 octets, dot-decimal notation); IPv6 uses 128 bits (8 groups of hex digits, colon-separated).
  • Binary representation: Displays the IP address as a bit string so you can visually confirm the boundary between the network and host portions.

Use Cases

  • Designing subnets for VPCs or on-premises networks.
  • Verifying and validating IP ranges for firewall rules.
  • Calculating CIDR blocks for network design on AWS, GCP, or Azure.