I’m currently using Softr to display PDF previews inside list detail pages. The built-in viewer renders the PDF into a <canvas>, which works great — except it appears blurry on high-DPI displays.
I tried to upscale the canvas manually using the following code in the page header:
<div>
#summary > section > div > div > div:nth-child(2) > section > div > div > canvas {
width: 743.2px !important;
height: 1050px !important;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</div>
<script>
window.addEventListener('block-loaded-summary', () => {
const canvas = document.querySelector('canvas');
if (!canvas) return;
const ratio = window.devicePixelRatio || 2;
const width = canvas.width;
const height = canvas.height;
// Attempt to upscale canvas for sharper rendering
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.width = width * ratio;
canvas.height = height * ratio;
const ctx = canvas.getContext("2d");
ctx.scale(ratio, ratio);
});
</script>
However, since the PDF has already been rendered before this script runs, the canvas just stretches — and the preview remains blurry.
Would it be possible to natively render the canvas at scale = devicePixelRatio or scale = 2 in your internal PDF.js implementation? This would produce much sharper output across all devices.
I also tried other type of List Details page, the preview didn’t show up and it always download the PDF repeatedly every time the page loads. Plus, i found the ui with 3 buttons on the PDF preview quite nice, so i want to stick with the current List Detail Block. Just need a little better resolution, that’d be all.
Thank you — loving the product and would appreciate any fix or workaround you can offer!