---
layout: default
title: Split PDF - Separate PDF Pages
description: Split PDF files into separate documents. Extract specific pages or split all pages individually.
permalink: /playground/tools/pdf-split/
---

<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>Split PDF</h1>
        <p class="tool-description">Split PDF into separate documents or extract specific pages</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 a PDF file or drag it here</div>
            <div class="drop-zone-hint">Select one PDF file to split</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf">

        <div id="fileInfo" class="file-list" style="display: none;">
            <h3>Selected File</h3>
            <div id="fileDetails"></div>
        </div>

        <div id="splitOptions" style="display: none; margin-top: 2rem;">
            <h3>Split Options</h3>
            <div style="display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem;">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="splitMode" value="all" checked>
                    <span>Split all pages into separate PDFs</span>
                </label>
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input type="radio" name="splitMode" value="range">
                    <span>Extract specific page range</span>
                </label>
                <div id="rangeInput" style="display: none; margin-left: 2rem;">
                    <label for="pageRange" style="display: block; margin-bottom: 0.5rem;">Page range (e.g., 1-3, 5, 7-9):</label>
                    <input type="text" id="pageRange" placeholder="1-3, 5, 7-9"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 100%; max-width: 300px;">
                    <p style="font-size: 0.85rem; color: var(--tool-text-secondary); margin-top: 0.5rem;">
                        Enter page numbers separated by commas. Use hyphen for ranges.
                    </p>
                </div>
            </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
            </button>
            <button id="splitBtn" class="btn btn-primary" style="display: none;" disabled>
                Split PDF
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Split all pages into separate PDFs</li>
            <li>Extract specific page ranges</li>
            <li>Drag and drop support</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('splitBtn').disabled = true;
}

// Dynamically load required libraries
const deps = window.CDNDependencies.getToolDeps('pdf-split');
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>