---
layout: default
title: Merge PDF - Combine Multiple PDFs
description: Merge multiple PDF files into one document. All processing happens locally in your browser.
permalink: /playground/tools/pdf-merge/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Merge PDF</h1>
        <p class="tool-description">Combine multiple PDF files into a single document</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">📄</div>
            <div class="drop-zone-text">Click to select PDF files or drag them here</div>
            <div class="drop-zone-hint">You can select multiple files at once</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf" multiple>

        <div id="fileList" class="file-list" style="display: none;">
            <h3>Selected Files</h3>
            <div id="fileItems"></div>
        </div>

        <div class="progress-container" id="progressContainer">
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="progress-text" id="progressText">Processing...</div>
        </div>

        <div class="btn-group">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear All
            </button>
            <button id="mergeBtn" class="btn btn-primary" style="display: none;" disabled>
                Merge PDFs
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Merge unlimited PDF files</li>
            <li>Drag and drop support</li>
            <li>Reorder files before merging</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="../shared/cdn-dependencies.js"></script>
<script>
// Load dependencies for this tool
function handleCDNError(lib) {
  showAlert(`Failed to load ${lib} from CDN. Please check your internet connection and try again.`, 'danger');
  document.getElementById('mergeBtn').disabled = true;
}

// Dynamically load required libraries
const deps = window.CDNDependencies.getToolDeps('pdf-merge');
Object.entries(deps).forEach(([name, dep]) => {
  const script = document.createElement('script');
  script.src = dep.url;
  script.integrity = dep.integrity;
  script.crossOrigin = 'anonymous';
  script.onerror = () => handleCDNError(name);
  document.head.appendChild(script);
});
</script>
<script src="tool.js"></script>