Files
bentopdf/src/pages/bookmark.html
T
2026-09-05 12:55:31 +05:30

966 lines
37 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<meta
name="title"
content="Bookmark Online Free - Bookmark Tool | BentoPDF"
/>
<meta
name="description"
content="Bookmark online. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta name="keywords" content="bookmark, online pdf" />
<meta name="author" content="BentoPDF" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<!-- Canonical URL -->
<link rel="canonical" href="https://www.bentopdf.com/bookmark" />
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.bentopdf.com/bookmark" />
<meta
property="og:title"
content="Bookmark Online Free - Bookmark Tool | BentoPDF"
/>
<meta
property="og:description"
content="Bookmark online. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
property="og:image"
content="https://www.bentopdf.com/images/og-bookmark.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="BentoPDF" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://www.bentopdf.com/bookmark" />
<meta name="twitter:title" content="Bookmark Free" />
<meta
name="twitter:description"
content="Bookmark online. Free, no uploads, no signup. Runs entirely in your browser."
/>
<meta
name="twitter:image"
content="https://www.bentopdf.com/images/twitter-bookmark.png"
/>
<meta name="twitter:site" content="@BentoPDF" />
<!-- Mobile Web App -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Bookmark" />
<title>Advanced PDF Bookmark Tool - BentoPDF</title>
<link href="/src/css/styles.css" rel="stylesheet" />
<link href="../../src/css/bookmark.css" rel="stylesheet" />
<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/images/favicon-512x512.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/apple-touch-icon.png"
/>
<link rel="icon" href="/favicon.ico" sizes="32x32" />
</head>
<body class="antialiased bg-gray-900">
{{> navbar }}
<div
id="uploader"
class="min-h-screen flex items-center justify-center p-4 bg-gray-900"
>
<div
id="tool-uploader"
class="bg-gray-800 rounded-xl shadow-xl p-8 max-w-2xl w-full text-gray-200 border border-gray-700"
>
<button
id="back-to-tools"
class="flex items-center gap-2 text-indigo-300 hover:text-indigo-400 mb-6 font-semibold"
>
<i data-lucide="arrow-left" class="cursor-pointer"></i>
<span class="cursor-pointer" data-i18n="tools.backToTools">
Back to Tools
</span>
</button>
<h1
class="text-2xl font-bold text-white mb-2"
data-i18n="tools:editBookmarks.name"
>
Edit Bookmarks
</h1>
<p class="text-gray-400 mb-6" data-i18n="tools:editBookmarks.subtitle">
Add, edit, import, delete and extract PDF bookmarks.
</p>
<!-- Drop Zone for Main PDF Upload -->
<div
id="drop-zone"
class="relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-700 hover:bg-gray-600 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-5 pb-6">
<i class="ph ph-upload-simple text-4xl mb-3 text-gray-400"></i>
<p class="mb-2 text-sm text-gray-300">
<span class="font-semibold" data-i18n="upload.clickToSelect"
>Click to select a file</span
>
<span data-i18n="upload.orDragAndDrop">or drag and drop</span>
</p>
<p class="text-xs text-gray-500" data-i18n="upload.hints.singlePdf">
A single PDF file
</p>
<p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
Your files never leave your device.
</p>
</div>
<input
type="file"
id="file-input"
accept=".pdf"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
/>
</div>
<!-- File Display Area -->
<div id="file-display-area" class="mt-4 hidden"></div>
<!-- Auto Extract Checkbox -->
<div class="mt-4">
<label class="flex items-center gap-2 text-sm text-gray-300">
<input
type="checkbox"
id="auto-extract-checkbox"
class="w-4 h-4 accent-blue-500"
/>
<span data-i18n="tools:editBookmarks.autoExtractExisting"
>Auto-extract existing bookmarks</span
>
</label>
</div>
<!-- Import Bookmarks Section -->
<div class="mt-8 pt-6 border-t border-gray-700">
<h3
class="text-sm font-semibold text-gray-300 mb-4"
data-i18n="tools:editBookmarks.importSectionTitle"
>
Or Import Bookmarks
</h3>
<!-- CSV Upload -->
<label class="block mb-4">
<span
class="text-xs text-gray-500"
data-i18n="tools:editBookmarks.csvFormat"
>CSV format: title,page,level</span
>
<div
class="relative flex flex-col items-center justify-center w-full h-32 mt-2 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-4 pb-4">
<i data-lucide="sheet" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-xs text-gray-400">
<span
class="font-semibold"
data-i18n="tools:editBookmarks.uploadCsvAction"
>Click to upload CSV</span
>
<span data-i18n="tools:editBookmarks.orDragHere"
>or drag here</span
>
</p>
</div>
<input
type="file"
id="csv-input"
accept=".csv"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
/>
</div>
</label>
<!-- JSON Upload -->
<label class="block">
<span
class="text-xs text-gray-500"
data-i18n="tools:editBookmarks.jsonFormat"
>JSON format</span
>
<div
class="relative flex flex-col items-center justify-center w-full h-32 mt-2 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-800 hover:bg-gray-700 transition-colors duration-300"
>
<div class="flex flex-col items-center justify-center pt-4 pb-4">
<i data-lucide="braces" class="w-8 h-8 mb-2 text-gray-400"></i>
<p class="text-xs text-gray-400">
<span
class="font-semibold"
data-i18n="tools:editBookmarks.uploadJsonAction"
>Click to upload JSON</span
>
<span data-i18n="tools:editBookmarks.orDragHere"
>or drag here</span
>
</p>
</div>
<input
type="file"
id="json-input"
accept=".json"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
/>
</div>
</label>
</div>
</div>
</div>
<div id="app" class="hidden bg-gray-900 min-h-screen">
<header
class="bg-gray-800 border-b border-gray-700 shadow-sm sticky top-0 z-50"
>
<div class="max-w-7xl mx-auto px-4 py-3">
<div class="flex items-center justify-between flex-wrap gap-2">
<div class="text-xl font-bold text-white" id="filename-display">
PDF Bookmark Editor
</div>
<div class="flex gap-2 flex-wrap">
<button
id="undo-btn"
class="px-3 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
disabled
>
<i data-lucide="undo-2" class="w-4 h-4"></i> Undo
</button>
<button
id="redo-btn"
class="px-3 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1"
disabled
>
<i data-lucide="redo-2" class="w-4 h-4"></i> Redo
</button>
<button
id="delete-all-btn"
class="px-3 py-2 text-sm bg-red-600 hover:bg-red-700 text-white rounded flex items-center gap-1"
>
<i data-lucide="trash-2" class="w-4 h-4"></i> Delete All
</button>
<button
id="reset-btn"
class="px-3 py-2 text-sm bg-orange-600 hover:bg-orange-700 text-white rounded flex items-center gap-1"
>
<i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reset
</button>
<button
id="back-btn"
class="px-3 py-2 text-sm bg-gray-700 hover:bg-gray-600 text-white rounded flex items-center gap-1"
>
<i data-lucide="arrow-left" class="w-4 h-4"></i> Back to Tools
</button>
</div>
</div>
</div>
</header>
<div class="lg:hidden bg-gray-800 border-b border-gray-700">
<div class="flex">
<button
id="show-viewer-btn"
class="flex-1 py-3 text-sm font-medium bg-indigo-600 text-white"
>
PDF Viewer
</button>
<button
id="show-bookmarks-btn"
class="flex-1 py-3 text-sm font-medium text-gray-300 hover:text-white"
>
Bookmarks
</button>
</div>
</div>
<div class="max-w-7xl mx-auto p-4">
<div class="flex flex-col lg:flex-row gap-4">
<div id="viewer-section" class="w-full lg:w-[50%] flex-shrink-0">
<div class="bg-white rounded-lg shadow-lg p-4">
<div
class="flex flex-wrap items-center justify-between gap-2 mb-4"
>
<div class="flex items-center gap-2">
<button
id="prev-page"
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm"
>
<i
data-lucide="chevron-left"
class="w-5 h-5 text-blue-600"
></i>
</button>
<span
id="page-indicator"
class="text-sm font-medium text-gray-700 whitespace-nowrap"
>Page 1 / 1</span
>
<button
id="next-page"
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm"
>
<i
data-lucide="chevron-right"
class="w-5 h-5 text-blue-600"
></i>
</button>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-gray-600">Go to:</span>
<input
type="number"
id="goto-page"
min="1"
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
/>
<button
id="goto-btn"
class="px-3 py-1 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm"
>
Go
</button>
</div>
<div class="flex items-center gap-2">
<button
id="zoom-out-btn"
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm"
title="Zoom Out"
>
<i data-lucide="minus" class="w-5 h-5 text-blue-600"></i>
</button>
<span
id="zoom-indicator"
class="text-sm font-medium text-gray-700 whitespace-nowrap min-w-[60px] text-center"
>100%</span
>
<button
id="zoom-in-btn"
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm"
title="Zoom In"
>
<i data-lucide="plus" class="w-5 h-5 text-blue-600"></i>
</button>
<button
id="zoom-fit-btn"
class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-sm"
title="Fit to Width"
>
Fit
</button>
</div>
</div>
<div
id="picking-mode-banner"
class="hidden mb-4 p-3 bg-blue-100 border-2 border-blue-400 rounded-lg"
>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<i
data-lucide="crosshair"
class="w-5 h-5 text-blue-600"
></i>
<span class="text-sm font-medium text-blue-800"
>Click on the PDF to set bookmark destination</span
>
</div>
<button
id="cancel-picking-btn"
class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white rounded text-xs"
>
Cancel
</button>
</div>
</div>
<div
class="overflow-auto border border-gray-200 rounded"
id="canvas-container"
>
<div class="pdf-canvas-wrapper" id="pdf-canvas-wrapper">
<canvas
id="pdf-canvas"
class="max-w-full h-auto mx-auto"
></canvas>
</div>
</div>
</div>
</div>
<div
id="bookmarks-section"
class="hidden lg:block w-full lg:w-[50%] flex-shrink-0"
>
<div class="bg-white rounded-lg shadow-lg p-4">
<h3 class="text-lg font-bold text-gray-800 mb-4">Bookmarks</h3>
<div class="mb-4">
<div class="relative">
<i
data-lucide="search"
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
></i>
<input
type="text"
id="search-bookmarks"
placeholder="Search bookmarks..."
class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-700"
/>
</div>
</div>
<div class="mb-4 p-3 bg-gray-50 rounded-lg">
<input
type="text"
id="bookmark-title"
placeholder="Bookmark title..."
class="w-full px-3 py-2 border border-gray-300 rounded-lg mb-2 text-sm text-gray-700"
/>
<button
id="add-top-level-btn"
class="w-full px-3 py-2 btn-gradient hover:shadow-xl text-white rounded text-sm font-medium !flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200"
>
<i data-lucide="plus" class="w-4 h-4"></i>
<span
>Add to Page <span id="current-page-display">1</span></span
>
</button>
</div>
<div class="mb-4">
<label
class="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2"
>
<input
type="checkbox"
id="batch-mode-checkbox"
class="w-4 h-4"
/>
<span
>Batch Mode (<span id="selected-count">0</span>
selected)</span
>
</label>
<div
id="batch-operations"
class="hidden p-3 bg-blue-50 rounded-lg border border-blue-200"
>
<div class="text-xs font-semibold text-gray-700 mb-2">
Batch Operations
</div>
<div class="flex flex-col gap-2">
<div class="flex gap-2">
<button
id="select-all-btn"
class="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center gap-1"
>
<i data-lucide="check-square" class="w-3 h-3"></i>
Select All
</button>
<button
id="deselect-all-btn"
class="flex-1 px-3 py-2 bg-gray-500 hover:bg-gray-600 text-white rounded text-xs flex items-center justify-center gap-1"
>
<i data-lucide="square" class="w-3 h-3"></i> Deselect
All
</button>
</div>
<select
id="batch-color-select"
class="text-xs p-2 border rounded"
>
<option value="">Set Color...</option>
<option value="null">None</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
</select>
<select
id="batch-style-select"
class="text-xs p-2 border rounded"
>
<option value="">Set Style...</option>
<option value="null">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
<option value="bold-italic">Bold & Italic</option>
</select>
<button
id="batch-delete-btn"
class="px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center gap-1"
>
<i data-lucide="trash-2" class="w-3 h-3"></i> Delete
Selected
</button>
</div>
</div>
</div>
<div class="flex gap-2 mb-4">
<button
id="expand-all-btn"
class="flex-1 px-3 py-2 bg-gradient-to-b from-gray-100 to-gray-200 hover:shadow-md text-gray-700 rounded text-sm font-medium flex items-center justify-center gap-1 focus:ring-2 focus:ring-gray-300 transition duration-200"
>
<i data-lucide="chevrons-down" class="w-4 h-4"></i> Expand All
</button>
<button
id="collapse-all-btn"
class="flex-1 px-3 py-2 bg-gradient-to-b from-gray-100 to-gray-200 hover:shadow-md text-gray-700 rounded text-sm font-medium flex items-center justify-center gap-1 focus:ring-2 focus:ring-gray-300 transition duration-200"
>
<i data-lucide="chevrons-up" class="w-4 h-4"></i> Collapse All
</button>
</div>
<div class="grid grid-cols-2 gap-2 mb-4">
<div class="relative">
<button
id="import-dropdown-btn"
class="w-full px-3 py-2 bg-gradient-to-b from-gray-100 to-gray-200 hover:shadow-md text-gray-700 rounded text-sm font-medium flex items-center justify-center gap-1 focus:ring-2 focus:ring-gray-300 transition duration-200"
>
<i data-lucide="upload" class="w-4 h-4"></i> Import
<i data-lucide="chevron-down" class="w-3 h-3"></i>
</button>
<div
id="import-dropdown"
class="hidden absolute top-full left-0 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10"
>
<button
id="import-csv-btn"
class="w-full px-3 py-2 text-sm text-left flex items-center gap-2 rounded-t-lg bg-gradient-to-b from-gray-50 to-gray-100 hover:shadow-sm hover:from-gray-100 hover:to-gray-200 transition duration-150"
>
<i
data-lucide="file-text"
class="w-4 h-4 text-gray-600"
></i>
Import CSV
</button>
<button
id="import-json-btn"
class="w-full px-3 py-2 text-sm text-left flex items-center gap-2 rounded-b-lg bg-gradient-to-b from-gray-50 to-gray-100 hover:shadow-sm hover:from-gray-100 hover:to-gray-200 transition duration-150"
>
<i data-lucide="braces" class="w-4 h-4 text-gray-600"></i>
Import JSON
</button>
</div>
</div>
<div class="relative">
<button
id="export-dropdown-btn"
class="w-full px-3 py-2 bg-gradient-to-b from-gray-100 to-gray-200 hover:shadow-md text-gray-700 rounded text-sm font-medium flex items-center justify-center gap-1 focus:ring-2 focus:ring-gray-300 transition duration-200"
>
<i data-lucide="download" class="w-4 h-4"></i> Export
<i data-lucide="chevron-down" class="w-3 h-3"></i>
</button>
<div
id="export-dropdown"
class="hidden absolute top-full left-0 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10"
>
<button
id="export-csv-btn"
class="w-full px-3 py-2 text-sm text-left hover:bg-gray-50 flex items-center gap-2 rounded-t-lg"
>
<i data-lucide="file-text" class="w-4 h-4"></i> Export CSV
</button>
<button
id="export-json-btn"
class="w-full px-3 py-2 text-sm text-left hover:bg-gray-50 flex items-center gap-2 rounded-b-lg"
>
<i data-lucide="braces" class="w-4 h-4"></i> Export JSON
</button>
</div>
</div>
</div>
<div
class="mb-4 max-h-96 overflow-y-auto border border-gray-200 rounded-lg p-2"
>
<ul id="bookmark-tree-list" class="space-y-2"></ul>
<div
id="no-bookmarks"
class="text-center py-8 text-gray-400 text-sm"
>
No bookmarks yet. Add one above!
</div>
</div>
<div class="space-y-2">
<button
id="download-btn"
class="w-full px-4 py-2 btn-gradient hover:shadow-xl text-white rounded font-medium !flex items-center justify-center gap-2 focus:ring-2 focus:ring-blue-400 transition duration-200"
>
Save PDF with Bookmarks
</button>
<button
id="extract-existing-btn"
class="w-full px-4 py-2 bg-gray-50 text-gray-800 border border-gray-200 rounded-xl font-medium flex items-center justify-center gap-2 shadow-sm hover:shadow-md transition duration-200"
>
Extract Existing Bookmarks
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="file" id="csv-import-hidden" accept=".csv" class="hidden" />
<input type="file" id="json-import-hidden" accept=".json" class="hidden" />
<!-- Loader Modal -->
<div
id="loader-modal"
class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
>
<div
class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl"
>
<div class="solid-spinner"></div>
<p id="loader-text" class="text-white text-lg font-medium">
Loading PDF...
</p>
</div>
</div>
<div id="modal-container"></div>
<!-- How It Works Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-8 text-center"
data-i18n="howItWorks.title"
>
How It Works
</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
1
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step1Title"
>
Upload File
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step1">
Click or drag and drop your file to begin
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
2
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step2Title"
>
Process
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step2">
Click the process button to start
</p>
</div>
</div>
<div class="flex items-start gap-4">
<div
class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold"
>
3
</div>
<div class="flex-1">
<h3
class="text-lg font-semibold text-white mb-1"
data-i18n="howItWorks.step3Title"
>
Download
</h3>
<p class="text-gray-400" data-i18n="howItWorks.step3">
Save your processed file instantly
</p>
</div>
</div>
</div>
</section>
<!-- Related Tools Section -->
<section class="max-w-6xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="relatedTools.title"
>
Related PDF Tools
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
<a
href="merge-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Merge PDF</h3>
<p class="text-gray-400 text-sm">Free online merge PDF tool</p>
</a>
<a
href="compress-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Compress PDF</h3>
<p class="text-gray-400 text-sm">Free online compress PDF tool</p>
</a>
<a
href="split-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Split PDF</h3>
<p class="text-gray-400 text-sm">Free online split PDF tool</p>
</a>
<a
href="edit-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Edit PDF</h3>
<p class="text-gray-400 text-sm">Free online edit PDF tool</p>
</a>
<a
href="rotate-pdf.html"
class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700"
>
<h3 class="text-white font-semibold mb-1">Rotate PDF</h3>
<p class="text-gray-400 text-sm">Free online rotate PDF tool</p>
</a>
</div>
</section>
<!-- FAQ Section -->
<section class="max-w-4xl mx-auto px-4 py-12">
<h2
class="text-2xl md:text-3xl font-bold text-white mb-6 text-center"
data-i18n="faq.sectionTitle"
>
Frequently Asked Questions
</h2>
<div class="faq-list">
<details class="faq-d">
<summary class="faq-d-q">
How do I add bookmarks to a PDF that doesn't have any?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Upload the PDF, go to a page, type a title, and click Add to Page;
drag entries to nest or reorder them. Click Save PDF with Bookmarks
to download the result. For a printed contents page inside the
document rather than sidebar navigation, use
<a
href="/table-of-contents"
class="text-indigo-300 hover:text-indigo-400"
>Table of Contents</a
>
instead.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Will my existing bookmarks be kept?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Only if you check Auto-extract existing bookmarks before uploading,
or use the extract button afterward, so they load into the panel.
When you save, the panel's contents replace the PDF's bookmark tree
entirely, so anything not loaded into the editor is dropped.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
What is the CSV format for importing bookmarks?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
A header row followed by one line per bookmark with three columns:
title,page,level. Titles containing commas go in double quotes, page
is the 1-based page number, and level controls nesting, with the
lowest number for top-level entries and each deeper child adding
one.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can a bookmark jump to a specific spot on a page instead of the top?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Open the bookmark's edit dialog, turn on Set custom destination, and
either type X and Y coordinates plus a zoom percentage or click the
pick button and then click the exact spot on the page preview. The
bookmark is saved as an XYZ destination, which most readers honor.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Can I color or bold bookmarks?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Each bookmark can be red, blue, green, yellow, purple, or a custom
hex color, and styled bold, italic, or bold italic. Turn on Batch
Mode to select several bookmarks and apply a color or style to all
of them at once.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
How do I get bookmarks out of a PDF for editing in a spreadsheet?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
Load them with Auto-extract, then use Export to CSV or Export to
JSON; the file is named after your PDF with a -bookmarks suffix. The
CSV opens in Excel or Google Sheets, and once you've edited it you
can import it back and save a new PDF.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Does the editor work on password-protected PDFs?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
You'll be asked for the password when you upload the file, and the
editor opens once it's entered. The saved PDF is written without the
password, so protect it again afterward if you need to.
</p>
</details>
<details class="faq-d">
<summary class="faq-d-q">
Is my PDF uploaded while I edit bookmarks?
<i data-lucide="plus" class="faq-d-icon"></i>
</summary>
<p class="faq-d-a">
No. The page preview, the bookmark tree, and the final save are all
handled in your browser with PDF.js and pdf-lib, so the file never
leaves your computer.
</p>
</details>
</div>
</section>
{{> footer }}
<script type="module" src="/src/js/utils/lucide-init.ts"></script>
<script type="module" src="/src/js/utils/full-width.ts"></script>
<script type="module" src="/src/js/utils/simple-mode-footer.ts"></script>
<script type="module" src="/src/js/logic/bookmark-pdf.ts"></script>
<script type="module" src="/src/js/mobileMenu.ts"></script>
<script type="module" src="/src/js/main.ts"></script>
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Bookmark - BentoPDF",
"applicationCategory": "PDF Tool",
"operatingSystem": "Any - Web Browser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to bookmark online",
"description": "Learn how to bookmark using BentoPDF",
"step": [
{
"@type": "HowToStep",
"position": 1,
"name": "Upload File",
"text": "Click or drag and drop your file"
},
{
"@type": "HowToStep",
"position": 2,
"name": "Process",
"text": "Click the process button"
},
{
"@type": "HowToStep",
"position": 3,
"name": "Download",
"text": "Download your processed file"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.bentopdf.com"
},
{
"@type": "ListItem",
"position": 2,
"name": "Bookmark",
"item": "https://www.bentopdf.com/bookmark"
}
]
}
</script>
</body>
</html>