---
layout: default
title: Professional Tools
description: Local-first browser tools for PDF and image processing. All processing happens in your browser - no uploads, complete privacy.
permalink: /playground/tools/
---

<div class="tools-container">
    <header class="tools-header">
        <h1>Professional Toolset</h1>
        <p class="tools-tagline">Local-first browser engine for private document processing.</p>
        <div class="tools-search">
            <input type="text" id="toolSearch" placeholder="What do you need to do?" aria-label="Search tools">
        </div>
    </header>

    <nav class="tools-filter" role="navigation" aria-label="Tool categories">
        <button class="filter-btn active" data-category="all">All</button>
        <button class="filter-btn" data-category="organize">Organize</button>
        <button class="filter-btn" data-category="optimize">Optimize</button>
        <button class="filter-btn" data-category="convert">Convert</button>
        <button class="filter-btn" data-category="edit">Edit</button>
        <button class="filter-btn" data-category="image">Image</button>
    </nav>

    <section class="tools-grid" role="main">
        <!-- ORGANIZE -->
        <article class="tool-card" data-category="organize">
            <div class="tool-icon" role="img" aria-label="Document icon">📄</div>
            <h3><a href="/playground/tools/pdf-merge/">Merge PDF</a></h3>
            <p>Combine multiple PDF files into one.</p>
        </article>

        <article class="tool-card" data-category="organize">
            <div class="tool-icon" role="img" aria-label="Scissors icon">✂️</div>
            <h3><a href="/playground/tools/pdf-split/">Split PDF</a></h3>
            <p>Separate pages into individual documents.</p>
        </article>

        <article class="tool-card" data-category="organize">
            <div class="tool-icon" role="img" aria-label="Clipboard icon">📋</div>
            <h3><a href="/playground/tools/organize-pages/">Organize Pages</a></h3>
            <p>Reorder, rotate, or delete pages.</p>
        </article>

        <!-- OPTIMIZE -->
        <article class="tool-card" data-category="optimize">
            <div class="tool-icon" role="img" aria-label="Compression icon">🗜️</div>
            <h3><a href="/playground/tools/compress-pdf/">Compress PDF</a></h3>
            <p>Reduce file size with high quality.</p>
        </article>

        <!-- CONVERT -->
        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Blue book icon">📘</div>
            <h3><a href="/playground/tools/word-to-pdf/">Word to PDF</a></h3>
            <p>Convert DOCX to PDF.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Green book icon">📗</div>
            <h3><a href="/playground/tools/excel-to-pdf/">Excel to PDF</a></h3>
            <p>Convert spreadsheets to PDF.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Blue book icon">📘</div>
            <h3><a href="/playground/tools/pdf-to-word/">PDF to Word</a></h3>
            <p>Convert to editable Word docs.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Green book icon">📗</div>
            <h3><a href="/playground/tools/pdf-to-excel/">PDF to Excel</a></h3>
            <p>Put data into spreadsheets.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Presentation icon">📊</div>
            <h3><a href="/playground/tools/pdf-to-ppt/">PDF to PowerPoint</a></h3>
            <p>Convert to editable presentations.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Picture frame icon">🖼️</div>
            <h3><a href="/playground/tools/jpg-to-pdf/">JPG to PDF</a></h3>
            <p>Convert images to PDF docs.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Globe icon">🌐</div>
            <h3><a href="/playground/tools/html-to-pdf/">HTML to PDF</a></h3>
            <p>Convert webpages to PDF.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Picture frame icon">🖼️</div>
            <h3><a href="/playground/tools/html-to-image/">HTML to Image</a></h3>
            <p>Convert HTML to PNG/JPG images.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Artist palette icon">🎨</div>
            <h3><a href="/playground/tools/pdf-color-converter/">PDF Color Converter</a></h3>
            <p>Convert PDF color spaces: RGB, CMYK, Grayscale.</p>
        </article>

        <!-- EDIT -->
        <article class="tool-card" data-category="edit">
            <div class="tool-icon" role="img" aria-label="Pencil icon">✏️</div>
            <h3><a href="/playground/tools/edit-pdf/">Edit PDF</a></h3>
            <p>Add text and images to PDFs.</p>
        </article>

        <article class="tool-card" data-category="edit">
            <div class="tool-icon" role="img" aria-label="Writing hand icon">✍️</div>
            <h3><a href="/playground/tools/sign-pdf/">Sign PDF</a></h3>
            <p>Add visual signatures to PDFs.</p>
        </article>

        <article class="tool-card" data-category="edit">
            <div class="tool-icon" role="img" aria-label="Droplet icon">💧</div>
            <h3><a href="/playground/tools/watermark-image/">Watermark</a></h3>
            <p>Stamp images or text.</p>
        </article>

        <article class="tool-card" data-category="edit">
            <div class="tool-icon" role="img" aria-label="Droplet icon">💧</div>
            <h3><a href="/playground/tools/watermark-pdf/">Watermark PDF</a></h3>
            <p>Add watermarks to PDF documents.</p>
        </article>

        <article class="tool-card" data-category="edit">
            <div class="tool-icon" role="img" aria-label="Scissors icon">✂️</div>
            <h3><a href="/playground/tools/crop-pdf/">Crop PDF</a></h3>
            <p>Crop margins or specific areas.</p>
        </article>

        <!-- IMAGE -->
        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Compression icon">🗜️</div>
            <h3><a href="/playground/tools/image-compress/">Compress Image</a></h3>
            <p>Reduce file size while preserving quality.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Ruler icon">📐</div>
            <h3><a href="/playground/tools/resize-image/">Resize Image</a></h3>
            <p>Adjust width, height, percentage or pixels.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Magnifying glass icon">🔍</div>
            <h3><a href="/playground/tools/upscale-image/">Upscale Image</a></h3>
            <p>Increase resolution 2x or 4x with HD mode.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Scissors icon">✂️</div>
            <h3><a href="/playground/tools/crop-image/">Crop Image</a></h3>
            <p>Modify aspect and crop any area.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Reload icon">🔄</div>
            <h3><a href="/playground/tools/convert-to-jpg/">Convert to JPG</a></h3>
            <p>Convert PNG, GIF, WebP to JPG.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Rotate icon">↻</div>
            <h3><a href="/playground/tools/rotate-image/">Rotate Image</a></h3>
            <p>Rotate and flip images any angle.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Laughing emoji icon">😂</div>
            <h3><a href="/playground/tools/meme-generator/">Meme Generator</a></h3>
            <p>Create memes with top/bottom text.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Artist palette icon">🎨</div>
            <h3><a href="/playground/tools/photo-editor/">Photo Editor</a></h3>
            <p>Apply filters, adjust brightness, contrast.</p>
        </article>

        <article class="tool-card" data-category="convert">
            <div class="tool-icon" role="img" aria-label="Reload icon">🔄</div>
            <h3><a href="/playground/tools/jpg-converter/">JPG Converter</a></h3>
            <p>Convert JPG to PNG or animated GIF.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Theater masks icon">🎭</div>
            <h3><a href="/playground/tools/blur-faces/">Blur Faces</a></h3>
            <p>AI-powered automatic face blurring.</p>
        </article>

        <article class="tool-card" data-category="image">
            <div class="tool-icon" role="img" aria-label="Picture frame icon">🖼️</div>
            <h3><a href="/playground/tools/remove-background/">Remove Background</a></h3>
            <p>Remove solid color backgrounds.</p>
        </article>
    </section>

    <div class="no-results" style="display: none;">
        <p>No tools found matching your search.</p>
    </div>
</div>

<style>
.tools-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.tools-header {
    text-align: center;
    margin-bottom: 3rem;
}

.tools-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.tools-tagline {
    color: var(--text-secondary, #666);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.tools-search {
    max-width: 600px;
    margin: 0 auto;
}

.tools-search input {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 50px;
    outline: none;
    transition: border-color 0.3s;
}

.tools-search input:focus {
    border-color: var(--primary-color, #0066cc);
}

.tools-filter {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.filter-btn {
    padding: 0.5rem 1.5rem;
    background: transparent;
    border: 2px solid var(--border-color, #ddd);
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

.filter-btn:hover {
    border-color: var(--primary-color, #0066cc);
    color: var(--primary-color, #0066cc);
}

.filter-btn:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
}

.filter-btn.active {
    background: var(--primary-color, #0066cc);
    color: white;
    border-color: var(--primary-color, #0066cc);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.tool-card {
    position: relative;
    padding: 2rem 1.5rem;
    background: var(--card-bg, #fff);
    border: 2px solid var(--border-color, #ddd);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s;
}

.tool-card:not([data-status="coming-soon"]):hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color, #0066cc);
}

.tool-card:focus-within {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
}

.tool-card[data-status="coming-soon"] {
    opacity: 0.6;
    cursor: default;
}

.tool-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tool-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.tool-card h3 a {
    color: inherit;
    text-decoration: none;
}

.tool-card h3 a:hover {
    color: var(--primary-color, #0066cc);
}

.tool-card p {
    margin: 0;
    color: var(--text-secondary, #666);
    font-size: 0.9rem;
}

.badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    background: var(--primary-color, #0066cc);
    color: white;
    font-size: 0.75rem;
    border-radius: 12px;
    font-weight: 600;
}

.no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary, #666);
}

@media (max-width: 768px) {
    .tools-header h1 {
        font-size: 2rem;
    }

    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    .tool-card {
        padding: 1.5rem 1rem;
    }
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .tools-container {
        --card-bg: #1a1a1a;
        --border-color: #333;
        --text-secondary: #aaa;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('toolSearch');
    const filterBtns = document.querySelectorAll('.filter-btn');
    const toolCards = document.querySelectorAll('.tool-card');
    const noResults = document.querySelector('.no-results');

    let currentCategory = 'all';

    // Initialize aria-pressed for filter buttons
    filterBtns.forEach(btn => {
        btn.setAttribute('aria-pressed', btn.classList.contains('active'));
    });

    // Filter by category
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            filterBtns.forEach(b => {
                b.classList.remove('active');
                b.setAttribute('aria-pressed', 'false');
            });
            btn.classList.add('active');
            btn.setAttribute('aria-pressed', 'true');
            currentCategory = btn.dataset.category;
            filterTools();
        });
    });

    // Search functionality
    searchInput.addEventListener('input', () => {
        filterTools();
    });

    function filterTools() {
        const searchTerm = searchInput.value.toLowerCase();
        let visibleCount = 0;

        toolCards.forEach(card => {
            const category = card.dataset.category;
            const title = card.querySelector('h3').textContent.toLowerCase();
            const description = card.querySelector('p').textContent.toLowerCase();

            const matchesCategory = currentCategory === 'all' || category === currentCategory;
            const matchesSearch = searchTerm === '' ||
                                title.includes(searchTerm) ||
                                description.includes(searchTerm);

            if (matchesCategory && matchesSearch) {
                card.style.display = 'block';
                visibleCount++;
            } else {
                card.style.display = 'none';
            }
        });

        noResults.style.display = visibleCount === 0 ? 'block' : 'none';

        // Announce results to screen readers
        announceResults(visibleCount);
    }

    function announceResults(count) {
        // Create or update live region for screen reader announcements
        let liveRegion = document.getElementById('tools-live-region');
        if (!liveRegion) {
            liveRegion = document.createElement('div');
            liveRegion.id = 'tools-live-region';
            liveRegion.setAttribute('aria-live', 'polite');
            liveRegion.setAttribute('aria-atomic', 'true');
            liveRegion.className = 'sr-only';
            document.body.appendChild(liveRegion);
        }

        const message = count === 0
            ? 'No tools found matching your search.'
            : `${count} tool${count === 1 ? '' : 's'} found.`;
        liveRegion.textContent = message;
    }
});
</script>