Why Developers Struggle with PDFs — and How Joyfill Helps

Introduction

PDF has solved many issues encountered when handling digital documents across platforms. From cross-platform compatibility to consistent layouts across varying screen sizes, PDF offers a binary document file format that can solve all these issues on almost any platform.

Initially developed to promote simplicity and consistency in document sharing, current PDF implementations have accumulated layers of complexity that sometimes make working with them a struggle. This is especially true for developers who want to build features around programmatic PDF manipulation, such as document creation, editing, or creating a PDF form.

This post highlights factors that make it difficult for developers to process PDF documents on any number of platforms. It lists the main pain points of PDF handling and demonstrates how Joyfill's platform solutions can help developers solve or avoid such issues.

Why Developers Struggle with PDFs

Several factors make PDF handling difficult on most platforms. Some of them are:

Complex and Inconsistent Structure

The end-user sees a static PDF page, but under the hood, each element on the page is a complex web of objects, formatting, and settings. PDFs are made of various elements such as text, images, and vector graphics. Often, these elements do not have a defined linear flow, making it harder to understand what comes next.

Paragraphs are often divided into multiple smaller text fragments, making it difficult to reconstruct a single paragraph.

Harder to Edit

Due to the text issue mentioned above, you may notice most PDF editing software can only select a few words rather than the whole paragraph, making it harder to maintain a consistent structure. PDFs provide visual fidelity, but the logical layer is often missing or cluttered, making it difficult to extract logic from them.

Large PDF Handling

Developers need to make their software able to deal with bulk data. Due to the structural complexity, handling multi-page documents with complex layouts and high-resolution images is difficult.

This is directly reflected in performance issues and a poor user experience.

Form Handling

Beyond basic view and edit functionality, PDFs are also used to fill forms. Forms are already complex due to the different kinds of data types (text, numbers, dates, and signatures) they collect. Such forms can make it harder to merge and split documents without losing metadata, bookmarks, or annotations without specialized libraries and extensive development time.

What is Joyfill?

Joyfill is a platform that provides SDKs and APIs enabling developers to create, edit, render, and fill out PDF documents and forms. PDFs created using Joyfill platform solutions are accessible to users across both web and mobile platforms, ensuring seamless cross-platform integration.

This seamless PDF workflow is made possible because Joyfill handles PDFs using a JSON-based format (JoyDoc) rather than the traditional binary PDF format. Since most frontend and backend developers are already familiar with JSON through working with APIs, this approach significantly reduces the learning curve.

In most cases, developers won’t need to work with the JSON directly because the SDK manages the heavy lifting under the hood, but it remains accessible for advanced customization when needed.

Note: JSON (JavaScript Object Notation) is a human- and machine-friendly lightweight data-interchange format.

Building a Form with Joyfill

To demonstrate how to use Joyfill, we’ll create a simple form template and render it in a React application, allowing users to edit and fill it out interactively.

1. Create a Joyfill Account

1. Visit https://app-joy.joyfill.io/.
2. Click Sign Up to create a developer account.
3. After registration, you’ll be redirected to the Template page.
4. This page allows you to:
   • Create new form templates.
   • Manage existing forms.
   • Edit and use templates in your own applications later.

2. Create a Template

1. On the Template page, click the Add Template button.
2. Choose Blank to start with an empty form.
3. You’ll be taken to the PDF form creation page.
4. From here, you can:
   • Add elements to your form.
   • Define form structure and layout.
   • Save your template for later use.

3. Design the Form

1. Drag elements from the left panel onto the canvas in the center.

   

   When you select an element on the canvas:

   • The right panel will display its settings.
   • You can configure properties like font size, label, placeholder, validation, etc.

2. Save the form template once you’re satisfied with the design.

3. Go back to the template page, click the newly created template, and set its stage field to Published, as seen in the image below.

4. Retrieve the Template ID and API Keys

Now that the template has been created, we need to connect it to our application.

To do this, you’ll need the following:

• The template’s ID
• Joyfill’s API access keys

Retrieve the Template’s ID

1. Go to the Template page in your Joyfill dashboard.

2. Locate the template you just created.

3. Copy its Template ID from the ID column. This ID will be used to retrieve the template from within the React application.

   

Generate API Keys

1. In the Joyfill dashboard, navigate to Settings & Users > Managed Users.
2. Find your user in the list.
3. Click Access Tokens in your user’s row.
4. Select Add Access Token to create a new token.
5. Copy the generated API Key. You’ll need it to authenticate API requests from your application.

5. Integrating Joyfill into a React Application

1. If you already have a React application, you can skip this step. Otherwise, you can quickly create one using Vite with the following command:

   npm create vite@latest joyfill-example -- --template react
   

2. Add Joyfill components to the application using the following command:

   npm install @joyfill/components
   

   💡 Note: Joyfill SDK currently works best with React 18 or earlier versions.

3. Create a lib/joyfillAPI.js file in the project and copy the following code into it:

   const userAccessToken =
     "<YOUR_ACCESS_TOKEN_HERE>";
   
   const apiBaseUrl = "[https://api-joy.joyfill.io](https://api-joy.joyfill.io)"; // base url
   
   export const retrieveTemplate = async (identifier) => { // identifier is the template id
     const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
       method: "GET",
       mode: "cors",
       headers: {
         Authorization: `Bearer ${userAccessToken}`, // access token for authentication
         "Content-Type": "application/json",
       },
     });
     const data = await response.json();
     return data;
   };
   

4. Replace the contents of App.jsx (or App.js) with the following:

   import React, { useState, useEffect } from "react";
   import { retrieveTemplate } from "./lib/joyfillAPI";
   /**
    * Import JoyDoc SDK
    */
   import { JoyDoc } from "@joyfill/components";
   import './App.css'; // Optional: for basic styling
   
   function App() {
     const [template, setTemplate] = useState(null);
     const [doc, setDoc] = useState();
     /**
      * Add your template identifier
      */
     const identifier = "<YOUR_TEMPLATE_ID_HERE>";
     /**
      * Retrieve template via the Joyfill API
      */
     useEffect(() => {
       const handleRetrieveTemplate = async () => {
         const response = await retrieveTemplate(identifier);
         setTemplate(response);
       };
       handleRetrieveTemplate();
     }, []);
     return (
       <div className="w-full">
         <JoyDoc
           mode="fill"
           doc={template}
           onChange={(changelogs, data) => {
             /**
              * Changelogs represent the individual change that was made
              * Data represents the entire data structure with all new changes applied.
              */
             setDoc(data);
             console.log(">>>>>>>: ", changelogs, data);
           }}
         />
       </div>
     );
   }
   export default App;
   

   The above code renders the Joyfill template inside your React application using a configuration that allows users to fill out the form directly. If mode were set to edit, it would display the template creation form instead.

   

Go Further

Make changes to the current implementation or add more functionality like form submission and extend the template. Not sure what to do next? Check out the following documentation for inspiration/guidance:

• Joyfill Main Concepts
• Joyfill API Reference

Conclusion

PDF editing and form filling can be tricky when done through traditional methods, but with Joyfill's PDF SDK and API, integrating PDF forms becomes an almost trivial task. This can significantly reduce time/cost and improve developer productivity when it comes to handling PDFs in your application. Support is available for both Web and Mobile, enabling cross-platform usage.

I hope you like the article. Thanks for reading.