-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
604 lines (574 loc) · 36.7 KB
/
Copy pathindex.html
File metadata and controls
604 lines (574 loc) · 36.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FreeDevTool — 50 Free Online Developer Tools, No Signup</title>
<meta name="description" content="Free, fast, privacy-first developer tools — JSON, SQL, JWT, Base64, regex, hashes, UUIDs, more. Runs in your browser. No signup, no ads, no tracking.">
<meta name="robots" content="index, follow">
<meta name="author" content="Anees Ur Rehman">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","datePublished":"2026-05-02","dateModified":"2026-05-19","inLanguage":"en-US","isPartOf":{"@type":"WebSite","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Anees Ur Rehman","url":"https://freedevtool.org/about","jobTitle":"Full-stack developer","worksFor":{"@type":"Organization","name":"FreeDevTool","url":"https://freedevtool.org"}}</script>
<link rel="canonical" href="https://freedevtool.org/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap">
<link rel="preload" href="style.css?v=20260502-cards" as="style">
<link rel="stylesheet" href="style.css?v=20260502-cards">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/favicon.svg">
<meta property="og:image" content="https://freedevtool.org/og-image.svg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="FreeDevTool — 50+ free, fast, privacy-first developer tools">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://freedevtool.org/og-image.svg">
<meta name="twitter:title" content="FreeDevTool — Free Online Developer Tools">
<meta name="twitter:description" content="50+ free, fast, privacy-first developer tools. No signup, runs in browser.">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3L0CMH3X36"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-3L0CMH3X36');</script>
<meta property="og:title" content="FreeDevTool — Free Online Developer Tools">
<meta property="og:description" content="Fast, privacy-first developer micro-tools. No signup. Works offline.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://freedevtool.org/">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "FreeDevTool",
"url": "https://freedevtool.org",
"description": "Free online developer tools — Base64, JSON, UUID, JWT, timestamps and more",
"potentialAction": {
"@type": "SearchAction",
"target": "https://freedevtool.org/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<style>
.hero {
text-align: center;
padding: 72px 0 56px;
position: relative;
animation: fadeInUp .6s var(--ease-out);
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,208,132,.08) 0%, transparent 70%);
pointer-events: none;
}
.hero-eyebrow {
font-family: var(--mono); font-size: 11px;
color: var(--accent); letter-spacing: 1.5px;
text-transform: uppercase; margin-bottom: 16px;
animation: fadeIn .5s var(--ease-out) .1s both;
}
.hero h1 {
font-size: clamp(28px, 5vw, 44px);
font-weight: 600; line-height: 1.15;
margin-bottom: 16px;
animation: fadeInUp .6s var(--ease-out) .15s both;
}
.hero h1 span { color: var(--accent); }
.hero-sub {
color: var(--text2); font-size: 15px;
max-width: 480px; margin: 0 auto 32px;
animation: fadeInUp .6s var(--ease-out) .25s both;
}
.hero-stats {
display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
animation: fadeInUp .6s var(--ease-out) .35s both;
}
.stat {
text-align: center; padding: 12px 8px;
border-radius: var(--radius);
transition: transform .2s var(--ease-spring), background .2s;
}
.stat:hover { transform: translateY(-2px); background: var(--accent-dim); }
.stat-num { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--text3); margin-top: 2px; }
.search-bar {
position: relative; margin-bottom: 40px;
animation: fadeInUp .6s var(--ease-out) .4s both;
z-index: 999;
}
.search-bar input {
width: 100%; padding: 14px 44px 14px 18px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-lg); color: var(--text);
font-size: 14px; font-family: var(--sans); outline: none;
transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.search-bar input:focus {
border-color: var(--accent2);
box-shadow: 0 0 0 3px rgba(0,208,132,.08), 0 4px 20px rgba(0,0,0,.15);
background: var(--bg);
}
.search-bar input::placeholder { color: var(--text3); }
.search-icon {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
color: var(--text3); pointer-events: none; transition: color .2s;
}
.search-bar input:focus ~ .search-icon { color: var(--accent); }
/* Search results dropdown */
.search-results {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 6px;
max-height: 320px; overflow-y: auto;
box-shadow: 0 12px 40px rgba(0,0,0,.4);
z-index: 9999; display: none;
}
.search-results.visible { display: block; }
.search-results a {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: var(--radius);
color: var(--text); text-decoration: none; font-size: 13px;
transition: background .15s, transform .1s;
}
.search-results a:hover { background: var(--accent-dim); transform: translateX(2px); }
.search-results a .sr-icon {
width: 28px; height: 28px; border-radius: 6px; background: var(--bg4);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 11px; color: var(--accent); flex-shrink: 0;
}
.search-results a .sr-name { font-weight: 500; }
.search-results a .sr-desc { font-size: 11px; color: var(--text3); }
.search-results .sr-empty { padding: 16px; text-align: center; color: var(--text3); font-size: 13px; }
.section-label {
font-size: 11px; font-weight: 600;
color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
margin-bottom: 16px; padding-left: 2px;
}
.section-label::before {
content: ''; display: inline-block;
width: 3px; height: 12px; background: var(--accent);
border-radius: 2px; margin-right: 8px; vertical-align: middle;
}
/* Featured tools grid */
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px; margin-bottom: 48px;
animation: fadeInUp .5s var(--ease-out) .45s both;
}
.feat-tile {
display: flex; align-items: center; gap: 12px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 16px 18px;
text-decoration: none; color: var(--text);
transition: border-color .25s var(--ease-out), transform .25s var(--ease-out),
box-shadow .25s var(--ease-out), background .25s;
position: relative;
}
.feat-tile::before {
content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg);
background: radial-gradient(circle at 50% 50%, rgba(0,208,132,.06) 0%, transparent 70%);
opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none;
}
.feat-tile:hover::before { opacity: 1; }
.feat-tile:hover {
border-color: rgba(0,208,132,.45); transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0,0,0,.3), 0 0 0 1px rgba(0,208,132,.12);
background: linear-gradient(135deg, var(--bg2) 0%, rgba(0,208,132,.05) 100%);
}
.feat-tile:active { transform: translateY(-1px); }
.feat-icon {
width: 38px; height: 38px; border-radius: 8px; background: var(--bg4);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 14px; color: var(--accent); flex-shrink: 0;
transition: transform .3s var(--ease-spring), background .25s;
}
.feat-tile:hover .feat-icon { transform: scale(1.1); background: var(--accent-dim); }
.feat-name { font-size: 13.5px; font-weight: 500; transition: color .2s; }
.feat-tile:hover .feat-name { color: var(--accent); }
.feat-desc { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
/* Category cards */
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px; margin-bottom: 48px;
animation: fadeInUp .5s var(--ease-out) .55s both;
}
.cat-card {
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 24px;
text-decoration: none; color: var(--text);
transition: border-color .3s var(--ease-out), transform .3s var(--ease-out),
box-shadow .3s var(--ease-out), background .3s;
position: relative; overflow: hidden;
}
.cat-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0; transition: opacity .3s;
}
.cat-card:hover::before { opacity: 1; }
.cat-card:hover {
border-color: rgba(0,208,132,.3); transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.3), 0 0 40px -10px rgba(0,208,132,.1);
background: linear-gradient(135deg, var(--bg2) 0%, rgba(0,208,132,.04) 100%);
}
.cat-card:active { transform: translateY(-1px); }
.cat-icon {
width: 44px; height: 44px; border-radius: 10px; background: var(--bg4);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 16px; color: var(--accent);
margin-bottom: 14px;
transition: transform .3s var(--ease-spring), background .25s, box-shadow .25s;
}
.cat-card:hover .cat-icon {
transform: scale(1.1); background: var(--accent-dim);
box-shadow: 0 0 16px rgba(0,208,132,.15);
}
.cat-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; transition: color .2s; }
.cat-card:hover .cat-name { color: var(--accent); }
.cat-desc { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin-bottom: 12px; }
.cat-count {
font-family: var(--mono); font-size: 11px; color: var(--accent);
background: var(--accent-dim); border: 1px solid rgba(0,208,132,.15);
padding: 3px 10px; border-radius: 20px; display: inline-block;
}
.cat-tools-preview {
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 10px;
}
.cat-tools-preview span {
font-size: 10px; font-family: var(--mono); color: var(--text3);
background: var(--bg4); padding: 2px 7px; border-radius: 4px;
}
.cta-strip {
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 28px 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-top: 8px;
transition: border-color .3s var(--ease-out), box-shadow .3s;
animation: fadeInUp .6s var(--ease-out) .65s both;
position: relative; overflow: hidden;
}
.cta-strip::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,208,132,.3), transparent);
}
.cta-strip:hover { border-color: rgba(0,208,132,.15); box-shadow: 0 4px 24px rgba(0,0,0,.15); }
.cta-strip h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.cta-strip p { font-size: 13px; color: var(--text2); }
.privacy-points { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.pp {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--text2); padding: 4px 0; transition: color .2s;
}
.pp:hover { color: var(--text); }
.pp::before {
content: ''; width: 16px; height: 16px; border-radius: 50%;
background: var(--accent-dim); border: 1px solid rgba(0,208,132,.25);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2300d084' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: center;
}
@media (max-width: 600px) {
.featured-grid, .cat-grid { grid-template-columns: 1fr; }
.cta-strip { padding: 22px 20px; }
.hero { padding: 48px 0 40px; }
}
</style>
<script src="/ga4-events.js" defer></script>
</head>
<body>
<nav>
<a class="nav-logo" href="/" aria-label="FreeDevTool home"><svg class="logo-mark" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true" fill="none"><rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" opacity=".12"/><path d="M9.5 8.5L6 12l3.5 3.5M14.5 8.5L18 12l-3.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>FreeDevTool</a>
<div class="nav-links">
<div class="nav-dropdown" id="tools-dropdown">
<a href="all-tools" onclick="event.preventDefault();this.parentElement.classList.toggle('open')" aria-haspopup="true">Tools <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg></a>
<div class="nav-dropdown-menu">
<a href="encoding-tools">
<div class="dd-icon">b64</div>
<div class="dd-info"><div class="dd-name">Encoding & Conversion</div><div class="dd-count">11 tools · Base64, YAML, px→rem</div></div>
</a>
<a href="generation-tools">
<div class="dd-icon">{ }</div>
<div class="dd-info"><div class="dd-name">Generation & Formatting</div><div class="dd-count">16 tools · JSON, SQL, gradients</div></div>
</a>
<a href="security-tools">
<div class="dd-icon">#</div>
<div class="dd-info"><div class="dd-name">Security & Hashing</div><div class="dd-count">3 tools · JWT, MD5, SHA</div></div>
</a>
<a href="text-tools">
<div class="dd-icon">.*</div>
<div class="dd-info"><div class="dd-name">Code & Text Tools</div><div class="dd-count">9 tools · Regex, diff, tokens</div></div>
</a>
<a href="devops-tools">
<div class="dd-icon">JS</div>
<div class="dd-info"><div class="dd-name">Optimization & DevOps</div><div class="dd-count">7 tools · Minifiers, cURL, git</div></div>
</a>
<a href="network-tools">
<div class="dd-icon">IP</div>
<div class="dd-info"><div class="dd-name">Network & Time</div><div class="dd-count">4 tools · IP, DNS, timestamps</div></div>
</a>
<a href="seo-tools">
<div class="dd-icon">SEO</div>
<div class="dd-info"><div class="dd-name">SEO & Meta Tools</div><div class="dd-count">3 tools · OG, meta, slug</div></div>
</a>
<div class="nav-dropdown-divider"></div>
<a class="dd-all" href="all-tools">
<div class="dd-icon">All</div>
<div class="dd-info"><div class="dd-name">Browse all 50 tools</div><div class="dd-count">Searchable catalog & categories</div></div>
</a>
</div>
</div>
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy</a>
</div>
</nav>
<div class="wrapper">
<section class="hero">
<p class="hero-eyebrow">Free · Instant · No Signup</p>
<h1>Developer tools that<br><span>actually work fast</span></h1>
<p class="hero-sub">Micro-tools for everyday dev tasks. Everything runs in your browser — nothing is sent to a server.</p>
<div class="hero-stats">
<div class="stat"><div class="stat-num">50</div><div class="stat-label">Tools live</div></div>
<div class="stat"><div class="stat-num">$0</div><div class="stat-label">Forever free</div></div>
<div class="stat"><div class="stat-num">0ms</div><div class="stat-label">Server calls</div></div>
</div>
</section>
<div class="search-bar">
<input type="text" id="tool-search" placeholder="Search 50 tools — sql, json, yaml, jwt, xml, chmod, gradient, meta..." autocomplete="off">
<svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<div class="search-results" id="search-results"></div>
</div>
<h2 class="section-label">Popular Tools</h2>
<div class="featured-grid">
<a class="feat-tile" href="json-formatter">
<div class="feat-icon">{ }</div>
<div><div class="feat-name">JSON Formatter</div><div class="feat-desc">Pretty print & validate</div></div>
</a>
<a class="feat-tile" href="base64-encoder">
<div class="feat-icon">b64</div>
<div><div class="feat-name">Base64 Encoder</div><div class="feat-desc">Encode & decode text</div></div>
</a>
<a class="feat-tile" href="regex-tester">
<div class="feat-icon">.*</div>
<div><div class="feat-name">Regex Tester</div><div class="feat-desc">Test & debug patterns</div></div>
</a>
<a class="feat-tile" href="jwt-decoder">
<div class="feat-icon">jwt</div>
<div><div class="feat-name">JWT Decoder</div><div class="feat-desc">Inspect tokens & claims</div></div>
</a>
<a class="feat-tile" href="uuid-generator">
<div class="feat-icon">uid</div>
<div><div class="feat-name">UUID Generator</div><div class="feat-desc">Generate v4 UUIDs</div></div>
</a>
<a class="feat-tile" href="password-generator">
<div class="feat-icon">🔑</div>
<div><div class="feat-name">Password Generator</div><div class="feat-desc">Secure random passwords</div></div>
</a>
<a class="feat-tile" href="hash-generator">
<div class="feat-icon">#</div>
<div><div class="feat-name">Hash Generator</div><div class="feat-desc">MD5, SHA-256, SHA-512</div></div>
</a>
<a class="feat-tile" href="color-picker">
<div class="feat-icon">🎨</div>
<div><div class="feat-name">Color Palette</div><div class="feat-desc">Harmony & contrast checker</div></div>
</a>
<a class="feat-tile" href="sql-formatter">
<div class="feat-icon">SQL</div>
<div><div class="feat-name">SQL Formatter</div><div class="feat-desc">Format & beautify queries</div></div>
</a>
<a class="feat-tile" href="css-gradient">
<div class="feat-icon">🌈</div>
<div><div class="feat-name">CSS Gradient</div><div class="feat-desc">Visual gradient builder</div></div>
</a>
</div>
<h2 class="section-label">Browse by Category</h2>
<div class="cat-grid">
<a class="cat-card" href="encoding-tools">
<div class="cat-icon">b64</div>
<div class="cat-name">Encoding & Conversion</div>
<div class="cat-desc">Base64, URL encoding, hex conversion, image encoding, JSON to CSV, YAML to JSON, byte conversion and number base tools.</div>
<span class="cat-count">11 tools</span>
<div class="cat-tools-preview"><span>Base64</span><span>YAML→JSON</span><span>Bytes</span><span>PX→REM</span><span>+7</span></div>
</a>
<a class="cat-card" href="generation-tools">
<div class="cat-icon">{ }</div>
<div class="cat-name">Generation & Formatting</div>
<div class="cat-desc">JSON/SQL/XML formatting, UUID, QR, CSS gradients & box shadows, WCAG contrast, color palettes, meta tags and more.</div>
<span class="cat-count">15 tools</span>
<div class="cat-tools-preview"><span>SQL</span><span>XML</span><span>Gradient</span><span>Shadow</span><span>WCAG</span><span>+10</span></div>
</a>
<a class="cat-card" href="security-tools">
<div class="cat-icon">#</div>
<div class="cat-name">Security & Hashing</div>
<div class="cat-desc">JWT decoding and generation, MD5/SHA hash generation, file checksums, and token inspection tools.</div>
<span class="cat-count">3 tools</span>
<div class="cat-tools-preview"><span>JWT Decoder</span><span>JWT Generator</span><span>Hash Generator</span></div>
</a>
<a class="cat-card" href="text-tools">
<div class="cat-icon">.*</div>
<div class="cat-name">Code & Text Tools</div>
<div class="cat-desc">Regex testing, text comparison, markdown editing, case conversion, string escaping, and regex explanation.</div>
<span class="cat-count">9 tools</span>
<div class="cat-tools-preview"><span>Regex</span><span>Diff</span><span>Markdown</span><span>Case</span><span>Char Count</span><span>AI Tokens</span><span>+3</span></div>
</a>
<a class="cat-card" href="devops-tools">
<div class="cat-icon">JS</div>
<div class="cat-name">Optimization & DevOps</div>
<div class="cat-desc">HTML/CSS/JS minification, cron parsing, chmod, HTTP request builder, git commands reference.</div>
<span class="cat-count">8 tools</span>
<div class="cat-tools-preview"><span>HTML Minify</span><span>CSS Minify</span><span>JS Minify</span><span>Cron</span><span>Chmod</span><span>cURL Gen</span><span>Git</span></div>
</a>
<a class="cat-card" href="network-tools">
<div class="cat-icon">IP</div>
<div class="cat-name">Network & Time</div>
<div class="cat-desc">IP lookup, subnet calculator, DNS lookup (DoH), timestamp converter, relative time calculator.</div>
<span class="cat-count">4 tools</span>
<div class="cat-tools-preview"><span>IP Lookup</span><span>DNS</span><span>Timestamp Diff</span><span>Relative Time</span></div>
</a>
</div>
<h2 class="section-label">Engineering Guides</h2>
<div class="cat-grid">
<a class="cat-card" href="/guides/complete-uuid-guide">
<div class="cat-icon">UID</div>
<div class="cat-name">The Complete Guide to UUIDs</div>
<div class="cat-desc">RFC 9562 reference for all seven UUID versions. v4 vs v7 index fragmentation, ULID/NanoID/CUID2, language code, decision matrix.</div>
<span class="cat-count">25-min read</span>
<div class="cat-tools-preview"><span>UUIDv4</span><span>UUIDv7</span><span>ULID</span><span>NanoID</span><span>RFC 9562</span></div>
</a>
<a class="cat-card" href="/guides/web-accessibility-guide">
<div class="cat-icon">a11y</div>
<div class="cat-name">WCAG 2.1 AA Implementation Guide</div>
<div class="cat-desc">The reference that gets sites through accessibility audits — EAA / ADA legal context, contrast math, ARIA, screen reader testing.</div>
<span class="cat-count">28-min read</span>
<div class="cat-tools-preview"><span>WCAG 2.1</span><span>EAA</span><span>ADA</span><span>ARIA</span><span>Contrast</span></div>
</a>
<a class="cat-card" href="/guides/web-performance-guide">
<div class="cat-icon">⚡</div>
<div class="cat-name">Web Performance Optimization 2026</div>
<div class="cat-desc">Core Web Vitals deep dive: LCP, INP (replaced FID March 2024), CLS, TTFB. Asset, font, image and JS optimization patterns.</div>
<span class="cat-count">24-min read</span>
<div class="cat-tools-preview"><span>LCP</span><span>INP</span><span>CLS</span><span>TTFB</span><span>CrUX</span></div>
</a>
<a class="cat-card" href="/guides/api-authentication-guide">
<div class="cat-icon">JWT</div>
<div class="cat-name">API Authentication Guide 2026</div>
<div class="cat-desc">JWT vs sessions, OAuth 2.1 flows, API key rotation, mTLS. The alg=none and key-confusion attacks and the patterns that prevent them.</div>
<span class="cat-count">26-min read</span>
<div class="cat-tools-preview"><span>JWT</span><span>OAuth 2.1</span><span>PKCE</span><span>mTLS</span><span>API Keys</span></div>
</a>
</div>
<h2 class="section-label">What's inside FreeDevTool</h2>
<div class="home-intro" style="max-width:720px; color:var(--text2); font-size:14.5px; line-height:1.75; margin-bottom:36px">
<p>FreeDevTool is a single-page reference for the small, repetitive tasks that fill a developer's day — and the reason "developer tools that actually work fast" is the headline. Every tool runs entirely in your browser. Whatever you paste, type, or upload (a JSON response, a JWT bearer token, a Base64 string, a regex pattern, a YAML config, an image to inline as a data URI) never reaches our servers. There is no account to create, no upgrade prompt, and no advertising.</p>
<p>The 50 tools cluster into seven categories. The most-used ones format and validate data: <strong style="color:var(--text)">JSON formatter</strong>, <strong style="color:var(--text)">SQL formatter</strong>, <strong style="color:var(--text)">XML formatter</strong>, <strong style="color:var(--text)">YAML to JSON converter</strong>. Encoding tools handle the formats data needs to travel in: <strong style="color:var(--text)">Base64 encoder</strong>, <strong style="color:var(--text)">URL encoder</strong>, <strong style="color:var(--text)">HTML entity encoder</strong>, hex to RGB, image to Base64. Security and auth-debugging tools cover the everyday grind: <strong style="color:var(--text)">JWT decoder</strong>, JWT generator, MD5 / SHA-256 / SHA-512 hash generator. Code-and-text tools include the <strong style="color:var(--text)">regex tester</strong>, regex explainer, text diff, markdown preview, AI token counter for GPT & Claude prompts, and a string case converter.</p>
<p>The toolbox is built on plain HTML, CSS, and vanilla JavaScript — no frameworks, no render-blocking bundles. Pages load in under one second from Cloudflare's global CDN. Tools follow the relevant standards: UUIDs are generated per <a href="https://datatracker.ietf.org/doc/html/rfc4122" rel="noopener" style="color:var(--accent); text-decoration:none">RFC 4122</a>, JWT tokens parsed per <a href="https://datatracker.ietf.org/doc/html/rfc7519" rel="noopener" style="color:var(--accent); text-decoration:none">RFC 7519</a>, regex follows the JavaScript flavor documented on <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions" rel="noopener" style="color:var(--accent); text-decoration:none">MDN</a>, and contrast checks use the official <a href="https://www.w3.org/WAI/WCAG21/quickref/" rel="noopener" style="color:var(--accent); text-decoration:none">WCAG</a> ratios. Open the search box, type the task, and start working.</p>
</div>
<div class="cta-strip">
<div>
<h3>Privacy by design</h3>
<p>Every tool runs 100% client-side. Your data never leaves your browser.</p>
<div class="privacy-points">
<span class="pp">No signup required</span>
<span class="pp">No server processing</span>
<span class="pp">Works offline</span>
<span class="pp">No data logging</span>
</div>
</div>
</div>
</div>
<footer>
<div class="last-updated" style="text-align:center;font-size:12px;color:var(--text3);margin-bottom:12px">Last updated: May 2026 · Maintained by <a href="/about">Anees Ur Rehman</a></div>
<div>© 2026 FreeDevTool. Built for developers, by developers.</div>
<div class="footer-links">
<a href="/guides">Guides</a>
<a href="about">About</a>
<a href="privacy">Privacy Policy</a>
<a href="terms">Terms of Use</a>
</div>
</footer>
<script>
const allTools=[
{name:"Base64 Encoder / Decoder",href:"base64-encoder",icon:"b64",keys:"base64 encoder decoder encode decode",cat:"Encoding"},
{name:"UNIX Timestamp Converter",href:"unix-timestamp-converter",icon:"⏱",keys:"unix timestamp converter epoch time date",cat:"Encoding"},
{name:"URL Encoder / Decoder",href:"url-encoder",icon:"%",keys:"url encoder decoder percent encoding query string",cat:"Encoding"},
{name:"Hex to RGB Converter",href:"hex-to-rgb",icon:"🎨",keys:"hex to rgb rgba hsl color converter css",cat:"Encoding"},
{name:"HTML Entity Encoder",href:"html-entity",icon:"&",keys:"html entity encoder decoder special characters xss",cat:"Encoding"},
{name:"Image to Base64 Encoder",href:"base64-image",icon:"🖼",keys:"image to base64 encoder data uri png jpg svg",cat:"Encoding"},
{name:"JSON to CSV Converter",href:"json-to-csv",icon:"CSV",keys:"json to csv converter download excel google sheets",cat:"Encoding"},
{name:"Number Base Converter",href:"number-base",icon:"01",keys:"number base converter binary decimal hex octal radix",cat:"Encoding"},
{name:"UUID Generator",href:"uuid-generator",icon:"uid",keys:"uuid generator v4 guid unique id",cat:"Generation"},
{name:"JSON Formatter & Validator",href:"json-formatter",icon:"{ }",keys:"json formatter validator pretty print beautifier",cat:"Generation"},
{name:"Lorem Ipsum Generator",href:"lorem-ipsum",icon:"Aa",keys:"lorem ipsum generator placeholder dummy text",cat:"Generation"},
{name:"Password Generator",href:"password-generator",icon:"🔑",keys:"password generator strong random secure",cat:"Generation"},
{name:"QR Code Generator",href:"qr-generator",icon:"QR",keys:"qr code generator url wifi barcode",cat:"Generation"},
{name:"Color Palette Generator",href:"color-picker",icon:"🎨",keys:"color picker palette generator harmony complementary contrast",cat:"Generation"},
{name:"URL Slug Generator",href:"slug-generator",icon:"🔗",keys:"url slug generator seo friendly permalink kebab case",cat:"Generation"},
{name:"JWT Decoder & Inspector",href:"jwt-decoder",icon:"jwt",keys:"jwt decoder token inspector oauth bearer",cat:"Security"},
{name:"Hash Generator — MD5 / SHA",href:"hash-generator",icon:"#",keys:"hash generator md5 sha256 sha512 sha1 checksum",cat:"Security"},
{name:"Regex Tester & Debugger",href:"regex-tester",icon:".*",keys:"regex tester regular expression debugger pattern matcher",cat:"Text"},
{name:"Text Diff Checker",href:"text-diff",icon:"±",keys:"text diff checker compare side by side",cat:"Text"},
{name:"Markdown Editor & Preview",href:"markdown-preview",icon:"MD",keys:"markdown editor preview live github flavored gfm",cat:"Text"},
{name:"Regex Explainer",href:"regex-explainer",icon:"?=",keys:"regex explainer translator plain english breakdown",cat:"Text"},
{name:"String Case Converter",href:"case-converter",icon:"Aa",keys:"case converter camelcase snake_case kebab pascal title",cat:"Text"},
{name:"String Escape & Unescape",href:"string-escape",icon:"\\",keys:"string escape unescape json html url javascript backslash",cat:"Text"},
{name:"CSS Minifier & Beautifier",href:"css-minifier",icon:"CSS",keys:"css minifier beautifier compress optimize",cat:"DevOps"},
{name:"JavaScript Minifier",href:"js-minifier",icon:"JS",keys:"javascript minifier beautifier compress uglify js",cat:"DevOps"},
{name:"Cron Expression Generator",href:"cron-parser",icon:"⏰",keys:"cron expression generator parser crontab scheduler",cat:"DevOps"},
{name:"IP Address Lookup",href:"ip-lookup",icon:"IP",keys:"ip address lookup subnet calculator cidr ipv4 ipv6 network",cat:"Network"},
{name:"Timestamp Diff Calculator",href:"timestamp-diff",icon:"⏱",keys:"timestamp diff calculator time difference duration unix epoch",cat:"Network"},
{name:"SQL Formatter & Beautifier",href:"sql-formatter",icon:"SQL",keys:"sql formatter beautifier query pretty print minify mysql postgresql",cat:"Generation"},
{name:"YAML to JSON Converter",href:"yaml-to-json",icon:"yml",keys:"yaml to json converter yml docker compose kubernetes config",cat:"Encoding"},
{name:"JWT Generator",href:"jwt-generator",icon:"jwt",keys:"jwt generator json web token create sign hmac sha256",cat:"Security"},
{name:"HTTP Status Codes Reference",href:"http-status",icon:"HTTP",keys:"http status codes reference 404 301 500 200 api response",cat:"Generation"},
{name:"Meta Tag Generator",href:"meta-tag-generator",icon:"SEO",keys:"meta tag generator seo open graph title description twitter card",cat:"Generation"},
{name:"Chmod Calculator",href:"chmod-calculator",icon:"rwx",keys:"chmod calculator unix linux file permissions octal symbolic 755 644",cat:"DevOps"},
{name:"Byte Converter",href:"byte-converter",icon:"B",keys:"byte converter kb mb gb tb data size unit binary decimal",cat:"Encoding"},
{name:"CSS Gradient Generator",href:"css-gradient",icon:"🌈",keys:"css gradient generator linear radial conic color stops background",cat:"Generation"},
{name:"Open Graph Preview",href:"og-preview",icon:"OG",keys:"open graph preview og tag tester social media facebook twitter linkedin",cat:"Generation"},
{name:"XML Formatter & Validator",href:"xml-formatter",icon:"</>",keys:"xml formatter validator beautify pretty print minify soap rss",cat:"Generation"},
{name:"CSS Box Shadow Generator",href:"css-box-shadow",icon:"▣",keys:"css box shadow generator visual sliders material soft neon inset",cat:"Generation"},
{name:"WCAG Contrast Checker",href:"wcag-contrast",icon:"Aa",keys:"wcag contrast checker accessibility aa aaa ratio color blind a11y",cat:"Generation"},
{name:"Color Name from Hex",href:"color-name",icon:"🎨",keys:"color name from hex nearest css named color tomato dodgerblue 147",cat:"Generation"},
{name:"Character Count / String Length",href:"char-counter",icon:"Σ",keys:"character count online string length counter word line paragraph bytes tweet sms",cat:"Text"},
{name:"Word / Rich Text to Markdown",href:"word-to-markdown",icon:"MD",keys:"word to markdown converter text rich google docs paste html gfm",cat:"Text"},
{name:"AI Token Counter (GPT / Claude)",href:"ai-token-counter",icon:"AI",keys:"ai token counter gpt claude cost estimator openai anthropic pricing",cat:"Text"},
{name:"HTML Minifier & Beautifier",href:"html-minifier",icon:"<>",keys:"html minifier online beautifier compress optimize whitespace comments",cat:"DevOps"},
{name:"Git Commands Cheatsheet",href:"git-cheatsheet",icon:"⎇",keys:"git commands cheatsheet reference branch merge rebase stash tag clone",cat:"DevOps"},
{name:"HTTP Request Builder (curl)",href:"http-request-builder",icon:"cURL",keys:"http request builder curl fetch axios python requests node generator",cat:"DevOps"},
{name:"Pixel to REM Converter",href:"px-to-rem",icon:"rem",keys:"px to rem converter pixel em css responsive font size base",cat:"Encoding"},
{name:"DNS Lookup Tool",href:"dns-lookup",icon:"DNS",keys:"dns lookup tool a aaaa mx txt ns cname soa caa cloudflare doh",cat:"Network"},
{name:"Relative Time Calculator",href:"relative-time",icon:"⏲",keys:"relative time calculator timestamp ago from now human readable",cat:"Network"}
];
const searchInput=document.getElementById('tool-search');
const searchResults=document.getElementById('search-results');
const searchContainer=document.querySelector('.search-bar');
searchInput.addEventListener('input',()=>{
const q=searchInput.value.toLowerCase().trim();
if(!q){searchResults.classList.remove('visible');return}
const matches=allTools.filter(t=>(t.name+' '+t.keys).toLowerCase().includes(q));
if(!matches.length){
searchResults.innerHTML='<div class="sr-empty">No tools found for "'+q+'"</div>';
} else {
searchResults.innerHTML=matches.map(t=>'<a href="'+t.href+'"><div class="sr-icon">'+t.icon+'</div><div><div class="sr-name">'+t.name+'</div><div class="sr-desc">'+t.cat+'</div></div></a>').join('');
}
searchResults.classList.add('visible');
});
searchInput.addEventListener('keydown',e=>{
if(e.key==="Escape") searchResults.classList.remove('visible');
});
searchContainer.addEventListener('focusout',e=>{
const related=e.relatedTarget;
if(!related || !searchContainer.contains(related)){
searchResults.classList.remove('visible');
}
});
searchInput.addEventListener('focus',()=>{if(searchInput.value.trim())searchInput.dispatchEvent(new Event('input'))});
// Close dropdown when clicking outside
document.addEventListener('click',e=>{
if(!searchContainer.contains(e.target)) searchResults.classList.remove('visible');
const dd=document.getElementById('tools-dropdown');
if(dd && !dd.contains(e.target))dd.classList.remove('open');
});
</script>
</body>
</html>