Generate a PDF in React

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@tusharphb6596]

I was using Puppeteer to generate invoices in a serverless environment, and while it worked fine, the problem was that my computation hours were getting used up too quickly. After watching your video, I decided to give React-pdf a try. Thank you for the video ❤ Looking forward to seeing you more often in my KZbin feed.

[@colbyfayock]

yes! i could imagine that wasting a ton of resource time. no problem!

[@cutefatboy]

The react-pdf/renderer option doesn't seem to work anymore on Nextj14 and 15 and React 18? I tried V3 and V4 and followed your code. const stream = await renderToStream(); //Code dies here. We get error Error generating PDF: Error: Minified React error #31; Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead. Can you double check on a new project and see if you get the same error in your route.tsx file?

[@mrvfino]

Omg i was just looking for this! Thanks you always for the straightforward tutorials.

[@colbyfayock]

No problem! 🙌

[@JuanMoisesTorrijos]

Hi Colby. Thank you for this video. I’ve been using React-PDF and I think it’s the best of the three options. However, the documentation didn’t clearly explain how to use the renderToStream method properly, and I had a lot of trouble with it, especially with TypeScript. Your solution, even though it seems like a patch, has been really helpful-thank you!

[@colbyfayock]

awesome, glad to hear this helped out!

[@samiullahsheikh5015]

I am using jsPDF but struggling to add hyper links in table. Links do get into the pdf but are not click able.

[@alexgochenour8740]

This is better than most paid content I've come across. You could totally rock a Front End Masters course. Thanks!

[@colbyfayock]

thank you 🙏

[@alamgirhossain9218]

React-pdf/renderer is best. If you know about react native then it will be super easy to make a invoice and download without any issue. Also if you want to design with tailwindcss same as web then you can use react-pdf-tailwind.

[@colbyfayock]

nice find with react-pdf-tailwind!

[@asadsalehumar1011]

Awesome video on a niche topic. Really helpful!

[@colbyfayock]

Thanks glad to hear that!

[@codewithyunus8423]

You deserve 1M subscribers .

[@colbyfayock]

thank you! 🙌 hopefully one day haha

[@81NARY]

Puppeteer might share the session between users (especially in server based environments), maybe clerk handles invalidations fine, but I'd still be careful with it.

[@colbyfayock]

good call! think we'd be okay in the serverless env, but definitely need to be careful with that in server environments or working between multiple users in a single execution (probably rare tho on that one)

[@humashakhan-yx2sl]

how to solve oklch issue? i can not convert to pdf in my react project & i used html2pdf library

[@ardianhotii]

Thank you for sharing this , probably gonna use react pdf for a costum format and style for my invoices, I tried pdf-lib but I think its too hard when dealing with costum designs . Really appreciate the video thank you again!

[@colbyfayock]

no problem!

[@giuseppebosco5813]

The proposed solution with react-pdf is not working anymore with next 15. Any fixes?

[@jengkhaw15]

I went into this few weeks ago! Thanks for sharing!

[@colbyfayock]

nice!! did you have similar findings for the available options?

[@absurdist1330]

How does embedding html work? Lets say i have a piece of html i want to embed in my new pdf?

[@AlamProjects]

Hi Colby, thank for the video, do you know if there is a way to include selectable checkboxes inside the pdf using react-pdf/renderer?

[@colbyfayock]

not sure about that one, though i suspect it only supports static things

[@gianmarcoscandale314]

Thank you so much for your content! I have a question: how can I implement react-pdf on Next.js for exceptionally large PDF files? I’m dealing with a file of over 600 pages, and rendering this server-side results in a timeout as it takes over 10 seconds to process. I considered implementing a streaming solution, but I haven’t found any examples or discussions about it online. Would you recommend this approach, or do you have any other suggestions?

[@colbyfayock]

you can increase the timeout on API routes vercel.com/guides/what-can-i-do-about-vercel-serverless-functions-timing-out#maximum-function-durations but you may be better served with an actual server to manage heavier loads as i suspect that would start to become costly. its likely worth testing and figuring out what your bill would look like

[@jeremy312]

How would i go about generating a pdf from a template with form data on the backend? Great video!

[@colbyfayock]

i think React PDF would be a good fit but at the time of making this video React 19 wasn't yet supported which could be troublesome depending on your environment

[@jeremy312]

@@colbyfayock Thanks for responding! i was able to use puppeteer actually. It worked great!

[@reactDevelopment]

@@colbyfayock yeah

[@EvansIbok]

Shame I can't use react-pdf/renderer cause everytime I install it in my create-react-app I always get the error below: "Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')."

[@colbyfayock]

oh strange, is that a conflict with an existing package that you're aware of?

[@JeevanTV-do2hc]

Hi Colby I have a query If I use reac-pdf/render can I generate Graphs and append to that pdf?

[@colbyfayock]

There's def an image component that you could save or embed it as base64. There are SVG components but haven't played with them.

[@JeevanTV-do2hc]

@@colbyfayock ok I'll look after it.

[@swarajbachu8551]

its there is a better solution you can do with puppertier, which is create a new page which will only have invoice, and will be a public route, and pass in some toke? in query params verify it using that and then show contents, then you can do all the customization at react itself, and that page will be just how the final pdf looks

[@colbyfayock]

sounds pretty similar to the solution i came up with in the video just little differences. seems like the same amount of work for vending and validating the tokens 🤷‍♂

[@imvivekkushwaha]

I have to print without that print modal how i can do that

[@colbyfayock]

if you're printing to a printer from the browser there will always be the modal

[@blacksun6761]

Hi man thank you so much for all the tuto you have done till now , I recently completed some personal project due to your tuto on intersection observer and html dialog, everything is really smooth when concepts are explain by a pro. Also can You please make a video on mdx with vite for a documentation or blog app.

[@colbyfayock]

Hey thanks happy to hear that. Not a bad idea!! As far as vite do you mean a vanilla react app with vite? I think if doing a content site I'd def want static generation or at least SSR of some sort

[@confudler]

Warming for people consider html2pdf sticking area I encountered were Custom fonts and letter spacing Pagination over many pages Thai Plus the image thing making accessibility impossible Would use for simpler use cases / mvp but not for serious platforms.

[@colbyfayock]

Dang thanks for the heads up! Preferred react pdf anyways but good to know extra bumps

[@goodsamaritan208]

Have you tried jspdf? Please share your opinion/feedback on it?

[@colbyfayock]

didn't look at that one because of the API. i was looking for something that was either going to transform HTML or a React-like syntax as I find the syntax they use to be a little more unfriendly for more complicated documents: github.com/parallax/jsPDF?tab=readme-ov-file#usage being able to edit it in a standard HTML document flow was my goal

[@imkir4n]

i was just looking for this! Thanks.

[@colbyfayock]

no problem!

[@imkir4n]

Colby, which of these options do you recommend for creating dynamic invoices that update based on user input?

[@colbyfayock]

@@imkir4n are you hoping to display the PDF inside of the UI as far as what you mean by updating based on user input? i haven't tried this but React PDF has a Viewer component that you can render it in the UI, I would expect it would rerender based on props like a typical React component, then once ready to generate, can utilize the method shown in this video react-pdf.org/components#pdfviewer

[@imkir4n]

​@@colbyfayockYes, this way I can preview the PDF nicely with page navigation and all. But the way of creating PDFs is different, right? We need to use some elements from React PDF to construct a PDF, so I'm confused - if the designs get a bit different, will I be able to style properly with the tags, since the current invoice is styled in HTML and inline css?

[@colbyfayock]

@@imkir4n it's the same as what i went through in the video only you use the PDFViewer component instead of the renderToStream function, that way you're maintaining the same document for viewing and exporting

[@mohammadabbas1623]

That's really interesting sir, Can you also provide a course in which there is option to edit a pdf doc like by pen and shapes on it and download it, i have to implement same feature in my next.js app

[@colbyfayock]

thats a pretty interesting idea. i'm not sure that im going to get to something like that soon but you could potentially use something like this www.npmjs.com/package/react-canvas-draw or github.com/tldraw/tldraw which you can export as an image to use as your pdf content

[@mohammadabbas1623]

@colbyfayock ooh that's great thanks for your guidance

[@Naz-e8z]

This was really helpfull. You just saved me from tons of research.

[@colbyfayock]

awesome!! glad to hear that

[@sebastiancasal8589]

i like the puppetear way but not the part of the cloudinary cause is to dependant

[@colbyfayock]

yeah, Cloudinary was just an example, you could use anything there!

[@FoodTechLife]

Noice! Nothing like a solution that comes in at the perfect moment. I used this today 😄 Thanks!

[@colbyfayock]

haha fantastic 👏

[@MuhammadAdnan2.0]

.docx ??

[@rayusaki88]

Very helpful Colby as always. Thanks a ton. Can you do more advanced tutorial on React PDF?

[@colbyfayock]

no problem!! im not sure when id get to it but i can add that to my list. is there something particular you're hoping to learn?

[@a.r.9496]

Really helpful video thanks a lot 🎉

[@colbyfayock]

no problem!

[@armandsalle8447]

Great video 🫶

[@colbyfayock]

thank you!

[@adetunjiigbatayo8535]

thank you, this solved my problems

[@colbyfayock]

no problem!

[@mansourahmed3841]

How support arabic language

[@Alphfirm]

Thanks!

[@colbyfayock]

np!

[@OnlyJavascript]

one kind request. I appreciate your efforts but if it's a paid course pls use some other auth lib. not clerk. use clerk in your sponsored videos and not in paid courses.

[@colbyfayock]

thanks for your feedback, but just curious, why in particular do you feel that way? regardless of if it's free or paid, Clerk is a fantastic managed auth solution (that a lot of people are eager to learn)

[@masar-at]

Clerk is for noobs ​@@colbyfayock

[@MyGeorge1964]

Nice... I am looking for a solution for a mortgage, insurance and financial website where html can be downloaded as a pdf... any real solution out there? Perhaps, even with using CSS to format the pdf... TY.

[@colbyfayock]

just curious did any of the solutions here not fit that need?

[@ThomasWapps]

react-pdf together with react-pdf-html works pretty good. to just input html into react-pdf instead of building the whole template with react-pdf components

[@colbyfayock]

@@ThomasWapps ooo thats nice, and even seeing that example Rendering React Components, good find

[@raiyansarker]

You should've also covered Satori by Vercel

[@colbyfayock]

Iirc the reason I didn't was because font support is a bit annoying where these solutions work easily out of the box