Free PDF Drawing Tool: Build With Tauri + SvelteKit

Hey guys! Ever wished you could draw directly onto PDFs? Maybe you need to mark up documents, create diagrams, or just doodle without printing anything. Well, I've got something cool to share: I built a free and open-source PDF drawing tool using Tauri and SvelteKit, and I'm stoked to tell you all about it! This project has been a fun journey, and I'm excited to walk you through how it works, why I chose these technologies, and how you can get involved.

The Why Behind the PDF Drawing Tool

So, why build a PDF drawing tool, you ask? The need came from my own workflow frustrations. I was constantly dealing with PDFs, needing to add notes, highlight text, and sometimes even sketch ideas directly on the document. Existing solutions often felt clunky, expensive, or limited in features. Some were web-based and required an internet connection, while others were bloated desktop applications. I wanted something that was:

• Cross-platform: Works on Windows, macOS, and Linux. This was a must-have, as I switch between operating systems frequently.
• Fast and Responsive: Nobody likes lag when drawing! The tool needed to feel snappy and intuitive.
• Open-source: I believe in the power of open-source software. It means anyone can contribute, improve the code, and use it freely.
• Feature-rich: Basic drawing tools like lines, shapes, text, and color selection were essential. I also wanted the ability to save and load drawings.
• Lightweight: Avoid unnecessary bloat, so it runs smoothly, even on older hardware.

That's when I decided to roll up my sleeves and build my own. The main goal was to have a really streamlined tool that would make annotating PDFs a breeze. Along the way, I hoped to learn new skills and contribute something valuable to the open-source community.

Tech Stack: Tauri + SvelteKit

Choosing the right technologies was crucial. After a lot of research, I landed on Tauri and SvelteKit. Here's why:

Tauri: The Rust-Powered Powerhouse

Tauri is a framework for building desktop applications using web technologies (HTML, CSS, and JavaScript). The magic is that it leverages a Rust-based backend for performance and security. Here's what made Tauri appealing:

• Performance: Rust is known for its speed and efficiency, which translates into a responsive and fast-loading application. This was especially important for handling PDF rendering and drawing operations.
• Security: Tauri apps are more secure than Electron apps because they don't rely on a full Chromium browser instance. Instead, they use the system's built-in webview, reducing the attack surface.
• Small Bundle Size: Tauri apps are generally much smaller than Electron apps, which means quicker downloads and less storage space on the user's device.
• Cross-Platform Support: Tauri provides excellent cross-platform support, making it easy to build and deploy applications for Windows, macOS, and Linux from a single codebase.
• Native Capabilities: Tauri allows you to access native system APIs, which is useful for tasks like file handling, printing, and interacting with the operating system.

SvelteKit: The Modern Web Framework

SvelteKit is a framework for building modern web applications. It offers a component-based architecture, a reactive state management system, and a fast development experience. Here's why I chose SvelteKit:

• Fast Performance: Svelte compiles your code to highly optimized JavaScript at build time, resulting in blazing-fast applications.
• Developer Experience: Svelte and SvelteKit have a clean and intuitive syntax, making it easier to write and maintain code. The framework's features like hot module replacement and automatic code splitting make development more efficient.
• Component-Based Architecture: Svelte's component-based architecture allows you to break down your application into reusable UI components, making it easy to organize your code and build complex user interfaces.
• Server-Side Rendering (SSR) and Static Site Generation (SSG): SvelteKit supports SSR and SSG, which can improve performance and SEO.
• Excellent Community: Svelte has a thriving community, which means you can easily find help and resources when you get stuck.

Using SvelteKit on the front end and Tauri on the back end has given me the best of both worlds: a speedy, secure desktop app with a modern UI and easy development. It's like having your cake and eating it, too!

Core Features and Functionality

The application is designed to be user-friendly and packed with features. Here's a quick overview of what you can do:

• PDF Loading: Open and view PDF documents from your local file system. The application uses a PDF rendering library to display the PDF content.
• Drawing Tools: A variety of drawing tools are available, including lines, rectangles, circles, and freehand drawing, allowing you to mark up the PDF with different shapes and strokes.
• Text Annotations: Add text annotations directly onto the PDF, with options for font size, color, and style.
• Color Selection: A color picker allows you to select colors for your drawing tools and text annotations, supporting a wide range of colors.
• Stroke Width: Adjust the stroke width of your drawing tools, giving you control over the thickness of your lines and shapes.
• Saving and Loading: Save your drawings to a separate file, so you can resume your work later. Load your saved drawings to continue where you left off.
• Cross-Platform Compatibility: The app is designed to work seamlessly on Windows, macOS, and Linux, ensuring a consistent user experience across different operating systems.
• Undo/Redo: Undo and redo your actions, making it easy to correct mistakes and experiment with different annotations.

Each feature was implemented keeping in mind that the application needed to be fast and efficient, so I used the best libraries and optimization techniques to deliver a great user experience.

Building the PDF Drawing Tool: A Deep Dive

Building this tool was a learning experience from start to finish. Here's a peek into the development process and some of the key challenges I encountered:

Setting Up the Project

The first step was setting up the project. This involved initializing a new Tauri project and integrating it with SvelteKit. The Tauri CLI makes this process pretty straightforward. I followed the official Tauri documentation and the SvelteKit documentation to configure the project structure and dependencies. This initial setup phase took some time, but it was essential for laying a solid foundation.

PDF Rendering

Rendering the PDF documents was one of the trickiest parts. I needed a library that could parse and render PDF files efficiently. After some research, I decided to use a popular PDF rendering library that offered good performance and features. Integrating this library required some experimentation to ensure that the PDFs were rendered accurately and the drawing tools would work on top of them.

Implementing Drawing Tools

Implementing the drawing tools involved handling user input (mouse clicks, mouse movement) and translating those inputs into visual representations on the PDF. I had to create components for lines, rectangles, circles, and freehand drawing. Each tool required specific logic to draw the shapes accurately. I used a canvas element to draw the annotations on top of the PDF. This also involved implementing logic for color selection, stroke width adjustment, and undo/redo functionality.

Saving and Loading Drawings

Saving and loading drawings required developing a data format to store the annotations. I chose a simple JSON format to store the drawing data, which allowed me to serialize and deserialize the annotations easily. The saving and loading functionality required handling file I/O operations using Tauri's API, which provides secure access to the file system.

Cross-Platform Considerations

Developing for multiple platforms was a significant challenge. I had to ensure that the application behaved consistently on Windows, macOS, and Linux. This involved testing the application on all three platforms and addressing platform-specific issues. Tauri made this easier by abstracting away many of the platform-specific details, but there were still some areas that required specific attention.

The Development Process

My development process generally followed these steps:

1. Planning: Deciding on the features, the architecture, and the user interface.
2. Implementation: Writing code for each feature.
3. Testing: Thoroughly testing each feature on all platforms.
4. Debugging: Fixing any bugs or issues that arose.
5. Refactoring: Improving the code's structure and readability.

Lessons Learned

I encountered several challenges and learned many valuable lessons during the development process:

• PDF Rendering: Handling PDF rendering can be resource-intensive, so I had to optimize the rendering process for performance. I found that caching certain elements and using efficient rendering techniques improved the application's speed.
• Cross-Platform Compatibility: Ensuring cross-platform compatibility can be tricky. I learned to anticipate platform-specific issues and test the application on all platforms regularly.
• UI Design: Designing a user-friendly interface that works well with drawing tools required a lot of iteration. I focused on creating an intuitive and accessible experience.
• Debugging: Debugging desktop applications can be challenging. I used Tauri's debugging tools and logging extensively to identify and fix issues. It's important to be patient and persistent when debugging.
• Open Source Best Practices: Using version control, creating clear documentation, and writing tests are important for open source projects. I learned to adopt these best practices during development.

Getting Started: Installation and Usage

Ready to give the PDF drawing tool a try? Here's how to get it up and running:

Prerequisites

• Node.js and npm: Make sure you have Node.js (version 16 or higher) and npm (or yarn/pnpm) installed on your system.

Installation

1. Clone the repository: Clone the repository to your local machine using git clone [repository URL]. You can find the repository URL on the project's website or GitHub page.
2. Navigate to the project directory: Open your terminal or command prompt, navigate to the project directory, and run cd [project directory].
3. Install dependencies: Install all the project dependencies by running npm install (or yarn install or pnpm install).
4. Run the application: Build and run the application using the command npm run tauri dev (or yarn tauri dev or pnpm tauri dev). This command builds the application and runs it in development mode. This command starts the Tauri application and opens it on your desktop.

Usage

1. Open a PDF: Once the application starts, click the