Code Beautifier / Minifier

**Prettier**-backed formatter for 10 languages (JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML), plus a one-click minifier for JSON / CSS / HTML. Runs entirely in your browser — code never leaves.
LanguageAuto detect
Advanced (Prettier options)
Print width
Tab width
Use tabsSingle quotesSemicolons
Source
Open file
0 bytes
Output
0 bytes
›How to use
Pick Beautify or Minify, then choose a language (or let auto-detect guess from the content).
Paste the source on the left, or click Open file to upload one (extension picks the language).
Beautify mode lets you expand Advanced to tweak Prettier: print width, tab width, single quotes, semicolons.
Hit Beautify / Minify — the result appears on the right with bytes & delta. Copy or Download with the correct extension.
Tips
Prettier is the industry standard — built into VS Code & WebStorm. We just ship it as a zero-config, no-install tab.
Minify currently covers JSON / CSS / SCSS / HTML only — JS minification needs Terser, which would bloat the bundle. Run npx terser for that.
Auto-detect uses content heuristics. JSON / HTML / CSS are highly reliable; override manually when ambiguous.
HTML minify preserves
, </code>, <code class="mono bg-foreground/8 rounded px-1 py-0.5 text-xs"><script></code>, <code class="mono bg-foreground/8 rounded px-1 py-0.5 text-xs"><style></code> content (won't break layout or scripts).</li></ul></div><p class="text-foreground/70 text-xs">💡 The first time you hit <strong>Beautify</strong> the Prettier engine loads (~400KB, cached after first fetch). Subsequent runs are instant.</p></div></details><section class="border-foreground/10 mt-10 rounded-xl border p-5"><h2 class="text-foreground/60 text-xs uppercase tracking-wider">Related tools</h2><ul class="mt-3 grid gap-3 sm:grid-cols-2"><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/en/tools/tw-test-data"><div class="text-sm font-medium">Taiwan test data generator</div><div class="text-foreground/70 mt-1 text-xs">Valid TW national ID, BAN, mobile, Luhn credit cards</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/en/tools/json"><div class="text-sm font-medium">JSON formatter + Schema validator</div><div class="text-foreground/70 mt-1 text-xs">Format / minify / sort + JSON Schema validation</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/en/tools/timex"><div class="text-sm font-medium">Unix time & timezone converter</div><div class="text-foreground/70 mt-1 text-xs">Seconds / ms / ISO interop with timezone-aware display</div></a></li><li><a class="border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition" href="/en/tools/md-translate"><div class="text-sm font-medium">Markdown batch translator</div><div class="text-foreground/70 mt-1 text-xs">Bring-your-own OpenAI / Anthropic / Google API key. Batch-translate .md files while preserving frontmatter / code / links</div></a></li></ul></section></main><footer class="border-foreground/10 text-foreground/60 mt-12 border-t"><div class="mx-auto max-w-5xl px-4 py-8 text-sm"><nav aria-label="Tools" class="mb-6 grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3"><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Image / PDF / Media</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/image-base64">Image ↔ Base64</a></li><li><a class="hover:text-foreground transition" href="/en/tools/heic-to-jpg">HEIC → JPG / PNG / WebP</a></li><li><a class="hover:text-foreground transition" href="/en/tools/image-compress-to-size">Image compress to size</a></li><li><a class="hover:text-foreground transition" href="/en/tools/image-crop">Image Crop (free / aspect / circular)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/image-resize">Image Resize (fit / longest-edge / scale)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/favicon-generator">Favicon all-in-one generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/svg-optimizer">SVG Optimizer</a></li><li><a class="hover:text-foreground transition" href="/en/tools/image-to-pdf">Image → PDF</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-merge-split">PDF merge / split / extract</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-compress">PDF compress</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-page-edit">PDF page editor</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-password-remove">PDF unlock / remove password</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-watermark">PDF watermark + page numbers</a></li><li><a class="hover:text-foreground transition" href="/en/tools/pdf-to-images">PDF → Images (PNG / JPG / WebP)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/gif-from-frames">Images → GIF Animation</a></li><li><a class="hover:text-foreground transition" href="/en/tools/video-to-gif">Video → GIF</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Developer & API</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/jwt">JWT decoder / generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/curl">cURL ↔ fetch ↔ Python converter</a></li><li><a class="hover:text-foreground transition" href="/en/tools/selector">CSS / XPath selector tester</a></li><li><a class="hover:text-foreground transition" href="/en/tools/regex">Regex builder & live tester</a></li><li><a class="hover:text-foreground transition" href="/en/tools/mock-api">Mock API designer</a></li><li><a class="hover:text-foreground transition" href="/en/tools/hash-tools">Hash Tools (MD5 / SHA-1/256/384/512)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/uuid-generator">UUID Generator (v4 / v7 batch)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/regex-replace">Regex Replace + Group Preview</a></li><li><a class="hover:text-foreground transition" href="/en/tools/cron-expression">Cron Expression Visualiser</a></li><li><a class="hover:text-foreground transition" href="/en/tools/password-strength">Password Strength + Crack Time</a></li><li><a class="hover:text-foreground transition" href="/en/tools/token-counter">AI Token Counter (GPT / Claude / Gemini)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/json-to-typescript">JSON → TypeScript</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Data / Format / Text</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/tw-test-data">Taiwan test data generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/json">JSON formatter + Schema validator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/timex">Unix time & timezone converter</a></li><li><a class="hover:text-foreground transition" href="/en/tools/md-translate">Markdown batch translator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/qr-code">QR Code generator (with Logo)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/code-beautifier">Code Beautifier / Minifier (10 languages)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/markdown-editor">Markdown Editor (live preview)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/url-encoder">URL / Base64 / HTML encoder</a></li><li><a class="hover:text-foreground transition" href="/en/tools/json-diff">JSON deep diff (visual)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/csv-viewer">CSV / TSV viewer + converter</a></li><li><a class="hover:text-foreground transition" href="/en/tools/lorem-ipsum">Lorem Ipsum (Latin / Chinese / Tech)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/timestamp-converter">Unix Timestamp ↔ Timezones</a></li><li><a class="hover:text-foreground transition" href="/en/tools/text-diff">Text Diff (line-by-line)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/case-converter">Case Converter</a></li><li><a class="hover:text-foreground transition" href="/en/tools/slugify">Slugify (URL-friendly, CJK-aware)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/emoji-info">Emoji Info Lookup</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Visual / CSS</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/cubic-bezier">cubic-bezier editor</a></li><li><a class="hover:text-foreground transition" href="/en/tools/css-gradient">CSS gradient editor</a></li><li><a class="hover:text-foreground transition" href="/en/tools/type-scale">Type scale + Fluid clamp() generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/box-shadow">box-shadow editor (multi-layer + Material elevation)</a></li><li><a class="hover:text-foreground transition" href="/en/tools/glassmorphism">Glassmorphism + Neumorphism generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/css-clip-path">CSS clip-path editor</a></li><li><a class="hover:text-foreground transition" href="/en/tools/mermaid-editor">Mermaid Diagram Editor</a></li><li><a class="hover:text-foreground transition" href="/en/tools/css-grid-generator">CSS Grid Generator</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Color / Accessibility</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/color-converter">Color format converter</a></li><li><a class="hover:text-foreground transition" href="/en/tools/tailwind-palette">Tailwind palette generator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/contrast-checker">WCAG + APCA contrast checker</a></li><li><a class="hover:text-foreground transition" href="/en/tools/color-blindness-simulator">Colour-blindness Simulator (8 + normal)</a></li></ul></div><div><div class="text-foreground/50 mb-2 text-xs uppercase tracking-wider">Reference</div><ul class="space-y-1"><li><a class="hover:text-foreground transition" href="/en/tools/percentile">Percentile calculator</a></li><li><a class="hover:text-foreground transition" href="/en/tools/cheatsheet">Test framework cheatsheet</a></li><li><a class="hover:text-foreground transition" href="/en/tools/http-status-codes">HTTP Status Codes</a></li><li><a class="hover:text-foreground transition" href="/en/tools/bundle-size">npm Bundle Size Lookup</a></li></ul></div></nav><div class="border-foreground/10 flex flex-wrap items-center justify-between gap-3 border-t pt-4"><span>Built by Mark Liu with Next.js</span><div class="flex items-center gap-4"><a class="hover:text-foreground transition" href="/en/articles">Articles</a><a class="hover:text-foreground transition" href="/en/changelog">Changelog</a><a class="hover:text-foreground transition" href="/en/about">About</a><a class="hover:text-foreground transition" href="/en/privacy">Privacy</a><a class="hover:text-foreground transition" href="/en/security">Security</a><a href="https://github.com/MarkwwLiu/dev" target="_blank" rel="noopener noreferrer" class="hover:text-foreground inline-flex items-center gap-1 transition" aria-label="GitHub"><svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.66.5 12.01c0 5.08 3.29 9.4 7.86 10.92.58.1.79-.25.79-.55v-2.07c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.7.08-.69.08-.69 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.06-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.93 10.93 0 0 1 5.74 0c2.18-1.48 3.14-1.17 3.14-1.17.62 1.57.23 2.73.11 3.02.73.79 1.18 1.81 1.18 3.06 0 4.4-2.7 5.36-5.27 5.65.41.36.78 1.07.78 2.16v3.21c0 .3.21.66.8.55 4.57-1.52 7.85-5.84 7.85-10.92C23.5 5.66 18.35.5 12 .5z"></path></svg>GitHub</a></div></div></div></footer><!--$--><!--/$--><!--$--><!--/$--><!--$--><!--/$--><script src="/_next/static/chunks/07jfskok5xrxg.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[99294,[\"/_next/static/chunks/0youonhdpggcm.js\",\"/_next/static/chunks/0c~eg4qj3unno.js\"],\"default\"]\n3:I[72134,[\"/_next/static/chunks/0youonhdpggcm.js\",\"/_next/static/chunks/0c~eg4qj3unno.js\"],\"default\"]\n6:I[22088,[\"/_next/static/chunks/0youonhdpggcm.js\",\"/_next/static/chunks/0c~eg4qj3unno.js\"],\"OutletBoundary\"]\n7:\"$Sreact.suspense\"\na:I[22088,[\"/_next/static/chunks/0youonhdpggcm.js\",\"/_next/static/chunks/0c~eg4qj3unno.js\"],\"ViewportBoundary\"]\nc:I[22088,[\"/_next/static/chunks/0youonhdpggcm.js\",\"/_next/static/chunks/0c~eg4qj3unno.js\"],\"MetadataBoundary\"]\ne:I[74377,[],\"default\",1]\n11:I[17563,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\"],\"Analytics\"]\n12:I[63384,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\"],\"SpeedInsights\"]\n13:I[32968,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\"],\"GoogleAnalytics\"]\n16:I[66341,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\",\"/_next/static/chunks/16on4c-ipz4v_.js\"],\"CodeFormatClient\"]\n63:I[41044,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\",\"/_next/static/chunks/16on4c-ipz4v_.js\"],\"MermaidDiagram\"]\n65:I[95619,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\",\"/_next/static/chunks/16on4c-ipz4v_.js\"],\"default\"]\n66:I[10356,[\"/_next/static/chunks/0.1o69e9__9s..js\",\"/_next/static/chunks/0ff5b3at7ejv-.js\"],\"default\"]\n:HL[\"/_next/static/chunks/13do1g0f4m~y5.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.08e28id.o-okb.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"en\",\"tools\",\"code-beautifier\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[[\"locale\",\"en\",\"d\",null],{\"children\":[\"tools\",{\"children\":[\"code-beautifier\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16]}],[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/13do1g0f4m~y5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0.1o69e9__9s..js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0ff5b3at7ejv-.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L4\"]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/16on4c-ipz4v_.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@8\"}]}]]}],{},null,false,null]},null,false,\"$@9\"]},null,false,\"$@9\"]},null,false,null]},null,false,\"$@9\"],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$La\",null,{\"children\":\"$Lb\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lc\",null,{\"children\":[\"$\",\"$7\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Ld\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$e\",[]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"5EKQQrlZOpmLm-NOHnyYP\"}\n"])</script><script>self.__next_f.push([1,"f:[]\n9:\"$Wf\"\n4:[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"dark\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"children\":[\"$\",\"body\",null,{\"className\":\"bg-background text-foreground flex min-h-full flex-col\",\"children\":[\"$L10\",[\"$\",\"$L11\",null,{}],[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{\"gaId\":\"G-W6WN0CFEPB\"}]]}]}]\n5:[\"$L14\",[\"$\",\"main\",null,{\"className\":\"mx-auto w-full max-w-5xl flex-1 px-4 py-8\",\"children\":[\"$L15\",[\"$\",\"h1\",null,{\"className\":\"text-2xl font-semibold tracking-tight md:text-3xl\",\"children\":\"Code Beautifier / Minifier\"}],[\"$\",\"p\",null,{\"className\":\"text-foreground/70 mt-2 max-w-3xl text-sm md:text-base\",\"children\":\"**Prettier**-backed formatter for 10 languages (JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML), plus a one-click minifier for JSON / CSS / HTML. Runs entirely in your browser — code never leaves.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"SoftwareApplication\\\",\\\"name\\\":\\\"Code Beautifier / Minifier (10 languages)\\\",\\\"description\\\":\\\"Prettier-backed formatter for JS / TS / CSS / HTML / JSON / Markdown / YAML, plus one-click minify for JSON / CSS / HTML. Auto-detects language\\\",\\\"url\\\":\\\"https://dev.9niche.com/en/tools/code-beautifier\\\",\\\"applicationCategory\\\":\\\"DeveloperApplication\\\",\\\"operatingSystem\\\":\\\"Any\\\",\\\"inLanguage\\\":\\\"en\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":0,\\\"priceCurrency\\\":\\\"USD\\\"}}\"}}],[\"$\",\"$L16\",null,{}]]}],\"$L17\",\"$undefined\",\"$L18\"]}],\"$L19\"]\n14:[\"$\",\"header\",null,{\"className\":\"border-foreground/10 bg-background sticky top-0 z-10 border-b\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-5xl items-center justify-between px-4 py-3\",\"children\":[\"$L1a\",[\"$\",\"nav\",null,{\"className\":\"text-foreground/70 flex items-center gap-4 text-sm\",\"children\":[\"$L1b\",\"$L1c\"]}]]}]}]\n18:[\"$\",\"section\",null,{\"className\":\"border-foreground/10 mt-10 rounded-xl border p-5\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-foreground/60 text-xs uppercase tracking-wider\",\"children\":\"Related tools\"}],[\"$\",\"ul\",null,{\"className\":\"mt-3 grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"li\",\"tw-test-data\",{\"children\":\"$L1d\"}],[\"$\",\"li\",\"json\",{\"children\":\"$L1e\"}],[\"$\",\"li\",\"timex\",{\"children\":\"$L1f\"}],[\"$\",\"li\",\"md-translate\",{\"children\":\"$L20\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"footer\",null,{\"className\":\"border-foreground/10 text-foreground/60 mt-12 border-t\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-5xl px-4 py-8 text-sm\",\"children\":[[\"$\",\"nav\",null,{\"aria-label\":\"Tools\",\"className\":\"mb-6 grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"div\",\"media\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Image / PDF / Media\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"image-base64\",{\"children\":\"$L21\"}],[\"$\",\"li\",\"heic-to-jpg\",{\"children\":\"$L22\"}],[\"$\",\"li\",\"image-compress-to-size\",{\"children\":\"$L23\"}],[\"$\",\"li\",\"image-crop\",{\"children\":\"$L24\"}],[\"$\",\"li\",\"image-resize\",{\"children\":\"$L25\"}],[\"$\",\"li\",\"favicon-generator\",{\"children\":\"$L26\"}],[\"$\",\"li\",\"svg-optimizer\",{\"children\":\"$L27\"}],[\"$\",\"li\",\"image-to-pdf\",{\"children\":\"$L28\"}],[\"$\",\"li\",\"pdf-merge-split\",{\"children\":\"$L29\"}],[\"$\",\"li\",\"pdf-compress\",{\"children\":\"$L2a\"}],[\"$\",\"li\",\"pdf-page-edit\",{\"children\":\"$L2b\"}],[\"$\",\"li\",\"pdf-password-remove\",{\"children\":\"$L2c\"}],[\"$\",\"li\",\"pdf-watermark\",{\"children\":\"$L2d\"}],[\"$\",\"li\",\"pdf-to-images\",{\"children\":\"$L2e\"}],[\"$\",\"li\",\"gif-from-frames\",{\"children\":\"$L2f\"}],[\"$\",\"li\",\"video-to-gif\",{\"children\":\"$L30\"}]]}]]}],[\"$\",\"div\",\"dev-api\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Developer \u0026 API\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"jwt\",{\"children\":\"$L31\"}],[\"$\",\"li\",\"curl\",{\"children\":\"$L32\"}],[\"$\",\"li\",\"selector\",{\"children\":\"$L33\"}],[\"$\",\"li\",\"regex\",{\"children\":\"$L34\"}],[\"$\",\"li\",\"mock-api\",{\"children\":\"$L35\"}],[\"$\",\"li\",\"hash-tools\",{\"children\":\"$L36\"}],[\"$\",\"li\",\"uuid-generator\",{\"children\":\"$L37\"}],[\"$\",\"li\",\"regex-replace\",{\"children\":\"$L38\"}],[\"$\",\"li\",\"cron-expression\",{\"children\":\"$L39\"}],[\"$\",\"li\",\"password-strength\",{\"children\":\"$L3a\"}],[\"$\",\"li\",\"token-counter\",{\"children\":\"$L3b\"}],[\"$\",\"li\",\"json-to-typescript\",{\"children\":\"$L3c\"}]]}]]}],[\"$\",\"div\",\"data-format\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Data / Format / Text\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"tw-test-data\",{\"children\":\"$L3d\"}],[\"$\",\"li\",\"json\",{\"children\":\"$L3e\"}],[\"$\",\"li\",\"timex\",{\"children\":\"$L3f\"}],[\"$\",\"li\",\"md-translate\",{\"children\":\"$L40\"}],[\"$\",\"li\",\"qr-code\",{\"children\":\"$L41\"}],[\"$\",\"li\",\"code-beautifier\",{\"children\":\"$L42\"}],[\"$\",\"li\",\"markdown-editor\",{\"children\":\"$L43\"}],[\"$\",\"li\",\"url-encoder\",{\"children\":\"$L44\"}],[\"$\",\"li\",\"json-diff\",{\"children\":\"$L45\"}],[\"$\",\"li\",\"csv-viewer\",{\"children\":\"$L46\"}],[\"$\",\"li\",\"lorem-ipsum\",{\"children\":\"$L47\"}],[\"$\",\"li\",\"timestamp-converter\",{\"children\":\"$L48\"}],[\"$\",\"li\",\"text-diff\",{\"children\":\"$L49\"}],[\"$\",\"li\",\"case-converter\",{\"children\":\"$L4a\"}],[\"$\",\"li\",\"slugify\",{\"children\":\"$L4b\"}],[\"$\",\"li\",\"emoji-info\",{\"children\":\"$L4c\"}]]}]]}],[\"$\",\"div\",\"visual\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Visual / CSS\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"cubic-bezier\",{\"children\":\"$L4d\"}],[\"$\",\"li\",\"css-gradient\",{\"children\":\"$L4e\"}],[\"$\",\"li\",\"type-scale\",{\"children\":\"$L4f\"}],[\"$\",\"li\",\"box-shadow\",{\"children\":\"$L50\"}],[\"$\",\"li\",\"glassmorphism\",{\"children\":\"$L51\"}],[\"$\",\"li\",\"css-clip-path\",{\"children\":\"$L52\"}],[\"$\",\"li\",\"mermaid-editor\",{\"children\":\"$L53\"}],[\"$\",\"li\",\"css-grid-generator\",{\"children\":\"$L54\"}]]}]]}],[\"$\",\"div\",\"color\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Color / Accessibility\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"color-converter\",{\"children\":\"$L55\"}],[\"$\",\"li\",\"tailwind-palette\",{\"children\":\"$L56\"}],[\"$\",\"li\",\"contrast-checker\",{\"children\":\"$L57\"}],[\"$\",\"li\",\"color-blindness-simulator\",{\"children\":\"$L58\"}]]}]]}],[\"$\",\"div\",\"reference\",{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/50 mb-2 text-xs uppercase tracking-wider\",\"children\":\"Reference\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1\",\"children\":[[\"$\",\"li\",\"percentile\",{\"children\":\"$L59\"}],[\"$\",\"li\",\"cheatsheet\",{\"children\":\"$L5a\"}],[\"$\",\"li\",\"http-status-codes\",{\"children\":\"$L5b\"}],[\"$\",\"li\",\"bundle-size\",{\"children\":\"$L5c\"}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"border-foreground/10 flex flex-wrap items-center justify-between gap-3 border-t pt-4\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Built by Mark Liu with Next.js\"}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-4\",\"children\":[\"$L5d\",\"$L5e\",\"$L5f\",\"$L60\",\"$L61\",[\"$\",\"a\",null,{\"href\":\"https://github.com/MarkwwLiu/dev\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"hover:text-foreground inline-flex items-center gap-1 transition\",\"aria-label\":\"GitHub\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"width\":\"14\",\"height\":\"14\",\"fill\":\"currentColor\",\"aria-hidden\":true,\"children\":\"$L62\"}],\"GitHub\"]}]]}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"62:[\"$\",\"path\",null,{\"d\":\"M12 .5C5.65.5.5 5.66.5 12.01c0 5.08 3.29 9.4 7.86 10.92.58.1.79-.25.79-.55v-2.07c-3.2.7-3.87-1.37-3.87-1.37-.52-1.32-1.27-1.67-1.27-1.67-1.04-.7.08-.69.08-.69 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.06-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.17a10.93 10.93 0 0 1 5.74 0c2.18-1.48 3.14-1.17 3.14-1.17.62 1.57.23 2.73.11 3.02.73.79 1.18 1.81 1.18 3.06 0 4.4-2.7 5.36-5.27 5.65.41.36.78 1.07.78 2.16v3.21c0 .3.21.66.8.55 4.57-1.52 7.85-5.84 7.85-10.92C23.5 5.66 18.35.5 12 .5z\"}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"details\",null,{\"className\":\"border-foreground/10 bg-surface group mt-8 rounded-xl border\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"HowTo\\\",\\\"name\\\":\\\"How to use Code Beautifier / Minifier (10 languages)\\\",\\\"step\\\":[{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":1,\\\"text\\\":\\\"Pick Beautify or Minify, then choose a language (or let auto-detect guess from the content).\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":2,\\\"text\\\":\\\"Paste the source on the left, or click Open file to upload one (extension picks the language).\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":3,\\\"text\\\":\\\"Beautify mode lets you expand Advanced to tweak Prettier: print width, tab width, single quotes, semicolons.\\\"},{\\\"@type\\\":\\\"HowToStep\\\",\\\"position\\\":4,\\\"text\\\":\\\"Hit Beautify / Minify — the result appears on the right with bytes \u0026 delta. Copy or Download with the correct extension.\\\"}]}\"}}],[\"$\",\"summary\",null,{\"className\":\"cursor-pointer list-none px-4 py-3 text-sm font-medium\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-foreground/60 mr-2 inline-block transition group-open:rotate-90\",\"children\":\"›\"}],\"How to use\"]}],[\"$\",\"div\",null,{\"className\":\"space-y-4 px-4 pb-4 pt-1 text-sm\",\"children\":[[\"$\",\"ol\",null,{\"className\":\"space-y-1.5 pl-5 [list-style:decimal]\",\"children\":[[\"$\",\"li\",\"0\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Pick \u003cstrong\u003eBeautify\u003c/strong\u003e or \u003cstrong\u003eMinify\u003c/strong\u003e, then choose a language (or let auto-detect guess from the content).\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Paste the source on the left, or click \u003cstrong\u003eOpen file\u003c/strong\u003e to upload one (extension picks the language).\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Beautify mode lets you expand \u003cstrong\u003eAdvanced\u003c/strong\u003e to tweak Prettier: print width, tab width, single quotes, semicolons.\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Hit \u003cstrong\u003eBeautify / Minify\u003c/strong\u003e — the result appears on the right with bytes \u0026 delta. \u003cstrong\u003eCopy\u003c/strong\u003e or \u003cstrong\u003eDownload\u003c/strong\u003e with the correct extension.\"}}]]}],[\"$\",\"$L63\",null,{\"source\":\"flowchart LR\\n    A[Paste / pick file] --\u003e B{Auto detect?}\\n    B --\u003e|Yes| C[detectLanguageFromContent]\\n    B --\u003e|No| D[Pick language manually]\\n    C --\u003e E[language]\\n    D --\u003e E\\n    E --\u003e F{Mode}\\n    F --\u003e|Beautify| G[lazy import prettier/standalone + plugin]\\n    G --\u003e H[prettier.format with options]\\n    F --\u003e|Minify| I{Supported?}\\n    I --\u003e|JSON/CSS/HTML| J[pure-function minify]\\n    I --\u003e|other| K[Switch back to beautify]\\n    H --\u003e L[Output + size delta]\\n    J --\u003e L\"}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"div\",null,{\"className\":\"text-foreground/60 mb-1 text-xs uppercase tracking-wide\",\"children\":\"Tips\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-1 pl-5 [list-style:disc]\",\"children\":[[\"$\",\"li\",\"0\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003ePrettier is the industry standard\u003c/strong\u003e — built into VS Code \u0026 WebStorm. We just ship it as a zero-config, no-install tab.\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003eMinify currently covers JSON / CSS / SCSS / HTML\u003c/strong\u003e only — JS minification needs Terser, which would bloat the bundle. Run \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003enpx terser\u003c/code\u003e for that.\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003eAuto-detect\u003c/strong\u003e uses content heuristics. JSON / HTML / CSS are highly reliable; override manually when ambiguous.\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cstrong\u003eHTML minify\u003c/strong\u003e preserves \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cpre\u003e\u003c/code\u003e, \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003ctextarea\u003e\u003c/code\u003e, \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cscript\u003e\u003c/code\u003e, \u003ccode class=\\\"mono bg-foreground/8 rounded px-1 py-0.5 text-xs\\\"\u003e\u003cstyle\u003e\u003c/code\u003e content (won't break layout or scripts).\"}}]]}]]}],\"$L64\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en\",\"locale\":\"$undefined\",\"localeCookie\":{\"name\":\"NEXT_LOCALE\",\"sameSite\":\"lax\"},\"className\":\"font-semibold tracking-tight\",\"children\":\"Dev Tools\"}]\n1b:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground\",\"children\":\"Home\"}]\n1c:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground\",\"children\":\"Tools\"}]\n1d:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/tw-test-data\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"Taiwan test data generator\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"Valid TW national ID, BAN, mobile, Luhn credit cards\"}]]}]\n1e:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/json\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"JSON formatter + Schema validator\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"Format / minify / sort + JSON Schema validation\"}]]}]\n1f:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/timex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"Unix time \u0026 timezone converter\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"Seconds / ms / ISO interop with timezone-aware display\"}]]}]\n20:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/md-translate\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-foreground/10 hover:border-foreground/30 hover:bg-surface block rounded-lg border p-3 transition\",\"children\":[[\"$\",\"div\",null,{\"className\":\"text-sm font-medium\",\"children\":\"Markdown batch translator\"}],[\"$\",\"div\",null,{\"className\":\"text-foreground/70 mt-1 text-xs\",\"children\":\"Bring-your-own OpenAI / Anthropic / Google API key. Batch-translate .md files while preserving frontmatter / code / links\"}]]}]\n21:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/image-base64\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Image ↔ Base64\"}]\n22:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/heic-to-jpg\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"HEIC → JPG / PNG / WebP\"}]\n23:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/image-compress-to-size\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Image compress to size\"}]\n24:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/image-crop\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Image Crop (free / aspect / circular)\"}]\n25:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/image-resize\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Image Resize (fit / longest-edge / scale)\"}]\n26:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/favicon-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Favicon all-in-one generator\"}]\n27:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/svg-optimizer\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-fo"])</script><script>self.__next_f.push([1,"reground transition\",\"children\":\"SVG Optimizer\"}]\n28:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/image-to-pdf\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Image → PDF\"}]\n29:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-merge-split\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF merge / split / extract\"}]\n2a:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-compress\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF compress\"}]\n2b:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-page-edit\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF page editor\"}]\n2c:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-password-remove\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF unlock / remove password\"}]\n2d:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-watermark\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF watermark + page numbers\"}]\n2e:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/pdf-to-images\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"PDF → Images (PNG / JPG / WebP)\"}]\n2f:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/gif-from-frames\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Images → GIF Animation\"}]\n30:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/video-to-gif\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Video → GIF\"}]\n31:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/jwt\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JWT decoder / generator\"}]\n32:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/curl\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"cURL ↔ fetch ↔ Python converter\"}]\n33:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/selector\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS / XPath selector tester\"}]\n34:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/regex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Regex builder \u0026 live tester\"}]\n35:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/mock-api\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Mock API designer\"}]\n36:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/hash-tools\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Hash Tools (MD5 / SHA-1/256/384/512)\"}]\n37:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/uuid-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"UUID Generator (v4 / v7 batch)\"}]\n38:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/regex-replace\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Regex Replace + Group Preview\"}]\n39:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/cron-expression\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Cron Expression Visualiser\"}]\n3a:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/password-st"])</script><script>self.__next_f.push([1,"rength\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Password Strength + Crack Time\"}]\n3b:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/token-counter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"AI Token Counter (GPT / Claude / Gemini)\"}]\n3c:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/json-to-typescript\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON → TypeScript\"}]\n3d:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/tw-test-data\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Taiwan test data generator\"}]\n3e:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/json\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON formatter + Schema validator\"}]\n3f:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/timex\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Unix time \u0026 timezone converter\"}]\n40:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/md-translate\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Markdown batch translator\"}]\n41:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/qr-code\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"QR Code generator (with Logo)\"}]\n42:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/code-beautifier\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Code Beautifier / Minifier (10 languages)\"}]\n43:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/markdown-editor\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Markdown Editor (live preview)\"}]\n44:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/url-encoder\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"URL / Base64 / HTML encoder\"}]\n45:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/json-diff\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"JSON deep diff (visual)\"}]\n46:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/csv-viewer\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSV / TSV viewer + converter\"}]\n47:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/lorem-ipsum\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Lorem Ipsum (Latin / Chinese / Tech)\"}]\n48:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/timestamp-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Unix Timestamp ↔ Timezones\"}]\n49:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/text-diff\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Text Diff (line-by-line)\"}]\n4a:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/case-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Case Converter\"}]\n4b:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/slugify\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Slugify (URL-friendly, CJK-aware)\"}]\n4c:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/emoji-info\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a"])</script><script>self.__next_f.push([1,":props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Emoji Info Lookup\"}]\n4d:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/cubic-bezier\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"cubic-bezier editor\"}]\n4e:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/css-gradient\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS gradient editor\"}]\n4f:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/type-scale\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Type scale + Fluid clamp() generator\"}]\n50:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/box-shadow\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"box-shadow editor (multi-layer + Material elevation)\"}]\n51:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/glassmorphism\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Glassmorphism + Neumorphism generator\"}]\n52:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/css-clip-path\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS clip-path editor\"}]\n53:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/mermaid-editor\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Mermaid Diagram Editor\"}]\n54:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/css-grid-generator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"CSS Grid Generator\"}]\n55:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/color-converter\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Color format converter\"}]\n56:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/tailwind-palette\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Tailwind palette generator\"}]\n57:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/contrast-checker\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"WCAG + APCA contrast checker\"}]\n58:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/color-blindness-simulator\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Colour-blindness Simulator (8 + normal)\"}]\n59:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/percentile\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Percentile calculator\"}]\n5a:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/cheatsheet\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Test framework cheatsheet\"}]\n5b:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/http-status-codes\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"HTTP Status Codes\"}]\n5c:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/tools/bundle-size\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"npm Bundle Size Lookup\"}]\n5d:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/articles\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Articles\"}]\n5e:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/changelog\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Changelog\"}"])</script><script>self.__next_f.push([1,"]\n5f:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/about\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"About\"}]\n60:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/privacy\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Privacy\"}]\n61:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/security\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"hover:text-foreground transition\",\"children\":\"Security\"}]\n64:[\"$\",\"p\",null,{\"className\":\"text-foreground/70 text-xs\",\"dangerouslySetInnerHTML\":{\"__html\":\"💡 The first time you hit \u003cstrong\u003eBeautify\u003c/strong\u003e the Prettier engine loads (~400KB, cached after first fetch). Subsequent runs are instant.\"}}]\n15:[\"$\",\"$L65\",null,{\"ref\":\"$undefined\",\"href\":\"/en/privacy\",\"locale\":\"$undefined\",\"localeCookie\":\"$1a:props:localeCookie\",\"className\":\"border-emerald-500/30 bg-emerald-500/10 hover:bg-emerald-500/15 text-emerald-300 mb-4 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs transition\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":true,\"children\":\"🔒\"}],[\"$\",\"span\",null,{\"className\":\"font-medium\",\"children\":\"Client-side\"}],[\"$\",\"span\",null,{\"className\":\"text-emerald-300/60\",\"children\":\"files never upload\"}]]}]\n67:T4b6,We use the following analytics, **none of which feed into ad retargeting**:\n\n- **Vercel Analytics + Speed Insights**: aggregate page views and Web Vitals; no cookies used to identify individuals (GDPR-friendly).\n- **Google Analytics 4 (GA4)**: page views, browser / device / country / traffic source; uses cookies to keep session state.\n\nGA4 sets the following cookies in your browser:\n\n- `_ga` (2 years, anonymous visitor ID)\n- `_ga_W6WN0CFEPB` (2 years, session state)\n\nWe have **none** of the following:\n\n- No Facebook / X / TikTok pixels\n- No Google Ads / AdSense\n- No third-party (cross-site) tracking cookies\n- No client-side error reporting (Sentry, etc.)\n- No affiliate / referral tracking\n\n**Want to opt out of GA?** Install the [Google Analytics opt-out add-on](https://tools.google.com/dlpage/gaoptout), any content-blocker (uBlock Origin), or a browser with built-in tracking protection (Brave, Firefox strict mode). **The site stays fully functional — every tool keeps working.**\n\nThe cookies the site itself sets:\n\n- `theme`: dark / light preference (stored locally, never sent anywhere meaningful)\n- `twdata_*`: HMAC signatures for the `tw-test-data` password gate (only used by that tool)"])</script><script>self.__next_f.push([1,"10:[\"$\",\"$L66\",null,{\"formats\":\"$undefined\",\"locale\":\"en\",\"messages\":{\"brand\":{\"name\":\"Dev Tools\",\"tagline\":\"Free online utilities built for QA \u0026 engineers\"},\"nav\":{\"home\":\"Home\",\"tools\":\"Tools\",\"about\":\"About\",\"privacy\":\"Privacy\",\"changelog\":\"Changelog\",\"articles\":\"Articles\",\"security\":\"Security\"},\"security\":{\"title\":\"Security\",\"subtitle\":\"How we think about security, what we collect (and don't), and a frank attack-surface analysis. Source code is public — anyone can verify.\",\"metaTitle\":\"Security — Client-only architecture, no PII, public source\",\"metaDescription\":\"Security analysis of dev.9niche.com: 53 tools run 100% in your browser, no uploads, no database, no signup. Source code public and auditable.\",\"architecture\":{\"title\":\"Why the architecture is safe\",\"body\":\"Our core design principle: there's nothing to steal. Every tool processes data right in your browser:\",\"point1\":\"All 53 tools are client-side — files / text / passwords are never sent to a server\",\"point2\":\"No database, no user accounts, no password storage\",\"point3\":\"No payments, no paywall, no subscriptions\",\"point4\":\"All traffic is HTTPS + HSTS, so man-in-the-middle attacks aren't viable\"},\"notCollected\":{\"title\":\"What we don't collect\",\"body\":\"For full transparency, we have never collected — and cannot collect — any of the following:\",\"item1\":\"PDFs / images / videos you upload — they stay on your device; nothing carries them out\",\"item2\":\"Passwords, API keys, tokens, JSON content you type — all in-browser\",\"item3\":\"PII, email, name, IP address (Vercel Analytics is configured not to record IP)\",\"item4\":\"Cookies only store theme preference (dark / light); no tracking IDs\"},\"thirdParty\":{\"title\":\"Third-party services (full disclosure)\",\"body\":\"Every third-party the site touches:\",\"analytics\":\"Vercel Analytics + Speed Insights — page-view counts only, no IP, no PII\",\"bundle\":\"bundlephobia.com (only on the bundle-size tool) — the npm package name you query is sent to their public API\",\"mdtrans\":\"OpenAI / Anthropic / Google APIs (only on the md-translate tool) — uses your own API key, called directly from your browser; we never touch it\"},\"gated\":{\"title\":\"The only backend touchpoint: tw-test-data password gate\",\"body\":\"To stop abuse of tw-test-data (Taiwan ID / credit card generator), we added a password gate + 3-strike IP ban + Telegram alert. HMAC-signed cookies via WebCrypto; the password is in environment variables. Even if breached, all an attacker gets is fake test data — no real loss.\"},\"openSource\":{\"title\":\"Open source\",\"body\":\"The entire project is public on GitHub so you can verify everything above for yourself:\"},\"disclosure\":{\"title\":\"Found a vulnerability? Tell us privately\",\"body\":\"Please report security issues privately via GitHub Security Advisory — we'll respond quickly. Please don't disclose in public issues / PRs (avoids being weaponised).\",\"cta\":\"→ Report privately (GitHub Security Advisory)\"}},\"articles\":{\"indexTitle\":\"Articles\",\"indexSubtitle\":\"Deep dives + practical guides; each article pairs with a tool on this site so you can try ideas as you read.\",\"metaTitle\":\"Articles — JWT, Regex, CSS selectors, performance \u0026 more\",\"metaDescription\":\"Deep technical articles written from a QA / engineering perspective covering JWT security, advanced regex, CSS selector hardening, percentile maths and more — each paired with a live tool.\",\"backToIndex\":\"Back to articles\",\"pairedTool\":\"Paired tool\",\"openTool\":\"Open the tool\"},\"changelog\":{\"title\":\"Changelog\",\"subtitle\":\"Every tool launch and notable architecture change for this site, pulled directly from git history. Every change is publicly traceable.\",\"totalEntries\":\"{n} entries\",\"viewOnGithub\":\"View full history on GitHub\",\"empty\":\"No entries yet.\",\"metaTitle\":\"Changelog — Tool launches \u0026 architecture timeline\",\"metaDescription\":\"Timeline of every tool launch and notable change on the Dev Tools site, traceable to git commits.\"},\"home\":{\"title\":\"Pure client-side tools for devs, designers, and everyone\",\"subtitle\":\"PDF merge/split/compress, HEIC → JPG, image-to-PDF, color converter, JWT, regex, JSON, mock API, Taiwan test data… all running in your browser. Files never upload.\",\"privacyBadge\":\"Client-side · files never leave your browser\",\"browseTools\":\"Browse all tools\",\"howItsPrivate\":\"How is this private?\",\"github\":\"GitHub\",\"exploreByCategory\":\"Explore by category\",\"allTools\":\"All tools\",\"toolCount\":\"{n} tools\",\"stats\":{\"tools\":\"tools\",\"categories\":\"categories\",\"upload\":\"uploads\",\"uploadZero\":\"0\"}},\"privacyBadge\":{\"label\":\"Client-side\",\"subtitle\":\"files never upload\"},\"article\":{\"jwt\":{\"title\":\"JWT in depth: three segments, HS256 vs RS256, common pitfalls, safe storage\",\"intro\":\"JWTs are the most widely adopted stateless authentication standard of the past decade — and one of the most frequently misused protocols on the OWASP Top 10. From a QA angle, understanding the structure is what turns vague \\\"test auth\\\" tickets into concrete security test cases.\",\"sections\":[{\"heading\":\"What the three segments are, and why\",\"body\":\"JWT splits on `.` into three Base64URL-encoded segments:\\n\\n- **Header**: `{\\\"alg\\\":\\\"HS256\\\",\\\"typ\\\":\\\"JWT\\\"}` — algorithm and type\\n- **Payload**: `{\\\"sub\\\":\\\"123\\\",\\\"exp\\\":1700000000,\\\"role\\\":\\\"admin\\\"}` — claims (subject, expiry, custom fields)\\n- **Signature**: the signed digest of `header.payload` using the algorithm in the header, with a secret (HS256) or private key (RS256)\\n\\nHeader and payload are **not encrypted** — only encoded. Anyone can Base64-decode them and read the contents. **Security comes from the signature**: the verifier recomputes the signature with its secret / public key, compares with the token's signature, and rejects anything that doesn't match — so any tampering with the payload immediately fails.\"},{\"heading\":\"HS256 vs RS256 vs ES256: which to use when\",\"body\":\"- **HS256** (symmetric): fast and simple, but signer and verifier share the same secret. **Fits inside a single service** (API gateway → your own backend).\\n- **RS256** (asymmetric RSA): sign with a private key, verify with a public key. **Fits one-to-many** (auth server issues tokens, many microservices verify). Public keys can be shared safely.\\n- **ES256** (asymmetric ECDSA): same model as RS256 but signatures are shorter and signing is ~80% faster. **Recommended for new projects.**\\n\\nWebCrypto and Node's standard library support all three natively.\"},{\"heading\":\"Three vulnerabilities you must test\",\"body\":\"**1. The `alg: none` attack**: some older libraries accept `{\\\"alg\\\":\\\"none\\\"}` meaning \\\"skip signature verification\\\". Attackers tamper with the payload, leave the signature empty, and the server lets them through.\\n\\n**2. Algorithm confusion** (RS256 → HS256): the server expects RS256, but the attacker rewrites the header to `alg: HS256` and **signs with the public key as the HMAC secret**. Libraries that don't enforce algorithm consistency accept it — and the public key is, well, public.\\n\\n**3. Missing `exp` / `aud` validation**: most QA teams only check the signature is well-formed but forget:\\n- Whether `exp` is in the past\\n- Whether `aud` matches this service (prevents token reuse across services)\\n- Whether `iss` is the trusted issuer\\n\\nEach of those needs its own negative test case in your suite.\"},{\"heading\":\"Where to store tokens client-side (pick one risk)\",\"body\":\"- **localStorage**: easiest, **but a single XSS leaks every token** (malicious scripts read it directly).\\n- **httpOnly + Secure + SameSite=Strict cookies**: immune to XSS, **but vulnerable to CSRF** unless you also use a CSRF token or SameSite=Lax with double-submit.\\n- **In-memory (React state)**: most secure, **but refresh wipes it** — you need a refresh token (in an httpOnly cookie) to mint a new one.\\n\\nThe industry default: **access token in memory + refresh token in httpOnly cookie**. This combination has reasonable defenses against both XSS and CSRF.\"},{\"heading\":\"JWT test checklist for QA\",\"body\":\"Positive:\\n\\n- Valid token → 200\\n- The role / scope in the payload actually affects what the API returns\\n\\nNegative (skipping these means your system has a real hole):\\n\\n- Expired token → 401\\n- Tampered signature → 401\\n- `alg: none` header → 401 (NOT 200)\\n- Token issued for service A, sent to service B → 401 (`aud` enforcement)\\n- HS256 token signed with the RS256 public key → 401 (algorithm confusion defense)\\n- Payload `role` changed from `user` to `admin` (signature unchanged) → 401\\n\\nThe [JWT decoder / generator tool](/en/tools/jwt) can manually craft every one of those cases.\"}],\"footer\":\"Try it: use the [JWT tool](/en/tools/jwt)'s Sign mode to mint a token with `alg: none` or with `exp` in the past, then send it to your API and confirm it gets rejected.\"},\"regex\":{\"title\":\"Regex in depth: capture groups, lookaround, catastrophic backtracking, cross-language differences\",\"intro\":\"regex is something most engineers use daily but never feel fully fluent in. Here are the techniques I actually reach for after years of QA / SRE work — plus the real cases where my browser locked up because of one careless quantifier.\",\"sections\":[{\"heading\":\"Capture vs non-capturing vs named groups\",\"body\":\"All three use parentheses but mean different things:\\n\\n- `()` **Capture group**: captures, referenceable as `$1`, `$2`\\n- `(?:)` **Non-capturing group**: groups but doesn't capture — **slightly faster, so use these freely in complex patterns**\\n- `(?\u003cname\u003e)` **Named group**: captures and can be referenced by name — **wins on readability** because you don't have to count positions weeks later\\n\\nExample: matching an email\\n\\n- Bad: `(\\\\w+)@(\\\\w+)\\\\.(\\\\w+)` — using `$1` `$2` `$3` later, no idea which is which after a month.\\n- Good: `(?\u003cuser\u003e\\\\w+)@(?\u003chost\u003e\\\\w+)\\\\.(?\u003ctld\u003e\\\\w+)` — using `groups.user` is self-documenting.\"},{\"heading\":\"Lookahead / lookbehind: conditions without consuming\",\"body\":\"Lookaround tests a condition inside the regex engine **without advancing the cursor** — perfect when you want \\\"simultaneous conditions\\\":\\n\\n- `(?=...)` **Positive lookahead**: what follows must match\\n- `(?!...)` **Negative lookahead**: what follows must not match\\n- `(?\u003c=...)` **Positive lookbehind**: what precedes must match\\n- `(?\u003c!...)` **Negative lookbehind**: what precedes must not match\\n\\nClassic example — password with at least one digit AND one uppercase:\\n\\n```\\n^(?=.*\\\\d)(?=.*[A-Z]).{8,}$\\n```\\n\\nThree lookaheads in parallel, no characters \\\"consumed\\\", just conditions checked. Much cleaner than chaining multiple regexes.\"},{\"heading\":\"Catastrophic backtracking: how regex freezes your browser\",\"body\":\"**Nested quantifiers** are the classic foot-gun. Anti-patterns: `(a+)+`, `(a*)*`, `(a|a)*`\\n\\nWith `(a+)+b` against `aaaaaaaaaaaaaaaaa`, the engine tries **every possible way to split the `a`s into groups** before giving up — O(2^n). I've seen 30 characters of test input lock up a browser for 8 seconds.\\n\\n**How to avoid**:\\n\\n1. **Atomic groups** `(?\u003e...)` (no JS support; Node ≥ 16 has them; Java / .NET have them)\\n2. **Possessive quantifiers** `++` `*+` (same — no JS)\\n3. **Audit your quantifiers for overlap** (`(\\\\w+)+` collapses to `\\\\w+`)\\n4. **Cap input length** (this site's tools cap regex input at 100,000 chars for exactly this reason)\\n\\nJS-land usually relies on (3) and (4).\"},{\"heading\":\"JavaScript vs Python: differences that bite\",\"body\":\"- **Start / end anchors**: JS doesn't have `\\\\A` / `\\\\Z`, use `^` `$` + `m` flag\\n- **Unicode**: JS needs the `u` flag to get `\\\\p{Letter}`; Python is Unicode by default\\n- **Lookbehind**: **Safari \u003c 16.4 has no lookbehind at all** — your site breaks for those users. Always wrap in try/catch with a fallback regex.\\n- **`re` vs `regex` module** (Python): the stdlib `re` doesn't support variable-length lookbehind; install the third-party `regex` module if you need it\\n- **Sticky flag `y`**: JS only — useful when writing tokenizers / lexers\"},{\"heading\":\"Real QA scenarios where I use regex\",\"body\":\"The patterns I reach for most weeks:\\n\\n- **nginx access log parsing**: extract IP / status / response time → feed into [percentile analysis](/en/tools/percentile)\\n- **API response body checks**: Robot Framework's `Should Match Regexp` is much sharper than `Should Contain`\\n- **Test data validation**: confirm the [credit card test data](/en/tools/tw-test-data) you generated matches the expected `(\\\\d{4}) (\\\\d{4}) (\\\\d{4}) (\\\\d{4})` format\\n- **Selenium dynamic IDs**: grab `userdata-([a-f0-9]{8})` and use the captured suffix\\n- **Error log classification**: pull file path + line number out of stack traces to rank flakiest modules\"}],\"footer\":\"Try the patterns: paste each one into the [Regex tool](/en/tools/regex) and confirm matches live. The lookbehind-on-Safari case is the one that catches everyone.\"},\"selector\":{\"title\":\"Selector in depth: CSS vs XPath, stable selector patterns, why Playwright's getByRole wins\",\"intro\":\"The painful part of E2E automation isn't writing steps — it's selectors that break every other day. Here are the patterns that worked across years of writing, debugging, and migrating Selenium / Cypress / Playwright suites, plus why Playwright pushes role-based locators.\",\"sections\":[{\"heading\":\"CSS vs XPath: choose by use case\",\"body\":\"**CSS wins when**:\\n\\n- The element has clean class / id / attribute hooks\\n- You want speed (30–50% faster than XPath in every browser engine)\\n- Teammates already read CSS\\n\\n**XPath wins when**:\\n\\n- You need to match by text content: `//button[text()=\\\"Submit\\\"]` (CSS only got similar power with `:has()`, Safari 16+)\\n- You need to walk to a parent: `//input/../label` (CSS literally cannot)\\n- You have nested conditions: \\\"div that has class A but no descendant with class B\\\"\\n\\n**My rule of thumb**: default to CSS, save XPath for the two parent-or-text cases.\"},{\"heading\":\"Three principles for selectors that survive 6 months\",\"body\":\"**1. Always prefer `data-testid`**: decoupled from product visuals, immune to UI redesigns. Cypress, Playwright, Selenium all recognize them.\\n\\n```html\\n\u003cbutton data-testid=\\\"submit-payment\\\"\u003ePay now\u003c/button\u003e\\n```\\n\\nSelector: `[data-testid=\\\"submit-payment\\\"]` — survives even a swap to an icon button.\\n\\n**2. Never `nth-child` or `nth-of-type`**: change the list order and the selector dies; even backend re-sorting breaks it.\\n\\n**3. Prefer semantic classes over styling classes**: `.btn-primary-rounded-lg-hover` (Tailwind-style) changes constantly; `.submit-button` (semantic) is stable. Or just always go data-testid.\\n\\n**4. Don't trust IDs blindly**: frameworks generate `id=\\\"react-aria-:r1:\\\"`-style IDs that change on hydration. Use them when stable, fallback otherwise.\"},{\"heading\":\"Why Playwright's getByRole is a game-changer\",\"body\":\"Traditional selectors say: \\\"find the DOM at this position\\\" — structure changes, selector breaks.\\n\\nPlaywright's `getByRole` says: \\\"find an accessibility-tree node with role=button and an accessible name containing 'Submit'\\\".\\n\\n```ts\\npage.getByRole('button', { name: 'Submit' })\\n```\\n\\nBenefits:\\n\\n- **Independent of visual reordering**: move the button left to right — the test still passes\\n- **Aligned with a11y**: a broken test means a broken accessibility tree, so you catch UX bugs free\\n- **Cross-framework**: roles are consistent across React / Vue / Angular\\n\\nNice side effect: it forces you to use `\u003cbutton\u003e` instead of `\u003cdiv onClick\u003e`, upgrading a11y across the codebase.\"},{\"heading\":\"Timing in dynamic content\",\"body\":\"**Worst antipattern**: `waitForTimeout(2000)` — flaky on slow networks, wasteful on fast ones.\\n\\n**Correct**:\\n\\n- Playwright: `await expect(page.getByText('Success')).toBeVisible()` — built-in auto-wait, polls for 5s by default\\n- Selenium: `WebDriverWait(driver, 10).until(EC.visibility_of_element_located(...))`\\n- Robot Framework: `Wait Until Element Is Visible    selector    timeout=10s`\\n\\n**Advanced** — wait for the actual network response:\\n\\n```ts\\nawait page.waitForResponse(resp =\u003e\\n  resp.url().includes('/api/payment') \u0026\u0026 resp.status() === 200\\n);\\nawait expect(page.getByText('Payment success')).toBeVisible();\\n```\\n\\nMore precise than waiting for an element — sometimes the element renders from cache before the real API call completes.\"},{\"heading\":\"Cross-browser gotchas\",\"body\":\"- **`:has()` selector**: Safari 16+, Chrome 105+, Firefox 121+ only. Works in your dev env, breaks for an old Firefox user\\n- **`text=` Playwright pseudo-locator**: Playwright-specific syntax — paste into a browser DevTools console and it won't work\\n- **`/text()=\\\"...\\\"` in XPath**: Safari implements some XPath functions incompletely — verify with the [selector tester tool](/en/tools/selector) before shipping\\n- **Shadow DOM**: regular CSS selectors **cannot pierce** shadow boundaries; Playwright's locators do automatically, but the same string in DevTools won't\"}],\"footer\":\"Before writing a test, paste your HTML and selector into the [selector tester](/en/tools/selector) and verify it matches exactly what you expect. Toggle CSS / XPath to see which gives a cleaner expression.\"},\"twdata\":{\"title\":\"Taiwan test data in depth: national ID algorithm, business-number 7th-digit rule, Luhn credit cards\",\"intro\":\"Doing QA in fintech, e-commerce, or government projects means generating volumes of test data — but using real personal data is a violation of PDPA / GDPR. This article covers why fake data is required, the Taiwan official checksum algorithms, and real QA scenarios where this data matters.\",\"sections\":[{\"heading\":\"Why you must use fake data (compliance)\",\"body\":\"Taiwan's Personal Data Protection Act treats **national ID numbers as sensitive personal data**. Internal dev/test environments using real IDs (even employees') flunk audits.\\n\\nReal-world consequences:\\n\\n- **Fintech QA**: KYC flows need thousands of IDs — they have to be format-valid but anonymous\\n- **E-commerce**: load testing the member system with 10K fake accounts that pass format validation\\n- **Government / health API integration**: sandbox environments need format-correct test data\\n- **Risk-control rule testing**: simulate users of different ages / genders / regions\\n\\n**The point**: fake data must be **format-valid** (passes validators) but **fictional** (no real person it corresponds to).\"},{\"heading\":\"Taiwan national ID algorithm (official)\",\"body\":\"10 characters: `[A-Z]` + `[12]` + 8 digits.\\n\\n**Steps**:\\n\\n1. **Letter → number**: A=10, B=11, C=12 … I=34, O=35, X=30, Y=31, Z=33 (I and O are out of order for historical reasons)\\n2. Split the letter's number into two digits `N1 N2`\\n3. Weighted sum: `N1 × 1 + N2 × 9 + d1 × 8 + d2 × 7 + d3 × 6 + d4 × 5 + d5 × 4 + d6 × 3 + d7 × 2 + d8 × 1`\\n4. Checksum = `(10 - sum mod 10) mod 10`\\n5. The second character: **1 = male, 2 = female** (new residents use 8, 9 — this tool doesn't generate those)\\n\\nExample: `A123456789` — A → 10, second-char 1 × 9 = 9, then weighted-sum digits 12345678 with checksum 9 — the total mod 10 must be 0.\"},{\"heading\":\"Business number (8 digits) — the official rule\",\"body\":\"8 digits, weights `[1, 2, 1, 2, 1, 2, 4, 1]`.\\n\\n**Algorithm**:\\n\\n1. Multiply each digit by its weight\\n2. If a product ≥ 10, **add the ones and tens digits** (e.g. 7 × 2 = 14 → 1 + 4 = 5)\\n3. Sum all results\\n4. **If sum mod 10 == 0** → valid\\n5. **Special case**: if **the 7th digit is 7**, then **(sum + 1) mod 10 == 0** is also valid\\n\\nThis special 7th-digit-7 rule is a historical National Tax Bureau exception to avoid number-collision. **Forgetting it in your validator wrongly rejects valid business numbers.**\\n\\nThe [TW test data tool](/en/tools/tw-test-data) matches the official algorithm so the output passes most validators.\"},{\"heading\":\"Luhn credit card algorithm (universal)\",\"body\":\"Luhn is the global standard for credit-card check digits. Used by Visa, Mastercard, JCB, Amex — and also IMEI numbers, Canadian Social Insurance Numbers, and more.\\n\\n**Steps** (from right to left):\\n\\n1. **Rightmost digit is the check digit** — set aside\\n2. Starting from the second-from-right, **double every other digit**\\n3. If doubling gives \u003e 9, **subtract 9** (equivalent to summing the tens and ones digits)\\n4. Sum all digits (including the check digit)\\n5. Total mod 10 == 0 → valid\\n\\nExample: `4532015112830366`\\n\\n**Stripe test cards**: `4242424242424242` (Visa), `5555555555554444` (Mastercard) — all pass Luhn but are well-known test numbers Stripe never actually charges.\"},{\"heading\":\"Real QA scenarios\",\"body\":\"How I actually use this in fintech QA:\\n\\n- **Account opening load tests**: generate 10K valid IDs + business numbers + credit cards, drive the open-account API with [JMeter / k6 → percentile analysis](/en/tools/percentile)\\n- **Risk-rule regression**: use IDs with different gender / region letters to verify rules don't misfire\\n- **Foreign-resident onboarding**: test the new-resident ID variant (second digit != 1/2) flows\\n- **Credit card binding**: test BIN-routing logic by feeding Visa / Mastercard / JCB cards of different brand prefixes\\n- **DB seed**: when the test environment boots, seed 100 fake accounts so QA and PM can demo immediately\\n\\n**Important**: data from the `tw-test-data` tool is **for format testing only** — using it to open real accounts or register for real services constitutes fraud.\"}],\"footer\":\"Try it now: generate 100 IDs in the [TW test data tool](/en/tools/tw-test-data), feed them into your company's validator, and confirm 100% pass.\"},\"percentile\":{\"title\":\"Reading percentiles: p95, p99, and Apdex in practice\",\"intro\":\"When a QA or SRE team gets the first batch of load-test numbers, the question is always the same — \\\"is this normal?\\\" Here's how percentiles became the core of SLOs in industry, and how to read them.\",\"sections\":[{\"heading\":\"Why p95 / p99 instead of the average?\",\"body\":\"Sort 100 response times: p95 is the 95th — meaning 95% of requests are faster than that value. The mean gets dragged by outliers, but for user experience, **the slowest 5% are the ones who complain**.\\n\\nExample: 99 requests at 100ms, one at 10,000ms. Mean = 199ms looks fine, but p99 = 10,000ms reflects the reality that 1% of users waited 10 seconds. Set SLOs on the mean and you'll never breach — and you'll never fix the things that hurt most.\"},{\"heading\":\"What is Apdex? How do you set T?\",\"body\":\"Apdex buckets each request: **satisfied** (\u003c T), **tolerated** (T to 4T), **frustrated** (\u003e 4T). Formula: `(satisfied + tolerated / 2) / total`. Score range: 0–1.\\n\\nCommon T values in industry:\\n\\n- **Backend APIs**: T = 200–500ms\\n- **Initial web page load**: T = 1s (aligns with the LCP target)\\n- **Interactive actions** (form submit, search): T = 500ms\\n- **Heavy operations** (reports, uploads): T = 3–5s\\n\\nApdex \u003c 0.7 generally means UX is degrading noticeably; \u003c 0.5 means most requests are out of the tolerance zone.\"},{\"heading\":\"Three curves you'll see in the wild\",\"body\":\"**Flat**: p50 / p90 / p95 are close, e.g. 120 / 180 / 200ms. System is healthy; no outliers.\\n\\n**Long-tail**: p50 = 200ms but p95 = 2000ms. Most requests fly, a few crawl. Usual suspects: slow SQL, flaky external APIs, GC pauses. Priority: **chase the tail**, not the average — lowering the mean here barely helps anyone.\\n\\n**Avalanche**: p50, p90, p95 all jump together — 800 / 1500 / 3000ms. The whole system is saturating, typically CPU or a connection pool. Treatment: **add capacity or rate-limit**.\"},{\"heading\":\"Common mistakes\",\"body\":\"1. **Tiny samples + p99**: at n = 100, p99 is just the slowest single request — a single outlier shifts everything. Aim for at least 1,000 samples before quoting p99.\\n\\n2. **SLO based on the mean**: virtually every industry SLO standard (Google SRE Book, AWS Well-Architected) uses p95 or p99, not the mean.\\n\\n3. **Not specifying which percentile algorithm**: linear interpolation (R-7, Excel's default and this tool's default) vs nearest-rank (R-1) differ by milliseconds for small samples. Document which one your report uses.\\n\\n4. **Comparing across mismatched sample sizes**: 100 samples at 3 a.m. vs 10,000 samples at peak — different distributions, not comparable. Bucket into equal sample sizes or fixed time windows first.\"},{\"heading\":\"Wire it into monitoring\",\"body\":\"Use this tool to read a single test run quickly. For ongoing monitoring, push the same metrics into **Grafana / Datadog / New Relic** and set alert rules:\\n\\n- `p95 \u003e 500ms for 5 min` → Slack notification\\n- `Apdex \u003c 0.7 for 10 min` → PagerDuty page\\n\\nWorkflow: when JMeter / k6 finishes, paste the response-time column here to eyeball the numbers; if something is on fire, dive into Grafana to find the root cause. That's the standard QA / SRE loop.\"}],\"footer\":\"Try it now: copy the response-time column from your last JMeter Summary Report into the tool above — p95, p99, and Apdex in 30 seconds.\"},\"img2pdf\":{\"title\":\"Image to PDF: The Complete Guide — JPG / PNG / HEIC Merge, Paper Sizes \u0026 Margins\",\"intro\":\"Office expense reports, school assignments, signed contracts — merging photos into a single PDF is a daily need. \\\"Image to PDF\\\" sounds simple but has plenty of gotchas: will HEIC open, A4 vs Letter, N-up layout to save paper, will the printer crop margins. This guide uses our `image-to-pdf` tool as the worked example, covers each detail in one place, and runs entirely **client-side — your files never leave the browser**.\",\"sections\":[{\"heading\":\"Why \\\"client-side\\\" beats cloud PDF converters\",\"body\":\"Most online PDF tools **upload your image to their server**, convert there, and let you download the result. For receipts, contracts, ID photos, or anything sensitive, that flow has real privacy issues:\\n\\n- Is your file retained? For how long?\\n- Is it used as training data?\\n- Can corporate firewall middleware decrypt the SSL and see contents?\\n\\nA **client-side approach uses `pdf-lib`, `heic2any` and similar libraries in your browser** — your file never produces a network request that leaves your machine. The cost: ~500 KB of JS on first load. After that, it works fully offline.\"},{\"heading\":\"Can it merge HEIC / JPG / PNG / WebP all together?\",\"body\":\"**JPG / PNG / WebP just work** — browsers `\u003ccanvas\u003e` decodes them natively.\\n\\n**HEIC (iPhone default) needs transcoding first**. AirDropping HEIC iPhone → Mac is fine, but sending to Windows or uploading to most PDF tools fails to open. We use `heic2any` in the browser to decode HEIC into JPEG, then push it through the PDF pipeline.\\n\\nWatch out: HEIC decoding is CPU-heavy. A 12 MP photo takes 1–2 seconds on a mid-range phone. Processing 30 HEICs at once will freeze the UI for tens of seconds — in production code you'd use a Web Worker or batch processing to keep the main thread responsive.\"},{\"heading\":\"Paper choice: A4 vs Letter vs A5 vs Legal\",\"body\":\"**A4 (210×297 mm)**: global standard, mandatory for most Asian / European corporate paperwork.\\n\\n**Letter (8.5×11 inches, ~216×279 mm)**: US / Canada standard. Shorter than A4 — printing on an A4 printer leaves a blank strip.\\n\\n**A5 (148×210 mm)**: half of A4. Booklets, menus, pocket notes.\\n\\n**Legal (8.5×14 inches)**: US legal documents. Much longer than Letter.\\n\\nPicking the wrong size won't fail to print — it'll **scale your content**, making photos blurry and text edges jagged. Rule of thumb: unless you have a specific reason, **use A4 globally**.\"},{\"heading\":\"1-up / 2-up / 4-up layouts: when to use which\",\"body\":\"\\\"N-up\\\" packs N thumbnails onto each page:\\n\\n- **1-up**: one photo per page. Best quality, but 30 photos = 30 pages — expensive to print.\\n- **2-up**: two per page. Great for paired vertical photos (passport front / back, two receipts).\\n- **4-up**: four per page. Ideal for **expense receipts** (your boss looks at amounts, not detail). 30 receipts → 8 pages, saves paper and is easier to file.\\n\\nAdvanced: **combine 2-up with duplex printing** — each physical sheet then carries 4 photos. Most printers support duplex.\"},{\"heading\":\"Common gotchas: margins, resolution, font blur\",\"body\":\"**Margins too small get clipped**: most consumer printers reserve 5–10 mm of unprintable area. Aim for ≥ 15 mm.\\n\\n**Low-resolution images print blurry**: 1080p looks sharp on a screen but at full A4 you need ~300 DPI. A 1920×1080 screenshot fills A4 at ~160 DPI — text becomes obviously soft. **OCR the screenshot first, then print** the OCR'd text — much sharper.\\n\\n**JPEG quality set too low**: tools default to 80% (you can't tell). But below 60%, text edges show \\\"ringing\\\" compression artefacts. For important documents, set quality ≥ 95%.\"}],\"footer\":\"Try it: drop a batch of iPhone photos into [the Image → PDF tool](/en/tools/image-to-pdf), pick A4 + 4-up + 95% quality. **Nothing leaves the browser**. Drag the output straight into your expense system.\"},\"imgbase64\":{\"title\":\"Image to Base64: The Complete Guide — Data URIs, CSS Backgrounds, Email Inline\",\"intro\":\"Embedding images directly into HTML / CSS / JSON — Base64 has been the front-end engineer's image-bundling tool for 15 years. But when does inlining actually help, and when does it hurt? What exactly is a Data URI? Why must email images be inline? This guide uses our `image-base64` tool as the worked example to clarify Base64's real use cases and avoid three classic misuses.\",\"sections\":[{\"heading\":\"What is a Data URI, and why not just use a URL?\",\"body\":\"A **Data URI** is the contents of a file base64-encoded directly into a URL: `data:image/png;base64,iVBORw0...`.\\n\\nThe upside is **zero HTTP requests** — the browser doesn't fetch a separate `.png`. Great for tiny icons, email signatures, loading placeholders.\\n\\nThe downside: **~33% larger bundle** (base64 overhead) and **uncacheable** (every HTML document re-transmits the image). So inlining only suits images that are **tiny and non-repeating**.\"},{\"heading\":\"When to inline, when not to\",\"body\":\"**Inline when**:\\n- \u003c 2 KB icons / logos / placeholders\\n- Email signatures (most email clients block external image links)\\n- Dynamically generated SVG / QR (used once per session)\\n- Background patterns in critical CSS (avoid blocking first paint)\\n\\n**Don't inline when**:\\n- \u003e 10 KB — URL + HTTP cache is faster\\n- Image appears on multiple pages — CDN cache saves requests\\n- You need lazy loading — Base64 in HTML can't defer\\n\\n**Rule of thumb**: when in doubt, use a URL. Inlining is a last-mile optimization, not a first move.\"},{\"heading\":\"Data URI vs raw Base64 vs HTML img vs CSS background\",\"body\":\"Same image, **four common output forms**:\\n\\n- **Data URI**: `data:image/png;base64,xxx` — for `\u003cimg src\u003e` or `\u003ca href\u003e`\\n- **Raw Base64**: `xxx` (no `data:image/png;base64,` prefix) — for backend APIs, JSON payloads\\n- **HTML img tag**: `\u003cimg src=\\\"data:image/png;base64,xxx\\\" alt=\\\"\\\"\u003e` — paste straight into HTML\\n- **CSS background**: `background-image: url(\\\"data:image/png;base64,xxx\\\");` — for stylesheets\\n\\nThe tool gives you all four; copy whichever fits. The **most confused pair is raw vs Data URI** — the former for JSON, the latter for browser rendering.\"},{\"heading\":\"Reverse: paste base64 → preview + download\",\"body\":\"Another common need is **reverse**: you get a base64 blob from a Slack message, GitHub Issue, or API response and want to see what it is.\\n\\nManually: write `\u003cimg src=\\\"data:image/png;base64,YOUR_BLOB\\\"\u003e` and reload — fiddly, easy to get the prefix wrong.\\n\\nThe tool's reverse mode: **paste the blob directly**. Auto-detects format (JPEG / PNG / GIF / WebP / SVG), handles the `data:` prefix, renders a preview, gives you a download button. Hugely useful when debugging webhook payloads.\"},{\"heading\":\"Why email images must be inline\",\"body\":\"Email clients (Gmail / Outlook / Apple Mail) **block external images by default** — clicking an image reveals your IP / email location to the sender, effectively becoming a tracking tool.\\n\\nSo marketing emails, event invites, signatures **must inline images** (Base64 into the HTML email body) for the recipient to see them. The cost: **larger email body, higher spam-filter score**.\\n\\nIndustry practice: inline logo / signature under 5 KB; use CDN URLs for hero / main visuals — but on your own domain, not a third-party host. Gmail at least trusts owned domains more.\"}],\"footer\":\"Next time you write an email signature or tune critical CSS, use [the Image → Base64 tool](/en/tools/image-base64) — get all 4 output forms in one click. **The image never leaves the browser** — it's base64-encoded locally, then copied.\"},\"tokens\":{\"title\":\"AI Token Counting: The Complete Guide — GPT / Claude / Gemini, Context Limits, Cost Saving\",\"intro\":\"\\\"Does my prompt fit?\\\" \\\"How much will it cost?\\\" \\\"Will I blow the context window?\\\" — three questions every AI app developer has been asked by their PM. But OpenAI / Anthropic / Google all tokenize differently, and Chinese vs English tokens differ even more. This guide uses our `token-counter` tool as the worked example to break down real token-estimation logic, the cost comparison across 5 leading models, and 3 practical cost-saving techniques.\",\"sections\":[{\"heading\":\"Tokens aren't words or characters — they're BPE subwords\",\"body\":\"Tokenizers typically use **BPE (Byte Pair Encoding)** — frequently co-occurring subwords are merged into single tokens.\\n\\n- `\\\"hello\\\"` = 1 token\\n- `\\\"unhappiness\\\"` = `un` + `happiness` = 2 tokens\\n- `\\\"你好嗎\\\"` = `你` + `好` + `嗎` = 3 tokens (one per character)\\n- `\\\"中華電信\\\"` = `中華` + `電信` = 2 tokens (depends on tokenizer corpus)\\n\\nSo **Chinese is roughly 1–2 tokens per character**, **English is roughly 1.3 tokens per word**, Japanese / Korean fall between. When sizing prompts, multiplying word count × 1.5 gives a safe upper bound — better to over-estimate than blow the context window.\"},{\"heading\":\"5 model cost comparison (2026 real pricing)\",\"body\":\"Assume a 5000-token prompt + 500-token reply per call. Cost per 1000 calls:\\n\\n- **GPT-4o** ($2.5/M input, $10/M output): $12.5 + $5 = **$17.5**\\n- **Claude 3.5 Sonnet** ($3/M, $15/M): $15 + $7.5 = **$22.5**\\n- **Gemini 1.5 Pro** ($1.25/M, $5/M): $6.25 + $2.5 = **$8.75**\\n- **GPT-4o-mini** ($0.15/M, $0.6/M): $0.75 + $0.3 = **$1.05**\\n- **Claude 3.5 Haiku** ($0.8/M, $4/M): $4 + $2 = **$6**\\n\\n**Takeaway**: Gemini Pro is ~60% cheaper than Claude Sonnet for the same task. But **quality ranks Claude \u003e GPT-4o \u003e Gemini** on complex reasoning. Cheaper ≠ cheaper-in-practice — debugging a wrong answer can cost more than 1000 runs.\"},{\"heading\":\"What happens when context fills up? Three failure modes\",\"body\":\"Context window is the maximum token span the model can \\\"see\\\": GPT-4o = 128K, Claude 3.5 = 200K, Gemini 1.5 = 1M+.\\n\\nExceed it and you hit one of three modes:\\n\\n- **Hard error** (OpenAI, Anthropic): API returns 400 `context_length_exceeded`\\n- **Head truncation** (some legacy / wrapper layers): earlier conversation silently gets dropped, the model \\\"forgets\\\" what you said\\n- **Quality collapse** (close to the ceiling): not exceeded yet, but the model's attention to earlier content degrades — hallucination, ignored instructions\\n\\n**Rule of thumb**: at 80% of the window, **actively compress**. Don't wait for the error. For long sessions, use `summarize-and-discard`: every 10 turns, ask the model to summarize the previous 10 turns and replace the originals.\"},{\"heading\":\"3 practical cost-saving techniques\",\"body\":\"**1. Move few-shot examples to system prompt + prompt caching**\\nClaude and OpenAI both support prompt caching — repeated system prompts hit cache, **cost drops to ~1/10**. Stuff all few-shot examples into the system prompt; user prompt carries only the task at hand.\\n\\n**2. Use JSON over natural language for structured data**\\n\\\"The user's name is Mark Liu, age 32, an engineer\\\" = ~15 tokens\\n`{\\\"name\\\":\\\"Mark Liu\\\",\\\"age\\\":32,\\\"job\\\":\\\"engineer\\\"}` = ~12 tokens\\n\\nJSON looks heavier, but BPE optimizes `{` `:` `\\\"` heavily — actual density is higher.\\n\\n**3. Use GPT-4o-mini for routing / classification, escalate hard cases**\\nOver 70% of LLM tasks are classification / extraction / formatting — GPT-4o-mini and Claude Haiku handle them just fine. Treat them as Layer 1, only escalate complex reasoning to large models. Average cost drops by ~80%.\"},{\"heading\":\"Why this tool uses a heuristic instead of a real tokenizer\",\"body\":\"OpenAI's `tiktoken`, Anthropic's tokenizer, etc — each requires loading a ~1 MB vocab dictionary + ~500 KB WASM runtime. For an estimation tool, **adding 1.5 MB of bundle just for ±2% precision** isn't worth it.\\n\\nOur heuristic:\\n- Chinese / CJK chars: 1.5 tokens each (averaged from 1–2)\\n- English words: BPE-style subword splitting, ~1.3 tokens per word\\n- Punctuation / numbers / emoji: 1 token each\\n- Code: identify common keywords, compress estimate\\n\\n**Typical error ±10%** — enough for budget estimation and context-fit checks. For exact billing, the API response's `usage.total_tokens` is the source of truth.\"}],\"footer\":\"Next time you're picking an AI model or launching a feature, run a quick check with the [AI Token Counter](/en/tools/token-counter) — see your prompt cost across 5 models. **The estimation runs in the browser — your prompt never leaves the machine.**\"},\"mermaid\":{\"title\":\"Mermaid Complete Guide: Flowchart / Sequence / Gantt / ER / Class — 7 Diagrams, Drop into GitHub\",\"intro\":\"The worst part of drawing flowcharts isn't drawing — it's changing them. Lucidchart drag-and-drop, Excalidraw rebuilds — every requirement change starts over. **Mermaid describes diagrams in plain text**: version control, git diff, multi-person collaboration — all solved. This guide uses our `mermaid-editor` tool as the worked example, covering syntax for the 7 diagram types, 3 gotchas I've hit, and how it integrates with GitHub / Notion / Confluence.\",\"sections\":[{\"heading\":\"Why Mermaid replaced half my Lucidchart / draw.io use cases\",\"body\":\"Plain text vs drag-and-drop differs in **the cost of one edit**:\\n\\n- **Drag-and-drop**: open file → find the box → double-click → edit text → save → re-export PNG → replace the image link in README\\n- **Mermaid**: open markdown → change one character → commit\\n\\nPlus version control wins: `git diff` shows exactly how the diagram changed — diagram logic gets reviewed at the PR stage. Architecture docs in PNG are \\\"frozen decisions\\\"; in Mermaid they're \\\"living docs.\\\"\\n\\n**Mermaid is NOT for**: detailed visual design (posters, slide hero visuals), advanced UML (activity diagrams with swim lanes), org charts beyond ~30 nodes.\"},{\"heading\":\"Which of the 7 diagram types to pick\",\"body\":\"**flowchart**: most common. Decision trees, API call flows, processes. `flowchart LR` is horizontal, `TD` is top-down.\\n\\n**sequenceDiagram**: multi-service interaction. React → API gateway → DB → cache — for microservice chains, sequence is 100x clearer than flowchart.\\n\\n**gantt**: project timeline. Set `dateFormat YYYY-MM-DD`, group via `section`, express dependencies with `after task1`. **Show your boss directly — no need for Project / Notion timelines**.\\n\\n**classDiagram**: OOP design. For SDK / framework design with inheritance / interfaces.\\n\\n**erDiagram**: database relationships. The standard format for talking to DBAs about schema.\\n\\n**mindmap**: brainstorming, article outlines.\\n\\n**pie**: percentage visuals. Simple but effective for retros.\"},{\"heading\":\"GitHub / Notion / Confluence / Obsidian all just work\",\"body\":\"**GitHub** (Issues, PRs, Wiki, README): write a ` ```mermaid ` code block — GitHub's render engine handles it. **Write architecture PRs with the flowchart and code in the same commit** — reviewers see everything in one view.\\n\\n**Notion**: same `mermaid` code block (post-2024).\\n\\n**Confluence**: use the \\\"Mermaid Macro\\\" or install the Atlas Plugin.\\n\\n**Obsidian**: native support — great for technical notes.\\n\\n**Your own site**: render with `mermaid.js` client-side, or generate SVG at build time with `mermaid-cli`. This tool is the client-side live-render reference implementation.\"},{\"heading\":\"3 gotchas I've hit\",\"body\":\"**1. CJK node names can break parsing**\\n`A[Start server] --\u003e B[Check connection]` usually works, but mixed CJK + special chars (`、`, `/`, `(`) sometimes confuses the parser. **Hit a weird syntax error? Wrap CJK in quotes**: `A[\\\"Start server\\\"]`.\\n\\n**2. Gantt date formats vary by renderer**\\nDefault is `dateFormat MM-DD` but GitHub may only accept `YYYY-MM-DD`. When writing project timelines, **always declare full year-month-day** for cross-platform safety.\\n\\n**3. Browsers crash on huge flowcharts**\\nFlowcharts with \u003e 100 nodes take ~2 seconds to render and create huge DOM — mobile browsers may OOM. Fix: **split into smaller diagrams** (\u003c 30 nodes each), link them via sub-pages.\"},{\"heading\":\"Advanced: documentation as code\",\"body\":\"Write Architecture Decision Records (ADRs) in Mermaid under `/docs/adr/`, reviewed alongside code.\\n\\nApproach:\\n1. Each ADR is a `.md` file\\n2. Lead with a 2–3 sentence decision summary\\n3. Use Mermaid for the architecture diagram in the middle\\n4. End with \\\"why this choice\\\" + \\\"alternatives considered\\\"\\n\\n**Why it works**: 6 months later a new hire onboards, reads `git log` + the ADRs, and understands why the system is shaped this way. Beats Confluence \\\"decision wikis\\\" because **code and docs change together — no drift**.\\n\\nReference: `adr-tools` (github.com/npryce/adr-tools), Architectural Decision Records spec.\"}],\"footer\":\"Writing architecture docs / issue descriptions / project timelines? Live-preview in [the Mermaid Editor](/en/tools/mermaid-editor) — **rendering is fully client-side, nothing leaves your machine** — then drop the ```mermaid block straight into GitHub.\"},\"heic2jpg\":{\"title\":\"HEIC to JPG: The Complete Guide — Why iPhone Uses It, Windows Compatibility, Batch Tips\",\"intro\":\"\\\"I sent you photos but you can't open them?\\\" — this conversation happens a million times a day between iPhone and Android / Windows users. **HEIC is Apple's default photo format since iOS 11** — better compression than JPG but worse compatibility. This guide covers HEIC's design rationale, when to convert to JPG, three batch conversion methods, and the details around preserving EXIF metadata.\",\"sections\":[{\"heading\":\"What is HEIC, and why does iPhone use it by default\",\"body\":\"**HEIC = High Efficiency Image Container**, compressed using HEVC (H.265 video codec).\\n\\nUpsides over JPG:\\n- **~50% smaller for the same quality** (a 12 MP photo: JPG 3–4 MB → HEIC 1.5–2 MB)\\n- **16-bit color depth** (JPG is only 8-bit)\\n- **Multiple images per file** (Live Photos, HDR, depth data)\\n- **Transparency support** (JPG can't, you'd need PNG)\\n\\nApple has defaulted iPhone photos to HEIC since iOS 11 (2017) — **mainly to save iCloud storage**. They give users 5 GB free; halving photo sizes effectively doubles their bandwidth margin.\\n\\nDownside: **Windows / Android / many web services don't understand it** — turning it into the \\\"can't open the photo\\\" culprit.\"},{\"heading\":\"iPhone setting: how to make it default to JPG\",\"body\":\"If you frequently send photos to Windows users, fix it at the source:\\n\\n**iPhone Settings → Camera → Formats → choose \\\"Most Compatible\\\" (JPG)**\\n\\nCost: same quality means double the file size — iCloud fills up faster.\\n\\n**Middle ground**: keep HEIC for capture, **auto-convert on transfer**:\\n\\n- iPhone → Mac directly → AirDrop auto-converts to JPG\\n- iPhone → Windows / Android → no conversion (iOS doesn't know the receiving OS)\\n- iPhone → email / Messages → iOS usually converts to JPG\\n- iPhone → Files app direct → keeps HEIC — receiver may or may not open it\\n\\n**Safest workflow**: keep HEIC for capture, **batch convert to JPG before sending out**.\"},{\"heading\":\"Why in-browser conversion beats Mac Preview\",\"body\":\"Mac Preview can convert HEIC → JPG (Export As → JPG), but **converting one-by-one is slow**: 30 photos = 30 export dialogs.\\n\\nThe online tool's advantages:\\n- **Batch upload**: pick 30 photos at once\\n- **EXIF preserved**: capture time, GPS, camera model retained (not erased like some tools)\\n- **Cross-platform**: Windows / Linux / Chromebook all work — no ImageMagick install needed\\n- **Privacy**: client-side via `heic2any`, **photos never upload**\\n\\nBy comparison, Adobe / Canva \\\"cloud converters\\\" upload your photos to their servers — privacy-unfriendly, especially for personal photos with faces and GPS data.\"},{\"heading\":\"Should you preserve EXIF metadata?\",\"body\":\"**EXIF** is metadata embedded in JPG / HEIC:\\n\\n- **Capture time** (yyyy:mm:dd hh:mm:ss)\\n- **GPS coordinates** (latitude / longitude, accurate to ~1 m)\\n- **Camera model / lens / focal length / aperture / ISO**\\n- **Orientation** (phone gyroscope)\\n\\n**Keep when**:\\n- Organizing family albums → time-sorting needs capture time\\n- Travel memories → GPS shows where you took it\\n- Photography practice → studying aperture / shutter combos\\n\\n**Strip when**:\\n- **Uploading to social** → GPS reveals home address (IG / Twitter strip by default, Discord / Slack do not)\\n- **Selling on marketplaces / LinkedIn** → strangers don't need your home coordinates\\n- **Sending to strangers** — including dating apps, forums\\n\\nA good tool gives you a toggle: preserve by default, with options to strip GPS or strip all.\"},{\"heading\":\"JPG quality: can you actually see 60% vs 95%?\",\"body\":\"JPG is lossy — quality controls compression ratio.\\n\\n**95–100%**: virtually lossless to the eye, file is 1.5–2x the HEIC size. **For printing, photo books, long-term archives.**\\n\\n**80–90% (default)**: indistinguishable from original at normal viewing, ~30% smaller than 95%. **For phone library, social sharing, Slack.**\\n\\n**60–75%**: edges show \\\"ringing\\\" artefacts, **most visible on text against dark backgrounds** (like dark-mode screenshots). Acceptable for web banners, not for personal photos.\\n\\n**\u003c 60%**: obvious compression marks — only thumbnails.\\n\\n**Rule of thumb**: **80% for sharing, 95% for keeping, 100% for printing**. Don't over-optimize for size — iPhone photos are 2–3 MB each, not worth the quality drop.\"}],\"footer\":\"When iPhone photos need to reach Windows colleagues or LinkedIn, use [the HEIC → JPG tool](/en/tools/heic-to-jpg) for batch processing — **conversion stays fully in the browser**, EXIF preservation is optional, output quality is configurable.\"}},\"aboutPage\":{\"title\":\"About this site\",\"intro\":\"Hi, I'm **Mark Liu**, a QA engineer in fintech who turned my most-used daily utilities into this public site.\",\"lastUpdated\":\"Last updated: 2026-06-12\",\"background\":{\"title\":\"My background\",\"body\":\"I work at a Taiwan-based fintech company building test frameworks, designing automation for APIs and mobile apps, and running QA processes. My day-to-day toolkit:\\n\\n- **Robot Framework** (API + Web E2E)\\n- **Playwright** (Web automation)\\n- **Appium** (iOS / Android automation)\\n- **JMeter / k6** (load testing + percentile analysis)\\n- **Postman / cURL / HTTPie** (API testing)\\n- **Docker / Jenkins / GitHub Actions** (CI/CD)\\n\\nMost tools on this site are things I personally reach for every day — that's why pain points are real (see [percentile calculator](/en/tools/percentile), [JWT decoder](/en/tools/jwt), [selector tester](/en/tools/selector), [Taiwan test data](/en/tools/tw-test-data)).\"},\"whyThisSite\":{\"title\":\"Why I built this\",\"body\":\"After enough years of QA work I noticed:\\n\\n1. **Most micro-tools want you to upload files to their server** — useless for anything sensitive from work.\\n2. **Sites are drowning in ads** — you scroll for ages just to find the input box.\\n3. **Chinese-language coverage is poor** — Taiwan / Hong Kong QA folks often have only Simplified Chinese to read.\\n\\nSo I set three rules for this site:\\n\\n- **No uploads**: files never leave your browser. Everything runs locally in JavaScript / WebAssembly.\\n- **No paywall, no limits**: no Pro tier, no watermarks, no \\\"free 3 times then pay\\\".\\n- **No ads**: no Google Ads, no AdSense, no affiliate marketing (only non-advertising GA4 for traffic analytics).\\n\\nThe [privacy page](/en/privacy) lists every data flow, and **every line is open-source and auditable**.\"},\"openSource\":{\"title\":\"Open source + transparent\",\"body\":\"The whole site is 100% open source — verify there's no upload logic yourself:\\n\\n- **Repo**: [github.com/MarkwwLiu/dev](https://github.com/MarkwwLiu/dev)\\n- **Stack**: Next.js 16 + Tailwind v4 + next-intl + Vercel\\n- **License**: Proprietary (source is public, rights reserved)\\n\\nFound a bug, want a new tool, or have an idea? Open an issue or PR on GitHub.\"},\"contact\":{\"title\":\"Contact\",\"body\":\"- **GitHub Issues**: [MarkwwLiu/dev/issues](https://github.com/MarkwwLiu/dev/issues) (preferred — public + trackable)\\n- **Email**: ak790718@gmail.com\\n- **Other projects**: [Stackr](https://stackr.9niche.com) (ticketing system for solo + small teams), [cv.9niche.com](https://cv.9niche.com) (résumé)\"}},\"privacyPage\":{\"title\":\"Privacy\",\"intro\":\"Every tool on this site is built around one principle: your files never leave your browser. Below: how the data flow works, the single exception, and what platform-level logging looks like.\",\"lastUpdated\":\"Last updated: 2026-06-12\",\"clientSide\":{\"title\":\"How tools handle your data\",\"body\":\"Every tool on this site (color converter, PDF merge/compress, HEIC converter, image base64…) runs **entirely inside your browser** in JavaScript / WebAssembly.\\n\\nFlow:\\n\\n1. You drop or paste data in.\\n2. The browser reads it into JavaScript memory.\\n3. Local CPU / WASM processes it.\\n4. The result is handed back as a download.\\n\\n**At no point is anything uploaded** — we cannot see what you process. When you close the tab or refresh, the browser releases everything.\"},\"exceptions\":{\"title\":\"The one exception: the tw-test-data password gate\",\"body\":\"`/tools/tw-test-data` (Taiwan test data generator) has a password gate to prevent abuse. The auth API endpoint **does** log:\\n\\n- The password you tried (sent only to a Telegram notification, never written to a database)\\n- Your IP and User Agent\\n- Failure count (computed from HMAC-signed cookies)\\n\\n**However**: once you're past the gate, the data generation itself (IDs, credit cards, etc.) still runs **entirely in your browser** — the generated content never touches our server.\"},\"platformLogs\":{\"title\":\"Platform-level logs (Vercel)\",\"body\":\"The site is deployed on Vercel, which automatically logs HTTP request metadata (IP, URL, status code, response time). This is standard CDN / serverless behaviour and **cannot be opted out of**. Vercel does **not** log request bodies / upload contents — because there *are* no uploads.\\n\\nWe also enable Vercel Analytics + Speed Insights:\\n\\n- Page views and Web Vitals only\\n- **No personally-identifying data** (GDPR-friendly)\\n- No identifying cookies\"},\"thirdParty\":{\"title\":\"Third parties / cookies\",\"body\":\"$67\"},\"contact\":{\"title\":\"Contact / reporting\",\"body\":\"If something here is unclear, or if you find a tool that violates these claims, please open an issue at [MarkwwLiu/dev](https://github.com/MarkwwLiu/dev).\\n\\nThe full source is public and auditable — you can verify there's no upload code.\"}},\"tools\":{\"title\":\"Tools\",\"subtitle\":\"Browse by category, click any card to open the tool.\",\"searchPlaceholder\":\"Search tools (name or summary)…\",\"searchHint\":\"Cmd-K to focus\",\"recentLabel\":\"Recently added\",\"recentTag\":\"NEW\",\"allLabel\":\"All categories\",\"totalLabel\":\"{n} tools — all pure-frontend, files never leave your browser\",\"countResults\":\"{found} / {total} tools match\",\"noResults\":\"No tools match your search — try a different keyword?\",\"clearSearch\":\"Clear search\",\"toolsCount\":\"{n} tools\",\"expandAll\":\"Expand all\",\"collapseAll\":\"Collapse all\",\"categories\":{\"media\":\"Image / PDF / Media\",\"dev-api\":\"Developer \u0026 API\",\"data-format\":\"Data / Format / Text\",\"visual\":\"Visual / CSS\",\"color\":\"Color / Accessibility\",\"reference\":\"Reference\"},\"categoryDescriptions\":{\"media\":\"Image crop / compress, PDF merge / split / watermark, GIF animations, SVG optimisation, favicons — all pure-frontend\",\"dev-api\":\"JWT, regex, cURL, UUID, hashes, cron, mock APIs, password strength — daily developer essentials\",\"data-format\":\"JSON / CSV / Markdown / timezones / diffs / encoders — every data \u0026 text transform\",\"visual\":\"CSS gradients, shadows, glassmorphism, clip-path, cubic-bezier, type scale and more\",\"color\":\"Color converters, Tailwind palettes, contrast checker, colour-blindness simulator — accessibility-ready\",\"reference\":\"Percentile calculator, HTTP status codes, bundle size lookup, QA cheatsheet\"},\"percentile\":{\"name\":\"Percentile calculator\",\"summary\":\"Paste response times → p50/p90/p95/p99 + Apdex\"},\"jwt\":{\"name\":\"JWT decoder / generator\",\"summary\":\"Decode header / payload / expiry, re-sign with secret\"},\"selector\":{\"name\":\"CSS / XPath selector tester\",\"summary\":\"Paste HTML + selector → live highlight of matches\"},\"twdata\":{\"name\":\"Taiwan test data generator\",\"summary\":\"Valid TW national ID, BAN, mobile, Luhn credit cards\"},\"cheatsheet\":{\"name\":\"Test framework cheatsheet\",\"summary\":\"Robot Framework / Playwright / Appium quick reference\"},\"regex\":{\"name\":\"Regex builder \u0026 live tester\",\"summary\":\"Pattern + sample text → live highlight + capture groups\"},\"curl\":{\"name\":\"cURL ↔ fetch ↔ Python converter\",\"summary\":\"Paste a cURL command → emit fetch / Python requests / HTTPie\"},\"timex\":{\"name\":\"Unix time \u0026 timezone converter\",\"summary\":\"Seconds / ms / ISO interop with timezone-aware display\"},\"jsonx\":{\"name\":\"JSON formatter + Schema validator\",\"summary\":\"Format / minify / sort + JSON Schema validation\"},\"mockapi\":{\"name\":\"Mock API designer\",\"summary\":\"Design endpoints → export Mockoon / Playwright / Postman / json-server config\"},\"colorconv\":{\"name\":\"Color format converter\",\"summary\":\"Live two-way conversion between hex / rgb / hsl / oklch / oklab + nearest Tailwind class\"},\"imgbase64\":{\"name\":\"Image ↔ Base64\",\"summary\":\"Drop images → data URI / raw base64 / HTML / CSS one-click copy; paste base64 → preview + download\"},\"heic\":{\"name\":\"HEIC → JPG / PNG / WebP\",\"summary\":\"Convert iPhone .heic photos to common formats, batch processing + ZIP download, all in your browser\"},\"img2pdf\":{\"name\":\"Image → PDF\",\"summary\":\"Drag-sort multiple images into one PDF — paper size / orientation / N-up / margin / quality, pure client-side\"},\"pdfsplit\":{\"name\":\"PDF merge / split / extract\",\"summary\":\"Combine multiple PDFs, split into multiple files by range (ZIP), or extract selected pages — pure client-side\"},\"pdfcompress\":{\"name\":\"PDF compress\",\"summary\":\"Two modes — lossless light (keeps text) or rasterize heavy (50-80% smaller, text becomes images)\"},\"pdfedit\":{\"name\":\"PDF page editor\",\"summary\":\"Thumbnail grid — select, rotate, delete, duplicate, reorder pages, then export. Pure client-side\"},\"palette\":{\"name\":\"Tailwind palette generator\",\"summary\":\"Generate the full 50-950 shade ramp from one brand colour. Outputs Tailwind v4 @theme, v3 config, and CSS variables\"},\"imgsize\":{\"name\":\"Image compress to size\",\"summary\":\"Binary-search JPEG quality to hit a target file size (300KB / 500KB / 2MB / etc.) — for job sites, government forms, upload limits\"},\"pdfunlock\":{\"name\":\"PDF unlock / remove password\",\"summary\":\"Strip print / copy restrictions (no password needed), or decrypt an encrypted PDF with the password you already know\"},\"bezier\":{\"name\":\"cubic-bezier editor\",\"summary\":\"Visual CSS easing curve editor — drag two control points, output CSS / Tailwind v4 / Framer Motion / @keyframes\"},\"favicon\":{\"name\":\"Favicon all-in-one generator\",\"summary\":\"Three input modes (emoji / text / upload) → favicon.ico, every PNG size, PWA maskable, HTML snippet, manifest, packaged ZIP\"},\"mdtrans\":{\"name\":\"Markdown batch translator\",\"summary\":\"Bring-your-own OpenAI / Anthropic / Google API key. Batch-translate .md files while preserving frontmatter / code / links\"},\"contrast\":{\"name\":\"WCAG + APCA contrast checker\",\"summary\":\"Live WCAG 2.1 ratio + APCA Lc for any foreground/background pair, with one-click fix suggestion when failing\"},\"gradient\":{\"name\":\"CSS gradient editor\",\"summary\":\"Linear / radial / conic gradient editor — live preview, output CSS / Tailwind v4 arbitrary class / SVG\"},\"typescale\":{\"name\":\"Type scale + Fluid clamp() generator\",\"summary\":\"Modular ratio + dual-viewport clamp() to compute a full type scale. Outputs Tailwind v4 @theme / CSS vars / SCSS\"},\"boxshadow\":{\"name\":\"box-shadow editor (multi-layer + Material elevation)\",\"summary\":\"Visual multi-layer CSS shadow editor with Tailwind 5-level + Material Design 9-elevation presets\"},\"glassneu\":{\"name\":\"Glassmorphism + Neumorphism generator\",\"summary\":\"Glass (backdrop-filter) + Neumorphism (paired light/dark shadows for raised/inset) — both in one tool, with 3 preview backgrounds\"},\"qr\":{\"name\":\"QR Code generator (with Logo)\",\"summary\":\"URL / WiFi / vCard / Email payloads, custom colours, centre logo, PNG / SVG output. Free, no watermark\"},\"pdfwm\":{\"name\":\"PDF watermark + page numbers\",\"summary\":\"Text or image watermark with diagonal tiling, opacity \u0026 rotation; auto page numbers. Pure front-end — files never leave the browser\"},\"codefmt\":{\"name\":\"Code Beautifier / Minifier (10 languages)\",\"summary\":\"Prettier-backed formatter for JS / TS / CSS / HTML / JSON / Markdown / YAML, plus one-click minify for JSON / CSS / HTML. Auto-detects language\"},\"mdedit\":{\"name\":\"Markdown Editor (live preview)\",\"summary\":\"Side-by-side live preview with GFM tables / task lists / code blocks; export to HTML snippet or styled standalone HTML file\"},\"urlenc\":{\"name\":\"URL / Base64 / HTML encoder\",\"summary\":\"Six formats, two-way conversion — URL, URI component, Base64, Base64URL, HTML entities, Unicode escape. Backend / scraping / debugging swiss-army\"},\"jsondiff\":{\"name\":\"JSON deep diff (visual)\",\"summary\":\"Side-by-side deep diff of two JSON docs with path-based highlight (added / removed / changed), array by-index comparison. Backend / API / config diff power tool\"},\"csv\":{\"name\":\"CSV / TSV viewer + converter\",\"summary\":\"RFC 4180 parser, tabular preview with per-column stats (unique / empty / numeric), one-click export to JSON / TSV / Markdown / CSV\"},\"imgcrop\":{\"name\":\"Image Crop (free / aspect / circular)\",\"summary\":\"Visual drag-to-crop with locked aspect ratios (1:1 / 16:9 / 3:2…), circular mask for avatars, export PNG / JPG / WebP with custom output width\"},\"clippath\":{\"name\":\"CSS clip-path editor\",\"summary\":\"Drag points to build polygon / circle / ellipse / inset shapes; 9 presets (triangle / hexagon / star / arrow…); export CSS / Tailwind v4 / SVG path\"},\"mermaid\":{\"name\":\"Mermaid Diagram Editor\",\"summary\":\"Write flowcharts / sequence / gantt / mindmap / class / pie diagrams in plain text with live preview; download as SVG or PNG\"},\"cssgrid\":{\"name\":\"CSS Grid Generator\",\"summary\":\"Edit rows / cols / gap / named areas; live preview + one-click CSS export. Includes Holy Grail, Dashboard 12-col presets\"},\"pdf2img\":{\"name\":\"PDF → Images (PNG / JPG / WebP)\",\"summary\":\"Render each PDF page as a high-resolution image; pick page range + scale, multi-page output zipped. Pure frontend, ideal for contracts / reports / confidential docs\"},\"gifmake\":{\"name\":\"Images → GIF Animation\",\"summary\":\"Combine multiple images into a GIF; drag to reorder, tune delay / loop / size / palette colours. Pure-frontend gifenc encoder, no upload\"},\"imgresize\":{\"name\":\"Image Resize (fit / longest-edge / scale)\",\"summary\":\"Four modes: fit-inside box, cap longest edge, percentage scale, force exact size. Outputs JPG / PNG / WebP, never enlarges by default\"},\"hashes\":{\"name\":\"Hash Tools (MD5 / SHA-1/256/384/512)\",\"summary\":\"Live text hashing + file integrity checks — 5 algorithms side-by-side. WebCrypto + hand-rolled MD5, pure frontend\"},\"uuid\":{\"name\":\"UUID Generator (v4 / v7 batch)\",\"summary\":\"Generate 1-1000 UUIDs (random v4 or time-ordered v7) at once; tunable case / hyphens / braces. Backend \u0026 test data must-have\"},\"lorem\":{\"name\":\"Lorem Ipsum (Latin / Chinese / Tech)\",\"summary\":\"Three banks: classic Lorem Ipsum, Traditional Chinese filler (for CJK mockups), and product-tech vocabulary. Output by words / sentences / paragraphs; seedable\"},\"ts\":{\"name\":\"Unix Timestamp ↔ Timezones\",\"summary\":\"Paste epoch (s / ms) or ISO; see live conversion across multiple timezones plus a relative-time description. Backend log debug must-have\"},\"textdiff\":{\"name\":\"Text Diff (line-by-line)\",\"summary\":\"Plain-text LCS line diff with side-by-side view, colour-coded added / removed / changed, ignore-whitespace / case toggles, unified diff export\"},\"casecvt\":{\"name\":\"Case Converter\",\"summary\":\"Convert between camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / Title / Sentence / dot / path — 9 forms at once\"},\"slugify\":{\"name\":\"Slugify (URL-friendly, CJK-aware)\",\"summary\":\"Turn any title into a URL slug: strip accents, collapse punctuation, normalise case. CJK characters preserved by default (or drop them)\"},\"emoji\":{\"name\":\"Emoji Info Lookup\",\"summary\":\"250+ curated emoji with category filter; click for codepoint / shortcode / HTML entity. Paste an emoji to reverse-lookup\"},\"vid2gif\":{\"name\":\"Video → GIF\",\"summary\":\"Drop an MP4 / WebM / MOV; pick a time window and fps; in-browser seek + canvas + gifenc emit a GIF. No upload\"},\"httpcodes\":{\"name\":\"HTTP Status Codes\",\"summary\":\"60+ HTTP status codes in one place. Filter by class, search by digits or keywords; RFC refs + common-misuse notes (401 vs 403, 302 vs 307)\"},\"regexr\":{\"name\":\"Regex Replace + Group Preview\",\"summary\":\"Three-pane live editor: pattern / replacement / input; preview captures ($1, $2) and named groups ($\u003cname\u003e); all 6 flags toggleable\"},\"cron\":{\"name\":\"Cron Expression Visualiser\",\"summary\":\"5-field breakdown + natural-language description + next-N firings. Supports @daily aliases, month / dow names, step and range\"},\"pwstrength\":{\"name\":\"Password Strength + Crack Time\",\"summary\":\"Pure-frontend entropy estimate + 5 attacker profiles (rate-limited online → GPU offline). Weak-pattern detection; passwords never leave the browser\"},\"tokens\":{\"name\":\"AI Token Counter (GPT / Claude / Gemini)\",\"summary\":\"Estimate tokens + cost + context-window fit across 5 leading AI models. Heuristic (no 1MB WASM), ±10% accurate for typical prose\"},\"json2ts\":{\"name\":\"JSON → TypeScript\",\"summary\":\"Infer TypeScript types from any JSON live: name nested types, merge shapes across array elements, mark optional fields, support readonly\"},\"cvd\":{\"name\":\"Colour-blindness Simulator (8 + normal)\",\"summary\":\"Brettel / Machado matrix simulation of 8 deficiencies. Compare palettes or your own image side-by-side. Designer-grade accessibility check\"},\"svgo\":{\"name\":\"SVG Optimizer\",\"summary\":\"Pure-frontend SVG slimmer: strip comments / metadata / editor attributes / default values / empty groups, round decimals; side-by-side preview + savings %\"},\"bundle\":{\"name\":\"npm Bundle Size Lookup\",\"summary\":\"Look up minified / gzip size, dependency count, tree-shakeability. Compare multiple packages side-by-side for dep decisions\"}},\"relatedTools\":{\"title\":\"Related tools\"},\"common\":{\"input\":\"Input\",\"output\":\"Output\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"clear\":\"Clear\",\"generate\":\"Generate\",\"back\":\"Back\",\"search\":\"Search\"},\"percentile\":{\"title\":\"Percentile calculator\",\"description\":\"Paste response times (comma / space / newline separated). Get p50 / p90 / p95 / p99 and Apdex instantly.\",\"inputLabel\":\"Response times (ms)\",\"placeholder\":\"120, 145, 168, 200, 230, 280, 340, 410, 520, 800\",\"count\":\"Samples\",\"min\":\"Min\",\"max\":\"Max\",\"mean\":\"Mean\",\"median\":\"Median\",\"apdex\":\"Apdex (T={t}ms)\",\"apdexHint\":\"Apdex = (satisfied + tolerated / 2) / total. T is the satisfaction threshold; 4T is the tolerance threshold.\"},\"jwt\":{\"title\":\"JWT decoder / generator\",\"description\":\"Decode JWT segments and inspect expiry; or re-sign with a secret. All computation runs locally in your browser.\",\"decode\":\"Decode\",\"encode\":\"Sign\",\"tokenLabel\":\"JWT token\",\"secretLabel\":\"Secret (HS256)\",\"headerLabel\":\"Header\",\"payloadLabel\":\"Payload\",\"signatureLabel\":\"Signature\",\"expired\":\"Expired\",\"valid\":\"Valid\",\"noExp\":\"No exp claim\",\"invalidToken\":\"Cannot parse this JWT\"},\"selector\":{\"title\":\"CSS / XPath selector tester\",\"description\":\"Paste HTML and a selector, see which elements match and preview each outerHTML.\",\"htmlLabel\":\"HTML\",\"selectorLabel\":\"Selector\",\"mode\":\"Mode\",\"css\":\"CSS\",\"xpath\":\"XPath\",\"matches\":\"Matches\",\"noMatch\":\"No matches\",\"error\":\"Selector syntax error\"},\"twdata\":{\"title\":\"Taiwan test data generator\",\"description\":\"Generate well-formed Taiwan national IDs, business numbers, mobile numbers, and Luhn-valid credit cards. For testing only.\",\"type\":\"Type\",\"count\":\"Count\",\"gender\":\"Gender\",\"male\":\"Male\",\"female\":\"Female\",\"any\":\"Any\",\"id\":\"National ID\",\"tax\":\"Business no.\",\"phone\":\"Mobile\",\"credit\":\"Credit card (Luhn)\",\"gate\":{\"title\":\"Access password required\",\"subtitle\":\"This tool is gated to prevent automated abuse. Contact the site owner if you need access.\",\"passwordLabel\":\"Password\",\"submit\":\"Enter\",\"submitting\":\"Verifying…\",\"wrong\":\"Wrong password\",\"remaining\":\"{n} more failed attempt(s) before your IP is locked for 24 hours\",\"banned\":\"You are locked out. Try again in 24 hours or contact the site owner.\",\"serverError\":\"Server error — please retry later\",\"notice\":\"⚠️ Every auth event (success, failure, lock-out) is reported to the site owner along with your IP and User Agent. Do not attempt to brute force.\"}},\"cheatsheet\":{\"title\":\"Test framework cheatsheet\",\"description\":\"Quick reference for Robot Framework, Playwright, and Appium.\",\"framework\":\"Framework\",\"searchPlaceholder\":\"Search keyword or description...\"},\"regex\":{\"title\":\"Regex builder \u0026 live tester\",\"description\":\"Paste a pattern + a sample string. See matches highlighted, with all capture groups and named groups.\",\"patternLabel\":\"Pattern\",\"flagsLabel\":\"Flags\",\"inputLabel\":\"Sample text\",\"highlighted\":\"Matches\",\"groups\":\"Capture groups\",\"gAlways\":\"(g is always on)\",\"error\":\"Error\"},\"curl\":{\"title\":\"cURL ↔ fetch ↔ Python converter\",\"description\":\"Paste a cURL command. Convert to JavaScript fetch, Python requests, or HTTPie. Multi-line \\\\ continuations and single/double quotes both supported.\",\"curlLabel\":\"cURL command\",\"targetLabel\":\"Target\",\"parseError\":\"Parse error\"},\"timex\":{\"title\":\"Unix time \u0026 timezone converter\",\"description\":\"Auto-detects seconds / milliseconds / ISO 8601. Pick any timezone for in-place display; day-boundary cases are flagged.\",\"inputLabel\":\"Time (seconds / ms / ISO)\",\"seconds\":\"Unix seconds\",\"ms\":\"Unix milliseconds\",\"timezone\":\"Timezone\",\"parseError\":\"Cannot parse — enter seconds, milliseconds, or ISO 8601\",\"dayBoundary\":\"⚠️ Near day boundary — watch for cross-day / month-end bugs\",\"format\":{\"seconds\":\"detected as seconds\",\"ms\":\"detected as milliseconds\",\"iso\":\"detected as ISO 8601\"}},\"jsonx\":{\"title\":\"JSON formatter + Schema validator\",\"description\":\"Format / minify / sort keys. Validate mode accepts a JSON Schema (supports type / required / properties / items / enum / pattern and more).\",\"output\":\"Output\",\"sortKeys\":\"Sort keys\",\"mode\":{\"format\":\"Format\",\"minify\":\"Minify\",\"validate\":\"Validate\"}},\"mockapi\":{\"title\":\"Mock API designer\",\"description\":\"Design endpoints + responses. Export ready-to-use config for Mockoon, Playwright, Postman, or json-server. Pure client-side, zero cost — bring your own runner.\",\"endpoints\":\"Endpoints\",\"addEndpoint\":\"Add\",\"remove\":\"Remove\",\"status\":\"Status\",\"delay\":\"Delay (ms)\",\"body\":\"Response body\",\"target\":\"Target\",\"download\":\"Download\",\"safetyNote\":\"⚠️ This tool does not expose any live endpoint on our server. Take the generated config and run it locally / in CI / on your own infra.\"},\"colorconv\":{\"title\":\"Color format converter\",\"description\":\"Paste any color format (hex / rgb / hsl / oklch / oklab / CSS named) and get all five formats live, plus the nearest Tailwind class. Runs entirely in your browser.\",\"inputLabel\":\"Color (any format)\",\"inputPlaceholder\":\"#1e90ff, rgb(30,144,255), oklch(64% 0.19 250), dodgerblue …\",\"pickerLabel\":\"Picker\",\"detected\":\"Detected format\",\"parseError\":\"Could not parse this color — check the format\",\"preview\":\"Preview\",\"nearestNamed\":\"Nearest CSS named color\",\"nearestTailwind\":\"Nearest Tailwind class\",\"format\":{\"hex\":\"Hex\",\"rgb\":\"RGB\",\"hsl\":\"HSL\",\"oklch\":\"OKLCH\",\"lab\":\"OKLab\"}},\"qr\":{\"title\":\"Title\",\"description\":\"Five content types — URL / plain text / WiFi / vCard / Email — with custom colours, optional centre logo, and adjustable error correction. Live preview, PNG / SVG output.\",\"kind\":\"Content type\",\"url\":\"URL\",\"text\":\"Plain text\",\"wifi\":\"WiFi\",\"vcard\":\"Contact (vCard)\",\"email\":\"Email\",\"urlLabel\":\"URL\",\"textLabel\":\"Plain text\",\"password\":\"Password\",\"security\":\"Encryption\",\"openNetwork\":\"Open (no password)\",\"hiddenNetwork\":\"Hidden network\",\"firstName\":\"First name\",\"lastName\":\"Last name\",\"org\":\"Organisation\",\"phone\":\"Phone\",\"emailField\":\"Email\",\"emailTo\":\"To\",\"emailSubject\":\"Subject\",\"emailBody\":\"Body\",\"fg\":\"Foreground (modules)\",\"bg\":\"Background\",\"size\":\"Output size\",\"margin\":\"Margin (modules)\",\"ec\":\"Error correction\",\"logo\":\"Centre logo (optional)\",\"logoHint\":\"Drop PNG / SVG; adding a logo locks EC to H so the code stays scannable\",\"logoForcesH\":\"EC is locked to H while a logo is set (so it stays scannable)\",\"logoSize\":\"Logo size\",\"removeLogo\":\"Remove logo\",\"preview\":\"Preview\",\"downloadPng\":\"Download PNG\",\"downloadSvg\":\"Download SVG\",\"empty\":\"Fill content to preview live\",\"error\":\"Generation failed\"},\"glassneu\":{\"title\":\"Glassmorphism + Neumorphism generator\",\"description\":\"Two modern UI styles in one tool: **Glass** (backdrop-filter on translucent surfaces) and **Neumorphism** (paired light + dark shadows for raised / inset depth). Live preview on several backgrounds, output CSS or Tailwind v4 classes.\",\"mode\":\"Style\",\"glass\":\"Glass\",\"neumorphism\":\"Neumorphism\",\"glassHint\":\"Translucent surface + blur over colourful or photographic backgrounds — Apple system control-panel look. Requires backdrop-filter (Safari 14+ / Chrome 76+ / Firefox 103+).\",\"neuHint\":\"Paired shadows simulate a light source above the surface, giving a raised or pressed (inset) feel. Negative intensity flips to inset mode.\",\"previewBg\":\"Preview background\",\"bg\":{\"photo\":\"Photo\",\"vivid\":\"Vivid gradient\",\"dark\":\"Dark gradient\"},\"tint\":\"Glass tint (rgba with alpha)\",\"blur\":\"Blur\",\"saturate\":\"Saturate\",\"border\":\"Border colour\",\"borderWidth\":\"Border width\",\"radius\":\"Radius\",\"shadow\":\"Shadow\",\"surface\":\"Surface colour\",\"distance\":\"Light distance\",\"intensity\":\"Intensity (negative = inset)\",\"output\":\"Output format\"},\"boxshadow\":{\"title\":\"box-shadow editor (multi-layer + Material elevation)\",\"description\":\"Visual multi-layer CSS shadow editor. Tweak x/y/blur/spread/colour/inset per layer. Built-in Tailwind 5 shadow presets and Material Design 9 elevation presets (each stacks three layers — umbra / penumbra / ambient).\",\"tailwindPresets\":\"Tailwind presets\",\"materialPresets\":\"Material elevation\",\"preview\":\"Preview\",\"boxColor\":\"Box colour\",\"boxBg\":\"Background\",\"radius\":\"Radius\",\"layers\":\"Shadow layers (stack)\",\"addLayer\":\"+ Add layer\",\"layer\":\"Layer\",\"removeLayer\":\"Remove this layer\",\"color\":\"Shadow colour (rgba supported)\",\"output\":\"Output format\"},\"typescale\":{\"title\":\"Type scale + Fluid clamp() generator\",\"description\":\"Pick a base size and a musical ratio; we compute a full -3 to +6 step scale. **Fluid mode** adds a second base for a larger viewport and emits clamp() values that interpolate between the two. Output as Tailwind v4 @theme, CSS variables, or SCSS.\",\"mode\":\"Mode\",\"fixed\":\"Fixed px / rem\",\"fluid\":\"Fluid clamp()\",\"fixedHint\":\"Traditional: each step gets a fixed px size. Simple, no viewport scaling.\",\"fluidHint\":\"Modern: each step is a clamp() that interpolates smoothly between two viewports. Recommended on Tailwind v4 / modern SSGs.\",\"ratio\":\"Modular ratio\",\"ratioName\":{\"minorSecond\":\"Minor Second (1.067)\",\"majorSecond\":\"Major Second (1.125)\",\"minorThird\":\"Minor Third (1.2)\",\"majorThird\":\"Major Third (1.25)\",\"perfectFourth\":\"Perfect Fourth (1.333)\",\"augmentedFourth\":\"Augmented Fourth (1.414)\",\"perfectFifth\":\"Perfect Fifth (1.5)\",\"goldenRatio\":\"Golden Ratio (1.618)\"},\"base\":\"Base size\",\"baseMin\":\"Base size (smaller viewport)\",\"baseMax\":\"Base size (larger viewport)\",\"vpMin\":\"Smaller viewport width\",\"vpMax\":\"Larger viewport width\",\"loStep\":\"Min step\",\"hiStep\":\"Max step\",\"preview\":\"Size preview\",\"previewText\":\"The quick brown fox jumps over the lazy dog\",\"output\":\"Output format\",\"table\":\"Plain table\"},\"gradient\":{\"title\":\"CSS gradient editor (linear / radial / conic)\",\"description\":\"Three gradient kinds with live editing — slide the angle / centre / from-angle, add or remove stops, change colours, watch the preview update. Output as CSS, Tailwind v4 arbitrary class, or SVG gradient definition.\",\"kind\":\"Gradient type\",\"linear\":\"Linear\",\"radial\":\"Radial\",\"conic\":\"Conic\",\"preview\":\"Preview\",\"angle\":\"Angle\",\"shape\":\"Shape\",\"circle\":\"Circle\",\"ellipse\":\"Ellipse\",\"cx\":\"Centre X\",\"cy\":\"Centre Y\",\"fromAngle\":\"From angle\",\"stops\":\"Stops (drag, recolour, add or remove)\",\"addStop\":\"+ Add stop\",\"removeStop\":\"Remove this\",\"presets\":\"Presets\",\"preset\":{\"sunset\":\"Sunset\",\"vaporwave\":\"Vaporwave\",\"aurora\":\"Aurora\",\"spotlight\":\"Spotlight\",\"rainbow\":\"Rainbow wheel\"},\"output\":\"Output format\"},\"contrast\":{\"title\":\"WCAG + APCA contrast checker\",\"description\":\"Enter foreground and background colours, watch WCAG 2.1 contrast ratio and APCA Lc update live. Per-criterion pass/fail (AA / AAA / large / UI). When a pair fails, the tool walks the OKLab L axis to find the nearest passing colour for you.\",\"foreground\":\"Foreground (text)\",\"background\":\"Background\",\"swap\":\"Swap fg / bg\",\"parseError\":\"Could not parse one of the colours\",\"previewHeading\":\"Heading sample\",\"previewBody\":\"This is a paragraph at body size — make sure you can read it comfortably at this contrast.\",\"previewFine\":\"Caption / footnote text — small sizes have the strictest a11y rules.\",\"previewButton\":\"Button sample\",\"wcagTitle\":\"WCAG 2.1 contrast\",\"aaNormal\":\"AA normal (≥ 4.5)\",\"aaLarge\":\"AA large (≥ 3.0)\",\"aaaNormal\":\"AAA normal (≥ 7.0)\",\"aaaLarge\":\"AAA large (≥ 4.5)\",\"uiComponent\":\"UI components / icons\",\"apcaTitle\":\"APCA (WCAG 3 draft)\",\"apcaBody\":\"Body / small text\",\"apcaLarger\":\"Larger / less critical\",\"apcaNonText\":\"Non-text minimum\",\"apcaDraft\":\"APCA is the WCAG 3 draft — perceptually fairer than WCAG 2 for very dark or very light tones.\",\"suggestion\":\"Below threshold — try\",\"apply\":\"Apply\",\"copy\":\"Copy\"},\"mdtrans\":{\"title\":\"Markdown batch translator (BYO LLM API key)\",\"description\":\"Translate .md files with your own OpenAI / Anthropic / Google API key. Markdown structure (frontmatter, code blocks, links, tables) is preserved. Your key stays in your browser — we never see it.\",\"provider\":\"Provider\",\"model\":\"Model\",\"apiKey\":\"API Key\",\"apiKeyPlaceholder\":\"sk-... / AIza... — stays in your browser, never uploaded\",\"keyHint\":\"Stored via localStorage on this browser. The fetch goes straight from your browser to the provider — our server never sees it.\",\"from\":\"From\",\"to\":\"To\",\"dropzoneHint\":\"Drop one or more .md / .mdx files (5 MB per file)\",\"summary\":\"{n} file(s) · {done} done · ~{tokens} tokens\",\"tokensSuffix\":\"tokens\",\"translateAll\":\"Translate all\",\"cancel\":\"Cancel\",\"clearAll\":\"Clear\",\"downloadZip\":\"Download ZIP ({n} files)\",\"download\":\"Download\",\"remove\":\"Remove\",\"noKey\":\"Set your API key first\",\"state\":{\"pending\":\"Queued\",\"running\":\"Translating…\",\"done\":\"Done\",\"error\":\"Failed\"}},\"favicon\":{\"title\":\"Favicon / App icon all-in-one generator\",\"description\":\"Three input modes (emoji / 1-3 letters / upload) → emit favicon.ico, every PNG size (16/32/48/96/180/192/512), PWA maskable, Microsoft tile, HTML snippet, and site.webmanifest in one ZIP.\",\"modeLabel\":\"Input mode\",\"modeEmoji\":\"Emoji\",\"modeText\":\"Text\",\"modeImage\":\"Upload\",\"emojiLabel\":\"Emoji\",\"textLabel\":\"Text (1-3 characters)\",\"textHint\":\"Brand initials (9N, AI), a single CJK character, or a letter/number combo all work.\",\"textColor\":\"Text colour\",\"bold\":\"Bold\",\"background\":\"Background\",\"transparent\":\"Transparent\",\"padding\":\"Padding\",\"rounded\":\"Rounded (iOS-style)\",\"uploadHint\":\"Drop an image or click to choose (512×512 recommended)\",\"changeFile\":\"Change file\",\"appName\":\"App name (written into manifest)\",\"generate\":\"Generate favicon\",\"building\":\"Building…\",\"downloadZip\":\"Download ZIP ({n} files)\",\"noSource\":\"Pick an input first (emoji / text / image)\",\"preview\":\"Preview\",\"sizes\":\"All sizes\",\"htmlSnippetTitle\":\"HTML \u003clink\u003e snippet (paste into \u003chead\u003e)\",\"manifestSnippetTitle\":\"site.webmanifest body\"},\"bezier\":{\"title\":\"cubic-bezier visual editor\",\"description\":\"Design CSS easing curves by dragging two control points. 11 built-in presets (ease, Material, Tailwind, anticipate, …), live animation preview, and one-click output as CSS / Tailwind v4 / Framer Motion / @keyframes.\",\"canvasLabel\":\"Curve (drag the handles)\",\"axes\":\"Axis values\",\"duration\":\"Duration\",\"presets\":\"Presets\",\"preset\":{\"ease\":\"ease\",\"easeIn\":\"ease-in\",\"easeOut\":\"ease-out\",\"easeInOut\":\"ease-in-out\",\"linear\":\"linear\",\"materialStandard\":\"Material standard\",\"materialEmphasized\":\"Material emphasized\",\"tailwindIn\":\"Tailwind in\",\"tailwindOut\":\"Tailwind out\",\"tailwindInOut\":\"Tailwind in-out\",\"anticipate\":\"anticipate (bounce)\"},\"preview\":\"Animation preview\",\"output\":\"Output format\"},\"pdfunlock\":{\"title\":\"PDF unlock / remove password\",\"description\":\"Two modes — strip print / copy restrictions from a PDF (no password needed), or decrypt an encrypted PDF using a password you already know. Runs entirely in your browser.\",\"legalNotice\":\"Use this only on PDFs you **own** or are **authorised to access**. Do not use to crack PDFs you don't have rights to.\",\"mode\":\"Unlock mode\",\"ownerTab\":\"Remove restrictions\",\"userTab\":\"Use password\",\"ownerHint\":\"For PDFs that open fine but disable print / copy. **No password needed** — we just re-save through pdf-lib, which drops the owner restrictions. Text, forms, and structure are preserved.\",\"userHint\":\"For PDFs that ask for a password to open. You'll need to **know the password**; pdf.js decrypts, then we rasterise every page and rebuild the PDF. **Text becomes images** (no more selection / search).\",\"passwordLabel\":\"PDF password\",\"wrongPassword\":\"Wrong password\",\"userWarning\":\"This mode rasterises pages — the output PDF will lose text selection and search.\",\"dropzoneHint\":\"Drop the locked PDF (200 MB per file)\",\"unlock\":\"Unlock\",\"reunlock\":\"Unlock again\",\"working\":\"Working…\",\"download\":\"Download unlocked PDF\",\"changeFile\":\"Change file\",\"pages\":\"{n} pages\",\"error\":\"Unlock failed\"},\"imgsize\":{\"title\":\"Image compress to size (KB / MB)\",\"description\":\"Binary-search JPEG / WebP quality until the output stays under your chosen size. Built-in presets for Taiwan government forms and Taiwan / international job sites. Runs entirely in your browser.\",\"target\":\"Target size\",\"preset\":{\"gov300kb\":\"Gov form 300KB\",\"resume500kb\":\"Resume 500KB\",\"generic2mb\":\"Generic 2MB\",\"linkedin8mb\":\"LinkedIn 8MB\",\"custom\":\"Custom\"},\"targetAchieved\":\"Output ≤ {size}\",\"targetSuffix\":\"(target)\",\"format\":\"Output format\",\"dropzoneHint\":\"Drop a JPG / PNG / WebP image (50 MB per file)\",\"compress\":\"Start compressing\",\"recompress\":\"Recompress\",\"working\":\"Searching for the right quality…\",\"download\":\"Download\",\"changeFile\":\"Change file\",\"achieved\":\"Achieved\",\"quality\":\"Quality\",\"dimensions\":\"Dimensions\",\"attempts\":\"Attempts\",\"exceeded\":\"Even at minimum quality + a downscaled canvas we couldn't fit under the target — try a higher budget or pre-crop.\",\"error\":\"Compression failed\"},\"palette\":{\"title\":\"Tailwind palette generator (50-950)\",\"description\":\"Type one brand colour, get the full 11-step shade ramp (50-950) — computed in the OKLab perceptual colour space so hue stays consistent. Copy as Tailwind v4 @theme, v3 config, or CSS variables.\",\"colorLabel\":\"Brand colour\",\"colorPlaceholder\":\"#3b82f6, rgb(...), oklch(...) — anything works\",\"pickerLabel\":\"Picker\",\"nameLabel\":\"Name\",\"namePlaceholder\":\"brand, primary, accent…\",\"shades\":\"Shade preview\",\"nearestSource\":\"ΔE to closest shade = {delta}\",\"output\":\"Output format\",\"parseError\":\"Could not parse that colour\"},\"pdfedit\":{\"title\":\"PDF page editor\",\"description\":\"Thumbnail grid of every page — click to select, rotate, delete, duplicate, reorder, then export a fresh PDF. All operations run in your browser; files never upload.\",\"dropzoneHint\":\"Drop a PDF or click to choose (200 MB per file)\",\"loading\":\"Rendering thumbnails… ({done}/{total})\",\"loadError\":\"Failed to load\",\"pages\":\"{n} pages\",\"selected\":\"{n} selected\",\"changeFile\":\"Change file\",\"selectAll\":\"Select all\",\"selectNone\":\"Select none\",\"invert\":\"Invert\",\"rotateLeft\":\"Rotate left 90°\",\"rotateRight\":\"Rotate right 90°\",\"deleteSelected\":\"Delete selected\",\"duplicate\":\"Duplicate this page\",\"remove\":\"Remove this page\",\"moveUp\":\"Move up\",\"moveDown\":\"Move down\",\"download\":\"Download new PDF\",\"building\":\"Building…\",\"togglePage\":\"Toggle page {n}\"},\"pdfcompress\":{\"title\":\"PDF compress\",\"description\":\"Two compression modes — lossless light (keep text / forms, 5-20% smaller) or rasterize heavy (each page becomes an image, 50-80% smaller). Runs entirely in your browser; files never upload.\",\"modeLabel\":\"Compression mode\",\"lossless\":\"Lossless\",\"rasterize\":\"Rasterize\",\"losslessHint\":\"Keep text, forms, and annotations intact. Saves 5-20% via pdf-lib resave + optional metadata stripping.\",\"rasterizeHint\":\"Renders each page to JPEG — up to 50-80% smaller but **text becomes images**, so selection and search are lost. Best for max compression or sensitive scans.\",\"stripMetadata\":\"Strip metadata (author, producer, title…)\",\"qualityLabel\":\"Quality\",\"quality\":{\"high\":\"High (150 DPI)\",\"medium\":\"Medium (96 DPI)\",\"low\":\"Low (72 DPI)\"},\"qualityHint\":{\"high\":\"Print-grade quality; modest compression\",\"medium\":\"Default sweet spot for screen reading\",\"low\":\"Extreme compression — preview only\"},\"grayscale\":\"Convert to grayscale (20-30% extra savings)\",\"dropzoneHint\":\"Drop a PDF or click to choose (200 MB per file)\",\"compress\":\"Start compressing\",\"recompress\":\"Recompress\",\"working\":\"Compressing…\",\"download\":\"Download\",\"changeFile\":\"Change file\",\"original\":\"Original\",\"compressed\":\"Compressed\",\"savings\":\"Savings\",\"error\":\"Compression failed\"},\"pdfsplit\":{\"title\":\"PDF merge / split / extract\",\"description\":\"Three-in-one PDF tooling — combine multiple files, split by range into separate files (ZIP), or extract chosen pages into a new file. Runs in your browser; perfect for contracts, HR, and private documents.\",\"mode\":\"Mode\",\"merge\":\"Merge\",\"split\":\"Split\",\"extract\":\"Extract\",\"mergeDropzoneHint\":\"Drop two or more PDFs, or click to choose (100 MB per file)\",\"splitDropzoneHint\":\"Drop one PDF, then enter the page ranges below\",\"extractDropzoneHint\":\"Drop one PDF, then enter the pages you want to keep\",\"mergeSummary\":\"{n} file(s) · {pages} pages total\",\"splitRangeLabel\":\"Group ranges (each becomes its own output file)\",\"extractRangeLabel\":\"Pages to extract\",\"rangePlaceholder\":\"e.g. 1-3, 5, 8-10\",\"rangeHint\":\"Use `,` `;` `、` as separators; `-` (or `–`) for ranges. Document has {max} pages.\",\"splitPreview\":\"Will produce {n} file(s)\",\"extractPreview\":\"Will extract {n} page(s)\",\"downloadMerged\":\"Download merged\",\"downloadSplit\":\"Download ZIP\",\"downloadExtract\":\"Download extracted\",\"merging\":\"Merging…\",\"working\":\"Working…\",\"clearAll\":\"Clear all\",\"moveUp\":\"Move up\",\"moveDown\":\"Move down\",\"removeItem\":\"Remove\",\"changeFile\":\"Change file\",\"loadError\":\"Failed to load — may not be a valid PDF\",\"pages\":\"{n} pages\",\"pageCountError\":\"page count failed\",\"error\":{\"empty\":\"Enter at least one page or range\",\"syntax\":\"Format invalid — try `1-3, 5`\",\"out_of_range\":\"Page is beyond the end of the document\",\"no_document\":\"Pick a PDF first\"}},\"img2pdf\":{\"title\":\"Image → PDF\",\"description\":\"Drop multiple images (JPG / PNG / WebP / HEIC), pick paper size, orientation, items-per-page, margin and quality, and get a single PDF out. Everything runs in your browser — photos never upload.\",\"pageSize\":\"Paper size\",\"orientation\":\"Orientation\",\"auto\":\"Auto\",\"portrait\":\"Portrait\",\"landscape\":\"Landscape\",\"itemsPerPage\":\"Per page\",\"margin\":\"Margin\",\"quality\":\"JPEG quality\",\"dropzoneHint\":\"Drop images or click to choose (multi-select; HEIC auto-decoded)\",\"count\":\"{n} image(s) · ~{pages} page(s)\",\"clearAll\":\"Clear all\",\"downloadPdf\":\"Download PDF\",\"building\":\"Building…\",\"buildError\":\"Build failed\",\"moveUp\":\"Move up\",\"moveDown\":\"Move down\",\"removeItem\":\"Remove\"},\"heic\":{\"title\":\"HEIC → JPG / PNG / WebP converter\",\"description\":\"Convert iPhone .heic photos to widely-supported formats with batch processing and ZIP download. Runs entirely in your browser — photos never leave your device.\",\"formatLabel\":\"Output format\",\"qualityLabel\":\"Quality\",\"pngNoQuality\":\"PNG is lossless — no quality setting needed.\",\"dropzoneHint\":\"Drop HEIC / HEIF or regular images, or click to choose (50 MB per file)\",\"summary\":\"{total} file(s) · {done} done · {error} failed\",\"clearAll\":\"Clear all\",\"downloadZip\":\"Download ZIP ({n} files)\",\"download\":\"Download\",\"state\":{\"pending\":\"Queued\",\"converting\":\"Converting…\",\"done\":\"Done\",\"error\":\"Failed\"}},\"imgbase64\":{\"title\":\"Image ↔ Base64\",\"description\":\"Drop images to get a data URI, raw base64, HTML img and CSS background snippets — one click each. Or paste base64 to preview + download. Pure client-side, files never leave your browser.\",\"mode\":\"Mode\",\"encode\":\"Image → Base64\",\"decode\":\"Base64 → Image\",\"dropzoneHint\":\"Drop one or more images, or click to choose (10 MB per file)\",\"filesCount\":\"{n} file(s)\",\"clearAll\":\"Clear\",\"dataUri\":\"data URI\",\"rawBase64\":\"Raw base64\",\"htmlSnippet\":\"HTML \u003cimg\u003e snippet\",\"cssSnippet\":\"CSS background-image snippet\",\"readError\":\"Failed to read file\",\"inputLabel\":\"Paste data URI or base64\",\"inputPlaceholder\":\"data:image/png;base64,... or a raw base64 string\",\"mimeLabel\":\"MIME type\",\"mimeHint\":\"data URIs reuse their own MIME; the dropdown only applies when pasting raw base64\",\"decodeBtn\":\"Decode \u0026 preview\",\"clear\":\"Clear\",\"emptyInput\":\"Paste base64 or a data URI first\",\"notBase64\":\"data URI is not base64-encoded\",\"invalidBase64\":\"input is not valid base64\",\"decodeError\":\"Failed to decode — input may not be an image\",\"detectedMime\":\"MIME\",\"decodedSize\":\"Decoded size\",\"download\":\"Download\"},\"pdfwm\":{\"title\":\"PDF watermark + page numbers\",\"description\":\"Add a text or image watermark and auto page numbers to a PDF — diagonal tiling, opacity \u0026 rotation supported. Runs entirely in the browser, ideal for contracts, confidential documents and ID copies.\",\"dropzoneHint\":\"Drop a PDF or click to choose (max 200 MB per file)\",\"changeFile\":\"Change\",\"watermark\":\"Watermark\",\"wmNone\":\"None\",\"wmText\":\"Text\",\"wmImage\":\"Image (logo)\",\"text\":\"Text\",\"fontSize\":\"Font size\",\"opacity\":\"Opacity\",\"rotation\":\"Rotation\",\"color\":\"Colour\",\"tile\":\"Tile diagonally across page (anti-copy)\",\"position\":\"Position\",\"logoHint\":\"Drop a PNG or JPG (transparent PNG recommended)\",\"changeLogo\":\"Change logo\",\"scale\":\"Scale (relative to page width)\",\"addPageNumbers\":\"Add page numbers\",\"format\":\"Format\",\"pnPosition\":\"Page-number position\",\"bottomLeft\":\"Bottom left\",\"bottomCenter\":\"Bottom center\",\"bottomRight\":\"Bottom right\",\"apply\":\"Apply \u0026 download\",\"working\":\"Working…\",\"imageFormatError\":\"Logo must be PNG or JPG\",\"nothingSelected\":\"Enable a watermark or page numbers first\"},\"codefmt\":{\"title\":\"Code Beautifier / Minifier\",\"description\":\"**Prettier**-backed formatter for 10 languages (JS / TS / JSX / TSX / JSON / CSS / SCSS / HTML / Markdown / YAML), plus a one-click minifier for JSON / CSS / HTML. Runs entirely in your browser — code never leaves.\",\"mode\":\"Mode\",\"beautify\":\"Beautify\",\"minify\":\"Minify\",\"language\":\"Language\",\"autoDetect\":\"Auto detect\",\"advanced\":\"Advanced (Prettier options)\",\"printWidth\":\"Print width\",\"tabWidth\":\"Tab width\",\"useTabs\":\"Use tabs\",\"singleQuote\":\"Single quotes\",\"semi\":\"Semicolons\",\"input\":\"Source\",\"output\":\"Output\",\"inputPlaceholder\":\"Paste JS / TS / JSON / CSS / HTML / Markdown / YAML…\",\"outputPlaceholder\":\"Formatted or minified result appears here\",\"paste\":\"Paste\",\"openFile\":\"Open file\",\"clear\":\"Clear\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"download\":\"Download\",\"doBeautify\":\"Beautify\",\"doMinify\":\"Minify\",\"working\":\"Working…\",\"emptyInput\":\"Paste some code or choose a file first\",\"minifyUnsupported\":\"Minify currently supports JSON / CSS / SCSS / HTML only\",\"minifyHint\":\"{lang} is not minifiable — switch back to Beautify\"},\"mdedit\":{\"title\":\"Markdown Editor (live preview)\",\"description\":\"Write Markdown on the left, see the **live preview** on the right. GitHub-Flavored Markdown (tables, task lists, strikethrough), output as raw HTML or a fully-styled standalone HTML file. Runs entirely in the browser.\",\"breakLines\":\"Line breaks → `\u003cbr\u003e` (breaks)\",\"words\":\"words\",\"characters\":\"chars\",\"lines\":\"lines\",\"headings\":\"headings\",\"readTime\":\"reading\",\"openFile\":\"Open file\",\"loadSample\":\"Load sample\",\"clear\":\"Clear\",\"source\":\"Markdown source\",\"placeholder\":\"Type Markdown here…\",\"view\":\"View mode\",\"preview\":\"Preview\",\"html\":\"HTML source\",\"toc\":\"TOC\",\"noHeadings\":\"No headings (lines starting with `#`).\",\"copyMd\":\"Copy MD\",\"copyHtml\":\"Copy HTML\",\"copied\":\"Copied\",\"downloadMd\":\"Download .md\",\"downloadHtml\":\"Download .html\",\"docTitle\":\"Markdown export\"},\"urlenc\":{\"title\":\"URL / Base64 / HTML Encoder\",\"description\":\"Six encoding formats, instant two-way conversion: **URL** (encodeURI), **URI component** (encodeURIComponent), **Base64** (standard padding), **Base64URL** (JWT / OAuth), **HTML entities**, **Unicode escape** (`\\\\uXXXX`). Pure frontend.\",\"direction\":\"Direction\",\"encode\":\"Encode\",\"decode\":\"Decode\",\"format\":\"Format\",\"fmt\":{\"url\":\"URL (encodeURI)\",\"urlComponent\":\"URI component\",\"base64\":\"Base64\",\"base64url\":\"Base64URL (JWT)\",\"htmlEntities\":\"HTML entities\",\"unicodeEscape\":\"Unicode escape\"},\"swap\":\"Output → input\",\"input\":\"Input\",\"output\":\"Output\",\"placeholder\":\"Paste a string to encode / decode…\",\"outputPlaceholder\":\"Result appears live as you type\",\"clear\":\"Clear\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"error\":\"Error\"},\"jsondiff\":{\"title\":\"JSON Diff (deep)\",\"description\":\"Paste two JSON docs; see a **live deep diff** — added, removed and changed paths highlighted by colour, arrays compared by index, one-click diff-report copy. Pure frontend, no upload.\",\"left\":\"Left (before)\",\"right\":\"Right (after)\",\"added\":\"added\",\"removed\":\"removed\",\"changed\":\"changed\",\"unchanged\":\"unchanged\",\"showUnchanged\":\"Show unchanged fields\",\"noChanges\":\"✓ Identical — no differences\",\"path\":\"Path\",\"leftValue\":\"Left value\",\"rightValue\":\"Right value\",\"waiting\":\"Paste valid JSON on both sides to start the diff\",\"copyReport\":\"Copy diff report\",\"copied\":\"Copied\"},\"csv\":{\"title\":\"CSV / TSV Viewer + Converter\",\"description\":\"Paste a CSV or TSV; we **auto-detect the delimiter** and parse it per RFC 4180 (quotes, `\\\"\\\"` escapes, newlines inside fields). Tabular preview, per-column stats (unique / empty / numeric), one-click export to JSON / TSV / Markdown / CSV.\",\"hasHeader\":\"First row is the header\",\"delimiter\":\"Delimiter\",\"openFile\":\"Open file\",\"loadSample\":\"Load sample\",\"clear\":\"Clear\",\"input\":\"Source\",\"placeholder\":\"Paste CSV, TSV or any delimited tabular data…\",\"summary\":\"{rows} rows · {cols} cols\",\"truncated\":\"Showing first {shown} rows of {total} (export below contains all)\",\"outputFormat\":\"Output format\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"download\":\"Download\"},\"imgcrop\":{\"title\":\"Image Crop (free / aspect / circular)\",\"description\":\"Drag-to-crop with optional locked aspect ratios (8 presets), circular mask for avatars, export to PNG / JPG / WebP with custom output width. Runs entirely in the browser — **files never leave**.\",\"dropzoneHint\":\"Drop an image or click to choose (JPG / PNG / WebP / GIF)\",\"aspect\":\"Aspect\",\"circular\":\"Circular mask (for avatars)\",\"changeImage\":\"Change image\",\"format\":\"Output format\",\"quality\":\"Quality\",\"outputWidth\":\"Output width (px)\",\"outputHint\":\"Source {src}; leave empty to use the crop rect's native size\",\"willExport\":\"Will export\",\"circularJpegHint\":\"⚠ JPG has no alpha — circular mask becomes a square. Use PNG / WebP for true circle.\",\"download\":\"Download cropped image\",\"working\":\"Working…\"},\"cssgrid\":{\"title\":\"CSS Grid Generator\",\"description\":\"Visually edit CSS Grid: **add / remove rows / cols** (fr / px / % / auto), tune **gap**, paint **named grid areas** spanning multiple cells. Live preview + auto-generated `grid-template-areas` string + complete CSS output (including `grid-area` rules per area). Holy Grail, 2-col split and Dashboard 12-col presets included.\",\"presets\":\"Presets\",\"rows\":\"Rows\",\"cols\":\"Cols\",\"gap\":\"Gap\",\"areas\":\"Named areas\",\"preview\":\"Live preview\",\"css\":\"CSS output\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"mermaid\":{\"title\":\"Mermaid Diagram Editor\",\"description\":\"Write diagrams in plain text — flowcharts, sequence, gantt, mindmap, class, pie — with live preview, then download as SVG or PNG. **Mermaid** is natively rendered by GitHub, Notion, Slack and GitLab, so your diagrams version-control just like code. 6 templates baked in.\",\"samples\":\"Templates\",\"sampleKeys\":{\"flowchart\":\"Flowchart\",\"sequence\":\"Sequence\",\"gantt\":\"Gantt\",\"classDiagram\":\"Class\",\"pie\":\"Pie\",\"mindmap\":\"Mindmap\"},\"source\":\"Mermaid source\",\"preview\":\"Live preview\",\"placeholder\":\"Write or paste Mermaid syntax…\",\"copySource\":\"Copy source\",\"copySvg\":\"Copy SVG\",\"copied\":\"Copied\"},\"clippath\":{\"title\":\"CSS clip-path Editor\",\"description\":\"Visually edit CSS `clip-path`: **polygon** (drag points, double-click to remove, right-click on a point to insert after it), **circle**, **ellipse**, **inset** (with rounded corners). 9 presets (triangle / rhombus / hexagon / star / arrow…). Export to CSS, Tailwind v4 bracket class, SVG path.\",\"preset\":\"Preset\",\"presets\":{\"triangle\":\"Triangle\",\"rhombus\":\"Rhombus\",\"hexagon\":\"Hexagon\",\"star\":\"Star\",\"arrow\":\"Arrow\",\"parallelogram\":\"Parallelogram\",\"circle\":\"Circle\",\"ellipse\":\"Ellipse\",\"inset\":\"Inset\"},\"editor\":\"Editor (drag / double-click delete / right-click add)\",\"appliedTo\":\"Applied to a sample image\",\"pointHint\":\"Drag · double-click to delete · right-click to insert after\",\"polygonHint\":\"{n} points (right-click after a point to add; double-click to remove)\",\"pointsLabel\":\"Vertices (%)\",\"centerX\":\"Center X\",\"centerY\":\"Center Y\",\"radius\":\"Radius\",\"radiusX\":\"Radius X\",\"radiusY\":\"Radius Y\",\"insetTop\":\"Inset top\",\"insetRight\":\"Inset right\",\"insetBottom\":\"Inset bottom\",\"insetLeft\":\"Inset left\",\"borderRadius\":\"Border radius\",\"output\":\"Output\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"pdf2img\":{\"title\":\"PDF → Images (PNG / JPG / WebP)\",\"description\":\"Render each PDF page as a high-resolution image; pick a page range + scale (1× = 72dpi, 4× ≈ 288dpi). Single page downloads directly; multiple pages are zipped. Runs entirely in your browser — **files never leave**.\",\"dropzoneHint\":\"Drop a PDF or click to choose (max 200 MB per file)\",\"changeFile\":\"Change\",\"pageCount\":\"{n} pages\",\"loading\":\"Loading…\",\"loadError\":\"Failed to read — may not be a valid PDF\",\"format\":\"Output format\",\"scale\":\"Scale (render DPI)\",\"quality\":\"Quality\",\"pages\":\"Pages\",\"allPages\":\"All\",\"rangePages\":\"Range\",\"rangeHint\":\"e.g. `1-3, 5, 8-10` (document has {max} pages)\",\"rangePreview\":\"Will export {n} pages\",\"rangeInvalid\":\"Invalid range or out of bounds\",\"renderAndDownload\":\"Render \u0026 download\",\"renderingProgress\":\"Rendering {done} / {total}…\",\"working\":\"Working…\"},\"gifmake\":{\"title\":\"Images → GIF Animation\",\"description\":\"Combine multiple images (JPG / PNG / WebP) into a single GIF animation. Reorder by drag, tweak delay, loop, output size and palette colour count. Pure-frontend gifenc encoder — **images never leave your browser**.\",\"dropzoneHint\":\"Drop images (JPG / PNG / WebP) or click to choose\",\"dropzoneAddHint\":\"Add more ({current} / {max} max)\",\"frameCount\":\"{n} frames\",\"clearAll\":\"Clear\",\"width\":\"Width (px)\",\"height\":\"Height (px)\",\"delay\":\"Frame delay\",\"loop\":\"Loop forever (off = play once)\",\"fit\":\"Fit mode\",\"fitContain\":\"Contain (letterbox)\",\"fitCover\":\"Cover (crop edges)\",\"maxColors\":\"Palette colours\",\"buildGif\":\"Build GIF\",\"encodingProgress\":\"Encoding {done} / {total}…\",\"working\":\"Working…\"},\"imgresize\":{\"title\":\"Image Resize (fit / longest-edge / scale)\",\"description\":\"Four resize modes: **fit inside a max box** (common for upload limits), **cap longest edge**, **percentage scale**, **force exact size** (stretches). Outputs JPG / PNG / WebP; never enlarges by default. Runs entirely in your browser, **files never leave**.\",\"dropzoneHint\":\"Drop an image or click to choose (JPG / PNG / WebP / GIF)\",\"loadError\":\"Failed to load image\",\"changeImage\":\"Change image\",\"mode\":\"Mode\",\"modes\":{\"maxFit\":\"Fit box (aspect)\",\"longestEdge\":\"Longest edge\",\"scale\":\"Percentage\",\"exact\":\"Force size\"},\"maxWidth\":\"Max width\",\"maxHeight\":\"Max height\",\"longestEdge\":\"Longest edge (px)\",\"percent\":\"Scale\",\"width\":\"Width\",\"height\":\"Height\",\"exactWarn\":\"⚠ Force size stretches the image — aspect ratio is not preserved\",\"preventUpscale\":\"Never enlarge (keep source size if smaller than target)\",\"format\":\"Output format\",\"quality\":\"Quality\",\"willOutput\":\"Will output\",\"download\":\"Download\",\"working\":\"Working…\"},\"hashes\":{\"title\":\"Hash Tools\",\"description\":\"Compute **MD5 / SHA-1 / SHA-256 / SHA-384 / SHA-512** side-by-side. Text mode is live; file mode verifies integrity (compare against publisher's checksum). WebCrypto + hand-rolled MD5 — runs entirely in your browser.\",\"mode\":\"Mode\",\"textMode\":\"Text\",\"fileMode\":\"File\",\"inputText\":\"Input text\",\"textPlaceholder\":\"Paste text, password, API key… live hash output\",\"computeHashes\":\"Compute hashes\",\"hashing\":\"Hashing…\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"uuid\":{\"title\":\"UUID Generator (v4 / v7)\",\"description\":\"Generate 1-1000 UUIDs at once. **v4** = 122 random bits (RFC 4122). **v7** = 48-bit Unix-ms timestamp + 74 random bits (RFC 9562) — **sortable**, great as a database primary key. Tunable case, hyphen handling, brace wrapping.\",\"version\":\"Version\",\"count\":\"Count (1-1000)\",\"generate\":\"Generate\",\"case\":\"Case\",\"lower\":\"lowercase\",\"upper\":\"UPPERCASE\",\"hyphens\":\"Keep hyphens `-`\",\"braces\":\"Wrap with braces `{...}`\",\"countResult\":\"{n} generated\",\"copyAll\":\"Copy all\",\"copied\":\"Copied\",\"download\":\"Download .txt\",\"v7embed\":\"v7 embedded time: {ts}\"},\"lorem\":{\"title\":\"Lorem Ipsum Generator (Latin / Chinese / Tech)\",\"description\":\"Three banks: classic **Latin Lorem Ipsum**, **Traditional Chinese filler** (so your CJK mockups don't look broken with English fillers), and **Tech vocabulary** (for product / SaaS demos). Output as words / sentences / paragraphs; seed for reproducibility.\",\"lang\":\"Language\",\"latin\":\"Latin Lorem\",\"zh\":\"Traditional Chinese\",\"tech\":\"Tech English\",\"unit\":\"Unit\",\"words\":\"Words\",\"sentences\":\"Sentences\",\"paragraphs\":\"Paragraphs\",\"count\":\"Count\",\"startLorem\":\"Start with `Lorem ipsum dolor sit amet…`\",\"reroll\":\"Re-roll\",\"stats\":\"{chars} chars · {words} words\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"ts\":{\"title\":\"Unix Timestamp ↔ Timezones\",\"description\":\"Paste **epoch seconds (10-digit)**, **epoch milliseconds (13-digit)** or an **ISO 8601 string**; we auto-detect and convert live. See every selected timezone's local time plus a relative-time description. Backend log debugging and cross-timezone collaboration essential.\",\"input\":\"Timestamp / ISO input\",\"placeholder\":\"e.g. 1700000000, 1700000000000, 2024-01-01T00:00:00Z\",\"now\":\"Now\",\"kind\":{\"ms\":\"milliseconds\",\"s\":\"seconds\",\"iso\":\"ISO 8601\"},\"detected\":\"Detected as: {kind}\",\"parseError\":\"Could not parse (paste epoch digits or an ISO string)\",\"relative\":\"Relative time\",\"zoneList\":\"Local time in each timezone\",\"addZone\":\"+ Add timezone\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"emoji\":{\"title\":\"Emoji Info Lookup\",\"description\":\"250+ curated emoji on one page, filter by 8 categories (smileys / people / animals / food / travel / objects / symbols / flags), search by keyword or shortcode (`thumbs`, `fire`, `rocket`), or **paste an emoji to reverse-lookup its codepoint / shortcode / HTML entity**.\",\"placeholder\":\"Search by keyword, shortcode, or paste an emoji…\",\"all\":\"All\",\"categories\":{\"smileys\":\"Smileys\",\"people\":\"People\",\"animals\":\"Animals \u0026 Nature\",\"food\":\"Food \u0026 Drink\",\"travel\":\"Travel\",\"objects\":\"Objects\",\"symbols\":\"Symbols\",\"flags\":\"Flags\"},\"countLabel\":\"{n} results\",\"char\":\"Char\",\"codepoints\":\"Codepoints\",\"shortcode\":\"Shortcode\",\"htmlEntity\":\"HTML entity\"},\"slugify\":{\"title\":\"Slugify (URL-friendly)\",\"description\":\"Turn any title into a URL-friendly slug: **Unicode NFD + accent strip** (café → cafe), **punctuation → separator**, **normalised case**. CJK characters are preserved by default (modern browsers and search engines handle CJK URLs fine) but can be dropped. Optional max length cuts on word boundary.\",\"input\":\"Title\",\"placeholder\":\"Paste any title, e.g. JavaScript Tutorial: ES6 to React Hooks\",\"separator\":\"Separator\",\"case\":\"Case\",\"maxLength\":\"Max length (0 = unlimited)\",\"stripAccents\":\"Strip accents (café → cafe)\",\"dropCjk\":\"Drop CJK characters\",\"result\":\"Result\",\"variants\":\"Other variants\",\"copy\":\"Copy\",\"copied\":\"Copied\"},\"casecvt\":{\"title\":\"Case Converter\",\"description\":\"Paste anything in any casing (camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / sentence / Title / dot / path notation) and see all 9 conversions at once. Handles tricky boundaries like `XMLHttpRequest` correctly.\",\"input\":\"Input string\",\"placeholder\":\"Paste any naming: userProfileData, user_profile_data, User Profile Data…\",\"hint\":\"Handles consecutive caps (`XMLHttpRequest` → xml http request) and arbitrary punctuation\",\"kinds\":{\"camel\":\"camelCase\",\"pascal\":\"PascalCase\",\"snake\":\"snake_case\",\"kebab\":\"kebab-case\",\"constant\":\"CONSTANT_CASE\",\"title\":\"Title Case\",\"sentence\":\"Sentence case\",\"dot\":\"dot.notation\",\"path\":\"path/notation\"},\"copy\":\"Copy\",\"copied\":\"Copied\"},\"textdiff\":{\"title\":\"Text Diff (line-by-line)\",\"description\":\"Paste two texts; LCS computes a line-by-line diff with **added / removed / changed** colour-coded. Toggle to **ignore whitespace** or **ignore case**, export as **unified diff** (git / patch compatible).\",\"left\":\"Left (before)\",\"right\":\"Right (after)\",\"added\":\"added\",\"removed\":\"removed\",\"changed\":\"changed\",\"unchanged\":\"unchanged\",\"ignoreWhitespace\":\"Ignore whitespace\",\"ignoreCase\":\"Ignore case\",\"copyUnified\":\"Copy unified diff\",\"copied\":\"Copied\"},\"vid2gif\":{\"title\":\"Video → GIF (MP4 / WebM / MOV → GIF)\",\"description\":\"Drop a video, pick a **start / end** time, **fps**, and **output width**. We seek the video frame-by-frame in your browser, capture to canvas, and emit a GIF with gifenc. **Files never leave the browser.**\",\"dropzoneHint\":\"Drop a video or click to choose (MP4 / WebM / MOV)\",\"changeFile\":\"Change file\",\"start\":\"Start\",\"end\":\"End\",\"fps\":\"fps\",\"width\":\"Output width\",\"maxColors\":\"Palette colours\",\"fit\":\"Fit mode\",\"fitContain\":\"Contain (letterbox)\",\"fitCover\":\"Cover (crop)\",\"loop\":\"Loop forever\",\"estimate\":\"About {frames} frames · {size}\",\"convert\":\"Convert \u0026 download GIF\",\"encodingProgress\":\"Encoding {done} / {total}…\",\"working\":\"Working…\"},\"httpcodes\":{\"title\":\"HTTP Status Codes Reference\",\"description\":\"60+ HTTP status codes on a single page across **1xx Informational / 2xx Success / 3xx Redirection / 4xx Client Error / 5xx Server Error**. Filter by class, search by digit prefix or keyword, RFC refs + common-misuse notes (401 vs 403, 302 vs 307).\",\"placeholder\":\"Type a number (40) or keyword (rate limited)…\",\"countLabel\":\"{found} / {total} codes\",\"noResults\":\"No matching codes.\",\"copyCode\":\"Copy status code\"},\"regexr\":{\"title\":\"Regex Replace + Group Preview\",\"description\":\"Live three-pane editor: **Pattern** (/.../flags) + **Replacement** ($1, $2, $\u003cname\u003e) + **Input**. See highlighted matches in the source, the replaced output, and a table of every match's captures (including named groups). All 6 flags toggleable.\",\"pattern\":\"Pattern\",\"replacement\":\"Replacement\",\"replacementPlaceholder\":\"Supports $1, $2, $\u003cname\u003e\",\"replacementHint\":\"$$1–$9 = captures; $\u003cname\u003e = named group; $\u0026 = full match; $$ = literal $\",\"flags\":\"Flags\",\"input\":\"Input (source)\",\"output\":\"Replaced output\",\"highlight\":\"Source with match highlights (hl marker)\",\"groupsTable\":\"Captures table\",\"matchCount\":\"{n} matches\",\"matchCol\":\"Match\",\"groupsCol\":\"Captures\",\"truncated\":\"Showing first {shown} of {total}\",\"empty\":\"(empty input)\",\"copy\":\"Copy output\",\"copied\":\"Copied\"},\"cron\":{\"title\":\"Cron Expression Visualiser + Next Firings\",\"description\":\"Paste a cron expression (`* * * * *`); see the **5-field breakdown** + **natural-language description** + the **next N firings** (local + ISO + delta). Supports `@daily` / `@hourly` aliases, month / day-of-week names (`jan`, `mon-fri`), step (`*/5`), range (`9-17`), and mixed lists.\",\"expression\":\"Cron expression\",\"presets\":\"Common presets\",\"nextN\":\"Show next\",\"local\":\"Local\",\"iso\":\"ISO 8601\",\"delta\":\"From now\",\"copyAll\":\"Copy all (ISO)\",\"copied\":\"Copied\"},\"json2ts\":{\"title\":\"JSON → TypeScript\",\"description\":\"Paste any JSON; **live-infer TypeScript types** — auto-named nested types (`users → User`), shape-merging across array elements, optional-field detection, mixed-type arrays as unions. Choose interface vs type, root name, and `readonly`. Runs entirely locally — no upload.\",\"input\":\"JSON\",\"output\":\"TypeScript\",\"format\":\"Format\",\"rootName\":\"Root name\",\"immutable\":\"readonly\",\"loadSample\":\"Load sample\",\"placeholder\":\"Paste any JSON…\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"download\":\"Download .ts\"},\"tokens\":{\"title\":\"AI Token Counter\",\"description\":\"Paste any prompt and **instantly estimate tokens, cost, and context-window fit** across 5 leading models (GPT-4 / GPT-3.5 / Claude / Gemini / Llama 3). Heuristic-based (no 1MB tiktoken WASM); ±10% accurate for typical English prose, with a CJK weighting that matches real BPE behaviour.\",\"input\":\"Prompt / text\",\"placeholder\":\"Paste any prompt or conversation…\",\"clear\":\"Clear\",\"characters\":\"chars\",\"words\":\"words\",\"cjk\":\"CJK\",\"tokens\":\"tokens\",\"model\":\"Model\",\"cost\":\"Cost\",\"context\":\"Context\",\"caveatTitle\":\"Why estimates?\",\"caveatBody\":\"Real BPE tokenisation requires tiktoken / SentencePiece — that's a 1MB WASM bundle. We use a fast heuristic ('~4 chars per token for English, ~1.5 token per CJK char') that lands within ±10% for mixed prose. Plenty for budgeting and context-window checks; for production accuracy use the official OpenAI / Anthropic tokenizers.\"},\"pwstrength\":{\"title\":\"Password Strength + Crack-Time Estimate\",\"description\":\"Pure-frontend entropy estimate plus crack-time predictions across 5 attacker profiles (rate-limited online APIs → GPU-cracking MD5 offline). Detects weak patterns (all-same chars, all-digits, common passwords, keyboard runs). **Passwords never leave the browser.**\",\"input\":\"Password\",\"placeholder\":\"Type a password to score…\",\"show\":\"Show password\",\"hide\":\"Hide password\",\"chars\":\"chars\",\"charset\":\"charset size\",\"strength\":\"Strength\",\"crackTime\":\"Crack time (by attacker profile)\",\"charsets\":\"Character classes present\",\"lower\":\"Lowercase a-z\",\"upper\":\"Uppercase A-Z\",\"digit\":\"Digits 0-9\",\"symbol\":\"Symbols !@#$ etc.\",\"other\":\"Unicode / CJK / other\"},\"cvd\":{\"title\":\"Colour-blindness Simulator (8 + normal)\",\"description\":\"Brettel \u0026 Machado matrices simulate **8 deficiencies** (red-blind / green-blind / blue-yellow, each in full + anomalous, plus achromatopsia) alongside normal vision. **Compare palettes or your own image side-by-side.** Essential for designers checking dashboards, charts, alert systems.\",\"paletteMode\":\"Palette mode\",\"imageMode\":\"Image mode\",\"dropzoneHint\":\"Drop an image (longest edge scaled to 400px)\",\"noImage\":\"Choose an image to start\",\"types\":{\"normal\":\"Normal vision\",\"protanopia\":\"Protanopia (red-blind)\",\"protanomaly\":\"Protanomaly (red-weak)\",\"deuteranopia\":\"Deuteranopia (green-blind)\",\"deuteranomaly\":\"Deuteranomaly (green-weak)\",\"tritanopia\":\"Tritanopia (blue-blind)\",\"tritanomaly\":\"Tritanomaly (blue-weak)\",\"achromatopsia\":\"Achromatopsia (total)\",\"achromatomaly\":\"Achromatomaly (partial)\"}},\"svgo\":{\"title\":\"SVG Optimizer\",\"description\":\"Pure-frontend SVG slimmer that strips **comments / metadata / editor-specific attributes** (Sketch, Figma, Inkscape) / **default attribute values** (`opacity=1`, `stroke=none`) / empty groups + defs / rounds decimals to a configurable precision, and collapses whitespace. Live before/after preview + savings %.\",\"optsLabel\":\"Enabled optimizations\",\"opts\":{\"removeComments\":\"Strip \u003c!-- comments --\u003e\",\"removeXmlDeclaration\":\"Strip \u003c?xml ?\u003e\",\"removeDoctype\":\"Strip \u003c!DOCTYPE\u003e\",\"removeMetadata\":\"Strip \u003cmetadata\u003e\",\"removeEditorAttributes\":\"Strip editor attributes (Sketch / Figma / Inkscape)\",\"removeDefaultAttributes\":\"Strip default attribute values\",\"removeEmptyGroups\":\"Strip empty \u003cg\u003e\",\"removeEmptyDefs\":\"Strip empty \u003cdefs\u003e\",\"roundNumbers\":\"Round decimals\",\"collapseWhitespace\":\"Collapse whitespace\"},\"precision\":\"Precision\",\"openFile\":\"Open file\",\"input\":\"Source SVG\",\"output\":\"Optimised SVG\",\"copy\":\"Copy\",\"copied\":\"Copied\",\"download\":\"Download .svg\",\"previewBefore\":\"Before\",\"previewAfter\":\"After\"},\"bundle\":{\"title\":\"npm Bundle Size Lookup\",\"description\":\"Look up an npm package's **minified / gzip size**, **dependency count** and **tree-shake** (sideEffects) flag. Stack multiple packages to compare side-by-side (green bar tracks gzip size). The go-to check when picking a dep. Powered by bundlephobia.com's public API.\",\"placeholder\":\"Enter an npm package (with optional version: react@19, @vercel/analytics@2)\",\"query\":\"Query\",\"popular\":\"Popular packages\",\"empty\":\"Enter a package or pick a popular one below.\",\"loading\":\"Querying…\",\"invalid\":\"Invalid package name format\",\"minified\":\"Min\",\"gzip\":\"Gzip\",\"deps\":\"Deps\",\"sideEffects\":\"Side effects\"},\"meta\":{\"qr\":{\"title\":\"QR Code Generator — With Logo, WiFi, vCard, Email (Free)\",\"description\":\"URL / plain text / WiFi / vCard / Email payloads with custom colours and centre logo. PNG / SVG output, completely free, no watermark. qr-code-generator.com alternative.\",\"keywords\":[\"qr code generator\",\"qr code with logo\",\"wifi qr code\",\"vcard qr\",\"email qr\",\"free qr generator\",\"qr generator no watermark\"]},\"glassneu\":{\"title\":\"Glassmorphism + Neumorphism Generator (two styles, one tool)\",\"description\":\"Two modern UI styles in one tool — Glass via backdrop-filter, Neumorphism via paired light/dark shadows. Three preview backgrounds, output CSS or Tailwind v4.\",\"keywords\":[\"glassmorphism\",\"neumorphism\",\"backdrop-filter\",\"ui style\",\"glass effect\",\"soft shadow\",\"glassmorphism.com alternative\",\"neumorphism.io alternative\"]},\"boxshadow\":{\"title\":\"box-shadow Editor — Multi-layer + Material Elevation Presets\",\"description\":\"Visual multi-layer CSS box-shadow editor with Tailwind 5 + Material 9 presets. Outputs CSS or Tailwind v4 arbitrary class.\",\"keywords\":[\"box-shadow\",\"css shadow\",\"material elevation\",\"tailwind shadow\",\"shadow generator\",\"multi-layer shadow\"]},\"typescale\":{\"title\":\"Type Scale + Fluid clamp() — Tailwind v4 @theme Generator\",\"description\":\"Modular ratio + dual-viewport clamp() generator. Eight musical ratios, output as Tailwind v4 @theme / CSS variables / SCSS. Cleaner than utopia.fyi for Tailwind users.\",\"keywords\":[\"type scale\",\"fluid typography\",\"css clamp\",\"modular scale\",\"tailwind typography\",\"utopia.fyi alternative\",\"fluid type\"]},\"gradient\":{\"title\":\"CSS Gradient Editor — Linear / Radial / Conic (pure client-side)\",\"description\":\"Edit linear / radial / conic CSS gradients with live preview. Drag the angle, centre, or from-angle; freely add / drop / recolour stops; output as CSS, Tailwind v4 arbitrary class, or SVG definition.\",\"keywords\":[\"css gradient\",\"gradient generator\",\"linear-gradient\",\"radial-gradient\",\"conic-gradient\",\"gradient editor\",\"tailwind gradient\",\"cssgradient.io alternative\"]},\"contrast\":{\"title\":\"WCAG + APCA Contrast Checker — Live Fix Suggestions\",\"description\":\"Real-time foreground/background contrast (WCAG 2.1 + APCA Lc) with per-criterion pass / fail. When a pair fails, the tool finds the nearest passing colour along OKLab L for one-click apply.\",\"keywords\":[\"wcag contrast\",\"contrast checker\",\"apca\",\"a11y color\",\"color contrast\",\"wcag aa\",\"webaim alternative\",\"wcag 3\"]},\"mdtrans\":{\"title\":\"Markdown Batch Translator — BYO API Key, Preserves Frontmatter \u0026 Code\",\"description\":\"Translate Markdown files using your own OpenAI / Anthropic / Google API key. Full markdown structure preservation. Great for SSG i18n (Astro / Hugo / Docusaurus / VitePress).\",\"keywords\":[\"markdown translator\",\"md file translator\",\"batch translate markdown\",\"byo api key translator\",\"openai translate\",\"claude translate\",\"gemini translate\",\"hugo i18n\",\"astro i18n\",\"docusaurus i18n\"]},\"favicon\":{\"title\":\"Favicon Generator — favicon.ico + PWA maskable (pure client-side)\",\"description\":\"Three input modes (emoji / text / upload) → emit favicon.ico, every PNG size, PWA maskable, apple-touch-icon, HTML snippet, manifest, packaged ZIP. Files never leave your browser.\",\"keywords\":[\"favicon generator\",\"app icon generator\",\"pwa icon\",\"apple touch icon\",\"maskable icon\",\"favicon.io alternative\",\"realfavicongenerator alternative\"]},\"bezier\":{\"title\":\"cubic-bezier Editor — Visual CSS Easing Curve Designer\",\"description\":\"Drag two control points to design a CSS cubic-bezier easing curve. 11 presets, live animation preview, one-click copy as CSS / Tailwind v4 / Framer Motion code.\",\"keywords\":[\"cubic-bezier\",\"css easing\",\"ease-in-out\",\"css animation curve\",\"bezier editor\",\"cubic bezier generator\",\"framer motion easing\",\"tailwind easing\"]},\"pdfunlock\":{\"title\":\"PDF Unlock / Remove Password (pure client-side, no upload)\",\"description\":\"Strip print / copy restrictions from a PDF (no password), or decrypt with the password you already know. Files never upload — safe for contracts and confidential records.\",\"keywords\":[\"unlock pdf\",\"remove pdf password\",\"pdf password remover\",\"decrypt pdf\",\"pdf restrictions\",\"ilovepdf alternative\",\"smallpdf alternative\"]},\"imgsize\":{\"title\":\"Image Compress to Size — 300KB / 500KB / 2MB (pure client-side)\",\"description\":\"Binary-search the best JPEG / WebP quality to hit a specific file-size budget. Presets for Taiwan gov forms, 104 résumés, LinkedIn, and more. Runs in your browser.\",\"keywords\":[\"image compress to specific size\",\"compress image to 300kb\",\"resize image to 500kb\",\"image under 2mb\",\"resume photo compressor\",\"passport photo compressor\"]},\"palette\":{\"title\":\"Tailwind Palette Generator (50-950) — Live v4 @theme\",\"description\":\"Type a brand colour and get the full 11-step shade ramp (50-950). OKLab-perceptual, hue-stable. One-click copy as Tailwind v4 @theme, v3 config, or CSS variables.\",\"keywords\":[\"tailwind palette\",\"tailwind shades\",\"color palette generator\",\"tailwind v4 theme\",\"design tokens\",\"oklch palette\",\"uicolors alternative\"]},\"pdfedit\":{\"title\":\"PDF Page Editor — Rotate / Delete / Reorder (pure client-side)\",\"description\":\"Thumbnail-based PDF editor: select pages and rotate, delete, duplicate, or reorder. Multi-select for bulk ops. Files never upload — perfect for private documents.\",\"keywords\":[\"pdf page editor\",\"rotate pdf\",\"delete pdf pages\",\"reorder pdf\",\"organize pdf\",\"pdf editor online\",\"ilovepdf alternative\"]},\"pdfcompress\":{\"title\":\"PDF Compress — Lossless / Rasterize Online (pure client-side)\",\"description\":\"Compress PDFs online with two modes: lossless light (5-20% off, keeps text) or rasterize heavy (50-80% off, pages become images). All in your browser — confidential docs welcome.\",\"keywords\":[\"compress pdf\",\"reduce pdf size\",\"shrink pdf\",\"pdf compressor\",\"compress pdf online\",\"smallpdf alternative\",\"ilovepdf alternative\"]},\"pdfsplit\":{\"title\":\"PDF Merge / Split / Extract — Online (pure client-side, no upload)\",\"description\":\"Three PDF operations in one tool: merge multiple PDFs, split into multiple files by range (ZIP), or extract pages into a single PDF. Files never leave your browser — ideal for contracts and private documents.\",\"keywords\":[\"merge pdf\",\"split pdf\",\"extract pdf pages\",\"combine pdf\",\"pdf merge online\",\"pdf splitter\",\"ilovepdf alternative\",\"private pdf merge\"]},\"img2pdf\":{\"title\":\"Image → PDF online (JPG / PNG / HEIC, pure client-side, no upload)\",\"description\":\"Merge multiple photos into a single PDF with drag-sort, A4 / Letter / A5 / Legal paper, orientation, 1 / 2 / 4-up layout, and margin control. Pure client-side — great for receipts, expense reports, and confidential documents.\",\"keywords\":[\"image to pdf\",\"jpg to pdf\",\"png to pdf\",\"photo to pdf\",\"heic to pdf\",\"combine images pdf\",\"merge images pdf\"]},\"heic\":{\"title\":\"HEIC → JPG / PNG / WebP online (pure client-side, no upload)\",\"description\":\"Convert iPhone .heic photos to common formats with batch processing + ZIP download. Pure client-side, photos never leave your device.\",\"keywords\":[\"heic to jpg\",\"heic to png\",\"heic converter\",\"iphone photo converter\",\"heif converter\",\"convert heic online\",\"open heic on windows\"]},\"imgbase64\":{\"title\":\"Image ↔ Base64 — data URI / HTML / CSS one-click copy\",\"description\":\"Drop images to get a data URI, raw base64, HTML img tag, and CSS background snippet. Reverse: paste base64, preview, and download. All in your browser.\",\"keywords\":[\"image to base64\",\"base64 to image\",\"data uri\",\"image base64 converter\",\"data url\",\"base64 image\"]},\"colorconv\":{\"title\":\"Color Format Converter — Hex / RGB / HSL / OKLCH / OKLab\",\"description\":\"Live two-way conversion between five color formats with CSS Color 4 oklch / oklab. Nearest Tailwind class and color preview included. Pure client-side, no signup.\",\"keywords\":[\"color converter\",\"hex to rgb\",\"rgb to hex\",\"hsl to hex\",\"oklch converter\",\"oklab\",\"css color 4\",\"tailwind color\"]},\"pdfwm\":{\"title\":\"PDF Watermark + Page Numbers — Online (Pure Frontend, No Upload)\",\"description\":\"Add text or image watermarks and auto page numbers to a PDF. Diagonal tiling, opacity \u0026 rotation. Runs entirely in the browser — contracts, confidential docs and ID copies stay private.\",\"keywords\":[\"pdf watermark\",\"add watermark to pdf\",\"pdf logo\",\"pdf page numbers\",\"stamp pdf\",\"diagonal watermark pdf\",\"ilovepdf alternative\",\"smallpdf alternative\"]},\"codefmt\":{\"title\":\"Code Beautifier \u0026 Minifier — Online Prettier (10 languages, pure frontend)\",\"description\":\"Prettier-backed beautifier for JS / TS / CSS / HTML / JSON / Markdown / YAML and friends, plus a one-click JSON / CSS / HTML minifier. Runs in your browser, with advanced Prettier options (print width, tab width, quotes).\",\"keywords\":[\"code formatter\",\"prettier online\",\"json beautifier\",\"css beautifier\",\"html beautifier\",\"json minify\",\"css minify\",\"html minify\",\"beautify js\",\"code prettifier\"]},\"bundle\":{\"title\":\"npm Bundle Size Lookup — Compare Min / Gzip / Deps Side-by-Side\",\"description\":\"Look up npm package minified / gzip size, dependency count, tree-shake status. Stack multiple packages to compare. Data from bundlephobia.com.\",\"keywords\":[\"bundle size\",\"npm package size\",\"bundlephobia alternative\",\"tree shaking\",\"gzip size\",\"package weight\",\"frontend bundle analysis\",\"dep comparison\"]},\"svgo\":{\"title\":\"SVG Optimizer Online — Strip Bloat, Round Decimals, Side-by-Side Preview\",\"description\":\"In-browser SVG slimmer: strip comments / metadata / editor attributes / default values, drop empty groups, round decimals, collapse whitespace. Side-by-side preview + savings %.\",\"keywords\":[\"svg optimizer\",\"svgo online\",\"svg minify\",\"sketch svg\",\"figma svg\",\"svg slim\",\"svgomg alternative\",\"vector clean\"]},\"cvd\":{\"title\":\"Colour-blindness Simulator Online — 8 Variants Side-by-Side (Pure Frontend)\",\"description\":\"Brettel / Machado matrices simulate 8 colour-blindness types (protan / deutan / tritan, each full + anomalous, plus achromatopsia) side-by-side. Compare palettes or your image — essential for accessibility audits. Pure frontend.\",\"keywords\":[\"color blindness simulator\",\"colour blindness\",\"deuteranopia\",\"protanopia\",\"tritanopia\",\"achromatopsia\",\"accessibility design\",\"wcag accessibility\"]},\"pwstrength\":{\"title\":\"Password Strength Checker — Crack-Time Estimates (Pure Frontend, No Upload)\",\"description\":\"Entropy-based strength scoring plus crack-time predictions across 5 attacker profiles (online rate-limited → GPU MD5). Weak-pattern detection. Passwords never leave the browser.\",\"keywords\":[\"password strength\",\"password checker\",\"crack time\",\"entropy estimate\",\"zxcvbn alternative\",\"password security\",\"weak password\",\"password test\"]},\"cron\":{\"title\":\"Cron Expression Visualiser Online — Natural Language + Next Firings\",\"description\":\"Paste a cron expression and see the 5-field breakdown, natural-language summary, and the next N firings. Supports @daily aliases, month / dow names, step and range — pure frontend, zero deps.\",\"keywords\":[\"cron expression\",\"online cron\",\"crontab guru alternative\",\"cron visualiser\",\"next fire time\",\"cron parser\",\"cron generator\",\"schedule online\"]},\"regexr\":{\"title\":\"Regex Replace Tool — Captures + Named Group $\u003cname\u003e Live Preview (Pure Frontend)\",\"description\":\"Three-pane regex replace tool: pattern + replacement + input, live captures / named groups / replaced output / source highlights. All 6 RegExp flags toggleable. Complements the existing regex tester.\",\"keywords\":[\"regex replace\",\"regexp replace\",\"named group\",\"regex captures\",\"online regex\",\"regex tester\",\"find replace regex\",\"regex101 alternative\"]},\"httpcodes\":{\"title\":\"HTTP Status Codes — Complete Reference with Search \u0026 Filters\",\"description\":\"Complete HTTP status code cheat-sheet: 60+ codes with names, purposes, RFC references and common-misuse notes. Filter by class, search by digit prefix or keyword.\",\"keywords\":[\"http status codes\",\"http codes\",\"404 401 403\",\"422 429 500\",\"http rfc 9110\",\"status code cheatsheet\",\"rest api status\",\"http reference\"]},\"vid2gif\":{\"title\":\"Video to GIF Online — MP4 / WebM / MOV → GIF (Pure Frontend, No Upload)\",\"description\":\"Drop a video, pick a time window + fps + width; the browser seeks frame-by-frame and emits a GIF via gifenc. No upload, no ads.\",\"keywords\":[\"video to gif\",\"mp4 to gif\",\"webm to gif\",\"mov to gif\",\"screen recording to gif\",\"ezgif alternative\",\"gif maker\",\"online video to gif\"]},\"textdiff\":{\"title\":\"Text Diff Online — Side-by-Side + Unified Diff Export (Pure Frontend)\",\"description\":\"Side-by-side LCS line diff with colour-coded added / removed / changed rows, ignore-whitespace and ignore-case toggles, git-compatible unified diff export. Suitable for backend log comparison, PR review and document-version checks.\",\"keywords\":[\"text diff\",\"line diff\",\"unified diff\",\"diff online\",\"diff tool\",\"lcs algorithm\",\"diffchecker alternative\",\"online compare text\"]},\"ts\":{\"title\":\"Unix Timestamp ↔ Multi-Timezone Converter — Live + Relative (Pure Frontend)\",\"description\":\"Auto-detects epoch seconds / milliseconds / ISO 8601 and converts across 15 common timezones simultaneously, with a relative-time description. Backend log debugging and cross-timezone collaboration must-have.\",\"keywords\":[\"unix timestamp\",\"epoch converter\",\"timestamp converter\",\"iso 8601 parser\",\"timezone converter\",\"epoch to date\",\"epochconverter alternative\",\"online timestamp tool\"]},\"lorem\":{\"title\":\"Lorem Ipsum Generator — Latin / Traditional Chinese / Tech\",\"description\":\"Beyond classic Lorem Ipsum, includes a Traditional Chinese filler bank (essential for CJK mockups) and a product-tech vocabulary. Designers and engineers get realistic placeholder text without the English / CJK visual mismatch.\",\"keywords\":[\"lorem ipsum\",\"dummy text\",\"filler text\",\"chinese lorem\",\"lorem zh\",\"placeholder text\",\"fake text generator\",\"lipsum\"]},\"uuid\":{\"title\":\"UUID Generator Online — v4 / v7 Batch with Formatting Options\",\"description\":\"Generate 1-1000 UUIDs (v4 random or v7 time-ordered) in one shot, with full formatting options. Uses WebCrypto getRandomValues — cryptographically secure, runs entirely in your browser.\",\"keywords\":[\"uuid generator\",\"uuid v4\",\"uuid v7\",\"guid generator\",\"online uuid\",\"rfc 4122\",\"rfc 9562\",\"bulk uuid\"]},\"hashes\":{\"title\":\"MD5 / SHA-256 Online — Five Hashes Side-by-Side (Pure Frontend)\",\"description\":\"MD5 / SHA-1 / SHA-256 / SHA-384 / SHA-512 computed simultaneously. Live for text, on-demand for files (integrity verification). Runs in your browser — no upload.\",\"keywords\":[\"md5 online\",\"sha256 calculator\",\"hash generator\",\"file hash\",\"checksum\",\"sha1 sha256\",\"hash online\",\"hash verify\"]},\"imgresize\":{\"title\":\"Image Resize Online — Fit / Longest-Edge / Percentage (Pure Frontend)\",\"description\":\"Four resize modes: fit inside max box, cap longest edge, percentage scale, force exact size. Outputs JPG / PNG / WebP, never enlarges by default. Runs entirely in your browser.\",\"keywords\":[\"image resize\",\"resize image online\",\"shrink image\",\"scale image\",\"image dimension\",\"thumbnail maker\",\"image compress\",\"online resize\"]},\"gifmake\":{\"title\":\"Images to GIF Online — Reorder, Set Delay, Build (Pure Frontend)\",\"description\":\"Combine multiple images into a GIF animation with reorderable frames, configurable delay, loop and palette. Pure-frontend gifenc encoder — your images never leave the browser.\",\"keywords\":[\"image to gif\",\"make gif\",\"gif maker\",\"frame to gif\",\"gif from images\",\"online gif maker\",\"ezgif alternative\",\"gif encoder\"]},\"pdf2img\":{\"title\":\"PDF to Images — PNG / JPG / WebP High-Resolution Online (Pure Frontend)\",\"description\":\"Render each PDF page as a high-resolution image; pick a page range and scale (DPI). Multi-page jobs are zipped. Runs entirely in your browser, ideal for contracts / reports / confidential PDFs.\",\"keywords\":[\"pdf to image\",\"pdf to png\",\"pdf to jpg\",\"pdf to webp\",\"pdf page to image\",\"convert pdf to image\",\"ilovepdf alternative\",\"smallpdf alternative\"]},\"clippath\":{\"title\":\"CSS clip-path Editor — Visual Polygon / Circle / Inset Generator\",\"description\":\"Drag-and-drop CSS clip-path generator with 9 presets (triangle / hexagon / star / arrow / …), export to CSS, Tailwind v4 bracket class and SVG path. Live preview, pure frontend.\",\"keywords\":[\"css clip-path\",\"clip path generator\",\"polygon generator\",\"css polygon\",\"tailwind clip-path\",\"svg shape generator\",\"clip path maker\",\"clippy alternative\"]},\"imgcrop\":{\"title\":\"Image Crop Online — Free / Aspect / Circular (Pure Frontend, No Upload)\",\"description\":\"Visual drag-to-crop with 8 aspect ratio presets, circular mask for avatars, export PNG / JPG / WebP with custom output width. Runs entirely in the browser, ideal for ID photos, confidential / personal images.\",\"keywords\":[\"image crop\",\"online crop\",\"square crop\",\"circle crop\",\"instagram crop\",\"16:9 crop\",\"avatar crop\",\"photo crop online\"]},\"csv\":{\"title\":\"CSV / TSV Viewer — Auto-Detect Delimiter \u0026 Convert to JSON (Pure Frontend)\",\"description\":\"RFC 4180 CSV / TSV parser with auto delimiter detection, tabular preview, per-column stats (unique / empty / numeric), one-click export to JSON / TSV / Markdown / CSV.\",\"keywords\":[\"csv viewer\",\"csv to json\",\"tsv parser\",\"csv preview\",\"csv to markdown\",\"csv to table\",\"rfc 4180\",\"online csv tool\"]},\"jsondiff\":{\"title\":\"JSON Diff Online — Deep Diff Visualisation (Pure Frontend, No Sign-up)\",\"description\":\"Side-by-side deep diff of two JSON docs: added / removed / changed paths highlighted in colour, arrays compared by index, copyable diff report. Built for backend API change reviews, config audits and regression baselines.\",\"keywords\":[\"json diff\",\"json compare\",\"deep diff\",\"object diff\",\"api diff\",\"config diff\",\"jsondiff online\",\"compare json\"]},\"urlenc\":{\"title\":\"URL / Base64 / HTML Encoder — Six Formats, Instant Two-Way Conversion\",\"description\":\"URL, URI component, Base64, Base64URL, HTML entities, Unicode escape — encode and decode side-by-side, instantly. Pure frontend, ideal for backend debug, OAuth / JWT, scraping.\",\"keywords\":[\"url encode\",\"url decode\",\"base64 encode\",\"base64url\",\"html entities\",\"unicode escape\",\"encodeuricomponent\",\"online encoder\",\"online decoder\"]},\"mdedit\":{\"title\":\"Markdown Editor — Live Preview \u0026 HTML Export (Pure Frontend, Free)\",\"description\":\"Side-by-side Markdown editor with live preview of GFM (tables, task lists, strikethrough, code blocks). Export as raw HTML or a styled standalone HTML file. Word / char / read-time stats and one-click TOC.\",\"keywords\":[\"markdown editor\",\"md preview\",\"online markdown\",\"markdown to html\",\"md to html\",\"gfm editor\",\"online markdown editor\",\"stackedit alternative\",\"dillinger alternative\"]},\"percentile\":{\"title\":\"Percentile calculator — p50 / p90 / p95 / p99 + Apdex (for SLOs)\",\"description\":\"Paste response times and instantly get p50, p90, p95, p99 and an Apdex score. SLO reports, JMeter result digesting, and load-test analysis — tunable Apdex T threshold, runs in your browser.\",\"keywords\":[\"percentile calculator\",\"p95 calculator\",\"p99 calculator\",\"apdex calculator\",\"slo analysis\",\"response time\",\"jmeter analyzer\",\"k6 result parser\",\"load test analysis\"]},\"jwt\":{\"title\":\"JWT decoder / generator — HS256 decode \u0026 sign (secret never leaves your browser)\",\"description\":\"Paste a JWT to inspect header / payload and expiry instantly. Switch to Sign to edit payload + secret and re-mint a token on the fly. WebCrypto only, no upload.\",\"keywords\":[\"jwt decoder\",\"jwt generator\",\"hs256\",\"json web token tool\",\"jwt.io alternative\",\"2fa testing\",\"bearer token parser\",\"token expiry check\"]},\"curl\":{\"title\":\"cURL ↔ fetch ↔ Python requests ↔ HTTPie converter\",\"description\":\"Paste a cURL command and convert it to JavaScript fetch, Python requests, or HTTPie. Multi-line continuations, both quote styles, basic auth, -G, and JSON bodies all supported.\",\"keywords\":[\"curl to fetch\",\"curl to python\",\"curl converter\",\"fetch generator\",\"httpie converter\",\"curlconverter alternative\",\"postman alternative\",\"api testing tools\"]},\"selector\":{\"title\":\"CSS / XPath selector live tester — paste HTML, see matches\",\"description\":\"Paste HTML and a selector, see matched elements with outerHTML + text preview. Toggle CSS / XPath modes. Essential when writing Playwright, Robot Framework, or Appium locators.\",\"keywords\":[\"css selector tester\",\"xpath tester\",\"selector playground\",\"playwright selector\",\"robot framework locator\",\"appium locator\",\"queryselectorall online\",\"selector practice\"]},\"regex\":{\"title\":\"Regex builder \u0026 live tester — capture / named groups listed\",\"description\":\"Paste a pattern + sample text. Live highlight matches, list capture groups and named groups. Toggle i / m / s / u flags; g is always on. Powered by your browser's JS engine.\",\"keywords\":[\"regex tester\",\"regex builder\",\"regex101 alternative\",\"regexr alternative\",\"javascript regex\",\"named groups\",\"capture groups\",\"live regex\"]},\"mockapi\":{\"title\":\"Mock API designer — export Playwright / Mockoon / Postman / json-server config\",\"description\":\"Design endpoints (method / path / status / delay / body) in the UI and export ready-to-run config for Playwright, Mockoon, Postman, or json-server. Pure client-side — bring your own runner.\",\"keywords\":[\"mock api generator\",\"playwright mock\",\"mockoon config\",\"json-server config\",\"postman mock\",\"api stubbing\",\"fake api server\",\"frontend mocking\",\"beeceptor alternative\"]},\"twdata\":{\"title\":\"Taiwan test data generator — national ID / business no. / mobile / Luhn credit cards\",\"description\":\"Generate well-formed Taiwan national IDs (matching the official checksum), business numbers (including the special 7th-digit-7 rule), mobile numbers, and Luhn-valid credit cards (Visa / Mastercard / JCB). Batch 1–1000.\",\"keywords\":[\"taiwan id generator\",\"fake taiwan id\",\"taiwan business number generator\",\"luhn credit card generator\",\"test credit card\",\"stripe test card\",\"fake test data taiwan\",\"tw test data\"]},\"jsonx\":{\"title\":\"JSON formatter + JSON Schema validator (browser-only, 1MB cap)\",\"description\":\"Format / minify / sort keys, plus JSON Schema validation supporting type / required / properties / items / enum / pattern / min-max. Runs entirely in your browser.\",\"keywords\":[\"json formatter\",\"json beautifier\",\"json schema validator\",\"json validator\",\"jsonlint alternative\",\"json minify\",\"json sort keys\",\"online json checker\"]},\"timex\":{\"title\":\"Unix time + timezone converter — auto-detect seconds / ms / ISO\",\"description\":\"Paste numbers or an ISO string — the tool auto-detects the format. Pick any timezone for live local display; day-boundary cases are flagged. Cross-timezone testing and DST edge-case helper.\",\"keywords\":[\"unix timestamp converter\",\"epoch converter\",\"timezone converter\",\"iso 8601 converter\",\"cross timezone testing\",\"dst test\",\"unixtimestamp.com alternative\",\"time conversion online\"]},\"cheatsheet\":{\"title\":\"Test framework cheatsheet — Robot Framework / Playwright / Appium\",\"description\":\"Quick reference for the three major automation frameworks: launch / locators / waits / assertions / capabilities / gestures. Filter live, copy snippets straight into your test file.\",\"keywords\":[\"robot framework cheatsheet\",\"playwright cheatsheet\",\"appium cheatsheet\",\"test framework reference\",\"e2e testing reference\",\"automation testing cheatsheet\",\"qa automation\",\"selenium alternative\"]},\"casecvt\":{\"title\":\"Case Converter — camelCase / snake_case / kebab-case 9 forms at once\",\"description\":\"Paste any string to instantly get camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, Title Case, Sentence case, dot.case, and path/case — all 9 forms with one-click copy. Pure client-side, no upload.\",\"keywords\":[\"case converter\",\"camelcase to snake_case\",\"kebab case converter\",\"string case tool\",\"variable naming\",\"snake case to camel case\",\"constant case\",\"naming convention converter\"]},\"cssgrid\":{\"title\":\"CSS Grid Generator — visual editor for rows / cols / named areas\",\"description\":\"Edit rows, cols, gap, and named grid-template-areas visually with live preview and one-click CSS export. Includes Holy Grail, 12-col Dashboard and other RWD presets. Pure client-side, no upload.\",\"keywords\":[\"css grid generator\",\"grid template areas\",\"holy grail layout\",\"css grid visual editor\",\"12 column grid\",\"grid-template-areas generator\",\"responsive grid\",\"css layout tool\"]},\"emoji\":{\"title\":\"Emoji Info Lookup — codepoint / shortcode / HTML entity in one click\",\"description\":\"Browse 250+ curated emoji with category filter (faces, gestures, animals, food, flags…). Click any emoji for Unicode codepoint, Discord/Slack shortcode, HTML entity, and CSS escape. Paste an emoji for reverse lookup.\",\"keywords\":[\"emoji lookup\",\"emoji unicode\",\"emoji shortcode\",\"discord emoji codes\",\"slack emoji codes\",\"html entity emoji\",\"emoji reverse lookup\",\"emoji codepoint\"]},\"json2ts\":{\"title\":\"JSON to TypeScript online — auto-name, readonly, optional inference\",\"description\":\"Paste JSON to instantly infer TypeScript types / interfaces with smart nested type naming, merged shapes across array elements, optional field detection, and readonly support. Ideal for API typing, SDK scaffolding, and model classes. No upload.\",\"keywords\":[\"json to typescript\",\"json to ts\",\"json to interface\",\"typescript type generator\",\"infer type from json\",\"api response to type\",\"ts interface generator\",\"json2ts\"]},\"mermaid\":{\"title\":\"Mermaid Diagram Editor — plain-text flowcharts / sequence / gantt, export SVG / PNG\",\"description\":\"Write flowcharts, sequence, gantt, mindmap, class, ER and pie diagrams in plain-text Mermaid syntax with live preview and SVG / PNG download. Perfect for docs, READMEs, architecture diagrams and technical blog posts.\",\"keywords\":[\"mermaid live editor\",\"mermaid flowchart\",\"mermaid sequence diagram\",\"mermaid gantt chart\",\"architecture diagram tool\",\"mermaid online editor\",\"mermaid syntax\",\"diagram editor\"]},\"slugify\":{\"title\":\"Slugify online — title to URL slug (CJK-aware, accent strip, truncate)\",\"description\":\"Turn any title into an SEO-friendly URL slug: strip accents, normalise case, collapse punctuation, replace spaces with hyphens. CJK characters preserved by default or dropped on demand, with length truncation. Ideal for blog URLs and CMS slugs.\",\"keywords\":[\"slugify online\",\"url slug generator\",\"title to slug\",\"seo url tool\",\"cjk slug\",\"slug generator\",\"accent stripper\",\"ascii url converter\"]},\"tokens\":{\"title\":\"AI Token Counter — GPT / Claude / Gemini cost + context-window check\",\"description\":\"Paste a prompt to estimate tokens, cost and context-window fit across 5 leading AI models (GPT-4o, Claude 3.5, Gemini Pro, etc.). Heuristic estimation ±10% — ideal for AI budgeting, prompt compression and model selection. No 1MB WASM, instant.\",\"keywords\":[\"ai token counter\",\"gpt token calculator\",\"claude token counter\",\"ai cost calculator\",\"context window calculator\",\"tokenizer online\",\"prompt token estimator\",\"openai token cost\"]}},\"usage\":{\"percentile\":{\"title\":\"How to use\",\"steps\":[\"Paste response times into the left textarea — **commas, spaces, newlines** can all be mixed.\",\"(Optional) Tune the **Apdex T** value. T is the satisfaction threshold (ms): less than T = satisfied, T–4T = tolerated, more than 4T = frustrated.\",\"Right side updates live with p50 / p90 / p95 / p99 + Apdex; highlighted = the indicators you usually report.\",\"Drop the numbers straight into your SLO doc. Default T=500ms is the common web-app threshold.\"],\"tips\":[\"If p95 jumps much higher than p90, you have a long-tail of slow requests, not an across-the-board slowdown.\",\"Apdex \u003c 0.7 typically indicates noticeable UX degradation.\"]},\"jwt\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Paste JWT] --\u003e B{Decode / Sign?}\\n    B --\u003e|Decode| C[Base64URL split three parts]\\n    C --\u003e D[Header + Payload + Signature]\\n    D --\u003e E{Has exp?}\\n    E --\u003e|Yes| F[Compare with now]\\n    F --\u003e G[Valid / Expired badge]\\n    B --\u003e|Sign| H[Edit Payload JSON]\\n    H --\u003e I[Enter Secret]\\n    I --\u003e J[Web Crypto HMAC-SHA256]\\n    J --\u003e K[New token]\",\"steps\":[\"**Decode**: paste the JWT on the left, the right side parses header / payload and labels `Expired` / `Valid`.\",\"**Sign**: switch to the `Sign` tab, edit the payload (JSON) + secret (HS256), the right side mints a new token live.\",\"Everything runs inside your browser — **the secret and token never leave your machine**.\"],\"tips\":[\"Want to simulate an expired token? Set `exp` to a past Unix timestamp.\",\"Only HS256 is supported right now. RS256 / ES256 are coming.\"],\"note\":\"⚠️ Never paste production secrets into any online tool (including this one). Validate critical tokens in an isolated environment.\"},\"selector\":{\"title\":\"How to use\",\"steps\":[\"Paste an HTML snippet on the left, type a selector in the middle, the right side shows matched elements with `outerHTML` and a textContent preview.\",\"Toggle **CSS / XPath** mode — CSS uses `querySelectorAll`, XPath uses `document.evaluate`.\",\"Syntax errors surface as a red message (the browser's native error).\"],\"tips\":[\"Trying to test Playwright's `getByText`? That's Playwright-specific, not standard CSS.\",\"`iframe` contents are not parsed — only the top-level HTML.\"]},\"twdata\":{\"title\":\"How to use\",\"flowchart\":\"flowchart TD\\n    A[Visit /tools/tw-test-data] --\u003e B{Has session?}\\n    B --\u003e|No| C[Show password gate]\\n    C --\u003e D[Enter password]\\n    D --\u003e E{POST /api/twdata/auth}\\n    E --\u003e|Correct| F[Issue session cookie + TG notify success]\\n    E --\u003e|Wrong| G{Fails less than 3?}\\n    G --\u003e|Yes| H[TG notify + counter++]\\n    G --\u003e|No| I[Ban 24h + TG alert]\\n    F --\u003e J[Show data generator]\\n    B --\u003e|Yes| J\\n    J --\u003e K[Pick type / gender / brand / count]\\n    K --\u003e L[Generate locally]\",\"steps\":[\"Pick a **type** (national ID / business number / mobile / credit card) in the left sidebar.\",\"ID supports **gender**; credit card supports **Visa / Mastercard / JCB**.\",\"Set **count** (1–1000), hit `Generate`, copy them all at once on the right.\",\"Credit cards pass **Luhn**, so they'll be accepted by Stripe / Tappay / other test endpoints.\"],\"tips\":[\"The ID checksum follows the official Ministry of the Interior algorithm.\",\"Business numbers include the special rule when the 7th digit is 7, so they pass most validators.\"],\"note\":\"⚠️ Test data only. Never use these for real identity verification or business filings.\"},\"cheatsheet\":{\"title\":\"How to use\",\"steps\":[\"Three tabs switch between **Robot Framework / Playwright / Appium**.\",\"The search box filters snippets live — try `wait`, `click`, `iOS`.\",\"`Copy` next to each snippet drops it straight into your test file.\"],\"tips\":[\"Missing a snippet? Open an issue at [MarkwwLiu/dev](https://github.com/MarkwwLiu/dev) — I'll add it.\"]},\"regex\":{\"title\":\"How to use\",\"steps\":[\"Enter the pattern in the top-left box. **Don't include the leading/trailing `/`**.\",\"Toggle flags below: `i` / `m` / `s` / `u` / `y`. `g` is always on so you get every match.\",\"Right side shows **match count**, **highlighted ranges**, and **capture / named groups** for each match.\",\"Pattern errors appear inline (the browser's native message).\"],\"tips\":[\"Need to grab an email? Try `(?\u003cuser\u003e[\\\\w.+-]+)@(?\u003chost\u003e[\\\\w.-]+\\\\.\\\\w+)`.\",\"To prevent catastrophic backtracking freezing your tab, input is capped at 100,000 chars and 500 matches.\"]},\"curl\":{\"title\":\"How to use\",\"steps\":[\"Paste a cURL command on the left (supports `\\\\` line continuations and both quote styles).\",\"Pick a target on the top-right: **fetch** (JS), **Python requests**, or **HTTPie**.\",\"Copy the generated code to your project.\"],\"tips\":[\"Supported flags: `-X` `-H` `-d` `--data-raw` `--data-urlencode` `-u` `-A` `-b` `-G`. Unrelated flags (`-k` `-s` `--compressed`) are silently ignored.\",\"**fetch output uses await / async** — wrap it in an async function when you paste it in.\"]},\"timex\":{\"title\":\"How to use\",\"steps\":[\"Paste numbers or an ISO string — the tool auto-detects seconds, ms, or ISO 8601.\",\"Hit `Now` to drop in the current time.\",\"Pick any timezone below to see the local time live.\",\"If the time falls near midnight (23:00–01:00) a yellow warning appears — useful for cross-day / month-end testing.\"],\"tips\":[\"Timezone list comes from `Intl.supportedValuesOf('timeZone')`, which Node 22+ and Chrome 99+ both support fully.\"]},\"jsonx\":{\"title\":\"How to use\",\"steps\":[\"**Format**: paste JSON → auto pretty-printed with 2-space indent. Tick `Sort keys` for stable diffs.\",\"**Minify**: same input collapsed to a single line, ready to drop into env vars or query strings.\",\"**Validate**: paste JSON on the left, JSON Schema in the middle → right side lists each violating path with reason.\"],\"tips\":[\"Validator supports: `type` / `required` / `properties` / `items` / `enum` / `pattern` / `minLength` / `maxLength` / `minimum` / `maximum` / `additionalProperties: false`.\",\"Input is capped at 1MB.\"]},\"qr\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick content type] --\u003e B{URL/text/WiFi/vCard/Email?}\\n    B --\u003e C[Fill the form]\\n    C --\u003e D[Build payload string]\\n    D --\u003e E[qrcode lib encode]\\n    E --\u003e F[Render to Canvas]\\n    G[Logo PNG/SVG] --\u003e H{Logo set?}\\n    H --\u003e|Yes| I[Lock EC=H + centre overlay + pad ring]\\n    H --\u003e|No| J[Use chosen EC]\\n    F --\u003e I\\n    F --\u003e J\\n    I --\u003e K[Output PNG / SVG]\\n    J --\u003e K\",\"steps\":[\"Pick a **content type** at the top (URL / plain text / WiFi / vCard / Email). Each has its own form.\",\"On the right, set **foreground / background colours, output size (128-1024px), margin, and error correction** (L/M/Q/H).\",\"Optionally **drop a centre logo** — adding one locks EC to H and pads white around the logo so the code stays scannable.\",\"The preview updates live. Hit **Download PNG** or **Download SVG**.\"],\"tips\":[\"**Error correction levels**: L=7%, M=15%, Q=25%, H=30%. A logo absolutely needs H to remain scannable.\",\"**WiFi QR** is natively supported by Android cameras and iOS 14+ — print one for your router and guests can join without typing the password.\",\"**vCard QR** on the back of a business card lets scanners add you straight to contacts.\",\"**vs qr-code-generator.com**: their logo feature is paywalled — ours is free, no watermark.\"]},\"glassneu\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick style Glass or Neu] --\u003e B{Glass?}\\n    B --\u003e|Yes| C[Pick preview bg photo/gradient/dark]\\n    C --\u003e D[Tune blur / saturate / tint / border / shadow]\\n    D --\u003e E[CSS backdrop-filter recipe]\\n    B --\u003e|No| F[Pick surface colour]\\n    F --\u003e G[Tune distance / blur / intensity / radius]\\n    G --\u003e H[Compute light + dark paired shadows]\\n    H --\u003e I{Negative intensity?}\\n    I --\u003e|Yes| J[Prepend inset = pressed look]\\n    I --\u003e|No| K[Raised]\\n    E --\u003e L{Pick output}\\n    J --\u003e L\\n    K --\u003e L\\n    L --\u003e M[CSS]\\n    L --\u003e N[Tailwind v4]\",\"steps\":[\"Pick **Glass** or **Neumorphism** at the top.\",\"**Glass mode**: pick a **preview background** (photo / vivid gradient / dark) — glass needs something behind it to read as glass. Tune **blur / saturate / tint (rgba) / border / shadow**.\",\"**Neu mode**: pick a **surface colour** and slide **distance / blur / intensity / radius**. **Negative intensity** switches to pressed (inset) mode.\",\"The **output** tab strip flips between CSS and Tailwind v4 arbitrary classes.\"],\"tips\":[\"**Glass needs backdrop-filter** — Safari 14+, Chrome 76+, Firefox 103+ all support it. Older browsers fall back to a flat translucent surface.\",\"**Neu surface can't be pure white / black** — the algorithm needs headroom to compute the light / dark paired shadows. Light grey (`#e0e5ec`) is the classic neumorphism surface.\",\"**Glass on dark backgrounds** typically uses `rgba(255,255,255,0.1)`-ish white tints; **light backgrounds** call for `rgba(0,0,0,0.1)` black tints.\",\"We cover **glassmorphism.com** and **neumorphism.io** in one stop — that's the differentiator.\"]},\"boxshadow\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Tailwind / Material preset] --\u003e B[Layer stack]\\n    C[Manually edit each layer x/y/blur/spread/color + inset] --\u003e B\\n    B --\u003e D[Live box preview]\\n    B --\u003e E{Pick output format}\\n    E --\u003e F[CSS block]\\n    E --\u003e G[CSS value]\\n    E --\u003e H[Tailwind v4 bracket class]\",\"steps\":[\"Click a **Tailwind preset** (`shadow-sm / md / lg / xl / 2xl`) or a **Material elevation** (1 through 24, 9 levels) at the top.\",\"On the right tune **box colour / background / corner radius** so the preview matches your real-world context.\",\"Below, the **layers** section lets you stack any number of shadows. Each layer has **x / y / blur / spread / colour / inset**; **✕** removes a layer, **+** adds one.\",\"The **output** strip switches between CSS block, CSS value, and Tailwind v4 arbitrary class.\"],\"tips\":[\"**Multi-layer shadows** are the modern look — stacking a soft + sharp layer reads much more naturally than a single shadow. Material's elevations use **3 stacked layers** each (umbra / penumbra / ambient).\",\"**inset** flips the shadow inward — great for **neumorphism** (we also ship a dedicated tool for that).\",\"Tailwind v4 `shadow-[...]` accepts the full value verbatim — copy-paste and ship; **no tailwind.config edits**.\",\"**spread = 0** is dropped from the output to keep CSS tidy.\"]},\"typescale\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick Fluid or Fixed] --\u003e B[Pick modular ratio]\\n    B --\u003e C[Base size in px]\\n    C --\u003e D{Fluid?}\\n    D --\u003e|Yes| E[Min base + Max base + viewport widths]\\n    D --\u003e|No| F[Single base is enough]\\n    E --\u003e G[Compute px min/max per step]\\n    F --\u003e H[Compute px = base × ratio^step]\\n    G --\u003e I[Assemble clamp]\\n    H --\u003e J[Assemble rem]\\n    I --\u003e K{Pick output format}\\n    J --\u003e K\\n    K --\u003e L[Tailwind v4 at-theme]\\n    K --\u003e M[CSS variables]\\n    K --\u003e N[SCSS]\\n    K --\u003e O[Plain table]\",\"steps\":[\"Pick **Fluid clamp()** (modern, recommended) or **Fixed px / rem** (traditional) at the top.\",\"Choose a **modular ratio**: from Minor Second 1.067 (dense) to Golden Ratio 1.618 (dramatic). Most SaaS sites land on Major Third (1.25) or Perfect Fourth (1.333).\",\"**Fixed mode**: set the Base size (default 16px) plus min/max step range.\",\"**Fluid mode**: set the smaller viewport base (e.g. mobile 16px), the larger viewport base (e.g. desktop 20px), and the two viewport widths (defaults 320 / 1440 px).\",\"The **preview** updates instantly with the actual rendered size per step. The **output** tab strip switches between Tailwind v4 @theme, CSS variables, SCSS, and a plain table.\"],\"tips\":[\"**Why fluid**: text scales smoothly with the viewport, so it reads well on phones, tablets, laptops and big screens — no @media-query soup.\",\"**Picking a ratio**: 1.2-1.25 for dense dashboards, 1.333-1.5 for landing pages, 1.618 for minimalist heroes.\",\"Tailwind v4 picks up `@theme { --text-xl: ... }` and lets you use the existing `text-xl` classes — no config file edits.\",\"Inspired by **utopia.fyi** but with cleaner outputs and first-class Tailwind v4 support.\"]},\"gradient\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick gradient type] --\u003e B{Linear / Radial / Conic?}\\n    B --\u003e|Linear| C[Slide angle 0-360]\\n    B --\u003e|Radial| D[Pick shape + centre XY]\\n    B --\u003e|Conic| E[From angle + centre XY]\\n    C --\u003e F[Stops editor]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G[Add / recolour / move stops]\\n    G --\u003e H[Live preview]\\n    H --\u003e I{Pick output format}\\n    I --\u003e J[CSS block]\\n    I --\u003e K[CSS value]\\n    I --\u003e L[Tailwind v4 bg-bracket-class]\\n    I --\u003e M[SVG gradient]\",\"steps\":[\"Pick a **gradient type** at the top: **Linear**, **Radial**, or **Conic** (e.g. the rainbow wheel).\",\"The settings panel on the right exposes the geometry knobs for the chosen type (angle / centre / shape / from-angle).\",\"Below, the **Stops** editor lets you slide stop positions, click the swatch to change colour, **✕** to drop a stop, or **+ Add stop**. Every gradient needs at least two.\",\"**Presets** apply curated combos (Sunset, Vaporwave, Aurora, Spotlight, Rainbow wheel).\",\"**Output** tab strip switches between four formats: CSS block / CSS value / Tailwind v4 bracket class / SVG `\u003clinearGradient\u003e` definition.\"],\"tips\":[\"Linear gradient **angle 0° points up**, 90° right — clockwise like a clock face (NOT the mathematical 0°=right convention).\",\"**Conic gradient is not natively supported in SVG** — the tool emits a comment suggesting `\u003cforeignObject\u003e` or a CSS background.\",\"Multi-stop gradients can stand in for **mesh gradients**; 5-7 stops give a really smooth look.\",\"Tailwind v4 `bg-[...]` arbitrary classes **support every CSS gradient function** — no need for a custom utility.\"]},\"contrast\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Foreground] --\u003e C[Compute live]\\n    B[Background] --\u003e C\\n    C --\u003e D[WCAG 2.1 ratio]\\n    C --\u003e E[APCA Lc]\\n    D --\u003e F{AA normal ≥ 4.5?}\\n    F --\u003e|Fail| G[Walk OKLab L axis]\\n    G --\u003e H[Nearest passing colour]\\n    H --\u003e I[One-click apply]\\n    F --\u003e|Pass| J[✓]\",\"steps\":[\"Enter the **foreground** (text) and **background** colours using the picker or by typing hex / rgb / hsl / oklch.\",\"The **preview pane** shows real UI elements (heading, body, fine print, button) under your chosen pair.\",\"**WCAG 2.1** lists the ratio plus five pass/fail checks (AA normal, AA large, AAA normal, AAA large, UI components).\",\"**APCA** (WCAG 3 draft) shows Lc + three checks (body, larger, non-text minimum).\",\"**When you fall short**, a yellow suggestion bar appears with the nearest passing colour along the OKLab L axis — hit **Apply** to swap it in.\"],\"tips\":[\"**WCAG 2.1 ratio** ranges from 1 to 21 (black on white). AA is the bare legal minimum (EU + US government sites); AAA is the recommended target for body text.\",\"**APCA Lc** is the WCAG 3 draft algorithm — perceptually fairer than WCAG 2, especially at the extremes. Apple HIG already references it.\",\"Use **swap ⇅** to instantly invert the pair — great for testing dark-mode pairings.\",\"**State syncs into the URL hash** (e.g. `#1e90ff|ffffff`), so you can share a check by copying the URL.\"]},\"mdtrans\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Your .md file] --\u003e B[Parse locally]\\n    B --\u003e C{Choose Provider}\\n    C --\u003e|OpenAI| D[fetch openai]\\n    C --\u003e|Anthropic| E[fetch anthropic]\\n    C --\u003e|Google| F[fetch gemini]\\n    D --\u003e G[Translated markdown]\\n    E --\u003e G\\n    F --\u003e G\\n    G --\u003e H[Download notes.en.md]\",\"steps\":[\"Pick a **Provider** (OpenAI / Anthropic / Google) and a **Model** — each provider has a fast/cheap option (gpt-4o-mini / claude-haiku / gemini-flash).\",\"Paste **your** API key. It lives in this browser's localStorage and **is never sent to our server**. Each provider stores its own key independently.\",\"Pick **From → To** languages (10 built in: zh-TW / zh-CN / en / ja / ko / fr / de / es / vi / th).\",\"Drop one or more `.md` / `.mdx` files and hit **Translate all**. The queue runs serially and can be **Cancelled** at any time.\"],\"tips\":[\"**Markdown structure is preserved**: YAML frontmatter, code blocks, inline code, link URLs, and HTML stay intact — only the human-language text gets translated.\",\"Output files include the language code (`notes.md` → `notes.en.md`), so they drop straight into SSG i18n folders (Astro / Hugo / Docusaurus / VitePress).\",\"Token counts are rough estimates (≈3 chars/token) — actual billing is per provider; gpt-4o-mini / haiku / gemini-flash typically translate 100 blog posts for well under $1.\",\"Where to get keys: OpenAI → platform.openai.com, Anthropic → console.anthropic.com, Google → aistudio.google.com (Gemini also has a free tier).\"]},\"favicon\":{\"title\":\"How to use\",\"flowchart\":\"mindmap\\n  root((Favicon set))\\n    Input\\n      Emoji 🚀\\n      Text 9N\\n      Upload logo\\n    Render\\n      Canvas\\n      Padding\\n      Background\\n      Rounded\\n    Output\\n      favicon.ico\\n      PNG 16-512\\n      apple-touch-icon\\n      Android Chrome\\n      PWA maskable\\n      MS tile\\n      HTML link\\n      manifest.json\\n    Package ZIP\",\"steps\":[\"Pick an **input mode**: **Emoji** (fast and playful), **Text** (brand initials like `9N`), or **Upload** (you already have a logo).\",\"Tune the colours, padding, and (image mode only) iOS-style rounded corners.\",\"Below, fill in the **app name** — it ends up in `site.webmanifest`. Hit **Generate favicon**.\",\"Once generated, the preview + all sizes appear on the right. Expand the HTML / manifest snippet sections to copy, or hit **Download ZIP** to grab everything.\"],\"tips\":[\"The ZIP includes: `favicon.ico` (multi-resolution 16/32/48), PNG sizes 16–512, apple-touch-icon, Android Chrome, **PWA maskable**, Microsoft tile, HTML snippet, and `site.webmanifest`.\",\"**Maskable icons** are required for Android 12+ (so the icon survives circular / squircle crops). We reserve a 10% safe zone automatically.\",\"Emoji mode uses Apple Color Emoji on macOS / iOS and the system emoji elsewhere — appearance will differ slightly per platform.\",\"**Everything runs in your browser** via Canvas API — images **never upload** (vs realfavicongenerator.net, which uploads).\"]},\"bezier\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drag SVG handles] --\u003e B[Update x1 y1 x2 y2]\\n    C[Click preset] --\u003e B\\n    B --\u003e D[Sample 60 points along curve]\\n    D --\u003e E[Repaint SVG polyline]\\n    B --\u003e F[Preview bar animates with new cubic-bezier]\\n    B --\u003e G{Pick output format}\\n    G --\u003e H[CSS]\\n    G --\u003e I[Tailwind v4 ease-bracket-class]\\n    G --\u003e J[Framer Motion ease array]\\n    G --\u003e K[at-keyframes template]\",\"steps\":[\"Drag the two coloured handles on the SVG canvas to shape the curve. The x axis is clamped to 0-1 (per CSS spec); the y axis is unbounded so you can build anticipate / overshoot effects.\",\"On the right, the **axis fields** let you type precise numbers. The **duration** toggle (300 / 600 / 1000 ms) controls the preview tempo.\",\"Below, **preset chips** apply popular ramps in one click (ease, Material, Tailwind defaults).\",\"The **preview bar** animates with your current curve. The **output** tab strip switches between CSS / Tailwind v4 / Framer Motion / @keyframes — hit Copy in the corner.\"],\"tips\":[\"**State syncs into the URL hash** (e.g. `#0.25,0.1,0.25,1`), so a copied URL shares the exact curve.\",\"Want a **bounce / overshoot**? Push `y1` below 0 or `y2` above 1. The `anticipate` preset does exactly that.\",\"Tailwind v4 supports `ease-[cubic-bezier(...)]` arbitrary classes — **no `tailwind.config` edit needed**.\",\"Framer Motion's `ease: [...]` prop wants the same four numbers in the same order as CSS.\"]},\"pdfunlock\":{\"title\":\"How to use\",\"steps\":[\"Pick an **unlock mode**: **Remove restrictions** (no password needed, for owner-protected PDFs) or **Use password** (true-encrypted PDFs).\",\"**Remove restrictions** — drop the PDF, hit unlock, download. We re-save through pdf-lib with `ignoreEncryption`. Text and forms stay intact.\",\"**Use password** — type the password you **already know**, then drop the PDF. pdf.js decrypts it, then we rasterise every page and rebuild the PDF.\",\"After unlocking, the file card shows the new page count and size.\"],\"tips\":[\"**Important**: only use this on PDFs you **own** or are authorised to access. This is not a cracking tool — wrong-password attempts are rejected outright.\",\"If you drop a truly-encrypted PDF in **Remove restrictions** mode it will fail (pdf-lib refuses to load it). Switch to **Use password**.\",\"**Use password** mode rasterises, so text becomes images. If you need editable text afterwards, remove the password in the original software first.\",\"Both pdf-lib and pdf.js run **in your browser** — the password and PDF contents never leave your machine.\"]},\"imgsize\":{\"title\":\"How to use\",\"steps\":[\"Pick a **preset** (Gov 300KB, Resume 500KB, Generic 2MB, LinkedIn 8MB) or switch to **Custom** and type a KB number.\",\"Choose an output **format**: **JPEG** (most compatible) or **WebP** (smaller at same quality, occasionally rejected by older systems).\",\"Drop your image and hit **Start compressing**. We **binary-search** quality until we land within ~6% of the target — usually 5-7 attempts.\",\"Check **Achieved / Quality / Dimensions / Attempts**; download when happy.\"],\"tips\":[\"**If quality alone isn't enough**, we automatically downscale the canvas by 25% and search again — down to a 32×32 floor.\",\"**If we still can't hit the target**, you'll get a warning. Usually means the target is too tight; try WebP (~30% smaller at same quality) or pre-crop.\",\"**The filename auto-includes the target size** (e.g. `photo-300kb.jpg`) so you can sanity-check before uploading.\",\"**All maths runs in the browser via Canvas API** — nothing leaves your machine.\"]},\"palette\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Brand colour input] --\u003e B[Convert to OKLCH]\\n    B --\u003e C[Keep hue H constant]\\n    B --\u003e D[Apply TARGET_L to 11 shades]\\n    B --\u003e E[Apply C_SCALE to 11 shades]\\n    C --\u003e F[Compose 50 100 200 ... 950]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G{Pick output format}\\n    G --\u003e H[Tailwind v4 at-theme]\\n    G --\u003e I[Tailwind v3 config]\\n    G --\u003e J[CSS variables]\\n    G --\u003e K[Hex list]\",\"steps\":[\"Type your **brand colour** (hex / rgb / hsl / oklch all work) and a **name** for the generated identifiers (e.g. `brand-500`).\",\"The shade preview updates instantly — **click any swatch to copy its hex**; 11 shades from lightest to darkest.\",\"Pick an output format below: **Tailwind v4 `@theme`**, **v3 config**, **CSS variables**, or a plain hex list. Hit Copy in the corner to grab the snippet.\",\"Tool state is mirrored into the URL hash — **copy the URL to share a palette**.\"],\"tips\":[\"The maths runs in the **OKLab perceptual colour space**, so hue stays put and lightness steps look even. Beats raw HSL lightness tweaks.\",\"Tailwind v4 ships OKLCH support — **`@theme` is the recommended output** if you're on v4 already.\",\"**Name sanitiser**: anything becomes `kebab-case` (`My Brand!` → `my-brand`); empty falls back to `brand`.\",\"Want to match an existing Tailwind preset? Drop its 500 (e.g. `#0ea5e9` for `sky`) — our 500 will be near-identical, with other shades tuned for **brand consistency** rather than matching the official numbers exactly.\"]},\"pdfedit\":{\"title\":\"How to use\",\"flowchart\":\"flowchart TD\\n    A[Drop PDF] --\u003e B[pdf.js renders thumbnails]\\n    B --\u003e C[Show thumbnail grid]\\n    C --\u003e D{Click thumbnails}\\n    D --\u003e E[Add to selection]\\n    E --\u003e F{What to do?}\\n    F --\u003e|Bulk rotate| G[Update PageOp.rotate]\\n    F --\u003e|Bulk delete| H[Drop selected pages]\\n    F --\u003e|Duplicate one| I[duplicateAt]\\n    F --\u003e|Reorder| J[moveBy]\\n    G --\u003e K[Thumbnails rotate live]\\n    H --\u003e K\\n    I --\u003e K\\n    J --\u003e K\\n    K --\u003e L[Hit Download]\\n    L --\u003e M[pdf-lib copyPages + setRotation]\\n    M --\u003e N[New PDF]\",\"steps\":[\"Drop a PDF — every page is **rendered as a thumbnail** into a grid (5-20s for big docs).\",\"**Click a thumbnail** to select it; multi-select is fine. The top toolbar's rotate / delete buttons then act on every selected page.\",\"Under each thumbnail you also get **per-page actions**: ↑↓ reorder, ↺↻ rotate, ⎘ duplicate, ✕ remove.\",\"The grid order is the new PDF's page order. Rotations are baked into the output. Hit **Download new PDF** when ready.\"],\"tips\":[\"Multi-selecting + bulk rotate is **10× faster** than touching each page — great for batch-rotating sideways scans.\",\"Each thumbnail shows its current **rotation angle** in the corner (e.g. `90°`) so you can preview before downloading.\",\"**Duplicate** is handy for inserting chapter separators or blank-page placeholders.\",\"**All ops happen client-side.** Big PDFs use more browser memory but **files never upload**.\"]},\"pdfcompress\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop PDF] --\u003e B{Compression mode?}\\n    B --\u003e|Lossless| C[pdf-lib re-save]\\n    C --\u003e D{Strip metadata?}\\n    D --\u003e|Yes| E[Clear title author etc.]\\n    D --\u003e|No| F[Keep as-is]\\n    E --\u003e G[Output PDF 5-20 percent smaller]\\n    F --\u003e G\\n    B --\u003e|Rasterize| H[pdf.js render each page]\\n    H --\u003e I[Pick DPI 150 / 96 / 72]\\n    I --\u003e J{Grayscale?}\\n    J --\u003e|Yes| K[Canvas to gray]\\n    J --\u003e|No| L[Keep colour]\\n    K --\u003e M[JPEG encode]\\n    L --\u003e M\\n    M --\u003e N[pdf-lib assemble 50-80 percent smaller]\",\"steps\":[\"Pick a **mode** at the top: **Lossless** (keep text / forms) or **Rasterize** (max compression).\",\"**Lossless**: tick «Strip metadata» (on by default) for a few extra KB.\",\"**Rasterize**: choose **Quality** (High / Medium / Low → 150 / 96 / 72 DPI) and optionally **Grayscale** (20-30% extra).\",\"Drop a PDF, hit **Start compressing**, see original / compressed / savings, then **Download**.\"],\"tips\":[\"**Key tradeoff**: Rasterize converts **text into images** — you lose copy / search / accessibility. If you still need to edit later, stick with Lossless.\",\"If Lossless only nets 1-2% (rare), your PDF is already optimized — only Rasterize can squeeze more.\",\"Rasterize **High (150 DPI)** is usually print-grade; **Medium (96 DPI)** is screen / email; **Low (72 DPI)** is preview-only.\",\"Everything runs through **pdf-lib + pdf.js in your browser** — files never leave your machine.\"]},\"pdfsplit\":{\"title\":\"How to use\",\"flowchart\":\"flowchart TD\\n    A[Drop PDF] --\u003e B{Pick mode}\\n    B --\u003e|Merge| C[Multiple files + reorder]\\n    C --\u003e D[Download merged PDF]\\n    B --\u003e|Split| E[Type range 1-3, 5, 8-10]\\n    E --\u003e F[Output 3 files]\\n    F --\u003e G[Auto ZIP]\\n    B --\u003e|Extract| H[Type pages]\\n    H --\u003e I[Single new PDF]\",\"steps\":[\"Pick a mode at the top: **Merge / Split / Extract**.\",\"**Merge**: drop 2+ PDFs, reorder with ↑ ↓, then download one combined PDF.\",\"**Split**: drop one PDF, type a range (e.g. `1-3, 5, 8-10`). Each group becomes its own file, **auto-bundled into a ZIP**.\",\"**Extract**: same input style, but all chosen pages are gathered into **one** PDF.\"],\"tips\":[\"Separators are flexible: **comma / semicolon / fullwidth comma / Chinese 、** all work. Ranges use `-` or `–` (en-dash).\",\"Difference between **Split** and **Extract** for `1-3, 5`: split → two files (pages 1-3, then page 5); extract → one file with 4 pages.\",\"When merging, the **list order is the page order** — drag-drop order and the ↑↓ buttons both affect it.\",\"Everything runs through **pdf-lib in your browser** — files never leave your machine, so contracts, HR docs and private records are safe.\"]},\"img2pdf\":{\"title\":\"How to use\",\"steps\":[\"Configure the **paper size** (A4 default), **orientation** (Auto picks based on the first image), **items per page** (1 / 2 / 4-up; 4-up is great for receipts), **margin**, and **JPEG quality**.\",\"Drop one or more images (JPG / PNG / WebP / HEIC supported). Thumbnails appear in a sortable list below.\",\"Use **↑ ↓** to reorder, or **✕** to drop an image. The list order *is* the page order.\",\"Hit **Download PDF** — pdf-lib stitches everything together in your browser and pushes the file straight to your downloads.\"],\"tips\":[\"HEIC decodes via lazy-loaded WASM. The **first file is slower** (~600 KB decoder); subsequent files are quick.\",\"**4-up on A4 portrait** is the receipt-stacker. **1-up on Letter** is the CV-photo layout.\",\"Default JPEG quality is 92 — push to 95+ for screenshots with small text, drop to 80–85 for pure photos.\",\"Everything is **re-encoded to JPEG inside your browser** before being embedded — nothing is uploaded anywhere.\"]},\"heic\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop files] --\u003e B{Extension check}\\n    B --\u003e|HEIC/HEIF| C[Load heic2any WASM]\\n    B --\u003e|JPG/PNG/WebP| D[Canvas reads directly]\\n    C --\u003e E[Canvas re-encode]\\n    D --\u003e E\\n    E --\u003e F[Single download]\\n    E --\u003e G[2+ files → ZIP]\",\"steps\":[\"Pick an **output format** at the top (JPG default, PNG lossless, WebP smallest). JPG / WebP also expose a **quality** slider (default 92%).\",\"Drop or pick files (`.heic` / `.heif`; multi-select is fine) — each one queues up automatically.\",\"Once converted, download files one-by-one, or hit **Download ZIP** when you have 2+ done.\",\"Regular JPG / PNG / WebP also work — they're re-encoded to the chosen target (handy for batch compression).\"],\"tips\":[\"The HEIC decoder (~600 KB WASM) is fetched lazily on first drop, so the **first file is slower**; subsequent files are quick.\",\"Everything runs in **WebAssembly inside your browser** — photos never upload anywhere.\",\"EXIF / GPS metadata is **not preserved** (privacy default). If you need EXIF, see the upcoming `exif-tool`.\",\"iPhones default to HEIC to save space, but many systems (job sites, government portals, older Windows) don't accept it — convert here first.\"]},\"imgbase64\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick tab] --\u003e B{Encode / Decode?}\\n    B --\u003e|Encode| C[Drop images]\\n    C --\u003e D[FileReader to memory]\\n    D --\u003e E[base64 encode]\\n    E --\u003e F[Output 4 snippets]\\n    F --\u003e F1[data URI]\\n    F --\u003e F2[Raw base64]\\n    F --\u003e F3[HTML img tag]\\n    F --\u003e F4[CSS background-image]\\n    B --\u003e|Decode| G[Paste base64 or data URI]\\n    G --\u003e H[Canvas decode]\\n    H --\u003e I[Magic bytes sniff MIME]\\n    I --\u003e J[Auto-correct + preview + download]\",\"steps\":[\"**Image → Base64**: drop files (or click). Each image shows its thumbnail, the original size vs the data URI size, and how much bigger the encoded form is.\",\"Click `Copy` on any of the four sections (data URI / raw base64 / HTML / CSS) to grab the snippet.\",\"**Base64 → Image**: switch to the second tab, paste the string, hit `Decode \u0026 preview`, then download.\",\"When pasting raw base64 (no `data:` prefix) pick the right MIME above; a full data URI brings its own MIME.\"],\"tips\":[\"Base64 inflates payloads by ~**33%** — keep that in mind before inlining into CSS / HTML.\",\"Data URIs are great for **small** assets (icons, placeholders); larger images are usually better via CDN.\",\"If you label a payload PNG but the magic bytes say JPEG, we auto-correct the MIME and download extension.\",\"Everything runs **in your browser**; the bytes never leave your machine.\"]},\"colorconv\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Paste any colour format] --\u003e B[parseColor auto-detect]\\n    B --\u003e C{Parsed?}\\n    C --\u003e|No| D[Show error]\\n    C --\u003e|Yes| E[Normalise to sRGB float]\\n    E --\u003e F[Hex]\\n    E --\u003e G[RGB]\\n    E --\u003e H[HSL]\\n    E --\u003e I[OKLCH via Ottosson matrices]\\n    E --\u003e J[OKLab]\\n    E --\u003e K[ΔEOK to 22 Tailwind 500s]\\n    K --\u003e L[Show closest 3 Tailwind classes]\",\"steps\":[\"Paste any color: `#1e90ff`, `rgb(30, 144, 255)`, `hsl(210, 100%, 56%)`, `oklch(64% 0.19 250)`, or `dodgerblue` — all accepted.\",\"All **five formats** update live on the right. Hit `Copy` on any row.\",\"Below, the **closest Tailwind classes** are sorted by perceptual distance (OKLab ΔE) — handy for mapping brand colors.\",\"State is mirrored into the URL hash (`#1e90ff`), so you can share a configuration by copying the URL.\"],\"tips\":[\"**OKLCH** is the new CSS Color Level 4 format. Tailwind v4 ships with it; brightness perception is more accurate than HSL.\",\"**ΔE** measures perceptual color distance — anything under ~1 is hard to tell apart by eye.\",\"8-digit hex (with alpha) is supported: `#1e90ff80` means 50% transparency.\"]},\"mockapi\":{\"title\":\"How to use (this is a designer, not a live mock server)\",\"steps\":[\"Add endpoints on the left: pick method, write path, set status / delay / response body.\",\"Pick a target format on the right: **Playwright / Mockoon / Postman / json-server**.\",\"Right side shows the generated config — hit **Copy** or **Download**.\",\"Take the config to your target tool (see Tips below).\"],\"tips\":[\"**Playwright**: add the downloaded `.ts` to your test project and call `await mockEndpoints(page)` in `beforeEach`.\",\"**Mockoon**: Open Mockoon → File → Open environment → choose the downloaded JSON → start it. API serves at `http://localhost:3001`.\",\"**json-server**: in a terminal run `npx json-server db.json` → API at `http://localhost:3000`.\",\"**Postman**: File → Import → choose the collection, then create a mock server inside Postman.\"],\"note\":\"⚠️ To prevent abuse, we **do not** host live mock endpoints on `dev.9niche.com`. A hosted mock service would require auth + rate limiting + TTL, planned as Phase 2.\"},\"bundle\":{\"title\":\"How to use\",\"steps\":[\"Type an npm package name (`react`, `lodash`, `@vercel/analytics`); pin a version with `react@19.2.4` if needed.\",\"Hit **Query** or click a **Popular** chip. Successive lookups stack so you can compare side-by-side.\",\"Each card shows: **Min** (minified), **Gzip** (actual transferred bytes, green), **Deps** (transitive deps count), **Side effects** (tree-shakeable shows green).\",\"The green bar shows gzip size relative to the largest in the list — useful for spotting the bulky one at a glance.\",\"Click the package name to open bundlephobia.com for the full breakdown; ✕ removes a row.\"],\"tips\":[\"**Gzip is what users actually download** (typically 60-80% smaller than min). `lodash` ships 25KB gzip altogether, but `lodash-es` tree-shakes down to only the functions you import.\",\"**Side effects = false** means the bundler can drop unused exports. `react`, `lodash` are 'yes'.\",\"**date-fns vs dayjs vs moment** is the classic case study: moment is ~200KB gzip (avoid), dayjs is 2KB, date-fns is ~12KB but tree-shakes.\",\"**Watch the deps count**: more transitive deps = longer lockfile, slower CI installs, more CVE surface.\",\"**vs bundlephobia.com**: that's the source. We make multi-package side-by-side easier — handy in dep evaluation meetings.\"],\"note\":\"💡 This tool fetches **bundlephobia.com's public API** (not local). The **package name is sent there**, but for public npm package names that's not sensitive.\"},\"svgo\":{\"title\":\"How to use\",\"steps\":[\"Paste your SVG source into the left pane, or click **Open file** to load a `.svg`.\",\"Tick the 10 optimisations on the right (all on by default; turn off what you'd rather keep). **Precision** sets decimal rounding (default 2).\",\"The right pane updates live with the optimised output and **savings %** shown in green.\",\"Side-by-side **before / after preview** below lets you visually confirm nothing changed.\",\"**Copy** for snippet use, or **Download .svg** for the file.\"],\"tips\":[\"**Sketch / Figma exports** carry 30-60% editor-only metadata. Toggling 'Strip editor attributes' alone gives a big win.\",\"**Precision 2** is usually invisible — 0.123456 vs 0.12 on a 1000px canvas can't be distinguished by eye. Try 1 for ultra-simple icons; bump to 3 for complex illustrations.\",\"**Stripping default values** (`opacity=1`, `stroke=none`, `stroke-width=1`) is safe because browsers fall back to the same defaults.\",\"**vs svgo / svgomg**: those carry 70+ plugins for the deepest cuts. We're the 'paste and go with sane defaults' lightweight option.\"],\"note\":\"💡 100% local — **your SVG never leaves the browser**. The before/after preview uses `dangerouslySetInnerHTML` strictly inside this tool; the content is not used anywhere else.\"},\"cvd\":{\"title\":\"How to use\",\"steps\":[\"Pick **Palette mode** (12 swatches) or **Image mode** (upload your dashboard / mock / chart).\",\"Nine panels show simultaneously: **Normal vision** + **8 deficiencies**, each labelled with population prevalence.\",\"Palette mode is great for sanity-checking brand colours; image mode is best for full screens (charts, gradients, icons, alert states).\",\"If two distinct colours in normal vision collapse to similar shades for one of the simulations, add **shape / icon / label** redundancy — never rely on colour alone.\"],\"tips\":[\"**Red-green deficiencies (Protan + Deutan)** affect ~8% of males — your top accessibility audit target.\",\"**Blue-yellow (Tritan)** is very rare (\u003c0.01%) but still real — avoid making blue-vs-yellow the only signal.\",\"**Colour + shape / text** is the golden rule (WCAG 1.4.1). Add ⚠ to error messages, not just red text.\",\"**Use ColorBrewer / Viridis** for chart palettes — they're colour-blind friendly out of the box, avoiding red-green pairs.\",\"Matrices come from Brettel \u0026 Viénot \u0026 Mollon (1997) and Machado et al. (2009) — the industry references.\"],\"note\":\"💡 Runs in your browser via canvas pixel ops — **images never upload**. Anything above 400px on the longest edge is downscaled to keep the simultaneous 9-panel render smooth.\"},\"pwstrength\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Type password] --\u003e B[Detect classes lower/upper/digit/symbol/other]\\n    B --\u003e C[Charset pool size N]\\n    C --\u003e D[bits = length × log2 N]\\n    D --\u003e E[Penalise weak patterns]\\n    E --\u003e F[All same / all digits / common / keyboard run]\\n    F --\u003e G[Final entropy bits]\\n    G --\u003e H[bits → 5-level strength]\\n    G --\u003e I[bits → crack-time per attacker]\\n    I --\u003e J[Humanised instant / minutes / years / billions]\",\"steps\":[\"Type the password to score. Click 👁 on the right to reveal / hide.\",\"The **strength bar** and **bits value** update live (typical range 0-120+ bits).\",\"**Weak-pattern warnings** appear in amber for issues like all-same characters, all-digits, common sequences (`qwerty`, `123456`…) and keyboard runs.\",\"Below, the **crack-time table** shows estimates across 5 attacker profiles (online rate-limited → offline GPU MD5).\"],\"tips\":[\"**Bits here is an extended-entropy heuristic**, not real-randomness entropy — patterned passwords are intentionally under-scored. A mixed-case + digit + symbol + 12-char password easily hits 80+ bits.\",\"**Crack time varies wildly by attacker** — 60 bits is millions of years online, but only days against GPU MD5. **Use bcrypt / argon2 server-side**, never SHA.\",\"**Length isn't enough** — 32 `a`s is trivial to crack despite the length, because dictionary attacks try repeats first.\",\"**vs zxcvbn**: the industry gold-standard at 800KB+. Ours is the zero-dep lightweight (~1KB) for quick checks; use zxcvbn for production accuracy.\"],\"note\":\"💡 The whole check runs locally in your browser — **no network request carries your password anywhere**. Even inspecting Network panel will show nothing about it.\"},\"cron\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Cron expression] --\u003e B{Alias?}\\n    B --\u003e|@daily / @hourly…| C[Expand to standard 5 fields]\\n    B --\u003e|No| D[Split into 5 fields]\\n    C --\u003e E[Each field → parseField]\\n    D --\u003e E\\n    E --\u003e F[Per-piece split comma / range / step]\\n    F --\u003e G[Expand into a Set of numbers]\\n    G --\u003e H[matches: does t belong to schedule?]\\n    H --\u003e I[Walk minute-by-minute from now]\\n    I --\u003e J[Collect next N firings]\\n    G --\u003e K[describe → natural language]\\n    G --\u003e L[Render 5-field table]\",\"steps\":[\"Type a 5-field cron in the **Cron expression** input, or click a **preset** to start from a common shape.\",\"The 5-field table breaks down each piece live; syntax issues surface inline in red.\",\"**Natural-language description** summarises the schedule in one sentence (e.g. `at 09:00, on Mon, Tue, Wed, Thu, Fri`).\",\"Below it, a table lists the **next N firings** (default 8, 1-50 adjustable): **Local time**, **ISO 8601**, and **delta from now**.\"],\"tips\":[\"**Aliases supported**: `@yearly` / `@monthly` / `@weekly` / `@daily` / `@hourly` — expanded internally to standard form.\",\"**Names accepted**: months `jan`-`dec`, weekdays `sun`-`sat` (case-insensitive); `mon-fri` works.\",\"**When both DoM and DoW are restricted** the rule is **OR**, not AND (POSIX convention). `0 0 1 * 1` fires on the 1st **or** any Monday.\",\"**`7` in DoW** maps to Sunday (Linux cron behaviour).\",\"**vs crontab.guru**: a great text-only tool. We add live next-firing preview to make it more concrete.\"],\"note\":\"💡 Parsing, description and next-firing computation run entirely in your browser — **no network requests**. Firings are computed in your local timezone.\"},\"regexr\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pattern + Flags] --\u003e B[new RegExp compile]\\n    B --\u003e C{Valid?}\\n    C --\u003e|No| D[Show error inline]\\n    C --\u003e|Yes| E[exec across input, collect matches]\\n    E --\u003e F[Extract numeric + named groups]\\n    F --\u003e G[segmentize source → hl highlight]\\n    F --\u003e H[input.replace pattern, replacement]\\n    H --\u003e I[Replaced output]\\n    F --\u003e J[Captures table]\",\"steps\":[\"Type a regex into **Pattern** — the flag chips on the right apply automatically; syntax errors surface inline.\",\"Use **Replacement** with `$1`, `$2` (numeric captures), `$\u003cname\u003e` (named groups), `$\u0026` (whole match), or `$$` (literal $).\",\"Toggle any of 6 **flags** (g/i/m/s/u/y) live.\",\"Read off, in order: source with hl-highlighted matches, the replaced output, and a per-match captures table.\"],\"tips\":[\"**Without `g`** we still walk every match (less confusing than seeing only the first).\",\"**`u` is on by default** — required for `\\\\p{Script=Han}`-style Unicode property escapes.\",\"**`s` (dotAll)** lets `.` match newlines — invaluable for multi-line captures.\",\"**`y` (sticky)** only matches from `lastIndex`. Mostly for lexers; rarely needed casually.\",\"**vs regex101.com**: powerful but heavy and ad-supported. We're light + offline + instant.\"],\"note\":\"💡 Runs 100% locally — **pattern and input never leave your browser**. Safe for PII. Zero-width matches are protected against infinite loops.\"},\"httpcodes\":{\"title\":\"How to use\",\"steps\":[\"Type a **digit prefix** (`40` → 400-409, `5` → all 5xx) or **keyword** (`teapot`, `rate limited`, `redirect`) to filter live.\",\"Toggle the class chips on top to focus 1xx / 2xx / 3xx / 4xx / 5xx — works in combination with search.\",\"Click the big code badge to **copy the number** to clipboard (great for pasting into IDE, Postman, Slack replies).\",\"Look for ⚠ notes — they flag classic confusions (e.g. 401 vs 403, 302 vs 307's method-preservation behaviour).\"],\"tips\":[\"**401 vs 403**: 401 means 'not authenticated', 403 means 'authenticated but not allowed'. Backends frequently swap these.\",\"**302 vs 307**: 302 in practice rewrites POST → GET (historical baggage). Use **307** to preserve the method; **308** is the permanent version.\",\"**422 Unprocessable Content** is the standard pick for JSON-API validation failures (syntax OK, semantics wrong) — more precise than 400.\",\"**429 Too Many Requests** must include a **Retry-After** header so the client knows when to retry.\"],\"note\":\"💡 Fully offline data — no network requests. Sources: RFC 9110, RFC 7725, IANA registry.\"},\"vid2gif\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop video] --\u003e B[HTMLVideoElement loadedmetadata]\\n    B --\u003e C[duration / videoWidth / videoHeight]\\n    C --\u003e D[Pick start / end / fps]\\n    D --\u003e E[Total frame count]\\n    E --\u003e F{Per frame}\\n    F --\u003e G[video.currentTime = t]\\n    G --\u003e H[await seeked]\\n    H --\u003e I[canvas drawImage]\\n    I --\u003e J[gifenc quantize + applyPalette]\\n    J --\u003e K[gif.writeFrame + delay]\\n    K --\u003e L{Next?}\\n    L --\u003e|Yes| F\\n    L --\u003e|No| M[gif.finish → Blob]\\n    M --\u003e N[Download .gif]\",\"steps\":[\"Drop a video (MP4 / WebM / MOV); we read the metadata and show the dimensions + duration. The native player below lets you scrub.\",\"Use the **Start / End** sliders to crop the segment (the whole video makes a giant GIF — pick 1-3 seconds).\",\"Tune **fps** (5-30; 15 ≈ GIPHY), **output width** (height follows aspect), **Palette colours** for size vs banding, **Contain / Cover** for off-aspect output.\",\"The estimate line shows *N frames + resolution*. Hit **Convert \u0026 download GIF** and watch the progress.\"],\"tips\":[\"**Size blows up** with long windows, high fps, or large palettes. 1-3 s × 10-15 fps × 128 colours is the sweet spot.\",\"**GIF is indexed colour** (8-bit palette) — product demos / screencasts compress well; live-action photos band hard.\",\"**Why not ffmpeg.wasm?** It needs 30MB+ to load. We use the browser's built-in video seeking + gifenc (~50KB), covers 99% of needs.\",\"**vs ezgif.com**: they upload to a server with 100MB / 200-frame caps and ads. We process in the browser, no upload.\"],\"note\":\"💡 **video.currentTime is async** — we await the `seeked` event each frame so captures align with the requested time. 1 second at 15 fps takes ~1-2 seconds total. Video **never leaves the browser**.\"},\"textdiff\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Left text] --\u003e B[Normalisation opts]\\n    C[Right text] --\u003e B\\n    B --\u003e|Ignore WS| D[Collapse whitespace]\\n    B --\u003e|Ignore case| E[toLowerCase]\\n    D --\u003e F[Split lines]\\n    E --\u003e F\\n    F --\u003e G[LCS DP table O n×m]\\n    G --\u003e H[Traceback for best alignment]\\n    H --\u003e I[Coalesce delete+insert → replace]\\n    I --\u003e J{Per row}\\n    J --\u003e K[Green = insert]\\n    J --\u003e L[Red = delete]\\n    J --\u003e M[Amber = replace]\\n    J --\u003e N[Grey = equal]\\n    K --\u003e O[Unified diff export]\\n    L --\u003e O\\n    M --\u003e O\\n    N --\u003e O\",\"steps\":[\"Paste the old version on the **left** and the new on the **right** (empty input counts as 0 lines).\",\"The side-by-side table updates live: **+** green insert, **−** red delete, **~** amber replace (adjacent delete+insert merged), grey = unchanged. Both line numbers (L / R) shown.\",\"(Optional) toggle **Ignore whitespace** to collapse runs of spaces, or **Ignore case** to compare case-insensitively — great for checking 'did anything substantive change' after a formatter.\",\"**Copy unified diff** for a git / patch-compatible blob you can drop into a PR description, Linear, Slack.\"],\"tips\":[\"**LCS (Longest Common Subsequence)** is the algorithm behind git diff, O(n×m). 1000 × 1000 lines finishes in \u003c10ms.\",\"**Replace = delete + insert merging** — adjacent removals + insertions are treated as a 'line was changed' for a more intuitive read.\",\"**Ignore whitespace** is great for checking 'did prettier change anything meaningful'.\",\"**vs diffchecker.com** — they paywall ignore options; we're free + no upload.\"],\"note\":\"💡 Diff runs entirely in the browser (the JS LCS is fast enough). **No upload** — fine for contracts, confidential docs.\"},\"ts\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Input string] --\u003e B{Digits only?}\\n    B --\u003e|Yes| C{≥ 12 digits?}\\n    C --\u003e|Yes| D[Treat as ms]\\n    C --\u003e|No| E[Treat as seconds → ×1000]\\n    B --\u003e|No| F[Date.parse ISO]\\n    F --\u003e G{Valid?}\\n    G --\u003e|No| H[Show error]\\n    G --\u003e|Yes| I[ms acquired]\\n    D --\u003e I\\n    E --\u003e I\\n    I --\u003e J[Derive s / ms / ISO / relative]\\n    I --\u003e K[Intl.DateTimeFormat per zone]\\n    K --\u003e L[15 timezones, add / remove]\",\"steps\":[\"Paste **epoch seconds** (10-digit), **epoch milliseconds** (13-digit), or **ISO 8601** (`2024-01-01T00:00:00Z`). Hit **Now** to fill in the current instant.\",\"Top card shows four conversions: Unix seconds, Unix milliseconds, ISO 8601, and a relative-time line (`5 minutes ago`, `in 3 days`).\",\"Bottom card lists local time across multiple timezones — UTC / Taipei / LA / London by default. Use **+ Add timezone** to pick another, **✕** to remove.\",\"Hover any row to reveal **Copy** on the right.\"],\"tips\":[\"**10 vs 13 digits** — we use 'digits ≥ 12 means ms' as a heuristic. Override by pasting an explicit 13-digit value if needed.\",\"**ISO 8601** parsing supports many forms: `2024-01-01`, `2024-01-01T12:00:00`, `2024-01-01T12:00:00+08:00`, with optional milliseconds.\",\"**Relative time** rounds to the nearest whole unit with a 1-minimum (no 'in 0 seconds'); top unit is year.\",\"**vs epochconverter.com** — they're ad-heavy with a 2010 UI; we're pure-frontend with simultaneous multi-timezone display.\"],\"note\":\"💡 Timezones use the browser's built-in **Intl.DateTimeFormat** (600+ IANA zones supported in 2025). DST is handled automatically.\"},\"lorem\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A{Pick bank} --\u003e|Latin| B[Lorem Ipsum 84 words]\\n    A --\u003e|Chinese| C[63 system / UI terms]\\n    A --\u003e|Tech| D[50 product / arch terms]\\n    B --\u003e E{Unit}\\n    C --\u003e E\\n    D --\u003e E\\n    E --\u003e|Words| F[Random N from bank]\\n    E --\u003e|Sentences| G[Each 6-14 words + punct]\\n    E --\u003e|Paragraphs| H[Each 3-6 sentences]\\n    F --\u003e I[mulberry32 seeded PRNG]\\n    G --\u003e I\\n    H --\u003e I\\n    I --\u003e J[Output + char / word stats]\",\"steps\":[\"Pick a **language bank**: Latin (classic), **Traditional Chinese** (essential for CJK mockups), or **Tech** (product demo vibe).\",\"Pick **Unit**: Words / Sentences / Paragraphs, set **Count** (words up to 2000, others up to 100).\",\"Latin can start with the canonical **`Lorem ipsum dolor sit amet…`** — the industry convention.\",\"Tap **↻ Re-roll** for a new draft; the seed makes runs reproducible (handy when iterating layout).\"],\"tips\":[\"**Traditional Chinese filler** is the key differentiator — English lorem in a CJK layout misjudges character width, line height, and kerning. Real Chinese filler shows the actual fit.\",\"**Tech bank** suits SaaS / dev-tool mockups — words like Pipeline / Telemetry / Cache feel like real UI copy.\",\"**Paragraphs split on `\\\\n\\\\n`** so they paste cleanly into Markdown, Notion or Figma text frames.\",\"**Word count** uses character count for Chinese (each glyph = 1) and whitespace-tokenised count for Latin — matches design intent.\"]},\"uuid\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A{Pick version} --\u003e|v4| B[crypto.getRandomValues 16 bytes]\\n    A --\u003e|v7| C[Date.now → 48-bit timestamp]\\n    B --\u003e D[Set version + variant bits]\\n    C --\u003e E[getRandomValues 10 bytes fill]\\n    E --\u003e D\\n    D --\u003e F[Format 8-4-4-4-12]\\n    F --\u003e G{Formatting options}\\n    G --\u003e|No hyphens| H[Strip -]\\n    G --\u003e|Upper| I[toUpperCase]\\n    G --\u003e|Braces| J[Wrap {}]\\n    H --\u003e K[Output textarea]\\n    I --\u003e K\\n    J --\u003e K\\n    K --\u003e L[Copy / Download .txt]\",\"steps\":[\"Pick version: **v4** (fully random, the common pick) or **v7** (timestamp-embedded, time-orderable, perfect as a DB primary key).\",\"Set **count** (1-1000) and hit **Generate**.\",\"Format options: **Case** (GitHub / GitLab favour lower; some COM APIs use UPPER), **Keep hyphens** (uncheck to get a 32-char compact form), **Wrap with braces** (C# Guid style).\",\"**Copy all** to clipboard (newline-separated) or **Download .txt** as a file.\"],\"tips\":[\"**v7 is the new RFC 9562 standard** (2024) — time-orderable + unpredictable. **Replaces ULID** in many stacks. As a SQL primary key it outperforms v4 (no random B-tree inserts).\",\"**v4 vs v7**: use v4 for public-facing IDs (no time leak); use v7 for internal DB keys (pagination-friendly).\",\"**WebCrypto getRandomValues** is a CSPRNG — statistical collision is impossible. A billion v4 UUIDs per second for a century only hits ~50% collision probability.\",\"**Compact 32-char form** (no hyphens) is great for short URLs / path params and still sorts lexicographically.\"],\"note\":\"💡 1000 v4 takes ~0.5 ms, 1000 v7 ~1 ms — you can churn out millions per second. Runs locally; unlike some online tools, we don't quietly log your IDs.\"},\"hashes\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A{Mode} --\u003e|Text| B[TextEncoder UTF-8]\\n    A --\u003e|File| C[file.arrayBuffer]\\n    B --\u003e D[5 algorithms in parallel]\\n    C --\u003e D\\n    D --\u003e E[MD5 hand-rolled RFC 1321]\\n    D --\u003e F[SHA-1 WebCrypto]\\n    D --\u003e G[SHA-256 WebCrypto]\\n    D --\u003e H[SHA-384 WebCrypto]\\n    D --\u003e I[SHA-512 WebCrypto]\\n    E --\u003e J[hex output]\\n    F --\u003e J\\n    G --\u003e J\\n    H --\u003e J\\n    I --\u003e J\\n    J --\u003e K[Hover row → Copy button]\",\"steps\":[\"Pick **Text** or **File** mode.\",\"**Text mode** updates live as you type; **File mode** hashes on demand (large files take a few seconds).\",\"Hover a row to reveal **Copy** on the right — one-click clipboard.\",\"Use cases: **download integrity** (compare against publisher's SHA-256), **API signing prototypes**, **dedupe by content** (not for password storage — see tips).\"],\"tips\":[\"**MD5 / SHA-1 are broken** for security (collisions demonstrated). Fine for checksums or dedupe; not for signing or auth.\",\"**SHA-256 is the modern default** — git, blockchain, TLS all use it. **SHA-512** is faster on 64-bit CPUs and the cryptography-first choice.\",\"**Use bcrypt / scrypt / argon2 for passwords**, not SHA. Plain SHA hashes are catastrophically fast to brute-force.\",\"**WebCrypto is a W3C standard** built into every modern browser — speed is near-native C.\"],\"note\":\"💡 MD5 is hand-implemented (WebCrypto doesn't ship it). SHA variants call the native subtle.digest. Runs 100% in your browser — **passwords / API keys never leave**.\"},\"imgresize\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop image] --\u003e B[Read source dimensions]\\n    B --\u003e C{Pick mode}\\n    C --\u003e|Fit box| D[Aspect-preserved fit inside maxW × maxH]\\n    C --\u003e|Longest edge| E[Scale so longer side = N px]\\n    C --\u003e|Percentage| F[srcSize × percent]\\n    C --\u003e|Force size| G[Stretch directly to W × H]\\n    D --\u003e H{Prevent upscale?}\\n    E --\u003e H\\n    F --\u003e H\\n    G --\u003e H\\n    H --\u003e|Yes| I[Clamp ≤ source size]\\n    H --\u003e|No| J[Pass through]\\n    I --\u003e K[canvas drawImage bilinear]\\n    J --\u003e K\\n    K --\u003e L{Format}\\n    L --\u003e M[JPG / PNG / WebP]\\n    M --\u003e N[Download]\",\"steps\":[\"Drop an image; we show its native dimensions and file size.\",\"Pick one of four modes: **Fit box** keeps aspect ratio and fits inside maxW×maxH (most common); **Longest edge** caps the longer side; **Percentage** scales everything evenly; **Force size** ignores aspect ratio (stretches).\",\"**Never enlarge** is on by default — if the source is smaller than the target, we keep it as-is rather than blurring it.\",\"Choose **JPG** (smallest), **PNG** (lossless + alpha) or **WebP** (best balance), set quality, hit **Download**.\"],\"tips\":[\"**Fit box 1920×1080** is the safe default for IG / FB / blog covers — looks correct on any source aspect.\",\"**Longest edge 1024** is the universal Discord / Slack / LINE upload sweet spot.\",\"**Force size** is for strict requirements (government forms, ID photos) only — every other case wants aspect-preserving.\",\"**WebP saves ~30% over JPG** at the same visible quality and works in every 2025 browser.\"],\"note\":\"💡 Pure canvas resize using the browser's built-in bilinear / bicubic. **No upload** — fine for personal / confidential photos.\"},\"gifmake\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop images] --\u003e B[createImageBitmap decode]\\n    B --\u003e C[Ordered list]\\n    C --\u003e D[gifenc lazy import]\\n    D --\u003e E[Draw frame to canvas]\\n    E --\u003e F{Fit?}\\n    F --\u003e|contain| G[Shrink + bg fill]\\n    F --\u003e|cover| H[Fill + crop]\\n    G --\u003e I[quantize N-colour palette]\\n    H --\u003e I\\n    I --\u003e J[applyPalette → indexed]\\n    J --\u003e K[gif.writeFrame + delay]\\n    K --\u003e L{Next?}\\n    L --\u003e|yes| E\\n    L --\u003e|no| M[gif.finish → Blob]\\n    M --\u003e N[Download .gif]\",\"steps\":[\"Drop multiple images (JPG / PNG / WebP, up to 100). Each thumbnail shows its frame number.\",\"Use **◀** / **▶** to reorder, **✕** to remove a single frame.\",\"**Width / Height** set the GIF canvas; **Fit** picks **Contain** (letterbox) or **Cover** (crop) when source sizes vary. **Delay** is per-frame display time (20-1000 ms); **Palette colours** (8-256) controls file size vs banding.\",\"Toggle **Loop forever** (Instagram / Slack both honour it). Hit **Build GIF** — encoding runs in your browser, file downloads on finish.\"],\"tips\":[\"**GIF is indexed colour** (256 max). Photos band visibly; flat / icon / screenshot content looks best.\",\"**Delay guide**: 100ms = 10fps (smooth), 67ms ≈ 15fps (GIPHY-like), 40ms = 25fps (film-like, larger files).\",\"**Contain vs Cover**: Contain never crops but adds bars (bg colour applied); Cover fills the frame but trims content.\",\"**vs ezgif.com**: feature-rich but a 2010-era UI and requires upload. We're minimal, pure-frontend, no upload.\"],\"note\":\"💡 Encoding time scales with frame count and size (50 frames at 480×480 ≈ 5 s). **GIF has no animated alpha** — only the first frame can have transparency. Use WebP / APNG for animated transparency.\"},\"pdf2img\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop PDF] --\u003e B[pdfjs-dist lazy import]\\n    B --\u003e C[getDocument numPages]\\n    C --\u003e D{Range?}\\n    D --\u003e|All| E[1..numPages]\\n    D --\u003e|Custom| F[parsePageRange]\\n    F --\u003e G{Valid?}\\n    G --\u003e|No| H[Show error]\\n    G --\u003e|Yes| E\\n    E --\u003e I[page.render to canvas]\\n    I --\u003e J{Scale}\\n    J --\u003e K[1× 72dpi · 2× 144 · 4× 288]\\n    K --\u003e L[canvas.toBlob]\\n    L --\u003e M{Pages}\\n    M --\u003e|1| N[Direct download]\\n    M --\u003e|N| O[jszip pack]\\n    O --\u003e P[Download ZIP]\",\"steps\":[\"Drop a PDF; the page count loads instantly in your browser (no upload).\",\"Pick **output format** (PNG lossless+alpha / JPG smallest / WebP middle ground) and **scale** (2× usually nails it; 4× is print-grade but heavy).\",\"**Pages** defaults to All; switch to Range to type something like `1-3, 5, 8-10`.\",\"Hit **Render \u0026 download**. Single page downloads directly; multiple pages are zipped as `xxx-p001.png`, `xxx-p002.png`, …\"],\"tips\":[\"**Scale = DPI**: 1×=72dpi (web), 2×=144dpi (retina preview), 3×=216, 4×=288dpi (print / reports).\",\"**JPG is 80%+ smaller than PNG** but smudges text edges. **Text PDFs → PNG; scanned PDFs → JPG**.\",\"**WebP** = smaller than PNG, sharper text than JPG. Chrome 32+, Safari 14+.\",\"**vs ilovepdf / smallpdf**: they upload to the cloud first. We stay in your browser — fine for contracts, confidential docs, PII.\"],\"note\":\"💡 Render time scales with both pages and scale (2× × 10 pages ≈ 5 s; 4× × 100 pages ≈ 3 min). Test with 1-2 pages first on big files.\"},\"clippath\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Pick preset] --\u003e B{Shape kind}\\n    B --\u003e|polygon| C[Drag points / dbl-del / rclick add]\\n    B --\u003e|circle / ellipse| D[Sliders for center + radius]\\n    B --\u003e|inset| E[Four sides + corner radius]\\n    C --\u003e F[shapeToCss]\\n    D --\u003e F\\n    E --\u003e F\\n    F --\u003e G{Output}\\n    G --\u003e H[CSS clip-path value]\\n    G --\u003e I[Tailwind v4 bracket class]\\n    G --\u003e J[SVG path d attribute]\",\"steps\":[\"Pick a **preset** above (triangle, rhombus, hexagon, star, arrow, parallelogram, circle, ellipse, inset).\",\"**Polygon mode**: drag points to reshape · **double-click** to delete a point · **right-click** to insert a new one after it.\",\"**Circle / Ellipse / Inset modes**: sliders on the right control center, radii, side insets, corner radius.\",\"Bottom-right preview shows the clip applied to a real-looking image (clip-path always looks better on solid colour than on photos — preview both).\"],\"tips\":[\"**Polygon needs ≥ 3 points** — the delete button is disabled at the floor.\",\"**Tailwind v4 bracket class** converts spaces to `\\\\_` so the class is valid; paste directly into `\u003cdiv class=\\\"...\\\"\u003e`.\",\"**SVG path** is ideal for an SVG `\u003cclipPath\u003e` element or as a mask — drop `\u003cpath d=\\\"...\\\"\u003e` inside SVG defs.\",\"**vs bennettfeely.com/clippy** — Clippy is the classic but 10+ years untouched; we add Tailwind v4 bracket classes and SVG path output.\"],\"note\":\"💡 `clip-path` is supported in Safari / Chrome / Firefox. Old Edge needs `-webkit-` prefix; IE is EOL and never supported it.\"},\"imgcrop\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop image] --\u003e B[loadImageFromFile]\\n    B --\u003e C[Normalised 0..1 coords]\\n    C --\u003e D{Aspect}\\n    D --\u003e|Free| E[Drag 4 corners]\\n    D --\u003e|Locked| F[applyAspect syncs other side]\\n    E --\u003e G{Circular?}\\n    F --\u003e G\\n    G --\u003e|Yes| H[canvas ctx.arc + clip]\\n    G --\u003e|No| I[Direct drawImage]\\n    H --\u003e J{Format}\\n    I --\u003e J\\n    J --\u003e|PNG| K[Lossless + alpha]\\n    J --\u003e|JPG| L[White bg + quality]\\n    J --\u003e|WebP| M[Small + optional alpha]\\n    K --\u003e N[toBlob → download]\\n    L --\u003e N\\n    M --\u003e N\",\"steps\":[\"Drop an image (JPG / PNG / WebP / GIF). Preview shows the source dimmed except inside the crop rect (80% of frame to start).\",\"**Drag the centre** to move; **drag a corner** to resize. Pick an **aspect** (1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, or Free) and the other dimension auto-syncs.\",\"Toggle **Circular mask** for avatars (PNG / WebP only — JPG can't keep alpha).\",\"Choose **output format**, **quality** (JPG / WebP), and **output width** (upscale or downscale), then **Download**.\"],\"tips\":[\"**1:1 circular** for IG / Twitter / Slack avatars; **16:9** for YouTube thumbs and blog covers; **9:16** for IG Story / Reels.\",\"**Output width** blank = native crop resolution (no upscale); a number rescales (bilinear via Canvas).\",\"**Circular + JPG** = square output (JPG has no alpha). Use PNG or WebP for a true circle.\",\"**WebP** is 25-30% smaller than PNG and 30-40% smaller than JPG, supported in every 2025 browser.\"],\"note\":\"💡 Whole pipeline runs in your browser (loadImage → canvas draw → toBlob). **Files never leave** — fine for ID photos, confidential docs, personal images.\"},\"csv\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Paste / open file] --\u003e B[detectDelimiter from 5 lines]\\n    B --\u003e C{,  ;  Tab  | ?}\\n    C --\u003e D[parseAllRows state machine]\\n    D --\u003e E[Handles quotes / escapes / inline newlines]\\n    E --\u003e F{First row a header?}\\n    F --\u003e|Yes| G[Use as headers]\\n    F --\u003e|No| H[Auto col1..colN]\\n    G --\u003e I[Tabular preview]\\n    H --\u003e I\\n    I --\u003e J[columnStats: unique / empty / numericRatio]\\n    I --\u003e K{Output format}\\n    K --\u003e L[JSON]\\n    K --\u003e M[TSV]\\n    K --\u003e N[Markdown table]\\n    K --\u003e O[Normalised CSV]\",\"steps\":[\"Paste CSV or click **Open file** to load `.csv` / `.tsv`. The **delimiter is auto-detected** (`,` `;` Tab `|`) — override if needed.\",\"**First row is header** is on by default; uncheck if your file has no header → we synthesise `col1`, `col2`…\",\"Live **tabular preview** below (200-row cap for speed; export still contains everything). Each header shows **unique count**, **empty count**, and a numeric-column flag (`#`).\",\"**Output** tabs at the bottom: **JSON** (array of objects), **TSV** (paste into Google Sheets), **Markdown** (GFM table), **Normalised CSV** (canonical quoting).\"],\"tips\":[\"**Full RFC 4180** — quoted fields with commas / newlines inside, `\\\"\\\"` for an escaped double quote. Even weird Excel CSVs parse fine.\",\"**European Excel CSV** uses `;` (German / French / CEE). Auto-detect handles it.\",\"**TSV → Google Sheets**: switch output to TSV, Cmd-C, then Cmd-V into any cell — auto-splits into columns.\",\"**Numeric-column flag** (`#`) only fires when 80%+ of cells are valid numbers — handy schema sniff.\"],\"note\":\"💡 200-row preview cap keeps rendering snappy; the **export still contains the full dataset**. Files never leave your browser.\"},\"jsondiff\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Left JSON] --\u003e C[parseJsonLoose]\\n    B[Right JSON] --\u003e D[parseJsonLoose]\\n    C --\u003e E{Both valid?}\\n    D --\u003e E\\n    E --\u003e|No| F[Show parse error]\\n    E --\u003e|Yes| G[Deep walk]\\n    G --\u003e H{Each node}\\n    H --\u003e|primitive ===| I[unchanged]\\n    H --\u003e|primitive !=| J[changed]\\n    H --\u003e|object| K[Recurse keys]\\n    H --\u003e|array| L[Index-by-index]\\n    K --\u003e M{Key on which side?}\\n    M --\u003e|Left only| N[removed]\\n    M --\u003e|Right only| O[added]\\n    M --\u003e|Both| K\\n    J --\u003e P[Stats + highlighted table]\\n    I --\u003e P\\n    N --\u003e P\\n    O --\u003e P\",\"steps\":[\"**Left** = old JSON, **Right** = new JSON (empty input is treated as `null`).\",\"The diff table updates live. **+** green = added, **−** red = removed, **~** amber = changed.\",\"The header chips show stats; toggle **Show unchanged fields** to see the complete tree.\",\"**Copy diff report** for a plain-text summary you can paste into a PR description, Linear or Slack.\"],\"tips\":[\"**Paths use JSONPath style** — `$.user.tags[0]` is human-friendly and works directly with jq / lodash get / Postman.\",\"**Arrays diff by index** (LCS is expensive). If you just re-ordered items, everything looks `changed`; sort both sides first for a cleaner diff.\",\"**Type changes** (e.g. `{}` → `1`) are reported as `changed` without deep inspection.\",\"**vs jsondiff.com** — they show ads; we're pure functions in your browser with zero upload.\"],\"note\":\"💡 Diff runs entirely in your browser. Great for comparing production vs staging API responses, config-file audits, regression baselines.\"},\"urlenc\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Input string] --\u003e B{Direction}\\n    B --\u003e|Encode| C{Format}\\n    B --\u003e|Decode| D{Format}\\n    C --\u003e|URL| E[encodeURI]\\n    C --\u003e|URI component| F[encodeURIComponent]\\n    C --\u003e|Base64| G[utf-8 → bytes → btoa]\\n    C --\u003e|Base64URL| H[Base64 then swap +/=]\\n    C --\u003e|HTML entities| I[\u0026 \u003c \u003e escapes]\\n    C --\u003e|Unicode escape| J[BMP \\\\uXXXX / astral \\\\u{...}]\\n    D --\u003e|reverse| K[decode]\\n    E --\u003e L[Live output]\\n    F --\u003e L\\n    G --\u003e L\\n    H --\u003e L\\n    I --\u003e L\\n    J --\u003e L\\n    K --\u003e L\",\"steps\":[\"Choose **Encode** or **Decode**, then pick one of 6 formats.\",\"Type / paste a string on the left — the right side **updates instantly**, no button to click.\",\"Hit **↕ Output → input** to flip the result back into the input — perfect for round-trip sanity checks (encode → decode = original).\",\"**Copy** the output to clipboard, ready to paste into curl, Postman, or a URL bar.\"],\"tips\":[\"**URL vs URI component** — `encodeURI` preserves `:/?#\u0026=`, use for full URLs; `encodeURIComponent` escapes everything, use for query-string values.\",\"**Base64 vs Base64URL** — JWT, OAuth state and URL-safe cookies use Base64URL (`+/=` → `-_` with no padding). Mail attachments use standard Base64.\",\"**HTML entities** decoder accepts named (`\u0026amp;`), numeric (`\u0026#39;`) and hex (`\u0026#x4e2d;`) forms; encoder only escapes the canonical 5 (`\u0026 \u003c \u003e \\\" '`) to avoid over-escaping.\",\"**Unicode escape** auto-picks BMP (`\\\\u4e2d`) vs astral plane (`\\\\u{1f30d}` for emoji).\"],\"note\":\"💡 Pure functions over the built-in browser APIs — no extra deps, zero bundle increase. Works offline.\"},\"mdedit\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Type Markdown left] --\u003e B[marked parses GFM]\\n    B --\u003e C[DOMPurify sanitize]\\n    C --\u003e D{View mode}\\n    D --\u003e|Preview| E[Rendered HTML]\\n    D --\u003e|HTML source| F[HTML text]\\n    D --\u003e|TOC| G[extractToc # headings]\\n    A --\u003e H[computeStats live]\\n    H --\u003e I[words / chars / lines / headings / read time]\\n    E --\u003e J{Output}\\n    F --\u003e J\\n    J --\u003e K[Copy MD / HTML]\\n    J --\u003e L[Download .md / styled .html]\",\"steps\":[\"Type Markdown on the left, or click **Open file** to upload a `.md`. Hit **Load sample** to see the full syntax in one go.\",\"Three view modes on the right: **Preview** (rendered styles), **HTML source** (paste-ready snippet), **TOC** (auto-extracted from `#` headings).\",\"The toolbar shows live **words, chars, lines, heading count, reading time**.\",\"Export: **Copy HTML** for a snippet, **Download .html** for a self-contained styled file you can share.\"],\"tips\":[\"**Full GFM** — tables, task lists (`- [x]`), strikethrough (`~~text~~`), code fences, auto-links.\",\"**Line breaks → `\u003cbr\u003e`** toggle turns every newline into a break (matches many people's mental model; default needs two trailing spaces).\",\"**HTML output is DOMPurify-sanitised** — even if your Markdown contains `\u003cscript\u003e`, the copied HTML is safe.\",\"**Download .html** ships a small reset stylesheet so the file looks decent standalone — fine to share, email or print without our site.\",\"**vs dillinger.io / stackedit** — they ping cloud-sync services; we stay 100% offline.\"],\"note\":\"💡 Parsing runs in your browser (marked + DOMPurify, ~80KB combined). After the first load it's instant — and the tool works even when offline.\"},\"codefmt\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Paste / pick file] --\u003e B{Auto detect?}\\n    B --\u003e|Yes| C[detectLanguageFromContent]\\n    B --\u003e|No| D[Pick language manually]\\n    C --\u003e E[language]\\n    D --\u003e E\\n    E --\u003e F{Mode}\\n    F --\u003e|Beautify| G[lazy import prettier/standalone + plugin]\\n    G --\u003e H[prettier.format with options]\\n    F --\u003e|Minify| I{Supported?}\\n    I --\u003e|JSON/CSS/HTML| J[pure-function minify]\\n    I --\u003e|other| K[Switch back to beautify]\\n    H --\u003e L[Output + size delta]\\n    J --\u003e L\",\"steps\":[\"Pick **Beautify** or **Minify**, then choose a language (or let auto-detect guess from the content).\",\"Paste the source on the left, or click **Open file** to upload one (extension picks the language).\",\"Beautify mode lets you expand **Advanced** to tweak Prettier: print width, tab width, single quotes, semicolons.\",\"Hit **Beautify / Minify** — the result appears on the right with bytes \u0026 delta. **Copy** or **Download** with the correct extension.\"],\"tips\":[\"**Prettier is the industry standard** — built into VS Code \u0026 WebStorm. We just ship it as a zero-config, no-install tab.\",\"**Minify currently covers JSON / CSS / SCSS / HTML** only — JS minification needs Terser, which would bloat the bundle. Run `npx terser` for that.\",\"**Auto-detect** uses content heuristics. JSON / HTML / CSS are highly reliable; override manually when ambiguous.\",\"**HTML minify** preserves `\u003cpre\u003e`, `\u003ctextarea\u003e`, `\u003cscript\u003e`, `\u003cstyle\u003e` content (won't break layout or scripts).\"],\"note\":\"💡 The first time you hit **Beautify** the Prettier engine loads (~400KB, cached after first fetch). Subsequent runs are instant.\"},\"pdfwm\":{\"title\":\"How to use\",\"flowchart\":\"flowchart LR\\n    A[Drop PDF] --\u003e B[pdf-lib parse]\\n    B --\u003e C{Watermark kind}\\n    C --\u003e|Text| D[fontSize/color/opacity/rotation]\\n    C --\u003e|Image| E[embedPng/Jpg + scale]\\n    C --\u003e|None| F[Skip]\\n    D --\u003e G{Tiled?}\\n    G --\u003e|Yes| H[Diagonal tile across page]\\n    G --\u003e|No| I[Single position]\\n    E --\u003e I\\n    F --\u003e J{Page numbers?}\\n    H --\u003e J\\n    I --\u003e J\\n    J --\u003e|Yes| K[N · N/total · Page N of total]\\n    J --\u003e|No| L[Output PDF]\\n    K --\u003e L\",\"steps\":[\"Drop a PDF (max 200 MB). The whole file is processed inside your browser and **never uploaded**.\",\"Choose **watermark kind**: **Text** (font size / colour / opacity / rotation, with optional diagonal tiling), **Image** (drop a PNG / JPG — typically a company logo), or off.\",\"(Optional) Enable **Add page numbers** and pick a format (`N`, `N/total`, `Page N of total`) and position.\",\"Hit **Apply \u0026 download** — the browser saves a new PDF with the watermark and/or page numbers stamped in.\"],\"tips\":[\"**Diagonal tiling** is the standard anti-copy treatment for contracts, drafts and confidential docs — even a low-quality photocopy still shows the repeated `CONFIDENTIAL — DO NOT SHARE` pattern.\",\"**Image watermarks** look best as a transparent-background PNG (your logo). 25-35% opacity is usually a sweet spot — visible without obscuring the text.\",\"**Page numbers** start from page 1 in all three formats. To skip a cover, edit pages first with the PDF page editor.\",\"**vs ilovepdf / smallpdf** — they upload your file to the cloud first; we process it 100% in your browser, suitable for contracts and confidential documents.\"]},\"casecvt\":{\"title\":\"How to use\",\"steps\":[\"Paste any string (variable name, sentence, URL fragment — anything).\",\"9 case forms appear instantly: camelCase / PascalCase / snake_case / kebab-case / CONSTANT_CASE / Title / Sentence / dot / path.\",\"Click the copy button on any form to take it.\",\"Mixed English + CJK input is tokenized correctly — Chinese / Japanese / Korean stays intact.\"],\"tips\":[\"Super handy when refactoring variable names from someone else's codebase.\",\"Converting between Django ORM (snake_case) and React (camelCase) field names is the most common use.\"]},\"cssgrid\":{\"title\":\"How to use\",\"steps\":[\"Drag the rows / cols sliders to size the grid.\",\"Click and drag cells to assign **named areas** (like `header`, `sidebar`).\",\"Built-in **Holy Grail**, **12-col Dashboard** and other presets — one click to apply.\",\"Live preview on the right + one-click CSS export, ready to drop into Tailwind / CSS module.\"],\"tips\":[\"Use `rem` (not `px`) for `gap` — it scales with root font-size, friendlier to RWD.\",\"Named areas read better than `grid-column-start/end` and cost less to maintain.\"]},\"emoji\":{\"title\":\"How to use\",\"steps\":[\"Filter by category (faces / gestures / animals / food / flags…) at the top.\",\"Click any emoji to see **Unicode codepoint**, **Discord/Slack shortcode**, **HTML entity**, and **CSS escape**.\",\"Reverse lookup: paste an emoji into the search box, get its codepoint and metadata.\",\"Each field has a copy button — no more Googling.\"],\"tips\":[\"Discord and Slack shortcodes differ slightly (`:smile:` vs `:smiley:`) — check your platform.\",\"Use HTML entities in `\u003cmeta\u003e` / OG titles for safer encoding than raw emoji chars.\"]},\"json2ts\":{\"title\":\"How to use\",\"steps\":[\"Paste any JSON on the left (API response, config file, fixture — anything).\",\"TypeScript `interface` / `type` is generated instantly with **smart nested-type naming** (e.g. `User_Address`).\",\"Array with mixed-shape elements? Shapes are merged and `optional` is auto-marked.\",\"Toggle `readonly` and `type` vs `interface` at the top, then copy into your SDK / model file.\"],\"tips\":[\"Want JSDoc comments? Add a `_doc` field in your JSON — it gets attached to the generated type.\",\"Null values in the API response become `T | null` — never silently dropped.\"]},\"mermaid\":{\"title\":\"How to use\",\"steps\":[\"Write Mermaid syntax on the left (`flowchart`, `sequenceDiagram`, `gantt`, `mindmap`, `classDiagram`, `erDiagram`, `pie`).\",\"Right side renders live; fonts / colors follow your dark-mode setting.\",\"Toolbar has **SVG / PNG download** — drop straight into GitHub README / Notion / blog.\",\"Example dropdown has starter templates for all 7 diagram types — tweak a few chars and ship.\"],\"tips\":[\"GitHub Issue / README support ```mermaid blocks directly — no need to export to image.\",\"For Gantt charts, set `dateFormat YYYY-MM-DD` or you'll get month-only output.\"],\"note\":\"Mermaid renders via mermaid.js entirely client-side — your diagram never leaves the browser.\"},\"slugify\":{\"title\":\"How to use\",\"steps\":[\"Paste your title (any language, punctuation OK).\",\"The slug appears below: **accents stripped** (é → e), lowercased, punctuation → hyphens, spaces → `-`.\",\"Toggle CJK preserve / drop, length truncation, underscore keep — bottom panel.\",\"Click copy and paste into your CMS / blog URL field.\"],\"tips\":[\"Preserving CJK chars beats pinyin transliteration — Google understands UTF-8 URLs just fine.\",\"Keep slug under 60-70 chars: won't get truncated in search results, still keyword-rich.\"]},\"tokens\":{\"title\":\"How to use\",\"steps\":[\"Paste your prompt (or full conversation) into the input box.\",\"5 leading models estimated simultaneously: GPT-4o / Claude 3.5 / Gemini Pro / GPT-4o-mini / Claude Haiku.\",\"See **token count**, **single-call cost**, **context-window fit** (green / yellow / red) on the right.\",\"Want to compress the prompt? Check which segments are token-heavy — squeeze those first.\"],\"tips\":[\"Chinese: ~1.5–2 tokens/char. English: ~1.3 tokens/word. Heuristic accuracy ±10%.\",\"Don't forget system prompt + few-shot — those count too, often more than user input.\"],\"note\":\"Pure client-side heuristic — no calls to OpenAI tokenizer API. **Your prompt never leaves the browser.**\"}},\"footer\":{\"made\":\"Built by Mark Liu with Next.js\"}},\"now\":\"$undefined\",\"timeZone\":\"UTC\",\"children\":\"$L68\"}]\n"])</script><script>self.__next_f.push([1,"68:[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]\nb:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#ffffff\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"meta\",\"3\",{\"name\":\"theme-color\",\"content\":\"#0a0b10\",\"media\":\"(prefers-color-scheme: dark)\"}]]\n8:null\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"title\",\"0\",{\"children\":\"Code Beautifier \u0026 Minifier — Online Prettier (10 languages, pure frontend) · Dev Tools\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Prettier-backed beautifier for JS / TS / CSS / HTML / JSON / Markdown / YAML and friends, plus a one-click JSON / CSS / HTML minifier. Runs in your browser, with advanced Prettier options (print width, tab width, quotes).\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Mark Liu\"}],[\"$\",\"link\",\"3\",{\"rel\":\"manifest\",\"href\":\"/manifest.webmanifest\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"code formatter,prettier online,json beautifier,css beautifier,html beautifier,json minify,css minify,html minify,beautify js,code prettifier\"}],[\"$\",\"meta\",\"5\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"link\",\"6\",{\"rel\":\"canonical\",\"href\":\"https://dev.9niche.com/en/tools/code-beautifier\"}],[\"$\",\"link\",\"7\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://dev.9niche.com/en/tools/code-beautifier\"}],[\"$\",\"link\",\"8\",{\"rel\":\"alternate\",\"hrefLang\":\"zh-TW\",\"href\":\"https://dev.9niche.com/zh-TW/tools/code-beautifier\"}],[\"$\",\"meta\",\"9\",{\"name\":\"msvalidate.01\",\"content\":\"248B2967F6ABA299B672C089C01F845B\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:title\",\"content\":\"Code Beautifier \u0026 Minifier — Online Prettier (10 languages, pure frontend)\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:description\",\"content\":\"Prettier-backed beautifier for JS / TS / CSS / HTML / JSON / Markdown / YAML and friends, plus a one-click JSON / CSS / HTML minifier. Runs in your browser, with advanced Prettier options (print width, tab width, quotes).\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:url\",\"content\":\"https://dev.9niche.com/en/tools/code-beautifier\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:site_name\",\"content\":\"Dev Tools\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:locale\",\"content\":\"en\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image\",\"content\":\"https://dev.9niche.com/api/og?title=Code+Beautifier+%2F+Minifier+%2810+languages%29\u0026subtitle=Prettier-backed+formatter+for+JS+%2F+TS+%2F+CSS+%2F+HTML+%2F+JSON+%2F+Markdown+%2F+YAML%2C+plus+one-click+minify+for+JSON+%2F+CSS+%2F+HTML.+Auto-detects+language\u0026category=data-format\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:alt\",\"content\":\"Code Beautifier / Minifier (10 languages)\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Code Beautifier \u0026 Minifier — Online Prettier (10 languages, pure frontend)\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"Prettier-backed beautifier for JS / TS / CSS / HTML / JSON / Markdown / YAML and friends, plus a one-click JSON / CSS / HTML minifier. Runs in your browser, with advanced Prettier options (print width, tab width, quotes).\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://dev.9niche.com/api/og?title=Code+Beautifier+%2F+Minifier+%2810+languages%29\u0026subtitle=Prettier-backed+formatter+for+JS+%2F+TS+%2F+CSS+%2F+HTML+%2F+JSON+%2F+Markdown+%2F+YAML%2C+plus+one-click+minify+for+JSON+%2F+CSS+%2F+HTML.+Auto-detects+language\u0026category=data-format\"}]]\n"])</script></body></html>