The SPA Indexing Problem
Traditional websites serve complete HTML that search engines can immediately parse. Single-page applications serve a minimal HTML shell and use JavaScript to load and render content. While Googlebot executes JavaScript, it's slower and less reliable than parsing static HTML.
Server-Side Rendering (SSR)
SSR generates complete HTML on the server for each request. The browser receives fully rendered content, and JavaScript then "hydrates" it to add interactivity. This gives search engines immediate access to content while preserving the SPA experience. Next.js, Nuxt.js, and SvelteKit provide SSR out of the box.
Static Site Generation (SSG)
For content that doesn't change per-request, SSG pre-renders pages at build time. Pages are served as static HTML โ the fastest possible delivery. Ideal for blogs, documentation, and marketing pages. Rebuild when content changes. Works with any CDN and requires no server-side runtime.
Dynamic Rendering
For legacy SPAs that can't easily add SSR, dynamic rendering serves pre-rendered HTML to search engine bots while serving the SPA to regular users. This is a temporary workaround, not a long-term strategy. Google has stated it will eventually deprecate support for dynamic rendering.
Critical SEO Elements for SPAs
Ensure unique </code> and <span class="glossary-term" data-term="Meta Description" data-slug="meta-description" data-definition="An HTML meta tag providing a brief summary of a page's content, often displayed in search engine results.">meta description</span> tags for each route. Update <code><title></code> and meta tags on client-side route changes (not just on initial load). Implement canonical URLs for each route. Generate a dynamic <span class="glossary-term" data-term="XML" data-slug="xml" data-definition="A markup language for encoding structured data in a format readable by both humans and machines.">XML</span> sitemap listing all routes. Use internal links (<code><a href></code>) rather than JavaScript click handlers for navigation โ Google follows <code><a></code> tags more reliably than JavaScript navigation.</p>
<h3 id="monitoring-indexing">Monitoring Indexing</h3>
<p>Use Google Search Console's URL Inspection tool to see how Google renders your pages. Check for missing content, broken JavaScript, and render errors. Compare the rendered HTML to what a browser shows. Monitor the Coverage report for indexing errors specific to JavaScript sites.</p>
</div>
</section>
<section class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Alat Terkait</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
<a href="/id/seo/serp-preview/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Pratinjau SERP</span>
</a>
<a href="/id/seo/og-tag-debugger/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
D
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Debugger Tag OG</span>
</a>
<a href="/id/seo/heading-analyzer/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Penganalisis Heading</span>
</a>
<a href="/id/seo/keyword-density/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Penganalisis Kepadatan Kata Kunci</span>
</a>
<a href="/id/seo/readability-score/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
S
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Skor Keterbacaan</span>
</a>
<a href="/id/seo/sitemap-generator/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
G
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Generator Sitemap XML</span>
</a>
<a href="/id/seo/schema-generator/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
G
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Generator Schema.org</span>
</a>
<a href="/id/seo/link-extractor/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
E
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Ekstraktor Tautan</span>
</a>
<a href="/id/seo/canonical-checker/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Pemeriksa Tag Canonical</span>
</a>
<a href="/id/seo/robots-txt-analyzer/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Penganalisis Robots.txt</span>
</a>
<a href="/id/seo/structured-data-validator/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
V
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Validator Data Terstruktur</span>
</a>
<a href="/id/seo/word-count-seo/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
P
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Penghitung Kata & Skor SEO</span>
</a>
<a href="/id/seo/seo-meta-length-checker/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
M
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Meta Length Checker</span>
</a>
<a href="/id/seo/seo-url-slug-generator/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
U
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">URL Slug Generator</span>
</a>
<a href="/id/seo/seo-keyword-density-analyzer/"
class="flex items-center gap-3 rounded-lg border p-3 transition-colors hover:border-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<span class="inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-white text-xs font-bold"
style="background-color: var(--accent)">
K
</span>
<span class="text-sm font-medium text-gray-900 dark:text-white">Keyword Density Analyzer</span>
</a>
</div>
</section>
<section class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Format Terkait</h2>
<div class="flex flex-wrap gap-2">
<a href="/id/formats/html/"
class="rounded-lg border px-3 py-2 text-sm font-mono transition-colors hover:text-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
.html
</a>
<a href="/id/formats/json/"
class="rounded-lg border px-3 py-2 text-sm font-mono transition-colors hover:text-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
.json
</a>
<a href="/id/formats/txt/"
class="rounded-lg border px-3 py-2 text-sm font-mono transition-colors hover:text-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
.txt
</a>
<a href="/id/formats/xml/"
class="rounded-lg border px-3 py-2 text-sm font-mono transition-colors hover:text-accent"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
.xml
</a>
</div>
</section>
<section class="mb-8">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Panduan Terkait</h2>
<div class="space-y-2.5">
<a href="/id/guides/meta-tags-seo-guide/"
class="block rounded-lg border p-4 transition-colors"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<p class="font-medium text-gray-900 dark:text-white text-sm">Meta Tags for SEO: Title, Description, and Open Graph</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">Meta tags control how your pages appear in search results and social media shares. This guide covers the essential meta tags for SEO, Open Graph for social sharing, and Twitter Card markup.</p>
</a>
<a href="/id/guides/structured-data-schema-org/"
class="block rounded-lg border p-4 transition-colors"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<p class="font-medium text-gray-900 dark:text-white text-sm">Structured Data and Schema.org: A Practical Guide</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">Structured data helps search engines understand your content and can generate rich results like star ratings, FAQs, and product cards. Learn how to implement Schema.org markup effectively with JSON-LD.</p>
</a>
<a href="/id/guides/robots-txt-sitemap-best-practices/"
class="block rounded-lg border p-4 transition-colors"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<p class="font-medium text-gray-900 dark:text-white text-sm">Robots.txt and Sitemap.xml: Crawl Control Best Practices</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">Robots.txt and sitemap.xml are the primary tools for controlling how search engines discover and crawl your site. Misconfiguration can accidentally block important pages or waste crawl budget on irrelevant ones.</p>
</a>
<a href="/id/guides/core-web-vitals-explained/"
class="block rounded-lg border p-4 transition-colors"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<p class="font-medium text-gray-900 dark:text-white text-sm">Core Web Vitals: LCP, INP, and CLS Explained</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">Core Web Vitals are Google's metrics for measuring real-world user experience. This guide explains LCP, INP, and CLS, their impact on search rankings, and practical strategies for improving each metric.</p>
</a>
<a href="/id/guides/troubleshooting-search-console-errors/"
class="block rounded-lg border p-4 transition-colors"
style="border-color: var(--border);"
onmouseenter="this.style.borderColor='var(--lemon-bright)'"
onmouseleave="this.style.borderColor='var(--border)'">
<p class="font-medium text-gray-900 dark:text-white text-sm">Troubleshooting Google Search Console Errors</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-1">Google Search Console reports crawling, indexing, and structured data errors that directly affect your search visibility. This guide helps you interpret and fix the most common GSC error types.</p>
</a>
</div>
</section>
</div>
<aside class="hidden lg:block">
<div class="sticky top-24">
<nav class="guide-toc-sidebar">
<h2 class="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3 px-3">On this page</h2>
<ul class="space-y-0.5 text-[13px]">
<li>
<a href="#the-spa-indexing-problem"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors "
:class="activeHeading === 'the-spa-indexing-problem' ? 'guide-toc-active' : ''"
data-anchor="the-spa-indexing-problem">
The SPA Indexing Problem
</a>
</li>
<li>
<a href="#server-side-rendering-ssr"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors pl-6 text-[12.5px]"
:class="activeHeading === 'server-side-rendering-ssr' ? 'guide-toc-active' : ''"
data-anchor="server-side-rendering-ssr">
Server-Side Rendering (SSR)
</a>
</li>
<li>
<a href="#static-site-generation-ssg"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors pl-6 text-[12.5px]"
:class="activeHeading === 'static-site-generation-ssg' ? 'guide-toc-active' : ''"
data-anchor="static-site-generation-ssg">
Static Site Generation (SSG)
</a>
</li>
<li>
<a href="#dynamic-rendering"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors pl-6 text-[12.5px]"
:class="activeHeading === 'dynamic-rendering' ? 'guide-toc-active' : ''"
data-anchor="dynamic-rendering">
Dynamic Rendering
</a>
</li>
<li>
<a href="#critical-seo-elements-for-spas"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors pl-6 text-[12.5px]"
:class="activeHeading === 'critical-seo-elements-for-spas' ? 'guide-toc-active' : ''"
data-anchor="critical-seo-elements-for-spas">
Critical SEO Elements for SPAs
</a>
</li>
<li>
<a href="#monitoring-indexing"
class="guide-toc-link block rounded-md px-3 py-1.5 transition-colors pl-6 text-[12.5px]"
:class="activeHeading === 'monitoring-indexing' ? 'guide-toc-active' : ''"
data-anchor="monitoring-indexing">
Monitoring Indexing
</a>
</li>
</ul>
</nav>
</div>
</aside>
</div>
</div>
</article>
</main>
<!-- Footer -->
<footer class="mt-auto" style="background: #111827; color: #9CA3AF;">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-10 pb-6" x-data="{ openCol: null }">
<!-- Row 1: Brand + Resources + Developers + Company -->
<div class="md:grid md:gap-10" style="grid-template-columns: 1.5fr 1fr 1fr 1fr;">
<!-- Brand column -->
<div class="mb-8 md:mb-0">
<div class="flex items-center gap-2 mb-3">
<svg class="h-5 w-5 shrink-0" viewBox="0 0 32 32" fill="none">
<ellipse cx="16" cy="17" rx="11" ry="12" fill="#FBBF24"/>
<ellipse cx="16" cy="17" rx="11" ry="12" fill="url(#lemon-grad-f)"/>
<path d="M16 5c-1-3 0-4 2-4.5s3 1 2 3.5" fill="#22C55E"/>
<path d="M16 5c1-3 0-4-2-4.5s-3 1-2 3.5" fill="#16A34A"/>
<defs><linearGradient id="lemon-grad-f" x1="5" y1="8" x2="27" y2="29"><stop stop-color="#FBBF24"/><stop offset="1" stop-color="#D97706"/></linearGradient></defs>
</svg>
<span class="text-white font-bold text-sm">peasy</span>
<span style="color: #4B5563; font-weight: 400;">/</span>
<span style="color: var(--accent);" class="font-bold text-sm">safe</span>
</div>
<p class="text-sm leading-relaxed max-w-xs" style="color: #6B7280;">
Free online tools that run in your browser. No uploads, no sign-ups, no tracking.
</p>
</div>
<!-- Resources column -->
<div class="border-t border-gray-800 md:border-0 py-3 md:py-0">
<button @click="openCol = openCol === 'resources' ? null : 'resources'"
class="flex w-full items-center justify-between md:pointer-events-none md:cursor-default"
style="min-height: 44px;">
<span class="text-xs font-bold uppercase tracking-[0.08em] text-gray-300">Resources</span>
<svg class="h-4 w-4 md:hidden transition-transform" :class="openCol === 'resources' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<ul class="space-y-2 mt-2 text-sm md:!block" x-show="openCol === 'resources'" x-collapse x-cloak>
<li><a href="/guides/" class="hover:text-white transition-colors">Panduan <span class="text-xs text-gray-500">(33)</span></a></li>
<li><a href="/glossary/" class="hover:text-white transition-colors">Glosarium <span class="text-xs text-gray-500">(45)</span></a></li>
<li><a href="/use-cases/" class="hover:text-white transition-colors">Studi Kasus <span class="text-xs text-gray-500">(302)</span></a></li>
<li><a href="/formats/" class="hover:text-white transition-colors">Format File <span class="text-xs text-gray-500">(131)</span></a></li>
<li><a href="/convert/" class="hover:text-white transition-colors">Konversi <span class="text-xs text-gray-500">(1484)</span></a></li>
</ul>
</div>
<!-- Developers column -->
<div class="border-t border-gray-800 md:border-0 py-3 md:py-0">
<button @click="openCol = openCol === 'dev' ? null : 'dev'"
class="flex w-full items-center justify-between md:pointer-events-none md:cursor-default"
style="min-height: 44px;">
<span class="text-xs font-bold uppercase tracking-[0.08em] text-gray-300">Developers</span>
<svg class="h-4 w-4 md:hidden transition-transform" :class="openCol === 'dev' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<ul class="space-y-2 mt-2 text-sm md:!block" x-show="openCol === 'dev'" x-collapse x-cloak>
<li><a href="/developers/" class="hover:text-white transition-colors">API Documentation</a></li>
<li><a href="/api/openapi.json" class="hover:text-white transition-colors">OpenAPI Spec</a></li>
<li><a href="/llms.txt" class="hover:text-white transition-colors">llms.txt</a></li>
</ul>
</div>
<!-- Company column -->
<div class="border-t border-gray-800 md:border-0 py-3 md:py-0">
<button @click="openCol = openCol === 'company' ? null : 'company'"
class="flex w-full items-center justify-between md:pointer-events-none md:cursor-default"
style="min-height: 44px;">
<span class="text-xs font-bold uppercase tracking-[0.08em] text-gray-300">Company</span>
<svg class="h-4 w-4 md:hidden transition-transform" :class="openCol === 'company' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<ul class="space-y-2 mt-2 text-sm md:!block" x-show="openCol === 'company'" x-collapse x-cloak>
<li><a href="/about/" class="hover:text-white transition-colors">About</a></li>
<li><a href="/about/technology/" class="hover:text-white transition-colors">Technology</a></li>
<li><a href="/privacy/" class="hover:text-white transition-colors">Kebijakan Privasi</a></li>
<li><a href="/terms/" class="hover:text-white transition-colors">Ketentuan Layanan</a></li>
</ul>
</div>
</div>
<!-- Row 2: Per-category tool links (mega-footer) -->
<div class="border-t border-gray-800 mt-8 pt-8">
<h3 class="text-xs font-bold uppercase tracking-[0.08em] text-gray-300 mb-5">All Tools by Category</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-x-8 gap-y-6">
<div>
<a href="https://peasypdf.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #EF4444;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #EF4444;"></span>
PDF Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasypdf.com/pdf/merge-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Merge PDF</a></li>
<li><a href="https://peasypdf.com/pdf/split-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Split PDF</a></li>
<li><a href="https://peasypdf.com/pdf/compress-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Compress PDF</a></li>
<li><a href="https://peasypdf.com/pdf/rotate-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Rotate PDF</a></li>
<li><a href="https://peasypdf.com/pdf/add-page-numbers/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Add Page Numbers</a></li>
<li><a href="https://peasypdf.com/pdf/pdf-to-jpg/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF to JPG</a></li>
<li><a href="https://peasypdf.com/pdf/watermark-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Watermark PDF</a></li>
<li><a href="https://peasypdf.com/pdf/reorder-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Reorder PDF Pages</a></li>
<li><a href="https://peasypdf.com/pdf/flatten-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Flatten PDF</a></li>
<li><a href="https://peasypdf.com/pdf/edit-pdf-metadata/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Edit PDF Metadata</a></li>
<li><a href="https://peasypdf.com/pdf/sign-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Sign PDF</a></li>
<li><a href="https://peasypdf.com/pdf/jpg-to-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">JPG to PDF</a></li>
<li><a href="https://peasypdf.com/pdf/extract-text-from-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Extract Text from PDF</a></li>
<li><a href="https://peasypdf.com/pdf/delete-pdf-pages/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ํ์ด์ง ์ญ์ </a></li>
<li><a href="https://peasypdf.com/pdf/reverse-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ์ญ์ ์ ๋ ฌ</a></li>
<li><a href="https://peasypdf.com/pdf/extract-pdf-pages/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ํ์ด์ง ์ถ์ถ</a></li>
<li><a href="https://peasypdf.com/pdf/odd-even-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ์/์ง์ ํ์ด์ง ์ถ์ถ</a></li>
<li><a href="https://peasypdf.com/pdf/resize-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ํ์ด์ง ํฌ๊ธฐ ๋ณ๊ฒฝ</a></li>
<li><a href="https://peasypdf.com/pdf/crop-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ์๋ฅด๊ธฐ</a></li>
<li><a href="https://peasypdf.com/pdf/insert-blank-pages/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋น ํ์ด์ง ์ฝ์
</a></li>
<li><a href="https://peasypdf.com/pdf/duplicate-pdf-pages/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF ํ์ด์ง ๋ณต์ </a></li>
<li><a href="https://peasypdf.com/pdf/pdf-to-png/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF๋ฅผ PNG๋ก ๋ณํ</a></li>
<li><a href="https://peasypdf.com/pdf/pdf-header-footer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋จธ๋ฆฌ๊ธ ๋ฐ ๋ฐ๋ฅ๊ธ ์ถ๊ฐ</a></li>
<li><a href="https://peasypdf.com/pdf/add-text-to-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF์ ํ
์คํธ ์ถ๊ฐ</a></li>
<li><a href="https://peasypdf.com/pdf/add-image-to-pdf/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">PDF์ ์ด๋ฏธ์ง ์ถ๊ฐ</a></li>
</ul>
</div>
<div>
<a href="https://peasysafe.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #64748B;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #64748B;"></span>
Privacy & Security
</a>
<ul class="space-y-1">
<li><a href="https://peasysafe.com/safe/safe-password-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Password Generator</a></li>
<li><a href="https://peasysafe.com/safe/password-strength/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Password Strength Checker</a></li>
<li><a href="https://peasysafe.com/safe/safe-hash-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Hash Generator</a></li>
<li><a href="https://peasysafe.com/safe/hmac-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">HMAC Generator</a></li>
<li><a href="https://peasysafe.com/safe/aes-encrypt/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">AES Encrypt / Decrypt</a></li>
<li><a href="https://peasysafe.com/safe/random-string/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Random String Generator</a></li>
<li><a href="https://peasysafe.com/safe/csp-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSP Header Generator</a></li>
<li><a href="https://peasysafe.com/safe/text-redactor/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Text Redactor</a></li>
<li><a href="https://peasysafe.com/safe/cors-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CORS Header Generator</a></li>
<li><a href="https://peasysafe.com/safe/sri-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SRI Hash Generator</a></li>
<li><a href="https://peasysafe.com/safe/base64-encoder-decoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Base64 ์ธ์ฝ๋ / ๋์ฝ๋</a></li>
<li><a href="https://peasysafe.com/safe/jwt-decoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">JWT Decoder</a></li>
<li><a href="https://peasysafe.com/safe/uuid-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">UUID Generator</a></li>
<li><a href="https://peasysafe.com/safe/totp-configurator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">TOTP ์ค์ ๊ธฐ</a></li>
<li><a href="https://peasysafe.com/safe/ssl-certificate-decoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SSL ์ธ์ฆ์ ๋์ฝ๋</a></li>
</ul>
</div>
<div>
<a href="https://peasysocial.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #F43F5E;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #F43F5E;"></span>
Social Media Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasysocial.com/social/social-char-counter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์
๋ฏธ๋์ด ๊ธ์ ์ ์นด์ดํฐ</a></li>
<li><a href="https://peasysocial.com/social/social-hashtag-tool/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํด์ํ๊ทธ ์ถ์ถ ๋ฐ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-mention-extractor/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์
๋ฉ์
์ถ์ถ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-thread-splitter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ค๋ ๋ ๋ถํ ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-emoji-tool/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ด๋ชจ์ง ์ ๊ฑฐ ๋ฐ ์ถ์ถ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-bio-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฐ์ด์ค ํฌ๋งทํฐ</a></li>
<li><a href="https://peasysocial.com/social/social-cta-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CTA ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-engagement-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ฐธ์ฌ๋ ๋ถ์๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-post-preview/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๊ฒ์๋ฌผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-utm-builder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">UTM ๋งํฌ ๋น๋</a></li>
<li><a href="https://peasysocial.com/social/social-handle-checker/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ฌ์ฉ์๋ช
๊ฒ์ฌ๊ธฐ</a></li>
<li><a href="https://peasysocial.com/social/social-image-size-guide/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ด๋ฏธ์ง ํฌ๊ธฐ ๊ฐ์ด๋</a></li>
<li><a href="https://peasysocial.com/social/social-best-posting-times/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ต์ ๊ฒ์ ์๊ฐ</a></li>
<li><a href="https://peasysocial.com/social/thread-splitter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Thread Splitter</a></li>
<li><a href="https://peasysocial.com/social/caption-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Caption & Alt Text Formatter</a></li>
</ul>
</div>
<div>
<a href="https://peasygen.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #84CC16;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #84CC16;"></span>
Generator Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasygen.com/gen/gen-fake-data/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๊ฐ์ง ๋ฐ์ดํฐ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-mock-json/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ชฉ์
JSON ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-username/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ฌ์ฉ์๋ช
์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-color-palette/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์ ํ๋ ํธ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-lorem-markup/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Lorem ๋งํฌ์
์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-number/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋๋ค ์ซ์ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasygen.com/gen/gen-csv-data/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSV Data Generator</a></li>
<li><a href="https://peasygen.com/gen/gen-random-dates/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Random Date Generator</a></li>
<li><a href="https://peasygen.com/gen/gen-email-addresses/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Email Address Generator</a></li>
<li><a href="https://peasygen.com/gen/gen-avatar-svg/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Avatar Generator</a></li>
<li><a href="https://peasygen.com/gen/gen-cron-expression/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Cron Expression Builder</a></li>
<li><a href="https://peasygen.com/gen/gen-api-key/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">API Key Generator</a></li>
<li><a href="https://peasygen.com/gen/gen-short-id/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Short ID Generator</a></li>
<li><a href="https://peasygen.com/gen/regex-tester/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Regex Tester</a></li>
<li><a href="https://peasygen.com/gen/url-slug-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">URL Slug Generator</a></li>
</ul>
</div>
<div>
<a href="https://peasycss.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #EC4899;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #EC4899;"></span>
CSS Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasycss.com/css/css-minify/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ์ถ์๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-beautify/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ์ ๋ฆฌ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-gradient/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ๊ทธ๋ผ๋์ธํธ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-shadow/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ๋ฐ์ค ๊ทธ๋ฆผ์ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-flexbox/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Flexbox ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-grid/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Grid ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-animation/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ์ ๋๋ฉ์ด์
์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-border-radius/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ๋ชจ์๋ฆฌ ๋ฅ๊ธ๊ธฐ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-text-shadow/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ํ
์คํธ ๊ทธ๋ฆผ์ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-transform/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS ๋ณํ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasycss.com/css/css-unit-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Unit Converter</a></li>
<li><a href="https://peasycss.com/css/css-color-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Color Converter</a></li>
<li><a href="https://peasycss.com/css/css-media-query-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Media Query Generator</a></li>
<li><a href="https://peasycss.com/css/css-filter-effects/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Filter Effects</a></li>
<li><a href="https://peasycss.com/css/css-clip-path/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Clip-Path Generator</a></li>
</ul>
</div>
<div>
<a href="https://peasyimage.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #10B981;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #10B981;"></span>
Image Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasyimage.com/image/compress-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Compress Image</a></li>
<li><a href="https://peasyimage.com/image/resize-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Resize Image</a></li>
<li><a href="https://peasyimage.com/image/crop-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Crop Image</a></li>
<li><a href="https://peasyimage.com/image/rotate-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Rotate Image</a></li>
<li><a href="https://peasyimage.com/image/flip-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Flip Image</a></li>
<li><a href="https://peasyimage.com/image/convert-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Convert Image</a></li>
<li><a href="https://peasyimage.com/image/watermark-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Watermark Image</a></li>
<li><a href="https://peasyimage.com/image/svg-to-png/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SVG to PNG</a></li>
<li><a href="https://peasyimage.com/image/image-to-base64/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Image to Base64</a></li>
<li><a href="https://peasyimage.com/image/round-corners/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Round Corners</a></li>
<li><a href="https://peasyimage.com/image/add-border/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Add Border</a></li>
<li><a href="https://peasyimage.com/image/image-filters/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Image Filters</a></li>
<li><a href="https://peasyimage.com/image/adjust-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Adjust Image</a></li>
<li><a href="https://peasyimage.com/image/blur-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Blur Image</a></li>
<li><a href="https://peasyimage.com/image/sharpen-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Sharpen Image</a></li>
<li><a href="https://peasyimage.com/image/make-square/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Make Square</a></li>
<li><a href="https://peasyimage.com/image/grayscale-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ด๋ฏธ์ง ๊ทธ๋ ์ด์ค์ผ์ผ ๋ณํ</a></li>
<li><a href="https://peasyimage.com/image/sepia-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ธํผ์ ์ด๋ฏธ์ง</a></li>
<li><a href="https://peasyimage.com/image/pixelate-image/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ด๋ฏธ์ง ํฝ์
ํ</a></li>
<li><a href="https://peasyimage.com/image/strip-metadata/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ด๋ฏธ์ง ๋ฉํ๋ฐ์ดํฐ ์ ๊ฑฐ</a></li>
</ul>
</div>
<div>
<a href="https://peasydesign.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #D946EF;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #D946EF;"></span>
Design Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasydesign.com/design/design-palette/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์ ํ๋ ํธ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-typography/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ์
์ค์ผ์ผ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-spacing/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๊ฐ๊ฒฉ ์ค์ผ์ผ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-breakpoints/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฐ์ํ ๋ธ๋ ์ดํฌํฌ์ธํธ</a></li>
<li><a href="https://peasydesign.com/design/design-aspect-ratio/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ๋ฉด ๋น์จ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-color-shades/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์ ์์ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-font-pair/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๊ธ๊ผด ํ์ด๋ง ์ ์</a></li>
<li><a href="https://peasydesign.com/design/design-contrast/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋๋น ๊ฒ์ฌ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-tokens/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋์์ธ ํ ํฐ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasydesign.com/design/design-media-sizes/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์
๋ฏธ๋์ด ํฌ๊ธฐ ๊ฐ์ด๋</a></li>
<li><a href="https://peasydesign.com/design/design-golden-ratio-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Golden Ratio Calculator</a></li>
<li><a href="https://peasydesign.com/design/design-icon-size-guide/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">App Icon Size Guide</a></li>
<li><a href="https://peasydesign.com/design/design-shadow-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Shadow System Generator</a></li>
<li><a href="https://peasydesign.com/design/gradient-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Multi-Stop Gradient Generator</a></li>
<li><a href="https://peasydesign.com/design/css-pattern-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Pattern Generator</a></li>
</ul>
</div>
<div>
<a href="https://peasyvideo.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #8B5CF6;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #8B5CF6;"></span>
Video Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasyvideo.com/video/video-resolution/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํด์๋ ์ฐธ์กฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-bitrate/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋นํธ๋ ์ดํธ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-framerate/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ๋ ์ ๋ ์ดํธ ๋ณํ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-timecode/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ์์ฝ๋ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-aspect-ratio/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์์ ๋น์จ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-filesize/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ์ผ ํฌ๊ธฐ ์ถ์ ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-speed/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์๋ ๋ฐ ์ฌ๋ก๋ชจ์
๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-storage/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ ์ฅ ๊ณต๊ฐ ํ๋๋</a></li>
<li><a href="https://peasyvideo.com/video/video-subtitle-time/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์๋ง ์๊ฐ ๋ณํ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-bandwidth/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋์ญํญ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-color-space/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ ๊ณต๊ฐ ์ฐธ์กฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-codec/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ฝ๋ฑ ์ฐธ์กฐ</a></li>
<li><a href="https://peasyvideo.com/video/video-platform/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ๋ซํผ ์ฌ์ ๊ฐ์ด๋</a></li>
<li><a href="https://peasyvideo.com/video/video-chroma/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํฌ๋ก๋ง ์๋ธ์ํ๋ง ๊ฐ์ด๋</a></li>
<li><a href="https://peasyvideo.com/video/video-screen-record/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ๋ฉด ๋
นํ ๊ฐ์ด๋</a></li>
</ul>
</div>
<div>
<a href="https://peasyaudio.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #0EA5E9;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #0EA5E9;"></span>
Audio Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasyaudio.com/audio/audio-bpm/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">BPM ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-freq/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ฃผํ์ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-delay/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋๋ ์ด ํ์ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-db/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">dB ๋ณํ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-filesize/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ค๋์ค ํ์ผ ํฌ๊ธฐ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-note-chart/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์๊ณ ์ฃผํ์ ์ฐจํธ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-db-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฐ์๋ฒจ ์ฐธ์กฐ ๊ฐ์ด๋</a></li>
<li><a href="https://peasyaudio.com/audio/audio-latency/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ ์ดํด์ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-cents/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ผํธ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyaudio.com/audio/audio-loudness/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ผ์ฐ๋๋์ค ํ์ค ๊ฐ์ด๋</a></li>
<li><a href="https://peasyaudio.com/audio/audio-eq-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">EQ Frequency Reference</a></li>
<li><a href="https://peasyaudio.com/audio/audio-sample-rate-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Sample Rate Converter</a></li>
<li><a href="https://peasyaudio.com/audio/audio-bit-depth-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Bit Depth Analyzer</a></li>
<li><a href="https://peasyaudio.com/audio/chord-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Chord Reference</a></li>
<li><a href="https://peasyaudio.com/audio/key-scale-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Key & Scale Reference</a></li>
</ul>
</div>
<div>
<a href="https://peasyformats.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #F97316;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #F97316;"></span>
Format Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasyformats.com/doc/format-identifier/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Format Identifier</a></li>
<li><a href="https://peasyformats.com/doc/mime-type-lookup/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">MIME Type Lookup</a></li>
<li><a href="https://peasyformats.com/doc/base64-encoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Base64 Encoder / Decoder</a></li>
<li><a href="https://peasyformats.com/doc/url-encoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">URL Encoder / Decoder</a></li>
<li><a href="https://peasyformats.com/doc/html-entities/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">HTML Entity Encoder / Decoder</a></li>
<li><a href="https://peasyformats.com/doc/markdown-to-html/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Markdown to HTML Converter</a></li>
<li><a href="https://peasyformats.com/doc/yaml-json-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">YAML โ JSON Converter</a></li>
<li><a href="https://peasyformats.com/doc/line-ending-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Line Ending Converter</a></li>
<li><a href="https://peasyformats.com/doc/data-uri-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Data URI Generator</a></li>
<li><a href="https://peasyformats.com/doc/hex-dump-viewer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Hex Dump Viewer</a></li>
<li><a href="https://peasyformats.com/doc/unicode-escape-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Unicode Escape Converter</a></li>
<li><a href="https://peasyformats.com/doc/file-size-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">File Size Converter</a></li>
<li><a href="https://peasyformats.com/doc/charset-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Character Set Analyzer</a></li>
<li><a href="https://peasyformats.com/doc/format-comparison/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Format Comparison Guide</a></li>
<li><a href="https://peasyformats.com/doc/conversion-guide/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Conversion Guide</a></li>
</ul>
</div>
<div>
<a href="https://peasyqr.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #3B82F6;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #3B82F6;"></span>
QR & Barcode
</a>
<ul class="space-y-1">
<li><a href="https://peasyqr.com/qr/qr-data-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">QR ๋ฐ์ดํฐ ๋ถ์๊ธฐ</a></li>
<li><a href="https://peasyqr.com/qr/qr-capacity-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">QR ์ฉ๋ ์ฐธ์กฐ</a></li>
<li><a href="https://peasyqr.com/qr/qr-wifi-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Wi-Fi QR ์ค์ ๋น๋</a></li>
<li><a href="https://peasyqr.com/qr/qr-vcard-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">vCard QR ๋น๋</a></li>
<li><a href="https://peasyqr.com/qr/qr-error-correction/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ค๋ฅ ์ ์ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasyqr.com/qr/barcode-reference/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฐ์ฝ๋ ํ์ ์ฐธ์กฐ</a></li>
<li><a href="https://peasyqr.com/qr/barcode-validator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฐ์ฝ๋ ๊ฒ์ฆ๊ธฐ</a></li>
<li><a href="https://peasyqr.com/qr/qr-data-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">QR ๋ฐ์ดํฐ ํฌ๋งทํฐ</a></li>
<li><a href="https://peasyqr.com/qr/qr-event-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Event QR Generator</a></li>
<li><a href="https://peasyqr.com/qr/qr-email-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Email QR Generator</a></li>
<li><a href="https://peasyqr.com/qr/qr-sms-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SMS QR Generator</a></li>
<li><a href="https://peasyqr.com/qr/qr-geo-location/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Geo Location QR Generator</a></li>
<li><a href="https://peasyqr.com/qr/qr-phone-call/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Phone Call QR Generator</a></li>
<li><a href="https://peasyqr.com/qr/mecard-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">MeCard Generator</a></li>
<li><a href="https://peasyqr.com/qr/app-store-link-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">App Store Link Generator</a></li>
</ul>
</div>
<div>
<a href="https://peasytext.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #F59E0B;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #F59E0B;"></span>
Text Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasytext.com/text/text-counter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Word Counter</a></li>
<li><a href="https://peasytext.com/text/text-case-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Case Converter</a></li>
<li><a href="https://peasytext.com/text/sort-lines/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Sort Lines</a></li>
<li><a href="https://peasytext.com/text/lorem-ipsum-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Lorem Ipsum Generator</a></li>
<li><a href="https://peasytext.com/text/slug-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Slug Generator</a></li>
<li><a href="https://peasytext.com/text/find-and-replace/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Find & Replace</a></li>
<li><a href="https://peasytext.com/text/remove-duplicate-lines/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Remove Duplicate Lines</a></li>
<li><a href="https://peasytext.com/text/base64-encode-decode/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Base64 Encoder/Decoder</a></li>
<li><a href="https://peasytext.com/text/url-encode-decode/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">URL Encoder/Decoder</a></li>
<li><a href="https://peasytext.com/text/json-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">JSON Formatter</a></li>
<li><a href="https://peasytext.com/text/html-entity-encoder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">HTML Entity Encoder/Decoder</a></li>
<li><a href="https://peasytext.com/text/reverse-text/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Reverse Text</a></li>
<li><a href="https://peasytext.com/text/line-numbers/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Add/Remove Line Numbers</a></li>
<li><a href="https://peasytext.com/text/text-diff/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Text Diff</a></li>
<li><a href="https://peasytext.com/text/text-extractor/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Text Extractor</a></li>
</ul>
</div>
<div>
<a href="https://peasydev.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #06B6D4;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #06B6D4;"></span>
Developer Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasydev.com/dev/hash-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Hash Generator</a></li>
<li><a href="https://peasydev.com/dev/password-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Password Generator</a></li>
<li><a href="https://peasydev.com/dev/timestamp-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Unix Timestamp Converter</a></li>
<li><a href="https://peasydev.com/dev/cron-expression-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Cron Expression Generator</a></li>
<li><a href="https://peasydev.com/dev/chmod-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Chmod Calculator</a></li>
<li><a href="https://peasydev.com/dev/string-escape-unescape/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">String Escape / Unescape</a></li>
<li><a href="https://peasydev.com/dev/ip-subnet-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">IP Subnet Calculator</a></li>
<li><a href="https://peasydev.com/dev/color-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Color Code Converter</a></li>
<li><a href="https://peasydev.com/dev/csv-json-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSV โ JSON Converter</a></li>
<li><a href="https://peasydev.com/dev/xml-json-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">XML โ JSON Converter</a></li>
<li><a href="https://peasydev.com/dev/sql-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SQL Formatter</a></li>
<li><a href="https://peasydev.com/dev/markdown-table/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Markdown Table Generator</a></li>
<li><a href="https://peasydev.com/dev/http-status/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">HTTP Status Code Reference</a></li>
<li><a href="https://peasydev.com/dev/meta-tags/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Meta Tags Generator</a></li>
<li><a href="https://peasydev.com/dev/robots-txt/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Robots.txt Generator</a></li>
<li><a href="https://peasydev.com/dev/gitignore/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">.gitignore Generator</a></li>
<li><a href="https://peasydev.com/dev/html-formatter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">HTML Formatter</a></li>
<li><a href="https://peasydev.com/dev/css-units/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">CSS Unit Converter</a></li>
<li><a href="https://peasydev.com/dev/json-path/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">JSONPath Evaluator</a></li>
<li><a href="https://peasydev.com/dev/dev-text-diff/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Text Diff Checker</a></li>
<li><a href="https://peasydev.com/dev/data-uri/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Data URI Converter</a></li>
<li><a href="https://peasydev.com/dev/lorem/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Lorem Ipsum Generator</a></li>
<li><a href="https://peasydev.com/dev/backslash/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Path Converter</a></li>
<li><a href="https://peasydev.com/dev/htaccess/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">.htaccess Generator</a></li>
<li><a href="https://peasydev.com/dev/env/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">.env Validator</a></li>
<li><a href="https://peasydev.com/dev/placeholder/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Placeholder Image Generator</a></li>
</ul>
</div>
<div>
<a href="https://peasyseo.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #22C55E;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #22C55E;"></span>
SEO Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasyseo.com/seo/serp-preview/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">SERP Preview</a></li>
<li><a href="https://peasyseo.com/seo/og-tag-debugger/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">OG Tag Debugger</a></li>
<li><a href="https://peasyseo.com/seo/heading-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Heading Analyzer</a></li>
<li><a href="https://peasyseo.com/seo/keyword-density/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Keyword Density Analyzer</a></li>
<li><a href="https://peasyseo.com/seo/readability-score/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Readability Score</a></li>
<li><a href="https://peasyseo.com/seo/sitemap-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">XML Sitemap Generator</a></li>
<li><a href="https://peasyseo.com/seo/schema-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Schema.org Generator</a></li>
<li><a href="https://peasyseo.com/seo/link-extractor/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Link Extractor</a></li>
<li><a href="https://peasyseo.com/seo/canonical-checker/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Canonical Tag Checker</a></li>
<li><a href="https://peasyseo.com/seo/robots-txt-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Robots.txt Analyzer</a></li>
<li><a href="https://peasyseo.com/seo/structured-data-validator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Structured Data Validator</a></li>
<li><a href="https://peasyseo.com/seo/word-count-seo/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Word Count & SEO Grade</a></li>
<li><a href="https://peasyseo.com/seo/seo-meta-length-checker/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ฉํ ๊ธธ์ด ๊ฒ์ฌ๊ธฐ</a></li>
<li><a href="https://peasyseo.com/seo/seo-url-slug-generator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">URL ์ฌ๋ฌ๊ทธ ์์ฑ๊ธฐ</a></li>
<li><a href="https://peasyseo.com/seo/seo-keyword-density-analyzer/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํค์๋ ๋ฐ๋ ๋ถ์๊ธฐ</a></li>
</ul>
</div>
<div>
<a href="https://peasymath.com" class="inline-flex items-center gap-1.5 text-sm font-semibold hover:text-white transition-colors mb-2" style="color: #14B8A6;">
<span class="inline-block h-2 w-2 rounded-full" style="background: #14B8A6;"></span>
Math Tools
</a>
<ul class="space-y-1">
<li><a href="https://peasymath.com/math/percentage-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Percentage Calculator</a></li>
<li><a href="https://peasymath.com/math/ratio-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Ratio Calculator</a></li>
<li><a href="https://peasymath.com/math/average-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Average Calculator</a></li>
<li><a href="https://peasymath.com/math/gcd-lcm-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">GCD & LCM Calculator</a></li>
<li><a href="https://peasymath.com/math/prime-number-tools/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Prime Number Tools</a></li>
<li><a href="https://peasymath.com/math/equation-solver/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Equation Solver</a></li>
<li><a href="https://peasymath.com/math/unit-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋จ์ ๋ณํ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/fraction-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ถ์ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/roman-numeral-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ก๋ง ์ซ์ ๋ณํ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/fibonacci-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํผ๋ณด๋์น ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/logarithm-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">๋ก๊ทธ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/statistics-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํต๊ณ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/number-base-converter/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Number Base Converter</a></li>
<li><a href="https://peasymath.com/math/matrix-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">ํ๋ ฌ ๊ณ์ฐ๊ธฐ</a></li>
<li><a href="https://peasymath.com/math/trigonometry-calculator/" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">์ผ๊ฐํจ์ ๊ณ์ฐ๊ธฐ</a></li>
</ul>
</div>
</div>
</div>
<!-- Row 3: Cross-site category bar -->
<div class="border-t border-gray-800 mt-8 pt-6">
<div class="flex flex-wrap gap-x-4 gap-y-2 justify-center">
<a href="https://peasypdf.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy PDF</a>
<a href="https://peasyimage.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Image</a>
<a href="https://peasyformats.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Formats</a>
<a href="https://peasytext.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Text</a>
<a href="https://peasydev.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Dev</a>
<a href="https://peasycss.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy CSS</a>
<a href="https://peasydesign.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Design</a>
<a href="https://peasyvideo.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Video</a>
<a href="https://peasyaudio.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Audio</a>
<a href="https://peasyqr.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy QR</a>
<a href="https://peasyseo.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy SEO</a>
<a href="https://peasysafe.com" class="text-xs hover:text-white transition-colors font-semibold" style="color: #64748B;">Peasy Safe</a>
<a href="https://peasysocial.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Social</a>
<a href="https://peasymath.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Math</a>
<a href="https://peasygen.com" class="text-xs hover:text-white transition-colors" style="color: #6B7280;">Peasy Gen</a>
</div>
</div>
<!-- Bottom bar -->
<div class="border-t border-gray-800 mt-6 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3">
<span class="text-sm font-medium text-white">Easy peasy lemon squeezy. ๐</span>
<p class="text-xs" style="color: #6B7280;">
© 2026 Peasy Safe. Your files never leave your browser.
</p>
</div>
</div>
</footer>
<!-- Command palette tool data (dynamic, must be inline) -->
<script>window.__PEASY_TOOLS__=[{"name": "์ ๊ณต๊ฐ ์ฐธ์กฐ", "url": "/video/video-color-space/", "category": "Video Tools"}, {"name": "๋น ํ์ด์ง ์ฝ์
", "url": "/pdf/insert-blank-pages/", "category": "PDF Tools"}, {"name": "์๋ ๋ฐ ์ฌ๋ก๋ชจ์
๊ณ์ฐ๊ธฐ", "url": "/video/video-speed/", "category": "Video Tools"}, {"name": "์ฝ๋ฑ ์ฐธ์กฐ", "url": "/video/video-codec/", "category": "Video Tools"}, {"name": "์ต์ ๊ฒ์ ์๊ฐ", "url": "/social/social-best-posting-times/", "category": "Social Media Tools"}, {"name": "๋๋ค ์ซ์ ์์ฑ๊ธฐ", "url": "/gen/gen-number/", "category": "Generator Tools"}, {"name": "๋ก๋ง ์ซ์ ๋ณํ๊ธฐ", "url": "/math/roman-numeral-converter/", "category": "Math Tools"}, {"name": "๋ฉํ ๊ธธ์ด ๊ฒ์ฌ๊ธฐ", "url": "/seo/seo-meta-length-checker/", "category": "SEO Tools"}, {"name": "์์ ์์ ์์ฑ๊ธฐ", "url": "/design/design-color-shades/", "category": "Design Tools"}, {"name": "์์
๋ฉ์
์ถ์ถ๊ธฐ", "url": "/social/social-mention-extractor/", "category": "Social Media Tools"}, {"name": "์์ ๋น์จ ๊ณ์ฐ๊ธฐ", "url": "/video/video-aspect-ratio/", "category": "Video Tools"}, {"name": "์ค๋ฅ ์ ์ ๊ณ์ฐ๊ธฐ", "url": "/qr/qr-error-correction/", "category": "QR & Barcode"}, {"name": "์๋ง ์๊ฐ ๋ณํ๊ธฐ", "url": "/video/video-subtitle-time/", "category": "Video Tools"}, {"name": "์ ์ฅ ๊ณต๊ฐ ํ๋๋", "url": "/video/video-storage/", "category": "Video Tools"}, {"name": "ํ์ผ ํฌ๊ธฐ ์ถ์ ๊ธฐ", "url": "/video/video-filesize/", "category": "Video Tools"}, {"name": "ํ๋ฉด ๋
นํ ๊ฐ์ด๋", "url": "/video/video-screen-record/", "category": "Video Tools"}, {"name": "ํ๋ฉด ๋น์จ ๊ณ์ฐ๊ธฐ", "url": "/design/design-aspect-ratio/", "category": "Design Tools"}, {"name": "๋จ์ ๋ณํ๊ธฐ", "url": "/math/unit-converter/", "category": "Math Tools"}, {"name": "๋๋น ๊ฒ์ฌ๊ธฐ", "url": "/design/design-contrast/", "category": "Design Tools"}, {"name": "๋ก๊ทธ ๊ณ์ฐ๊ธฐ", "url": "/math/logarithm-calculator/", "category": "Math Tools"}, {"name": "๋ถ์ ๊ณ์ฐ๊ธฐ", "url": "/math/fraction-calculator/", "category": "Math Tools"}, {"name": "์ผํธ ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-cents/", "category": "Audio Tools"}, {"name": "ํต๊ณ ๊ณ์ฐ๊ธฐ", "url": "/math/statistics-calculator/", "category": "Math Tools"}, {"name": "ํ๋ ฌ ๊ณ์ฐ๊ธฐ", "url": "/math/matrix-calculator/", "category": "Math Tools"}, {"name": "๊ธ๊ผด ํ์ด๋ง ์ ์", "url": "/design/design-font-pair/", "category": "Design Tools"}, {"name": "์๊ณ ์ฃผํ์ ์ฐจํธ", "url": "/audio/audio-note-chart/", "category": "Audio Tools"}, {"name": "์์
๋ฏธ๋์ด ๊ธ์ ์ ์นด์ดํฐ", "url": "/social/social-char-counter/", "category": "Social Media Tools"}, {"name": "์์
๋ฏธ๋์ด ํฌ๊ธฐ ๊ฐ์ด๋", "url": "/design/design-media-sizes/", "category": "Design Tools"}, {"name": "๊ฐ์ง ๋ฐ์ดํฐ ์์ฑ๊ธฐ", "url": "/gen/gen-fake-data/", "category": "Generator Tools"}, {"name": "๊ฐ๊ฒฉ ์ค์ผ์ผ ์์ฑ๊ธฐ", "url": "/design/design-spacing/", "category": "Design Tools"}, {"name": "์์ ํ๋ ํธ ์์ฑ๊ธฐ", "url": "/gen/gen-color-palette/", "category": "Generator Tools"}, {"name": "์์ ํ๋ ํธ ์์ฑ๊ธฐ", "url": "/design/design-palette/", "category": "Design Tools"}, {"name": "ํ์
์ค์ผ์ผ ์์ฑ๊ธฐ", "url": "/design/design-typography/", "category": "Design Tools"}, {"name": "ํ์/์ง์ ํ์ด์ง ์ถ์ถ", "url": "/pdf/odd-even-pdf/", "category": "PDF Tools"}, {"name": "๋จธ๋ฆฌ๊ธ ๋ฐ ๋ฐ๋ฅ๊ธ ์ถ๊ฐ", "url": "/pdf/pdf-header-footer/", "category": "PDF Tools"}, {"name": "ํด์๋ ์ฐธ์กฐ", "url": "/video/video-resolution/", "category": "Video Tools"}, {"name": "์ด๋ชจ์ง ์ ๊ฑฐ ๋ฐ ์ถ์ถ๊ธฐ", "url": "/social/social-emoji-tool/", "category": "Social Media Tools"}, {"name": "๋ฐ์ฝ๋ ํ์ ์ฐธ์กฐ", "url": "/qr/barcode-reference/", "category": "QR & Barcode"}, {"name": "์ค๋์ค ํ์ผ ํฌ๊ธฐ ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-filesize/", "category": "Audio Tools"}, {"name": "๋ฐ์๋ฒจ ์ฐธ์กฐ ๊ฐ์ด๋", "url": "/audio/audio-db-reference/", "category": "Audio Tools"}, {"name": "๋์์ธ ํ ํฐ ์์ฑ๊ธฐ", "url": "/design/design-tokens/", "category": "Design Tools"}, {"name": "๋๋ ์ด ํ์ ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-delay/", "category": "Audio Tools"}, {"name": "์ด๋ฏธ์ง ํฌ๊ธฐ ๊ฐ์ด๋", "url": "/social/social-image-size-guide/", "category": "Social Media Tools"}, {"name": "ํค์๋ ๋ฐ๋ ๋ถ์๊ธฐ", "url": "/seo/seo-keyword-density-analyzer/", "category": "SEO Tools"}, {"name": "ํ๋ซํผ ์ฌ์ ๊ฐ์ด๋", "url": "/video/video-platform/", "category": "Video Tools"}, {"name": "๋์ญํญ ๊ณ์ฐ๊ธฐ", "url": "/video/video-bandwidth/", "category": "Video Tools"}, {"name": "๋ฐ์ด์ค ํฌ๋งทํฐ", "url": "/social/social-bio-formatter/", "category": "Social Media Tools"}, {"name": "๋ฐ์ฝ๋ ๊ฒ์ฆ๊ธฐ", "url": "/qr/barcode-validator/", "category": "QR & Barcode"}, {"name": "์ธํผ์ ์ด๋ฏธ์ง", "url": "/image/sepia-image/", "category": "Image Tools"}, {"name": "์ค๋ ๋ ๋ถํ ๊ธฐ", "url": "/social/social-thread-splitter/", "category": "Social Media Tools"}, {"name": "์ด๋ฏธ์ง ํฝ์
ํ", "url": "/image/pixelate-image/", "category": "Image Tools"}, {"name": "์ฃผํ์ ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-freq/", "category": "Audio Tools"}, {"name": "์ฐธ์ฌ๋ ๋ถ์๊ธฐ", "url": "/social/social-engagement-analyzer/", "category": "Social Media Tools"}, {"name": "ํ๋ ์ ๋ ์ดํธ ๋ณํ๊ธฐ", "url": "/video/video-framerate/", "category": "Video Tools"}, {"name": "๊ฒ์๋ฌผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ", "url": "/social/social-post-preview/", "category": "Social Media Tools"}, {"name": "์ด๋ฏธ์ง ๋ฉํ๋ฐ์ดํฐ ์ ๊ฑฐ", "url": "/image/strip-metadata/", "category": "Image Tools"}, {"name": "ํฌ๋ก๋ง ์๋ธ์ํ๋ง ๊ฐ์ด๋", "url": "/video/video-chroma/", "category": "Video Tools"}, {"name": "์ด๋ฏธ์ง ๊ทธ๋ ์ด์ค์ผ์ผ ๋ณํ", "url": "/image/grayscale-image/", "category": "Image Tools"}, {"name": "๋ฐ์ํ ๋ธ๋ ์ดํฌํฌ์ธํธ", "url": "/design/design-breakpoints/", "category": "Design Tools"}, {"name": "ํด์ํ๊ทธ ์ถ์ถ ๋ฐ ์์ฑ๊ธฐ", "url": "/social/social-hashtag-tool/", "category": "Social Media Tools"}, {"name": "๋ ์ดํด์ ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-latency/", "category": "Audio Tools"}, {"name": "์ฌ์ฉ์๋ช
๊ฒ์ฌ๊ธฐ", "url": "/social/social-handle-checker/", "category": "Social Media Tools"}, {"name": "์ฌ์ฉ์๋ช
์์ฑ๊ธฐ", "url": "/gen/gen-username/", "category": "Generator Tools"}, {"name": "์ผ๊ฐํจ์ ๊ณ์ฐ๊ธฐ", "url": "/math/trigonometry-calculator/", "category": "Math Tools"}, {"name": "ํ์์ฝ๋ ๊ณ์ฐ๊ธฐ", "url": "/video/video-timecode/", "category": "Video Tools"}, {"name": "ํผ๋ณด๋์น ๊ณ์ฐ๊ธฐ", "url": "/math/fibonacci-calculator/", "category": "Math Tools"}, {"name": "๋ผ์ฐ๋๋์ค ํ์ค ๊ฐ์ด๋", "url": "/audio/audio-loudness/", "category": "Audio Tools"}, {"name": "๋นํธ๋ ์ดํธ ๊ณ์ฐ๊ธฐ", "url": "/video/video-bitrate/", "category": "Video Tools"}, {"name": "Add Border", "url": "/image/add-border/", "category": "Image Tools"}, {"name": "Add Page Numbers", "url": "/pdf/add-page-numbers/", "category": "PDF Tools"}, {"name": "Add/Remove Line Numbers", "url": "/text/line-numbers/", "category": "Text Tools"}, {"name": "Adjust Image", "url": "/image/adjust-image/", "category": "Image Tools"}, {"name": "AES Encrypt / Decrypt", "url": "/safe/aes-encrypt/", "category": "Privacy & Security"}, {"name": "API Key Generator", "url": "/gen/gen-api-key/", "category": "Generator Tools"}, {"name": "App Icon Size Guide", "url": "/design/design-icon-size-guide/", "category": "Design Tools"}, {"name": "App Store Link Generator", "url": "/qr/app-store-link-generator/", "category": "QR & Barcode"}, {"name": "Avatar Generator", "url": "/gen/gen-avatar-svg/", "category": "Generator Tools"}, {"name": "Average Calculator", "url": "/math/average-calculator/", "category": "Math Tools"}, {"name": "Base64 ์ธ์ฝ๋ / ๋์ฝ๋", "url": "/safe/base64-encoder-decoder/", "category": "Privacy & Security"}, {"name": "Base64 Encoder / Decoder", "url": "/doc/base64-encoder/", "category": "Format Tools"}, {"name": "Base64 Encoder/Decoder", "url": "/text/base64-encode-decode/", "category": "Text Tools"}, {"name": "Bit Depth Analyzer", "url": "/audio/audio-bit-depth-analyzer/", "category": "Audio Tools"}, {"name": "Blur Image", "url": "/image/blur-image/", "category": "Image Tools"}, {"name": "BPM ๊ณ์ฐ๊ธฐ", "url": "/audio/audio-bpm/", "category": "Audio Tools"}, {"name": "Canonical Tag Checker", "url": "/seo/canonical-checker/", "category": "SEO Tools"}, {"name": "Caption & Alt Text Formatter", "url": "/social/caption-formatter/", "category": "Social Media Tools"}, {"name": "Case Converter", "url": "/text/text-case-converter/", "category": "Text Tools"}, {"name": "Character Set Analyzer", "url": "/doc/charset-analyzer/", "category": "Format Tools"}, {"name": "Chmod Calculator", "url": "/dev/chmod-calculator/", "category": "Developer Tools"}, {"name": "Chord Reference", "url": "/audio/chord-reference/", "category": "Audio Tools"}, {"name": "Color Code Converter", "url": "/dev/color-converter/", "category": "Developer Tools"}, {"name": "Compress Image", "url": "/image/compress-image/", "category": "Image Tools"}, {"name": "Compress PDF", "url": "/pdf/compress-pdf/", "category": "PDF Tools"}, {"name": "Conversion Guide", "url": "/doc/conversion-guide/", "category": "Format Tools"}, {"name": "Convert Image", "url": "/image/convert-image/", "category": "Image Tools"}, {"name": "CORS Header Generator", "url": "/safe/cors-generator/", "category": "Privacy & Security"}, {"name": "Cron Expression Builder", "url": "/gen/gen-cron-expression/", "category": "Generator Tools"}, {"name": "Cron Expression Generator", "url": "/dev/cron-expression-generator/", "category": "Developer Tools"}, {"name": "Crop Image", "url": "/image/crop-image/", "category": "Image Tools"}, {"name": "CSP Header Generator", "url": "/safe/csp-generator/", "category": "Privacy & Security"}, {"name": "CSS ๋ณํ ์์ฑ๊ธฐ", "url": "/css/css-transform/", "category": "CSS Tools"}, {"name": "CSS ๋ฐ์ค ๊ทธ๋ฆผ์ ์์ฑ๊ธฐ", "url": "/css/css-shadow/", "category": "CSS Tools"}, {"name": "CSS ์ ๋ฆฌ๊ธฐ", "url": "/css/css-beautify/", "category": "CSS Tools"}, {"name": "CSS ์ถ์๊ธฐ", "url": "/css/css-minify/", "category": "CSS Tools"}, {"name": "CSS ๋ชจ์๋ฆฌ ๋ฅ๊ธ๊ธฐ ์์ฑ๊ธฐ", "url": "/css/css-border-radius/", "category": "CSS Tools"}, {"name": "CSS ํ
์คํธ ๊ทธ๋ฆผ์ ์์ฑ๊ธฐ", "url": "/css/css-text-shadow/", "category": "CSS Tools"}, {"name": "CSS ๊ทธ๋ผ๋์ธํธ ์์ฑ๊ธฐ", "url": "/css/css-gradient/", "category": "CSS Tools"}, {"name": "CSS ์ ๋๋ฉ์ด์
์์ฑ๊ธฐ", "url": "/css/css-animation/", "category": "CSS Tools"}, {"name": "CSS Clip-Path Generator", "url": "/css/css-clip-path/", "category": "CSS Tools"}, {"name": "CSS Color Converter", "url": "/css/css-color-converter/", "category": "CSS Tools"}, {"name": "CSS Filter Effects", "url": "/css/css-filter-effects/", "category": "CSS Tools"}, {"name": "CSS Flexbox ์์ฑ๊ธฐ", "url": "/css/css-flexbox/", "category": "CSS Tools"}, {"name": "CSS Grid ์์ฑ๊ธฐ", "url": "/css/css-grid/", "category": "CSS Tools"}, {"name": "CSS Pattern Generator", "url": "/design/css-pattern-generator/", "category": "Design Tools"}, {"name": "CSS Unit Converter", "url": "/css/css-unit-converter/", "category": "CSS Tools"}, {"name": "CSS Unit Converter", "url": "/dev/css-units/", "category": "Developer Tools"}, {"name": "CSV Data Generator", "url": "/gen/gen-csv-data/", "category": "Generator Tools"}, {"name": "CSV โ JSON Converter", "url": "/dev/csv-json-converter/", "category": "Developer Tools"}, {"name": "CTA ์์ฑ๊ธฐ", "url": "/social/social-cta-generator/", "category": "Social Media Tools"}, {"name": "Data URI Converter", "url": "/dev/data-uri/", "category": "Developer Tools"}, {"name": "Data URI Generator", "url": "/doc/data-uri-generator/", "category": "Format Tools"}, {"name": "dB ๋ณํ๊ธฐ", "url": "/audio/audio-db/", "category": "Audio Tools"}, {"name": "Edit PDF Metadata", "url": "/pdf/edit-pdf-metadata/", "category": "PDF Tools"}, {"name": "Email Address Generator", "url": "/gen/gen-email-addresses/", "category": "Generator Tools"}, {"name": "Email QR Generator", "url": "/qr/qr-email-generator/", "category": "QR & Barcode"}, {"name": ".env Validator", "url": "/dev/env/", "category": "Developer Tools"}, {"name": "EQ Frequency Reference", "url": "/audio/audio-eq-reference/", "category": "Audio Tools"}, {"name": "Equation Solver", "url": "/math/equation-solver/", "category": "Math Tools"}, {"name": "Event QR Generator", "url": "/qr/qr-event-generator/", "category": "QR & Barcode"}, {"name": "Extract Text from PDF", "url": "/pdf/extract-text-from-pdf/", "category": "PDF Tools"}, {"name": "File Size Converter", "url": "/doc/file-size-converter/", "category": "Format Tools"}, {"name": "Find & Replace", "url": "/text/find-and-replace/", "category": "Text Tools"}, {"name": "Flatten PDF", "url": "/pdf/flatten-pdf/", "category": "PDF Tools"}, {"name": "Flip Image", "url": "/image/flip-image/", "category": "Image Tools"}, {"name": "Format Comparison Guide", "url": "/doc/format-comparison/", "category": "Format Tools"}, {"name": "Format Identifier", "url": "/doc/format-identifier/", "category": "Format Tools"}, {"name": "GCD & LCM Calculator", "url": "/math/gcd-lcm-calculator/", "category": "Math Tools"}, {"name": "Geo Location QR Generator", "url": "/qr/qr-geo-location/", "category": "QR & Barcode"}, {"name": ".gitignore Generator", "url": "/dev/gitignore/", "category": "Developer Tools"}, {"name": "Golden Ratio Calculator", "url": "/design/design-golden-ratio-calculator/", "category": "Design Tools"}, {"name": "Hash Generator", "url": "/dev/hash-generator/", "category": "Developer Tools"}, {"name": "Hash Generator", "url": "/safe/safe-hash-generator/", "category": "Privacy & Security"}, {"name": "Heading Analyzer", "url": "/seo/heading-analyzer/", "category": "SEO Tools"}, {"name": "Hex Dump Viewer", "url": "/doc/hex-dump-viewer/", "category": "Format Tools"}, {"name": "HMAC Generator", "url": "/safe/hmac-generator/", "category": "Privacy & Security"}, {"name": ".htaccess Generator", "url": "/dev/htaccess/", "category": "Developer Tools"}, {"name": "HTML Entity Encoder / Decoder", "url": "/doc/html-entities/", "category": "Format Tools"}, {"name": "HTML Entity Encoder/Decoder", "url": "/text/html-entity-encoder/", "category": "Text Tools"}, {"name": "HTML Formatter", "url": "/dev/html-formatter/", "category": "Developer Tools"}, {"name": "HTTP Status Code Reference", "url": "/dev/http-status/", "category": "Developer Tools"}, {"name": "Image Filters", "url": "/image/image-filters/", "category": "Image Tools"}, {"name": "Image to Base64", "url": "/image/image-to-base64/", "category": "Image Tools"}, {"name": "IP Subnet Calculator", "url": "/dev/ip-subnet-calculator/", "category": "Developer Tools"}, {"name": "JPG to PDF", "url": "/pdf/jpg-to-pdf/", "category": "PDF Tools"}, {"name": "๋ชฉ์
JSON ์์ฑ๊ธฐ", "url": "/gen/gen-mock-json/", "category": "Generator Tools"}, {"name": "JSON Formatter", "url": "/text/json-formatter/", "category": "Text Tools"}, {"name": "JSONPath Evaluator", "url": "/dev/json-path/", "category": "Developer Tools"}, {"name": "JWT Decoder", "url": "/safe/jwt-decoder/", "category": "Privacy & Security"}, {"name": "Key & Scale Reference", "url": "/audio/key-scale-reference/", "category": "Audio Tools"}, {"name": "Keyword Density Analyzer", "url": "/seo/keyword-density/", "category": "SEO Tools"}, {"name": "Line Ending Converter", "url": "/doc/line-ending-converter/", "category": "Format Tools"}, {"name": "Link Extractor", "url": "/seo/link-extractor/", "category": "SEO Tools"}, {"name": "Lorem ๋งํฌ์
์์ฑ๊ธฐ", "url": "/gen/gen-lorem-markup/", "category": "Generator Tools"}, {"name": "Lorem Ipsum Generator", "url": "/dev/lorem/", "category": "Developer Tools"}, {"name": "Lorem Ipsum Generator", "url": "/text/lorem-ipsum-generator/", "category": "Text Tools"}, {"name": "Make Square", "url": "/image/make-square/", "category": "Image Tools"}, {"name": "Markdown Table Generator", "url": "/dev/markdown-table/", "category": "Developer Tools"}, {"name": "Markdown to HTML Converter", "url": "/doc/markdown-to-html/", "category": "Format Tools"}, {"name": "MeCard Generator", "url": "/qr/mecard-generator/", "category": "QR & Barcode"}, {"name": "Media Query Generator", "url": "/css/css-media-query-generator/", "category": "CSS Tools"}, {"name": "Merge PDF", "url": "/pdf/merge-pdf/", "category": "PDF Tools"}, {"name": "Meta Tags Generator", "url": "/dev/meta-tags/", "category": "Developer Tools"}, {"name": "MIME Type Lookup", "url": "/doc/mime-type-lookup/", "category": "Format Tools"}, {"name": "Multi-Stop Gradient Generator", "url": "/design/gradient-generator/", "category": "Design Tools"}, {"name": "Number Base Converter", "url": "/math/number-base-converter/", "category": "Math Tools"}, {"name": "OG Tag Debugger", "url": "/seo/og-tag-debugger/", "category": "SEO Tools"}, {"name": "Password Generator", "url": "/dev/password-generator/", "category": "Developer Tools"}, {"name": "Password Generator", "url": "/safe/safe-password-generator/", "category": "Privacy & Security"}, {"name": "Password Strength Checker", "url": "/safe/password-strength/", "category": "Privacy & Security"}, {"name": "Path Converter", "url": "/dev/backslash/", "category": "Developer Tools"}, {"name": "PDF ์ญ์ ์ ๋ ฌ", "url": "/pdf/reverse-pdf/", "category": "PDF Tools"}, {"name": "PDF ์๋ฅด๊ธฐ", "url": "/pdf/crop-pdf/", "category": "PDF Tools"}, {"name": "PDF ํ์ด์ง ๋ณต์ ", "url": "/pdf/duplicate-pdf-pages/", "category": "PDF Tools"}, {"name": "PDF ํ์ด์ง ์ญ์ ", "url": "/pdf/delete-pdf-pages/", "category": "PDF Tools"}, {"name": "PDF ํ์ด์ง ์ถ์ถ", "url": "/pdf/extract-pdf-pages/", "category": "PDF Tools"}, {"name": "PDF ํ์ด์ง ํฌ๊ธฐ ๋ณ๊ฒฝ", "url": "/pdf/resize-pdf/", "category": "PDF Tools"}, {"name": "PDF์ ์ด๋ฏธ์ง ์ถ๊ฐ", "url": "/pdf/add-image-to-pdf/", "category": "PDF Tools"}, {"name": "PDF์ ํ
์คํธ ์ถ๊ฐ", "url": "/pdf/add-text-to-pdf/", "category": "PDF Tools"}, {"name": "PDF๋ฅผ PNG๋ก ๋ณํ", "url": "/pdf/pdf-to-png/", "category": "PDF Tools"}, {"name": "PDF to JPG", "url": "/pdf/pdf-to-jpg/", "category": "PDF Tools"}, {"name": "Percentage Calculator", "url": "/math/percentage-calculator/", "category": "Math Tools"}, {"name": "Phone Call QR Generator", "url": "/qr/qr-phone-call/", "category": "QR & Barcode"}, {"name": "Placeholder Image Generator", "url": "/dev/placeholder/", "category": "Developer Tools"}, {"name": "Prime Number Tools", "url": "/math/prime-number-tools/", "category": "Math Tools"}, {"name": "QR ์ฉ๋ ์ฐธ์กฐ", "url": "/qr/qr-capacity-reference/", "category": "QR & Barcode"}, {"name": "QR ๋ฐ์ดํฐ ๋ถ์๊ธฐ", "url": "/qr/qr-data-analyzer/", "category": "QR & Barcode"}, {"name": "QR ๋ฐ์ดํฐ ํฌ๋งทํฐ", "url": "/qr/qr-data-formatter/", "category": "QR & Barcode"}, {"name": "Random Date Generator", "url": "/gen/gen-random-dates/", "category": "Generator Tools"}, {"name": "Random String Generator", "url": "/safe/random-string/", "category": "Privacy & Security"}, {"name": "Ratio Calculator", "url": "/math/ratio-calculator/", "category": "Math Tools"}, {"name": "Readability Score", "url": "/seo/readability-score/", "category": "SEO Tools"}, {"name": "Regex Tester", "url": "/gen/regex-tester/", "category": "Generator Tools"}, {"name": "Remove Duplicate Lines", "url": "/text/remove-duplicate-lines/", "category": "Text Tools"}, {"name": "Reorder PDF Pages", "url": "/pdf/reorder-pdf/", "category": "PDF Tools"}, {"name": "Resize Image", "url": "/image/resize-image/", "category": "Image Tools"}, {"name": "Reverse Text", "url": "/text/reverse-text/", "category": "Text Tools"}, {"name": "Robots.txt Analyzer", "url": "/seo/robots-txt-analyzer/", "category": "SEO Tools"}, {"name": "Robots.txt Generator", "url": "/dev/robots-txt/", "category": "Developer Tools"}, {"name": "Rotate Image", "url": "/image/rotate-image/", "category": "Image Tools"}, {"name": "Rotate PDF", "url": "/pdf/rotate-pdf/", "category": "PDF Tools"}, {"name": "Round Corners", "url": "/image/round-corners/", "category": "Image Tools"}, {"name": "Sample Rate Converter", "url": "/audio/audio-sample-rate-converter/", "category": "Audio Tools"}, {"name": "Schema.org Generator", "url": "/seo/schema-generator/", "category": "SEO Tools"}, {"name": "SERP Preview", "url": "/seo/serp-preview/", "category": "SEO Tools"}, {"name": "Shadow System Generator", "url": "/design/design-shadow-generator/", "category": "Design Tools"}, {"name": "Sharpen Image", "url": "/image/sharpen-image/", "category": "Image Tools"}, {"name": "Short ID Generator", "url": "/gen/gen-short-id/", "category": "Generator Tools"}, {"name": "Sign PDF", "url": "/pdf/sign-pdf/", "category": "PDF Tools"}, {"name": "Slug Generator", "url": "/text/slug-generator/", "category": "Text Tools"}, {"name": "SMS QR Generator", "url": "/qr/qr-sms-generator/", "category": "QR & Barcode"}, {"name": "Sort Lines", "url": "/text/sort-lines/", "category": "Text Tools"}, {"name": "Split PDF", "url": "/pdf/split-pdf/", "category": "PDF Tools"}, {"name": "SQL Formatter", "url": "/dev/sql-formatter/", "category": "Developer Tools"}, {"name": "SRI Hash Generator", "url": "/safe/sri-generator/", "category": "Privacy & Security"}, {"name": "SSL ์ธ์ฆ์ ๋์ฝ๋", "url": "/safe/ssl-certificate-decoder/", "category": "Privacy & Security"}, {"name": "String Escape / Unescape", "url": "/dev/string-escape-unescape/", "category": "Developer Tools"}, {"name": "Structured Data Validator", "url": "/seo/structured-data-validator/", "category": "SEO Tools"}, {"name": "SVG to PNG", "url": "/image/svg-to-png/", "category": "Image Tools"}, {"name": "Text Diff", "url": "/text/text-diff/", "category": "Text Tools"}, {"name": "Text Diff Checker", "url": "/dev/dev-text-diff/", "category": "Developer Tools"}, {"name": "Text Extractor", "url": "/text/text-extractor/", "category": "Text Tools"}, {"name": "Text Redactor", "url": "/safe/text-redactor/", "category": "Privacy & Security"}, {"name": "Thread Splitter", "url": "/social/thread-splitter/", "category": "Social Media Tools"}, {"name": "TOTP ์ค์ ๊ธฐ", "url": "/safe/totp-configurator/", "category": "Privacy & Security"}, {"name": "Unicode Escape Converter", "url": "/doc/unicode-escape-converter/", "category": "Format Tools"}, {"name": "Unix Timestamp Converter", "url": "/dev/timestamp-converter/", "category": "Developer Tools"}, {"name": "URL ์ฌ๋ฌ๊ทธ ์์ฑ๊ธฐ", "url": "/seo/seo-url-slug-generator/", "category": "SEO Tools"}, {"name": "URL Encoder / Decoder", "url": "/doc/url-encoder/", "category": "Format Tools"}, {"name": "URL Encoder/Decoder", "url": "/text/url-encode-decode/", "category": "Text Tools"}, {"name": "URL Slug Generator", "url": "/gen/url-slug-generator/", "category": "Generator Tools"}, {"name": "UTM ๋งํฌ ๋น๋", "url": "/social/social-utm-builder/", "category": "Social Media Tools"}, {"name": "UUID Generator", "url": "/safe/uuid-generator/", "category": "Privacy & Security"}, {"name": "vCard QR ๋น๋", "url": "/qr/qr-vcard-generator/", "category": "QR & Barcode"}, {"name": "Watermark Image", "url": "/image/watermark-image/", "category": "Image Tools"}, {"name": "Watermark PDF", "url": "/pdf/watermark-pdf/", "category": "PDF Tools"}, {"name": "Wi-Fi QR ์ค์ ๋น๋", "url": "/qr/qr-wifi-generator/", "category": "QR & Barcode"}, {"name": "Word Counter", "url": "/text/text-counter/", "category": "Text Tools"}, {"name": "Word Count & SEO Grade", "url": "/seo/word-count-seo/", "category": "SEO Tools"}, {"name": "XML โ JSON Converter", "url": "/dev/xml-json-converter/", "category": "Developer Tools"}, {"name": "XML Sitemap Generator", "url": "/seo/sitemap-generator/", "category": "SEO Tools"}, {"name": "YAML โ JSON Converter", "url": "/doc/yaml-json-converter/", "category": "Format Tools"}];</script>
<!-- JS: engine scripts first, then app.js, then Alpine (defer = document order) -->
<script defer src="https://cdn.peasytools.com/js/app.1b24cdef65d7.js"></script>
<script defer src="https://cdn.peasytools.com/js/glossary-tooltip.d3ff895c91ec.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.14.9/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
<!-- JSON-LD -->
<script type="application/ld+json">
{"@context": "https://schema.org", "@graph": [{"@type": "Article", "headline": "SEO for Single-Page Applications and JavaScript-Heavy Sites", "url": "https://peasysafe.com/guides/seo-single-page-applications-javascript/", "description": "SPAs present unique SEO challenges because content is rendered by JavaScript. Learn how to ensure search engines can discover and index your dynamically generated content.", "publisher": {"@type": "Organization", "name": "Peasy Safe"}, "datePublished": "2026-03-09", "dateModified": "2026-03-14", "educationalLevel": "Beginner", "learningResourceType": "How-To", "timeRequired": "PT2M", "wordCount": 302}, {"@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://peasysafe.com/"}, {"@type": "ListItem", "position": 2, "name": "Guides", "item": "https://peasysafe.com/guides/"}, {"@type": "ListItem", "position": 3, "name": "SEO for Single-Page Applications and JavaScript-He"}]}, {"@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "What does this guide cover?", "acceptedAnswer": {"@type": "Answer", "text": "SPAs present unique SEO challenges because content is rendered by JavaScript. Learn how to ensure search engines can discover and index your dynamically generated content."}}, {"@type": "Question", "name": "Who is this guide for?", "acceptedAnswer": {"@type": "Answer", "text": "This guide is designed for beginner-level users and takes about 2 minutes to read."}}]}]}
</script>
</body>
</html>