I am trying to create a user-interface in Javascript (React) that allows users to generate PDFs on the screen. The idea is having input boxes on the left, which when filled in, immediately populate the fields on the PDF on the right.

I am currently using react-pdf to build the document, and the <PDFViewer> class to render the document on the screen.

Problem:

(1) Generating the PDF can take a few moments causing an unattractive delay for the users, and (2) the rendering of the PDF on the screen is problematic because it changes based on the internet browser, whether adobe is installed, and much more. I have spent the better part of a week trying to find any packages on npm or any Github repo that has done anything similar, but most examples do not involve the documents being modified and rendered on the screen.

Question:

Is there a way to render the document as an image or some other way, similar to how react-pdf does in this example? The only difference is that users would not be interacting with the code, but filling in details in a nicely displayed input field instead. Again, the objective is to avoid long rendering times, and have control over how the document is displayed on the screen given that users can have different browsers

Thanks!