HTMLtoPDF.pro — Free PDF Tools, 100% in Your Browser

The only PDF toolkit that never touches your files. Merge, compress, convert, split, rotate and protect PDFs entirely in your browser. No uploads, no servers, no tracking. Open source.

htmltopdf.pro

Why This Exists

Every popular PDF tool — iLovePDF, Smallpdf, PDF2Go — uploads your files to their servers. Your contracts, tax documents, medical records, and private photos pass through third-party infrastructure you don't control.

HTMLtoPDF.pro eliminates this entirely. Every tool runs in your browser using client-side JavaScript. Your files never leave your device. There is no server to upload to, no account to create, no ads to endure, and no file size limits beyond your browser's memory.

Tools (14)

Convert

| PNG to PDF | Convert PNG images to PDF with transparency | /png-to-pdf | | PDF to JPG | Render PDF pages as high-quality JPG images | /pdf-to-jpg | | PDF to PNG | Render PDF pages as lossless PNG images | /pdf-to-png |

Organize

Optimize

Security

Architecture

src/
├── app.html                    # Shell HTML with site-wide SEO + structured data
├── app.css                     # Tailwind v4 + custom animations
├── lib/
│   ├── tools/
│   │   └── registry.ts         # Central tool config: metadata, SEO, FAQs, cross-links
│   ├── components/
│   │   ├── NavHeader.svelte    # Top nav with tool links + mobile menu
│   │   ├── Footer.svelte       # Privacy badge, GitHub, sponsor
│   │   ├── ToolPageLayout.svelte  # Standard tool page: SEO head, breadcrumb, FAQs
│   │   ├── FileDropZone.svelte # Drag-drop zone for PDF/image files
│   │   ├── RelatedTools.svelte # Cross-link grid at bottom of tool pages
│   │   └── UnifiedInput.svelte # HTML/file/URL input for HTML-to-PDF
│   └── engine/
│       └── converter.ts        # HTML-to-PDF rendering pipeline
└── routes/
    ├── +page.svelte            # Homepage: tool hub with card grid + SEO article
    ├── +layout.svelte          # Shared nav + footer wrapper
    ├── +layout.ts              # Prerender + SSR config
    ├── sitemap.xml/+server.ts  # Dynamic sitemap from tool registry
    ├── html-to-pdf/            # HTML → PDF (iframe + html2canvas + jsPDF)
    ├── merge-pdf/              # Combine PDFs (pdf-lib)
    ├── compress-pdf/           # Reduce size (PDF.js + canvas + pdf-lib)
    ├── jpg-to-pdf/             # Images → PDF (pdf-lib)
    ├── pdf-to-jpg/             # PDF → JPG images (PDF.js)
    ├── split-pdf/              # Extract/split pages (pdf-lib)
    ├── rotate-pdf/             # Rotate pages (pdf-lib)
    ├── add-page-numbers/       # Stamp page numbers (pdf-lib)
    ├── watermark-pdf/          # Text watermark (pdf-lib)
    ├── pdf-to-png/             # PDF → PNG images (PDF.js)
    ├── png-to-pdf/             # PNG → PDF (pdf-lib)
    ├── protect-pdf/            # Password encryption (pdf-lib)
    ├── unlock-pdf/             # Password removal (pdf-lib)
    └── reorder-pages/          # Visual page reorder (PDF.js + pdf-lib)

Tool Registry

Every tool is defined in src/lib/tools/registry.ts. A single config object drives:

• Navigation — NavHeader renders links from the registry
• Homepage — Card grid generated from the registry
• Sitemap — sitemap.xml endpoint iterates the registry at build time
• Cross-linking — relatedSlugs creates internal link graphs between tools
• Per-page SEO — metaTitle, metaDescription, keywords populate <svelte:head>
• Structured data — WebApplication, FAQPage, and BreadcrumbList schemas per page
• FAQ sections — Each tool has 3-4 FAQs rendered as accordions + FAQ schema

Processing Pipeline

All PDF operations run client-side:

All libraries are loaded on-demand via dynamic import() — only the code needed for the active tool is downloaded.

SEO

Every page is optimized for search:

• Per-tool <svelte:head> with unique title, description, keywords, canonical URL, Open Graph, and Twitter Card tags
• WebApplication schema per tool for rich results
• FAQPage schema per tool for FAQ rich snippets in search
• BreadcrumbList schema per tool for breadcrumb display in search
• Organization schema site-wide
• Dynamic sitemap.xml generated from the tool registry at build time (15 URLs)
• Visible breadcrumbs on each tool page
• Internal cross-linking via Related Tools grid and navigation
• Long-form SEO content on homepage with comparison table, FAQ, and use cases
• Visible FAQ accordions on every tool page (matching FAQ schema)

Target Keywords

Each tool page targets its primary keyword plus long-tail modifiers: "free", "online", "no upload", "private", "without uploading".

Differentiators

Positioning: "The only PDF toolkit that never touches your files."

Tech Stack

HTML-to-PDF: Gemini Infographic Engine

The HTML-to-PDF tool includes a specialized rendering pipeline for Gemini Canvas infographics:

1. Input detection — auto-detects raw HTML, .html files, or URLs
2. Iframe rendering — loads HTML via srcdoc so the browser executes all <script> tags (Tailwind CDN, Chart.js), loads fonts, and processes CSS
3. Resource waiting — waits for document.fonts.ready, image loads, and a settling delay for async scripts
4. Canvas capture — html2canvas rasterizes the fully rendered DOM
5. Smart page fitting — adapts PDF page height to content so every page is completely filled, no half-empty endings
6. Download — PDF delivered via URL.createObjectURL()

This solves the critical problem with Gemini infographics: standard converters inject HTML as static markup without executing scripts, so Tailwind classes are ignored, Chart.js canvases stay blank, and fonts fall back to defaults.

Privacy

Every tool's processing pipeline is browser-native:

• PDF tools: File → ArrayBuffer → pdf-lib / PDF.js → Blob → download
• Image tools: File → Canvas → pdf-lib / Blob → download
• HTML tool: HTML → iframe → html2canvas → jsPDF → Blob → download

No fetch() during processing. No WebSocket. No telemetry. No cookies. No analytics.

One exception: the HTML-to-PDF URL mode fetches pages via a public CORS proxy (allorigins). The proxy sees the URL but never the PDF. To avoid even this, paste the HTML source directly.

Development

npm install
npm run dev       # development server at localhost:5173

Build

npm run build     # outputs to /build
npm run preview   # preview production build locally

The /build directory is a fully static site. Deploy to GitHub Pages, Cloudflare Pages, Vercel, Netlify, or any CDN.

Sponsored by Fexr

Fexr — Algorithmic infrastructure for community-driven market intelligence.

License

Open source. Contributions welcome.