How to use every tool in DevsToolHub, one by one — 52 tools across 13 categories.
A dual-panel JSON workspace for formatting, repairing, querying, and validating JSON — with four ways to view your data and a built-in compare mode.
Keyboard shortcuts: ⌘/Ctrl+Shift+F formats both panels, ⌘/Ctrl+Shift+M compacts both, and ⌘/Ctrl+Shift+D toggles compare mode. The center strip doubles as a drag handle to resize the two panels.
Compares two JSON documents field by field and shows exactly what was added, removed, or changed, including inside nested objects and arrays.
If you need a side-by-side editable view instead of a read-only diff tree, use the JSON Editor's built-in Compare mode — it lets you edit both sides and copy values across while diffing.
Line-by-line and inline diff viewer for plain text or source code, with syntax highlighting for common languages.
The diff viewer supports ignoring whitespace/case, collapsing unchanged context, and exporting the result as a .patch file — look for those controls inside the diff view itself.
Visually compares two images side by side, as a blended overlay, or as a pixel-level difference highlight — useful for catching UI regressions or asset changes.
If the two images are different sizes, Diff Highlight compares only the overlapping region and shows a warning — crop or resize to matching dimensions first for a fully accurate comparison.
Compares two spreadsheets (.xlsx, .xls, or .csv) sheet by sheet and cell by cell, highlighting added, removed, and changed rows.
Rows are matched by position, not by a key column — if rows were inserted or deleted in the middle of the sheet, everything after that point will show as changed. Sort both files by a stable key column before comparing for the cleanest results.
Extracts text from Word documents or plain text files and runs a line-level diff, so you can review edits between two versions of a document.
PDF text extraction is not supported in-browser — for PDFs, copy the text out and paste it directly into the "Extracted text" box instead of uploading the file.
Converts data between JSON, YAML, XML, CSV, and TOML formats — pick a source and target format and convert in one click.
Not every format pair converts directly — check the "Supported" row at the bottom of the page for the full list of valid conversions (e.g. CSV ↔ XML is supported, but some combinations route through JSON internally).
Generates strongly-typed model definitions — interfaces, structs, classes, or schemas — in ten languages directly from a JSON sample.
Each language produces idiomatic output for that ecosystem — e.g. Go gets json struct tags, Java gets Jackson @JsonProperty annotations, Kotlin gets Gson @SerializedName, and Zod gives you both a runtime schema and an inferred TypeScript type in one file.
One-click code transforms for common frontend chores: HTML to JSX, SVG to a React component, CSS to a JS style object, and Markdown to HTML.
SVG → JSX wraps the output in a full React functional component with a `props` spread, ready to drop into a component file — not just an attribute-converted SVG string. HTML → JSX also converts inline style="" attributes into JSX style={{ }} objects automatically.
Converts Word .docx files into text-searchable PDFs entirely in your browser — no upload, no account, no server round-trip.
This tool re-renders text into a fresh PDF layout rather than preserving the original page design — complex layouts, embedded images, tables, and custom fonts may not carry over exactly. Check the yellow warnings under each converted file for what was dropped.
Batch-converts images between PNG, JPG, and WebP formats in the browser, with adjustable quality for lossy formats.
Converting to JPG flattens transparency onto a white background since JPG has no alpha channel — use PNG or WebP output if you need to preserve transparent pixels.
A lightweight HTTP client for testing API endpoints directly from the browser — set headers, query params, and a request body, then inspect the response.
Requests run directly from your browser, so they're subject to CORS — if a request fails with "Failed to fetch," the target server likely needs to allow cross-origin requests, not that the endpoint is down. Click Cancel (in place of Send) to abort an in-flight request.
Lets you annotate specific lines of code with the business or technical reasoning behind them — the "why," not the "what" — so context survives past the original author.
Everything is saved automatically to your browser's local storage as you type, so you won't lose annotations on refresh — but it's local to that browser. Use Export or Share URL if you need to hand the annotated project to someone else or back it up.
Converts text to and from Base64 — useful for embedding data in JSON or URLs, or decoding Base64 payloads you find in API responses, JWTs, or Basic Auth headers.
Invalid input (for example, decoding text that isn’t valid Base64) shows "Invalid input" in the output instead of throwing an error — so a garbled result usually just means you’re on the wrong tab.
Percent-encodes or decodes text so it’s safe to use inside a URL — handy for building query strings by hand or making sense of an encoded parameter copied from a browser address bar.
This uses encodeURIComponent/decodeURIComponent, so it escapes everything including `&`, `?`, and `/` — pair it with the Regex Tester if you need to encode only specific parts of a longer URL rather than the whole string.
Tests a regular expression against sample text with live match highlighting, capture-group inspection, and find-and-replace preview — for building and debugging a pattern before dropping it into code.
Matching is capped at 100ms — if your pattern is catastrophically backtracking against the given text, the tool reports "Timed out — pattern too slow" instead of freezing the tab.
Pick or type a color and instantly see it as HEX, RGB, HSL, and OKLCH, along with generated tints/shades and WCAG contrast ratios against black and white — for choosing accessible color palettes.
The WCAG levels shown are the standard body-text thresholds (4.5:1 for AA, 7:1 for AAA, 3:1 for "AA large") — use them to sanity-check text-on-background color pairs before shipping.
Renders Markdown to HTML side by side as you type, so you can preview README files, PR descriptions, or documentation before pasting them somewhere else.
Rendered output is sanitized with DOMPurify before being displayed, so raw HTML or script tags pasted into the Markdown won’t execute — useful when previewing Markdown from an untrusted source.
Converts a number between binary, octal, decimal, and hexadecimal — for translating values between representations while reading low-level code, bit flags, or color codes.
If your input has digits invalid for the selected base (e.g. a "9" while Binary is selected), the tool reports "Invalid number for base …" instead of silently truncating it.
Converts a string into camelCase, PascalCase, snake_case, kebab-case, UPPER_CASE, and Title Case all at once — for renaming variables, keys, or file names to match a target convention.
The conversions split words on whitespace, so input that’s already camelCase or PascalCase (no spaces) won’t be re-split into words — feed it space-separated words for accurate results.
Escapes special characters into HTML entities, or decodes existing HTML entities back into readable text — for safely embedding user-generated content in HTML or reading entity-escaped markup.
Encode mode escapes `&`, `<`, `>`, `"`, `'`, and `/` — including the forward slash — which is more aggressive than some libraries; it’s meant for content going inside HTML attributes as well as tags.
Parses CSV text into a proper table view, handling quoted fields with embedded commas, so you can sanity-check a CSV’s structure without opening a spreadsheet app.
The parser respects quoted fields, so a comma inside `"like, this"` won’t split into two columns — but it doesn’t handle escaped double-quotes (`""`) within a quoted field, worth knowing for CSV exported from Excel.
Runs quick transformations on a block of text — word/character/line stats, duplicate-line removal, alphabetical sorting, and full-string reversal — for cleaning up lists or checking text size.
"Reverse" reverses the entire string character by character (including line breaks), not the line order — use "Sort Lines" if you want to reorder lines instead.
Converts between .env file syntax and JSON — for turning environment variable files into config objects (or back), while preserving quoted values and skipping comments.
Lines starting with `#` and blank lines are treated as comments and skipped when converting env→json — but json→env doesn’t re-add any comments, so round-tripping loses them.
Generate placeholder text by paragraphs, sentences, or words — for mocking up layouts before real copy is ready.
Generates cryptographically random UUIDs (v4) for use as unique identifiers in test data, database seeds, or API request examples.
Despite the "UUID / ULID Generator" heading on the card, this only produces standard UUIDv4 values via crypto.randomUUID() — there’s no ULID output.
Generates a scannable QR code from any URL or text and lets you download it as a PNG — for sharing links, Wi-Fi credentials, or short text via a phone camera.
There’s no size or error-correction control — the code always renders at a fixed 160px width with a small margin, so for print use you may want to regenerate at a larger size elsewhere once you’ve confirmed the content is correct.
Generates random passwords with configurable length and character sets, producing five candidates at once so you can pick one that’s easy enough to read or type if needed.
Passwords are generated using crypto.getRandomValues, the Web Crypto API’s cryptographically secure random source — not Math.random() — so they’re safe to actually use, not just for display.
Define a set of fields (name, email, UUID, integer ranges, dates, and more) and generate realistic mock rows as JSON or CSV — for seeding a database or a UI mockup.
Pair this with JSON Schema Tools or Type Generator: generate a batch of sample data here, then infer a schema or type definition from it.
Decodes a JWT’s header and payload entirely client-side, and can also sign a new HMAC-based token from a JSON payload and secret — useful for inspecting tokens or generating test tokens during local development.
Only HMAC algorithms (HS256/384/512) are supported for signing — there’s no RS256/ES256 since that needs an asymmetric key pair rather than a shared secret. Decoding, however, works on any JWT regardless of algorithm, since it only base64url-decodes the header and payload without verifying the signature.
Computes SHA-1, SHA-256, SHA-384, and SHA-512 digests of any text input all at once — for checksums, verifying data integrity, or generating quick fixtures for tests.
There’s no MD5 option — the browser’s native Web Crypto API doesn’t implement MD5, only SHA-1/256/384/512, so it’s intentionally left out rather than shipped as a separate JS implementation.
Hash passwords with bcrypt and verify a plaintext password against an existing hash — the same algorithm most backends use for stored credentials.
Everything runs in your browser via the bcryptjs library — no plaintext or hash ever leaves your machine, which makes this safe to use with real credentials during debugging.
Generate live 6-digit TOTP codes (the codes authenticator apps produce) from a secret, with a QR code you can scan — useful for testing 2FA flows without your phone.
The generated otpauth:// URI (shown under the code) is exactly what a real 2FA setup screen embeds in its QR code — copy it if you need to test an app that accepts a raw URI instead of scanning.
Generate RSA-2048 key pairs in PEM format, and compute or verify HMAC message signatures with SHA-256/384/512.
Key generation and signing use the browser's native Web Crypto API, so a 2048-bit key pair generates in under a second and never touches a server.
Encrypt or decrypt text with AES-256-GCM using a passphrase — a quick way to share a secret over an otherwise insecure channel.
The key is derived from your passphrase via PBKDF2 with 100,000 iterations, so short passphrases are still meaningfully slower to brute-force than a raw AES key guess — but a long, unique passphrase is still what actually keeps this secure.
Formats a GraphQL query or mutation onto readable, indented lines, or minifies it into a compact single line — for cleaning up queries before sharing them or shrinking them before sending over the wire.
This is a brace-based reformatter, not a schema-aware GraphQL parser — it won’t catch invalid GraphQL syntax, it just reflows whitespace around `{`, `}`, and line breaks (and strips `#` comments when minifying).
A searchable reference of HTTP status codes with plain-language explanations — faster than searching for "what does 429 mean" every time.
Searching by concept works too — try "auth" or "cache" to jump straight to the relevant codes instead of remembering the number.
Parse a User-Agent string into browser, OS, device type, and rendering engine — useful when triaging a bug report that includes a raw UA string.
UA parsing is inherently best-effort — iPadOS 13+ often reports itself as "Macintosh," which no UA-string-only parser can distinguish from a real Mac.
Paste a curl command and get the equivalent JavaScript fetch, Axios, or Python requests code — handy when converting a command from API docs into your app.
Pair this with the API Tester: build and confirm a request there, use its "Copy as curl" (if present) or your own curl command, then convert it here to drop straight into your codebase.
Fill in a page title, description, and image, and get ready-to-paste meta, Open Graph, and Twitter Card tags — plus a live preview of the resulting social share card.
Set the theme color too — it's a small detail, but it controls the browser chrome color on mobile when someone visits your site.
Upload one image and generate a full favicon set — 16, 32, 48, 180 (Apple touch icon), 192, and 512px — entirely in your browser.
Nothing is uploaded anywhere — the resizing happens on an in-memory canvas, so this works offline once the page is loaded.
Pick the stacks your project uses and get a single, deduplicated .gitignore file — no more hunting for the right template.
It's fine to select both an OS (macOS/Windows/Linux) and an editor (VSCode/IntelliJ) alongside your language stack — that's the normal, recommended combination.
Build a robots.txt with Allow/Disallow rules, or generate a valid sitemap.xml from a plain list of URLs.
You can add multiple User-agent rule groups (e.g. one for "*" and a stricter one for a specific bot) with "Add rule group."
Build CSS linear/radial gradients and layered box-shadows visually, with a live preview, instead of hand-tuning values in your stylesheet.
Stacking two shadow layers — a tight, dark one and a soft, light one — is how most modern "elevation" shadows are built; try it instead of a single heavy shadow.
Check the WCAG contrast ratio between any two colors — not just against black or white — with a live text preview so you can actually see the result.
Large text has a lower bar (3:1 for AA) than body text (4.5:1) — if a color pair fails for body copy, it may still be fine for a big heading.
Convert between px, rem, and em, and generate a fluid-typography clamp() value that scales font-size smoothly between two viewport widths.
The generated value holds steady at the minimum size below your min viewport and at the maximum size above your max viewport — it only scales in between, so you don't need separate media queries for the extremes.
Converts between Unix timestamps (seconds since epoch) and human-readable dates in both directions — useful for debugging API payloads, log entries, or database rows that store epoch time.
The timestamp field expects seconds, not milliseconds — pasting a JavaScript `Date.now()` value (13 digits) will produce a date far in the future, since it gets multiplied by 1000 again internally.
Builds and validates a five-field cron expression, translates it into plain English, and previews the next several run times — for scheduling jobs without mentally parsing cron syntax.
Next-run times are simulated using your browser’s local clock, so they reflect your local timezone — not UTC, which is what most cron daemons on servers actually use.
Reformats a SQL query onto multiple lines by keyword for readability, or minifies it into a single line — with keyword sets tuned per dialect (Generic, PostgreSQL, MySQL, SQLite).
This is a keyword-based line-breaker, not a full SQL parser — it won’t reindent nested subqueries or realign columns, so for deeply nested queries treat the output as a rough pass rather than a final format.
Builds a Unix file permission value visually — toggle read/write/execute per owner/group/other and get the matching octal (e.g. 755) and symbolic (e.g. rwxr-xr-x) notation plus a ready-to-run chmod command.
Presets are labeled with their real-world use (e.g. "755" is labeled "Scripts", "600" is "Private") — a quick way to pick the right octal without doing the read/write/execute math yourself.
Infer a JSON Schema (draft-07) from a sample JSON payload, or validate a JSON document against an existing schema.
Validation is powered by Ajv, the same schema validator used by many production Node.js APIs — a passing result here means the same document would pass in a real backend.
Paste an OpenAPI/Swagger spec (JSON or YAML) and browse its endpoints, grouped by tag, with parameters, schemas, and one-click curl commands.
This is read-only exploration — to actually send a request, copy the curl command and paste it into the API Tester or your terminal.
A screen recording touching every tool documented above — captioned with the category and a real-life scenario for each one, e.g. decoding an auth token, scheduling a backup job, or checking color contrast before shipping a button.
No audio narration — on-screen captions explain what's happening and why you'd reach for that tool in practice.