Free PDF Joiner: Secure PDF & image Merging

Screenshot of a website interface for joining PDF files. It includes options to upload files, set margins, and buttons to merge or clear files. Text describes tool features and security.

Project Vision

As both a designer and developer, I’ve often found myself needing to merge lengthy client documents into a seamless PDF. Many existing tools required uploading files to remote servers or produced multi-page outputs, which didn't always align with my needs or priorities. I set out to design a solution that addressed the following:

Local Processing: No uploads, ensuring privacy and eliminating server latency.
Flexible Layout Options: Supporting vertical, horizontal, and grid layouts.
Intuitive, Modern Interface: Emphasizing user experience through dark mode, drag-and-drop, and real-time previews.

This led to the creation of Free PDF Joiner, a tool that allows users to merge PDFs and images with ease, all while keeping data processing entirely on the client side.

Design Philosophy

Sleek, Functional Aesthetic

Dark/Light Mode: To cater to different preferences and reduce eye strain, the interface supports both dark and light themes, which are preserved across sessions via localStorage.
Minimalist UI: With Tailwind CSS, I aimed for a clean, responsive design. The subtle cyan accents and animations in the dropzone area guide users without overwhelming them.
Thumbnail Previews: Instant visual feedback (including PDF first-page previews via pdf.js) ensures users can quickly verify their files.

Mobile screenshot of a Free PDF Joiner interface in dark mode with options to add files, set layout, and merge or clear files. Instructions and shown below.

Mobile screenshot of a Free PDF Joiner interface in light mode with options to add files, set layout, and merge or clear files. Instructions and shown below.

User-Centric Interactions

Drag-and-Drop Reordering: I integrated Sortable.js to allow users to easily rearrange files, mimicking the behavior of desktop applications.
Real-Time Feedback: Dynamic alerts (errors, success messages) are designed to auto-dismiss after 3 seconds, ensuring a clutter-free interface.
One-Click Actions: Streamlined actions like "Merge" and "Clear" buttons were created to reduce friction in workflows, with accessible hover states and focus rings for improved usability.

Screenshot of a PDF joiner interface showing four files ready to merge, with buttons to merge, clear files, or add more. The layout and margin settings are displayed at the top.

Core Functionality

Client-Side Processing: Using pdf-lib and modern browser APIs, the tool processes files locally, producing merged PDFs in seconds, even with larger files.
Flexible Layout Engine: Users can choose from vertical, horizontal, or grid layouts, and adjust margins for precise control over the document's presentation.
Multi-Format Support: The tool supports merging JPG, PNG, WEBP, and PDF files, with automatic conversion of WebP images to PNG for PDF compatibility.

Takeaways

Privacy and speed were central to the design of this tool. Many users, especially those in legal, design, or healthcare fields, prefer keeping their sensitive documents off cloud-based servers. By processing everything locally, I’ve helped eliminate privacy concerns while creating a fast, user-friendly alternative to traditional, ad-heavy tools.

Explore the tool: Free PDF Joiner