# DevLab

> Free, client-side developer tools. Every tool listed here runs entirely in the browser — no signup, no data leaves the device. Built and maintained by Bikram Nath.

Site: https://devlab.tools
Working tools: 26 (only fully working tools are listed below)

## Tools

### Regex

Test, debug, and learn regular expressions with interactive tools and references.

- [Regex Tester](https://devlab.tools/tool/regex-tester): A regex tester runs your pattern against sample text in real time and highlights every match, group, and capture as you type. Paste a log line like `2024-01-15 ERROR [db] connection timeout` and a pattern like `(\w+) (\w+) \[(\w+)\]` to instantly see three numbered capture groups light up. Unlike regex101, the matching here uses the JavaScript engine directly, so what you see is exactly what `String.prototype.matchAll()` returns in your browser.

### CSS

Generate CSS gradients, shadows, grids, animations, and more with visual editors.

- [CSS Gradient Generator](https://devlab.tools/tool/css-gradient-generator): Pick a gradient type, drag color stops across the canvas, set an angle or focal point, and the tool outputs paste-ready CSS immediately. For example, a conic sweep from 0deg through amber to teal produces `background: conic-gradient(from 0deg, #f59e0b, #14b8a6)`, including the `from` keyword that older Firefox versions require. Conic gradient support is what separates this from most dedicated alternatives.

### JSON

Format, validate, minify, convert, and query JSON data with ease.

- [JSON Formatter](https://devlab.tools/tool/json-formatter): Paste minified JSON and get back a syntax-colored, indented version in under a second. Useful when an API response like {"id":1,"items":[{"sku":"A1","qty":3}]} arrives as a single line and you need to read through it quickly. The collapsible tree view lets you fold individual nested objects independently, which flat prettifiers like JSONLint do not offer.
- [JSON Validator](https://devlab.tools/tool/json-validator): Paste any JSON string and the validator pinpoints the exact line and column where parsing fails, telling you whether the problem is a missing comma, an unquoted key, or a trailing comma after the last array element. Feed it a 400-line API response that crashes your fetch handler and you get 'Unexpected token } at line 23, column 4' instead of a generic SyntaxError. Unlike a formatter that silently fixes input, this tool only reports — it never mutates.
- [JSON Minifier](https://devlab.tools/tool/json-minifier): Strips all whitespace characters (spaces, tabs, and newlines) from JSON to produce the smallest valid representation of the data. Paste a formatted API response like { "id": 1, "name": "Alice" } and get {"id":1,"name":"Alice"} back. Unlike a formatter that also validates structure, this tool focuses purely on compaction without reordering keys or re-encoding numeric values.
- [JSON to TypeScript](https://devlab.tools/tool/json-to-typescript): Paste a raw JSON object and get TypeScript interface declarations back. Nested objects become separate named interfaces, arrays become T[], and any field holding null gets typed as T | null. Useful when a teammate hands you an undocumented API response and you need to type it before wiring it into a service layer. Unlike quicktype, there is no CLI install or schema export step needed for a one-off conversion.
- [JSONPath Tester](https://devlab.tools/tool/json-path-tester): Test JSONPath expressions against a JSON document and see matching values instantly. Supports dot notation (.key), bracket notation ([0]), and wildcards (.* and [*]). Enter a path like $.store.books[0].title and the matched value appears immediately. All evaluation runs in the browser.
- [JSON to Excel / CSV](https://devlab.tools/tool/json-to-excel): The JSON to Excel converter transforms JSON arrays and objects into downloadable .xlsx spreadsheet files directly in your browser. Paste a JSON array of objects — like an API response with user records or product listings — and get a formatted Excel workbook with proper column headers, data types, and multiple sheets for nested structures. No server upload, no file size limits beyond browser memory.
- [OpenAPI Diff Checker](https://devlab.tools/tool/openapi-diff-checker): The OpenAPI Diff Checker compares two OpenAPI (Swagger) specification files and shows exactly what changed between versions — added endpoints, removed parameters, modified response schemas, and breaking changes. Paste two OpenAPI 3.x JSON or YAML specs and get a color-coded diff highlighting additions, removals, and modifications with breaking-change warnings. Runs entirely client-side with no server upload.
- [DB Schema Diff](https://devlab.tools/tool/db-schema-diff): The DB Schema Diff tool compares two database schemas (SQL CREATE TABLE statements) and generates the ALTER TABLE migration needed to transform one into the other. Paste your current schema and target schema as SQL DDL, and get a precise migration script showing added columns, dropped columns, modified types, new indexes, and constraint changes. All processing happens in your browser — no database connection required.
- [CSV to JSON Converter](https://devlab.tools/tool/csv-to-json): Paste CSV data and this tool converts it to a JSON array of objects where keys come from the header row. Handles quoted fields containing commas, bidirectional conversion (CSV to JSON and back), and shows specific errors for malformed input. All processing is client-side — no data is uploaded.
- [SQL Formatter](https://devlab.tools/tool/sql-formatter): Paste raw or minified SQL and this tool reformats it with keywords uppercased and each major clause (SELECT, FROM, WHERE, JOIN, ORDER BY, etc.) on its own line. Also minifies SQL to a single line. All processing is client-side — no SQL is sent to a server.

### Colors

Convert color formats, check contrast, and generate palettes.

- [Color Converter](https://devlab.tools/tool/color-converter): Paste any color in HEX, RGB, HSL, HSB/HSV, or CMYK and all remaining formats update instantly. The typical use is bridging Figma and CSS: input HSL(217, 91%, 60%) and immediately read the HEX (#4A90E2) or RGB equivalent. Unlike single-direction tools, this surfaces all five formats at once, so you can pull a CMYK approximation for print without opening a second tool.

### Text

Count words, convert case, diff text, and generate placeholder content.

- [Word Counter](https://devlab.tools/tool/word-counter): Paste or type text and instantly see word count, character count with and without spaces, sentence count, paragraph count, and estimated reading time calculated at 200 words per minute. Paste a 900-word draft and it shows a 4.5-minute read before you publish. Unlike running `wc -w` in a terminal, it also tracks sentence and paragraph boundaries in the same pass without any flags or piping.
- [Case Converter](https://devlab.tools/tool/case-converter): Paste any text and get all eight case formats at once: camelCase, PascalCase, snake_case, kebab-case, UPPER_CASE, lowercase, Title Case, and Sentence case, without running separate conversions. Useful when mapping a database column like `user_profile_image` to both a TypeScript property (`userProfileImage`) and a display label (`User Profile Image`) in one step. The all-at-once display is what separates this from single-format transformers.
- [Text Diff Checker](https://devlab.tools/tool/text-diff-checker): Paste two text blocks side-by-side to instantly see every added, removed, or changed character highlighted in color. Useful when you need to spot whether a config file changed between two deploys — paste the old and new versions, and the diff highlights the exact lines that shifted, down to individual characters. Unlike line-only differ tools, this operates at character granularity, so a single changed word inside a long sentence is isolated rather than flagging the entire line as different.
- [Markdown Previewer](https://devlab.tools/tool/markdown-previewer): A markdown previewer renders your raw .md source into formatted HTML in real time as you type, letting you catch broken table alignment, missing blank lines before lists, or stray asterisks before they hit a PR. Paste a README with a pipe-delimited table on the left and watch the rendered columns appear on the right instantly. Unlike a static file viewer, edits reflect immediately without a save-reload cycle.

### Encoding

Encode and decode Base64, URLs, HTML entities, JWT, and hashes.

- [Base64 Encoder / Decoder](https://devlab.tools/tool/base64-encoder-decoder): Base64 encoding converts binary or text data into a 64-character ASCII alphabet so it can travel safely through systems that only handle plain text. A common case: pasting a small PNG into CSS as `background-image: url('data:image/png;base64,iVBORw0K...')` avoids an extra HTTP request. Unlike most online converters, this tool supports URL-safe Base64 (replacing `+` and `/` with `-` and `_`) and handles binary file encoding, not just strings.
- [URL Encoder / Decoder](https://devlab.tools/tool/url-encoder-decoder): Paste a raw query string like `name=John Doe&city=São Paulo` and get back `name=John%20Doe&city=S%C3%A3o%20Paulo`, percent-encoded and safe to append to any endpoint. Unlike running encodeURIComponent() in a browser console, this tool exposes the distinction between full URL encoding and component-level encoding separately, which is the detail that trips up integrations when a parameter value itself contains reserved characters like & or =.
- [JWT Decoder](https://devlab.tools/tool/jwt-decoder): Paste a JWT and it splits the token at the two dots, base64url-decodes each segment, and renders the header, payload, and signature as formatted JSON. Useful when you have a token like `eyJhbGciOiJSUzI1NiJ9...` from an Authorization header and need to confirm the `exp` claim without spinning up a debugger or curl. Unlike jwt.io, nothing leaves your browser tab.
- [Hash Generator](https://devlab.tools/tool/hash-generator): Paste any string and get its MD5, SHA-1, SHA-256, and SHA-512 digests simultaneously as lowercase hex. Practical example: copy the contents of a downloaded config snippet, paste it here, and compare the SHA-256 output against a publisher's documented checksum — no terminal needed. The side-by-side display of all four algorithms in a single step is what separates this from running openssl dgst separately per algorithm.
- [UUID Generator](https://devlab.tools/tool/uuid-generator): This tool generates UUID v4 identifiers in your browser using the Web Crypto API's crypto.randomUUID(). Generate 1, 5, 10, 25, or 100 UUIDs at once. Each UUID is a 128-bit random value in the standard 8-4-4-4-12 hex format. No server calls, no data sent anywhere.

### Time

Convert timestamps, timezones, dates, and build cron expressions.

- [Unix Timestamp Converter](https://devlab.tools/tool/unix-timestamp-converter): Paste a Unix timestamp like 1716076800 and get the equivalent UTC and local date-time strings instantly; type a date and get the epoch integer back. The live counter showing the current timestamp refreshes every second, which makes it useful for checking whether a JWT or OAuth token's exp field has already passed before making another API call.
- [Cron Expression Generator](https://devlab.tools/tool/cron-expression-generator): Build a cron expression using the visual field builder (minute, hour, day, month, weekday) and get the human-readable description instantly. Shows the next 5 execution times as absolute dates so you can verify the schedule before deploying. Choose from 8 common presets or enter custom values.

### Numbers

Convert number bases, calculate bits/bytes, percentages, and Roman numerals.

- [Number Base Converter](https://devlab.tools/tool/number-base-converter): Paste any integer in binary, octal, decimal, or hex and instantly see all four representations side by side. Useful when reading ARM disassembly where operands are hex but your bitmask logic is in binary: entering 0xFF immediately shows 11111111, 377, and 255 at once. Showing all four bases simultaneously without switching modes is what separates this from single-direction converters.

### HTML

Beautify, minify, and convert HTML to other formats.

- [HTML Beautifier](https://devlab.tools/tool/html-beautifier): Paste minified or messy HTML and get back properly indented, nested markup in one click. Useful when a CMS export hands you a wall of tags with no whitespace — for example, a 4KB single-line Mailchimp template becomes scannable, attributed markup with configurable 2- or 4-space indentation. Unlike a general code editor's format-on-save, this runs entirely on the page with no install required.

## Site sections

- [All tools](https://devlab.tools/tools): Full index of working DevLab tools.
- [Categories](https://devlab.tools/categories): Tools grouped by category.
- [Learn](https://devlab.tools/learn): Guides and references on regex, CSS, JSON, encoding, and more.
- [Comparisons](https://devlab.tools/comparisons): Side-by-side comparisons of developer approaches.
- [About](https://devlab.tools/about): Who builds DevLab and how it works.

## In development (not yet live, do not link as working tools)

- Regex Cheatsheet (regex)
- Regex to String Generator (regex)
- Common Regex Patterns (regex)
- Regex Explainer (regex)
- Regex Flags Explained (regex)
- Lookahead & Lookbehind Guide (regex)
- Named Capture Groups (regex)
- CSS Box Shadow Generator (css)
- CSS Border Radius Generator (css)
- CSS Flexbox Generator (css)
- CSS Grid Generator (css)
- CSS Animation Generator (css)
- CSS Filter Generator (css)
- CSS Clip Path Generator (css)
- CSS Variables Cheatsheet (css)
- CSS Specificity Calculator (css)
- Color Contrast Checker (colors)
- Color Palette Generator (colors)
- Color Shades Generator (colors)
- Gradient Color Picker (colors)
- Lorem Ipsum Generator (text)
- Slug Generator (text)
- HTML Entity Encoder (encoding)
- Timezone Converter (time)
- Date Duration Calculator (time)
- Bit & Byte Calculator (numbers)
- Percentage Calculator (numbers)
- Roman Numeral Converter (numbers)
- HTML Minifier (html)
- HTML to Markdown (html)