I’m building a document editor application using NextJS and Quill for my portfolio. Right now I’m stuck on creating document previews that show up in the file list. I want these previews to look like the ones you see in Google Drive where you can actually see the formatted content of the document in a small preview box.
Currently I’m just taking the first few words from each document and showing them as plain text, but this doesn’t show any of the actual formatting like bold text, headers, or different fonts that users added to their documents.
What’s the best approach to generate these formatted previews? Should I be using canvas to render the content, or is there some other method that works better with Quill and NextJS? I want the thumbnails to actually look like mini versions of the real documents with all the styling intact.
Another approach worth considering is using Puppeteer to generate the previews server-side. I implemented this for a similar project where we needed consistent document thumbnails. You can set up an API route in NextJS that renders your Quill content in a headless browser and captures a screenshot at a specific viewport size. The benefit is that you get pixel-perfect previews that match exactly what users see in the editor, and you can cache these images to avoid regenerating them every time. The downside is the added complexity of running Puppeteer in your deployment environment, but services like Vercel have good support for it now. You’ll also want to implement some kind of invalidation system so previews update when documents are edited. Performance-wise it’s great since you’re serving static images rather than rendering complex HTML for each preview.
I tackled something similar last year and ended up using a different approach than html2canvas. What worked well for me was creating a dedicated preview component that takes the Quill delta content and renders it using a lightweight version of the editor styles. You can extract the delta operations from your documents and render them in a scaled-down container with the same CSS classes but adjusted font sizes and spacing. This way you maintain all the formatting without the overhead of canvas rendering. The performance is much better when you have dozens of document previews on screen, and you avoid potential issues with fonts not loading properly in canvas screenshots. Just make sure to set proper overflow handling and maybe add a subtle fade effect at the bottom to indicate there’s more content.
html2canvas is a solid choice for this! I’ve had good success with it in my own projects. Just render the quill content in a hidden div, grab it with html2canvas, and you’ll get a nice preview. Just be ready to adjust your css for sizing!