bentopdf/src/pages/pdf-to-markdown.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="PDF to Markdown Online Free - PDF to Markdown Tool | BentoPDF"
    />
    <meta
      name="description"
      content="Convert PDF text and tables to Markdown format. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta name="keywords" content="pdf to markdown, 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/pdf-to-markdown" />

    <!-- Open Graph / Facebook / LinkedIn -->
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://www.bentopdf.com/pdf-to-markdown"
    />
    <meta
      property="og:title"
      content="PDF to Markdown Online Free - PDF to Markdown Tool | BentoPDF"
    />
    <meta
      property="og:description"
      content="Convert PDF text and tables to Markdown format. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      property="og:image"
      content="https://www.bentopdf.com/images/og-pdf-to-markdown.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/pdf-to-markdown"
    />
    <meta name="twitter:title" content="PDF to Markdown Free" />
    <meta
      name="twitter:description"
      content="Convert PDF text and tables to Markdown format. Free, no uploads, no signup. Runs entirely in your browser."
    />
    <meta
      name="twitter:image"
      content="https://www.bentopdf.com/images/twitter-pdf-to-markdown.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="PDF to Markdown" />

    <title>PDF to Markdown - BentoPDF</title>

    <link href="/src/css/styles.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 flex-col items-center justify-start py-12 p-4 bg-gray-900"
    >
      <div
        id="tool-uploader"
        class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md: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:pdfToMarkdown.name"
        >
          PDF to Markdown
        </h1>
        <p class="text-gray-400 mb-6" data-i18n="tools:pdfToMarkdown.subtitle">
          Convert PDF text and tables to Markdown format.
        </p>

        <div
          id="drop-zone"
          class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 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-400">
              <span class="font-semibold" data-i18n="upload.clickToSelect"
                >Click to select files</span
              >
              <span data-i18n="upload.orDragAndDrop">or drag and drop</span>
            </p>
            <p
              class="text-xs text-gray-500"
              data-i18n="upload.hints.oneOrMorePdfs"
            >
              One or more PDF files
            </p>
            <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave">
              Your files never leave your device.
            </p>
          </div>
          <input
            id="file-input"
            type="file"
            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
            accept="application/pdf"
            multiple
          />
        </div>

        <div id="file-controls" class="hidden mt-4 flex gap-3">
          <button
            id="add-more-btn"
            class="btn bg-indigo-600 hover:bg-indigo-700 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="plus"></i> <span>Add More Files</span>
          </button>
          <button
            id="clear-files-btn"
            class="btn bg-gray-700 hover:bg-gray-600 text-white font-semibold px-4 py-2 rounded-lg flex items-center gap-2"
          >
            <i data-lucide="trash-2"></i> <span>Clear All</span>
          </button>
        </div>

        <div id="file-display-area" class="mt-4 space-y-2"></div>

        <div id="convert-options" class="hidden mt-6 space-y-6">
          <div class="flex items-center gap-3">
            <input
              type="checkbox"
              id="include-images"
              class="w-4 h-4 rounded bg-gray-700 border-gray-600 text-indigo-600 focus:ring-indigo-500"
            />
            <label for="include-images" class="text-sm text-gray-300"
              >Include images as base64</label
            >
          </div>
          <button id="process-btn" class="btn-gradient w-full mt-4">
            Convert to Markdown
          </button>
        </div>
      </div>
    </div>

    <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">
          Processing...
        </p>
      </div>
    </div>

    <div
      id="alert-modal"
      class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden"
    >
      <div
        class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700"
      >
        <h3 id="alert-title" class="text-xl font-bold text-white mb-2">
          Alert
        </h3>
        <p id="alert-message" class="text-gray-300 mb-6"></p>
        <button
          id="alert-ok"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
        >
          OK
        </button>
      </div>
    </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">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">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">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 well does PDF to Markdown preserve the document structure?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Headings, paragraphs, lists, and basic bold and italic formatting
            are converted, and each page is separated by a horizontal rule (---)
            in the output. Heading levels are inferred from font sizes, so a
            document with inconsistent styling may come out with some headings
            at the wrong level.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            What does the Include Images option do?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            When it's checked, pictures from the PDF are embedded directly in
            the Markdown as base64 data, so the single .md file is
            self-contained but can get large. Leave it off for text-heavy
            documents to keep the output small and readable in a plain editor.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Why is the Markdown empty or almost empty?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            The converter reads the PDF's text layer, so a scanned document
            that's only images has nothing to convert. Run it through
            <a href="/ocr-pdf" class="text-indigo-300 hover:text-indigo-400"
              >OCR PDF</a
            >
            first to add a text layer, then convert the result.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            How does it handle multi-column layouts, footnotes, and sidebars?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Complex layouts are the weak spot: multi-column text can be
            interleaved, and sidebars or footnotes may land in the wrong place.
            Expect to review and tidy the output for magazine-style pages, while
            single-column documents need little cleanup.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I convert several PDFs to Markdown at once?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            Upload multiple PDFs and click Convert once. One file downloads as
            filename.md; several come back as markdown-files.zip with one .md
            per PDF, and duplicate names get a numbered suffix.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is this the same as PDF to Text?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No.
            <a href="/pdf-to-text" class="text-indigo-300 hover:text-indigo-400"
              >PDF to Text</a
            >
            gives you raw text with no structure, which is better for feeding
            into scripts. PDF to Markdown keeps headings, lists, and emphasis so
            the result is ready to paste into Obsidian, a wiki, or a static site
            generator.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Can I convert a password-protected PDF?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            If the file needs a password to open, you're prompted for it before
            conversion starts and the text is extracted as usual. The password
            isn't stored anywhere, and the Markdown output has no protection of
            its own.
          </p>
        </details>
        <details class="faq-d">
          <summary class="faq-d-q">
            Is my PDF uploaded to convert it to Markdown?
            <i data-lucide="plus" class="faq-d-icon"></i>
          </summary>
          <p class="faq-d-a">
            No. Conversion runs on a PyMuPDF engine loaded into your browser as
            WebAssembly, and the .md file or ZIP is generated on your machine.
            Research papers, contracts, and internal docs stay private.
          </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/pdf-to-markdown-page.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": "PDF to Markdown - 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 pdf to markdown online",
        "description": "Learn how to pdf to markdown 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": "PDF to Markdown",
            "item": "https://www.bentopdf.com/pdf-to-markdown"
          }
        ]
      }
    </script>
  </body>
</html>