Why Developers Struggle with PDFs — and How Joyfill Helps

Introduction

PDF has solved a lot of 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 is able to 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 a feature 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 platform solutions can help developers solve/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 the static PDF page, but under the hood, each element on the page is a complex web of elements, formatting, and settings. PDFs are made of various elements such as text, images, vector graphics, etc. Most times, these elements do not have a defined linear flow, making it harder to understand what comes next.

Paragraphs are divided into multiple smaller texts, making it harder to reconstruct a single paragraph.

Harder to Edit

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

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 harder.

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

Form Handling

Beyond the 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 etc.) 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-/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.

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

2. Go back to the template page, click the just created template and set is stage field to Published as seen in the below image.

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 would 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 to it:
   

   
   const userAccessToken =
     "<AccessToken>";
   
   const apiBaseUrl = "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.js with the following.
   

   
   import React, { useState, useEffect } from "react";
   import { retrieveTemplate } from "../lib/joyfillAPI";
   /**
    * Import JoyDoc SDK
    */
   import { JoyDoc } from "@joyfill/components";
   function App() {
     const [template, setTemplate] = useState(null);
     const [doc, setDoc] = useState();
     /**
      * Add your template identifier
      */
     const identifier = "<template_id>";
     /**
      * 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 will 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:

• https://docs.joyfill.io/docs/main-concepts
• https://docs.joyfill.io/reference/overview-api

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 the PDF in your application. Support is available for both Web and Mobile, enabling cross-platform usage.

I hope you like the article. Thanks for reading.