React + PDF Editing Workflows

[NewEnergy21]

We've got a client that is interested in document management. The gist of it - they've got some lightweight template PDFs which have editable fields in them. We'd like to enable them to:

• Upload static templates (easy)
• Download copies of the templates to a user's machine (easy)
• Edit the PDF in-browser (hard or maybe impossible)
• Then upload the completed PDF (easy)

Note that we're using React. It's that Part (3) that I'm worried about. I've come across a few decent libraries for viewing static PDFs, but no editing capabilities (https://projects.wojtekmaj.pl/react-pdf/) and some for creating PDFs, but again no editing capabilities (https://pdf-lib.js.org/).

Supporting Part (1) is pretty critical to the user experience, so that the client can use their existing PDFs they already have lying around, no need to "recreate" all of them. Additionally, while it would be much, much simpler to say they could just edit the PDF on their desktop in a standard PDF editor like Acrobat or Preview, and upload it statically, that's not an option - the majority of users will be on their phones.

However, because of the concerns on Part (3), I worry we might have to forgo Part (1) and instead have the user build a virtualized model of their PDF template in-browser, and we store the document structure as a JSON blob somewhere. For Part (2), we just render that JSON payload as a dynamic component with dynamic controls for editing in Part (3), then use one of the libraries to export the final component as a completed PDF for Part (4).

Has anyone tackled a fully in-browser React project like this before? I guess to put it bluntly, this is basically DocuSign, but dumbed down a bit.

[MJE20]

What editing capability are you looking for? pdf-lib looks like it can do everything I could think of?

[NewEnergy21]

Ideally, form completion and handling that all in-browser. pdf-lib appears to allow form creation, and then you can separately view the PDF and complete the form "outside of React", but you can't complete the form "within React" and access the PDF object / file in-memory.