Building PDF Chapter Splitter: Making PDFs Easier to Navigate
Keywords
React, React DOM, TypeScript, JavaScript, Vite, vitejs/plugin-react, pdf-lib, pdfjs-dist, JSZip, Tailwind CSS, HTML, CSS, ES Modules, Node.js, GitHub
The Problem
As someone who spends a lot of time reading, annotating, and taking detailed notes, I often encountered a recurring issue: large PDFs. While PDFs are a reliable format for storing content, they can quickly become cumbersome when they span hundreds of pages and contain dozens of chapters. Flipping through a 300-page document to locate a single chapter slows down my workflow considerably. Additionally, large PDFs can be problematic on handheld devices, making annotation more cumbersome, and sometimes printing or opening these files strains system resources, causing delays or performance degradation.
There are multiple scenarios where smaller PDFs are useful:
- Annotating and taking notes chapter by chapter.
- Reading on handheld devices where large PDFs may lag or be difficult to navigate.
- Printing individual chapters without wasting paper or time.
- Efficiently sharing smaller, relevant portions of a PDF.
The Approach
To address this problem, I built PDF Chapter Splitter, a lightweight tool designed to automatically split PDFs into individual chapter files. The process is simple: drag a PDF into the app, and it outputs separate files for each chapter. For example, a PDF with 12 chapters will generate 12 files named after each chapter, with an option to download all files as a ZIP archive.
Originally, the app was created as a web application using React, TypeScript, and JavaScript. Leveraging libraries like pdf-lib, pdfjs-dist, and JSZip, the web app could split PDFs directly in the browser. This setup ensured ease of access and cross-platform compatibility, allowing users to run the tool without installing anything.
However, privacy and portability were key considerations. Since PDFs often contain sensitive material, I wanted a version that performed 100% local processing. To achieve this, I wrapped the web app in an Electron shell, creating a standalone desktop application for macOS, and soon, Windows. This Electron wrapper ensures all PDF processing happens on your computer, without uploading files to any server, keeping user data private and secure.
The app’s open-source nature is another strength: it does not rely on any external AI APIs or services, reducing cost and enhancing privacy while keeping the functionality lightweight and transparent. You can access the web version by clicking the “Open Web App” button, and the source code is available on GitHub.
Implementation Details
- Built using React and React DOM with TypeScript.
- Bundled with Vite and vitejs/plugin-react.
- PDF manipulation handled using pdf-lib and pdfjs-dist.
- ZIP file creation via JSZip.
- Styled with Tailwind CSS, HTML, and CSS.
- Runs as an Electron desktop app for offline and privacy-first usage.
What’s Next
I am currently finalizing a Windows version, performing testing and bug fixes to ensure a smooth user experience. My broader vision, however, is to integrate this functionality directly into Obsidian, my preferred workflow tool for note-taking and PDF annotation. The goal is to make splitting PDFs as simple as right-clicking a file within Obsidian and selecting “Split Chapters.” This will streamline my workflow and allow me to manage PDFs without leaving my note-taking environment.
Conclusion
PDF Chapter Splitter started as a personal tool to make large PDFs more manageable. By combining a web-first approach with an offline Electron wrapper, it provides a fast, secure, and private solution for splitting PDFs into chapters. It supports multiple use cases, from annotations to reading on handheld devices, printing, and sharing. Open-source and free from external dependencies, it demonstrates that simple, focused tools can significantly improve workflow and productivity. The next steps involve expanding platform support and integrating the functionality into Obsidian for an even more seamless experience.
